![見出し画像](https://assets.st-note.com/production/uploads/images/109172079/rectangle_large_type_2_b5c807f457f0034fc8b0671bb9afe460.png?width=1200)
Make(旧名integromat)でWebhookを使ってみました。 ノーコードツールからGoogleスプレッドシートへ書き込み。
こんにちは。ITエンジニアの多田です。
ノーコードツールPlatioのWebhookに興味があり、いろいろ調べてアプリを作成してみました。その内容を紹介します。
※
■作成したアプリの概要
ノーコードツールPlatioで登録した勤務内容(名前、始業時間、終業時間)を、Make(旧名integromat)を介してGoogleスプレッドシートに反映していきます。
Input:Platio
Output:Googleスプレッドシート
連携ツール:Make(以前はintegromatという名前でした)を使用
※Makeもノーコードツールですね
![](https://assets.st-note.com/img/1687526672672-avp4DZYrQW.png?width=1200)
処理フローはこんな感じになります。
![](https://assets.st-note.com/img/1687509453910-nguFIHGZat.png?width=1200)
※
■事前準備
①Googleスプレッドシートを準備
A列に名前、B列に始業時間、C列に終業時間のシートを作成しました。A列の名前は事前に入力しています。
![](https://assets.st-note.com/img/1687440127844-slbpCayEAZ.png?width=1200)
②Platioでモバイルアプリを作成
勤務表を入力するアプリを作成。名前、始業時間、終業時間を入力するモバイルアプリを作成しました。
![](https://assets.st-note.com/img/1687353519486-HGt63wLPxB.png?width=1200)
③Makeのアカウント作成
https://www.make.com/ のMakeサイトでアカウントを作成します。私はフリープランで作成しました。(プランごとに実行回数の制限があります)
![](https://assets.st-note.com/img/1687418976229-mY7NvqHBxN.png?width=1200)
※
■MakeとPlatioの連携
MakeとPlatioを紐づけます。ここでWebhookを利用します。
Scenario(シナリオ)を作成
Makeの画面で[Create a new scenario]ボタンを押します。
![](https://assets.st-note.com/img/1687440434090-rbbFS8DGlo.png?width=1200)
[+]ボタンを押して、Webhooksを指定します。
![](https://assets.st-note.com/img/1687440462548-IKXSYQQl2a.png?width=1200)
[Custom webhook]を指定します。
![](https://assets.st-note.com/img/1687440515096-3wUPkemCns.png?width=1200)
Webhooksの画面が表示されます。
![](https://assets.st-note.com/img/1689845679313-Fb5bacoT5w.png?width=1200)
[Add]を押して、好きな名前を入力します。
![](https://assets.st-note.com/img/1689845767918-TggL8YfQVv.png)
名前の入力が終わったら[Save]を押します。名前が登録されます。
Webhookのアドレスが表示されます。[Copy address to clipboard]を押す事でコピーできます。この次はPlatio Studio画面での作業です。
![](https://assets.st-note.com/img/1687440580947-oCQuM4pHcx.png?width=1200)
Platio Studio でWebhookを追加
Platio Studio画面で、[Webhookを追加]の画面を起動します。
![](https://assets.st-note.com/img/1689845895665-aNbsmmmkrI.png?width=1200)
イベントの[レコードの挿入][レコードの更新]にチェックを入れます。URLには先ほどのMakeで取得したWebhookのアドレスを貼り付けます。
![](https://assets.st-note.com/img/1687440713059-HEugPVU6r6.png)
ここで動作検証
Platioモバイルアプリから登録してみると、
Stop → Successfuly determained に変わり連携が成功した事が分かります。
![](https://assets.st-note.com/img/1687526487974-gAENxdLzcE.png)
■MakeとGoogleスプレッドシートの連携
次は、MakeとGoogleスプレッドシートを紐づけます。
①Google Sheets の Search Rows(行検索) を追加
モジュールを追加して、Google Sheetsを指定します。
![](https://assets.st-note.com/img/1687441191497-R1ZY3tpJpo.png?width=1200)
![](https://assets.st-note.com/img/1687441171184-dfsFK5w6y7.png?width=1200)
Platioからイベント通知を受取時の処理を指定します。今回はPlatioで登録された[名前]と一致する行を検索するようにします。
![](https://assets.st-note.com/img/1687441345238-soIjeTn3DA.png)
Connectionの[Add]を押して、Googleのアカウントを選択します。
![](https://assets.st-note.com/img/1689846135634-f1sBSpn8mp.png)
Google スプレッドシートでの検索対象を設定します。対象の[Spreadsheet]、[SheetName]を入力。
![](https://assets.st-note.com/img/1687476465360-7lDADB7MNh.png)
行検索の条件を追加します。
"Google スプレッドシートのA列とPlatioの項目「名前」が一致する行を抽出する。"
条件を設定。
![](https://assets.st-note.com/img/1687476588358-YR1D2rjk8o.png?width=1200)
この辺のコード(名前=cc4b56b9)は、Platio Studioの画面で確認できます。
![](https://assets.st-note.com/img/1689846577787-m7ffsPTGJP.png)
②Google Sheets の Update a Row(行の更新) を追加
再度モジュールを追加して、Google Sheetsを指定します。前モジュールから連携された値(検索結果のRow number)をもとに、Google Sheetsを更新します。
![](https://assets.st-note.com/img/1687476880925-vyHIcLSe6N.png?width=1200)
前モジュールから連携されたRow numberを設定します。
![](https://assets.st-note.com/img/1687477268544-xTcknrzCyZ.png?width=1200)
GoogleスプレッドシートのB列をPlatioから連携された項目「始業時間」で更新するように設定。C列を項目「終業時間」で更新するように設定。
![](https://assets.st-note.com/img/1687477369173-lXLqjHjB1K.png?width=1200)
■Makeを実行
[Run once]を押して、Makeを1度だけ実行します。
![](https://assets.st-note.com/img/1687477598527-iQqkdpZee5.png?width=1200)
Platioで「中野さん、9時から18時まで勤務」を登録してみました。
![](https://assets.st-note.com/img/1687526767598-z1tRq3gbed.png)
Make画面が処理中となります。
![](https://assets.st-note.com/img/1687477647383-ZMd16cxPju.png?width=1200)
![](https://assets.st-note.com/img/1687477682886-t8mYodqQwo.png?width=1200)
Platioで登録した内容が、Google スプレッドシートに反映されました。リアルタイムで表示されるので見ていて面白いです!
![](https://assets.st-note.com/img/1687477837477-6uw7eRvWO2.png)
シナリオ一覧から該当するシナリオをONにしておけば、常時起動状態となります。
![](https://assets.st-note.com/img/1687478014506-oiQP0DXLGE.png?width=1200)
※条件分岐の内容も投稿しました。
最後に
今回は、Webhookを使用しました。Makeを使用すれば連携処理も楽です。MakeはGoogleスプレッドシート以外にもたくさん利用できるようです。便利ですね。今後も更に理解を深めて行きたいと思います。
![](https://assets.st-note.com/img/1687525533618-IIfye1xj2m.png?width=1200)
※
最後まで読んで頂きありがとうございます。ウィツ大阪DX推進チームでは、こんなアプリを実現したいなど、業務でお困りの方からの御相談をお受けしております。まずは、お問合せサイトにご登録下さい。
![](https://assets.st-note.com/img/1695785126194-Sgx4ucNrxy.png)
ウィツ大阪DX推進チームからお知らせがあります。ホームページを開設しました。ぜひ、ご覧ください。
引き続き、どうぞ宜しくお願い致します。