BLOG

R3 Cloud Journey

WebhookとMicrosoft Flowを使って、プログラミングせずにkintoneであれこれ

2017-07-14

今回は kintone の Webhook 機能Microsoft の Flow というサービスを組み合わせて、従来は Javascript で一所懸命プログラミングして、カスタマイズで実現していたようなことを ノンコーディング で行ってみたいと思います。

1. kintone 側の準備(APIトークン)

まずは、kintone で新しいアプリを 1つ作ります。

設定」タブをクリックして「APIトークン」を選びます。

生成する」ボタンを押すと、「APIトークン」のところに文字列が表示されます。この文字列をどこかにメモしておいて「保存」をクリックします。

あと、kintone で使用しているドメイン名アプリID も、後ほど Microsoft Flow の設定画面に入れるので記録しておいてください。先ほどの画面で言うと以下の部分です。

2. Microsoft Flow の設定

次に、 Microsoft Flow のサイトを開き「無料でサインアップ」をクリックしてください。Microsoft Flow に登録・使用するメールアドレスを入力します。

Microsoft Flow の画面が表示されたら「マイ フロー」をクリックして「最初のフローを作成する」画面へ進みます。

一から作成」をクリックすると「フローの作成」画面へ移るので、並んでいるコネクタの中から「要求と応答」をクリックします。

要求と応答 -要求」をクリックします。

「要求」の中のところは放っておいて、画面下部の「新しいステップ」をクリックすると「アクションの追加」というのが出てきます。これをクリックします。

HTTP」をクリックします。

HTTP -HTTP」をクリックします。

方法」は「POST」を選択します。その他の項目には下図のように入力していきます。

URI」のところは、ご使用になっている kintone のドメイン名を入れます。

ヘッダー」のところの左側のテキストボックスには「X-Cybozu-API-Token」と入力します。右側には「1. kintone 側の準備(APIトークン)」で作った APIトークンの文字列を入れます。

本文」のところは長いので以下をコピーしてください。

ただし、「1. kintone 側の準備(APIトークン)」で作った kintoneアプリの アプリID に変えてください。

下図の赤枠で囲った箇所の値を変えることになります。

書き換えが終わったら、画面上部の「フローの作成」か、画面下部の「フローの保存」をクリックします。

これで終わり。と言いたいところですが、もう一度、フロー内の「要求」をクリックします。

HTTP POST の URL」欄に Webhook 用の URL が作成されているので、その右にある「URLのコピー」ボタンをクリックして、メモ帳か何かに貼り付けます。

https://prod-999.japaneast.logic.azure.com:443/workflows/ほにゃらら/triggers/manual/paths/invoke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=ほげほげ

のような文字列が得られます。これを kintone の Webhook 設定画面に入れることになるので記録しておきます。

Mirosoft Flow の方は、画面上部の「完了」ボタンをクリックして終わります。

3. kintone 側の設定(Webhook)

初めに作成した kintone アプリへ戻ります。

「設定」から「Webhook」を選んで、Webhook の設定画面へ遷移します。

「+」ボタンをクリックして「Webhookの追加」画面へ移ります。


Webhook URL」欄に Microsoft Flow で作成した「HTTP POST の URL」の文字列を入れます。先頭の「https://」は要らないので削ってください。

さらに「通知を送信する条件」で「レコードの追加」と「レコードの編集」にチェックを付けて、右下の「保存」ボタンをクリックします。

Webhook の設定画面に戻るので、右下の「アプリの設定に戻る」をクリックします。

「設定」タブに戻るので、忘れずに「アプリを更新」をクリックします。

以上で Webhook の設定は完了です。

4. Webhook を動かしてみる

早速、設定した Webhook を動かしてみましょう。kintoneアプリで新規レコードを追加します。

保存」をクリックします。

あれ? 何も起こりません。
慌てずに Webブラウザの「再読み込み」ボタンを押してみてください。

Microsoft Flow から、人間の心をボロボロにするコメントが投稿されました。

以上、Webhook の基本中の基本をお伝えしました。

ちょっと手順が多い気がしますね。Microsoft Flow は多くのコネクタを用意しているので、 kintone 用のコネクタが提供されるようになれば、もう少し設定しやすくなるかもしれません。

→ 2018/1 kintoneコネクタが公開されたので「Microsoft Flow の kintone (プレミアム)コネクタを使って、完全ノンコーディングで あれこれ」という記事を書きました。

アールスリーインスティテュートで、これまでになかった画期的な kintoneカスタマイズサービス gusuku Customine(カスタマイン) を開発しています。 kintone認定カイゼンマネジメントエキスパート, アプリデザイン/カスタマイズ スペシャリスト

自社のシステム開発・移行などをご依頼したい方
お客様とともに
作りながら考える
新しいシステム開発
詳しく見る
kintone導入・アプリ開発・カスタマイズにお困りの方
ノーコードでらくらく
kintoneカスタマイズ
詳しく見る
kintoneアプリの
バージョン管理・バックアップ
詳しく見る
kintoneアプリの開発・運用を
強力サポート

詳しく見る
更新情報をメールでお届けします!

kintoneアプリのカスタマイズに役立つ情報や、イベントの情報をメールでお届けいたします。
ご登録をお待ちしております!

R3のご提供サービス
自社のシステム開発・移行などを
ご依頼したい方
お客様とともに作りながら考える
新しいシステム開発
詳しく見る
kintone導入・アプリ開発・
カスタマイズにお困りの方
kintoneをもっと使いやすくする
gusukuシリーズ
詳しく見る
更新情報をメールでお届けします!
kintoneアプリのカスタマイズに役立つ情報や、イベントの情報をメールでお届けいたします。
ご登録をお待ちしております!