kintoneとMicrosoft Flowで学ぶイマドキのシステム間連携
2 likes2,471 views
2017/11/10 kintone Café JAPAN 2017 kintoneハンズオン～カスタマイズ編～の資料
![16
3.kintoneのWebhook
■送信される通知の内容
Webhookを有効にすると、kintoneからJSON形式の通知が送信されます。
●レコードの追加／編集／ステータスの変更
パラメーター 値の型 説明
id 文字列 通知ごとに割り当てられる固有のIDです。
type 文字列
操作の種類です。
レコードを追加した：ADD_RECORD
レコードを編集した：UPDATE_RECORD
レコードのステータスを変更した：UPDATE_STATUS
app 配列 アプリの情報を表す配列です。
app[].id 文字列 アプリのIDです。
app[].name 文字列 アプリ名です。
record 配列
レコードの情報を表す配列です。
配列の形式は、レコードを取得するREST APIと同様です。
レコードの取得（GET）（cybozu developer network）
recordTitle 文字列
レコードのタイトルです。
タイトルにするフィールドは変更できます。
レコードタイトルを設定する
url 文字列 レコードのURLです。
{
"id":"01234567-0123-0123-0123-0123456789ab",
"type":"ADD_RECORD",
"app":{
"id":"1",
"name":"案件管理"
},
"record":{
"レコード番号":{
"type":"RECORD_NUMBER",
"value":"2"
},
～～
"$revision":{
"type":"__REVISION__",
"value":"3"
},
"$id":{
"type":"__ID__",
"value":"2"
}
},
"recordTitle":"往訪：サイボウズ株式会社",
"url":"https://example.cybozu.com/k/1/show#record=2"
}](https://image.slidesharecdn.com/kintone-171111023435/85/kintone-Microsoft-Flow-17-320.jpg)
![17
3.kintoneのWebhook
●レコードの削除
{
"app":{
"id":"1",
"name":"案件管理"
},
"id":"01234567-0123-0123-0123-0123456789ab",
"recordId":"2",
"deleteBy":{
"code":"sato",
"name":"佐藤 昇"
},
"deleteAt":"2017-07-03T09:38:09Z"
"type":"DELETE_RECORD"
}
パラメーター 値の型 説明
id 文字列 通知ごとに割り当てられる固有のIDです。
type 文字列
操作の種類です。
レコードを削除した：DELETE_RECORD
app 配列 アプリの情報を表す配列です。
app[].id 文字列 アプリのIDです。
app[].name 文字列 アプリ名です。
recordId 配列 レコード番号です。
deleteBy 配列 レコードを削除したユーザーの情報を表す配列です。
deleteBy[].code 文字列 ユーザーのログイン名です。
deleteBy[].name 文字列 ユーザーの名前です。
deleteAt 文字列 削除した日時です。](https://image.slidesharecdn.com/kintone-171111023435/85/kintone-Microsoft-Flow-18-320.jpg)
![18
3.kintoneのWebhook
●コメントの書き込み
{
"app":{
"id":"1",
"name":"案件管理"
},
"comment":{
"createdAt":"2012-02-03T09:38:09Z",
"creator":{
"code":"kato",
"name":"加藤 美咲"
},
"id":"11",
"mentions":[{
"code":"kato",
"type":"USER"
},{
"code":"org1",
"type":"ORGANIZATION"
},{
"code":"group1",
"type":"GROUP"
}],
"text":"サイボウズ株式会社に往訪してきました。"
},
"id":"01234567-0123-0123-0123-0123456789ab",
"recordId":"2",
"type":"ADD_RECORD_COMMENT",
"url":"https://example.cybozu.com/k/1/show#record=2&comment=11"
}
パラメーター 値の型 説明
app 配列 アプリの情報を表す配列です。
app[].id 文字列 アプリのIDです。
app[].name 文字列 アプリ名です。
comment 配列
コメントの情報を表す配列です。
配列の形式は、レコードを取得するREST APIと同様です。
レコードコメントの一括取得（cybozu developer network）
id 文字列 通知ごとに割り当てられる固有のIDです。
recordId 文字列 レコード番号です。
type 文字列
操作の種類です。
コメントを書き込んだ：ADD_RECORD_COMMENT
url 文字列 コメントのURLです。
ハンズオンでは
これを使います](https://image.slidesharecdn.com/kintone-171111023435/85/kintone-Microsoft-Flow-19-320.jpg)
![26
5.ハンズオン
{
"type": "object",
"properties": {
"comment": {
"type": "object",
"properties": {
"text": {
"type": "string"
}
}
},
"recordId": {
"type": "string"
}
}
}
コメント書き込み時に送信されるJSONデータの
JSON Schema（一部抜粋）{
"app":{
"id":"1",
"name":"案件管理"
},
"comment":{
"createdAt":"2012-02-03T09:38:09Z",
"creator":{
"code":"kato",
"name":"加藤 美咲"
},
"id":"11",
"mentions":[{
"code":"kato",
"type":"USER"
},{
"code":"org1",
"type":"ORGANIZATION"
},{
"code":"group1",
"type":"GROUP"
}],
"text":"サイボウズ株式会社に往訪してきました。"
},
"id":"01234567-0123-0123-0123-0123456789ab",
"recordId":"2",
"type":"ADD_RECORD_COMMENT",
"url":"https://example.cybozu.com/k/1/show#record=2&comment=11"
}
コメント書き込み時に送信されるJSONデータ
こっちを入力](https://image.slidesharecdn.com/kintone-171111023435/85/kintone-Microsoft-Flow-27-320.jpg)
kintoneとMicrosoft Flowで学ぶイマドキのシステム間連携
- 1. サイボウズ公認kintoneエバンジェリスト ラジカルブリッジ 代表 斎藤 栄 kintone Café JAPAN 2017 November 10, 2017 kintoneハンズオン ～カスタマイズ編～ kintoneとMicrosoft Flowで学ぶ イマドキのシステム間連携
- 2. 1 自己紹介 • NTTデータ ➡ データクラフト ➡ ラジカルブリッジ • kintone Café 創始者、運営事務局/札幌支部メンバー • TwilioJP-UG 札幌コアメンバー 代表 “クラウドおじさん” サイボウズ公認kintoneエバンジェリスト 斎藤 栄（さいとう さかえ）
- 3. 2 自己紹介 リトルヘルプ合同会社 CTO 兼 宴会部長 kintoneエバンジェリスト ２人います！右から 船 長 森本伸夫（kintoneエバンジェリスト） 一応代表 松本美佐（お菓子教室主宰） 次長課長 尾井理恵（ヨガ＆料理教室主宰） お教室マネージャー 『テトコ』tetoco.jp powered by
- 6. 5 Let’s enjoy kintone together! ログミーの書き起こし記事 http://logmi.jp/222516 2017年5月19日 kintone hive tokyo vol.5 kintone hack @六本木ヒルズ
- 7. 6 kintone Caféの創始者ラジカルブリッジ斎藤氏が実践する「俺流」 http://ascii.jp/elem/000/001/498/1498638/ ［俺流 斎藤］で検索！ 2017年6月20日 ascii.jp - kintone三昧《kintoneな人》 • 大衆居酒屋「俺流」で俺流の生き方を語る • kintoneの仕事をするようになった経緯 • kintone Café への思い • 個人事業を続けることのこだわり
- 10. 9 ハンズオン開始
- 16. 15 3.kintoneのWebhook ■注意点 • 次の方法でレコードを操作した場合は、Webhookの通知は送信されません。 • Excel/CSVファイルを読み込んでレコードを操作する • 複数のレコードを一括削除する • 複数のレコードを一括操作するREST APIを使用してレコードを操作する • Webhookは、kintoneスタンダードコースでkintoneをご利用の場合のみ利用で きます。 • 組織間のアクセス権の設定を有効にすると、Webhookは利用できなくなります。 • Webhookの通知は、1分間に60回まで送信されます。1分間に60回を超えてレ コードを操作すると、61回目以降の操作ではWebhookの通知が送信されません。
- 17. 16 3.kintoneのWebhook ■送信される通知の内容 Webhookを有効にすると、kintoneからJSON形式の通知が送信されます。 ●レコードの追加／編集／ステータスの変更 パラメーター 値の型 説明 id 文字列 通知ごとに割り当てられる固有のIDです。 type 文字列 操作の種類です。 レコードを追加した：ADD_RECORD レコードを編集した：UPDATE_RECORD レコードのステータスを変更した：UPDATE_STATUS app 配列 アプリの情報を表す配列です。 app[].id 文字列 アプリのIDです。 app[].name 文字列 アプリ名です。 record 配列 レコードの情報を表す配列です。 配列の形式は、レコードを取得するREST APIと同様です。 レコードの取得（GET）（cybozu developer network） recordTitle 文字列 レコードのタイトルです。 タイトルにするフィールドは変更できます。 レコードタイトルを設定する url 文字列 レコードのURLです。 { "id":"01234567-0123-0123-0123-0123456789ab", "type":"ADD_RECORD", "app":{ "id":"1", "name":"案件管理" }, "record":{ "レコード番号":{ "type":"RECORD_NUMBER", "value":"2" }, ～～ "$revision":{ "type":"__REVISION__", "value":"3" }, "$id":{ "type":"__ID__", "value":"2" } }, "recordTitle":"往訪：サイボウズ株式会社", "url":"https://example.cybozu.com/k/1/show#record=2" }
- 18. 17 3.kintoneのWebhook ●レコードの削除 { "app":{ "id":"1", "name":"案件管理" }, "id":"01234567-0123-0123-0123-0123456789ab", "recordId":"2", "deleteBy":{ "code":"sato", "name":"佐藤 昇" }, "deleteAt":"2017-07-03T09:38:09Z" "type":"DELETE_RECORD" } パラメーター 値の型 説明 id 文字列 通知ごとに割り当てられる固有のIDです。 type 文字列 操作の種類です。 レコードを削除した：DELETE_RECORD app 配列 アプリの情報を表す配列です。 app[].id 文字列 アプリのIDです。 app[].name 文字列 アプリ名です。 recordId 配列 レコード番号です。 deleteBy 配列 レコードを削除したユーザーの情報を表す配列です。 deleteBy[].code 文字列 ユーザーのログイン名です。 deleteBy[].name 文字列 ユーザーの名前です。 deleteAt 文字列 削除した日時です。
- 19. 18 3.kintoneのWebhook ●コメントの書き込み { "app":{ "id":"1", "name":"案件管理" }, "comment":{ "createdAt":"2012-02-03T09:38:09Z", "creator":{ "code":"kato", "name":"加藤 美咲" }, "id":"11", "mentions":[{ "code":"kato", "type":"USER" },{ "code":"org1", "type":"ORGANIZATION" },{ "code":"group1", "type":"GROUP" }], "text":"サイボウズ株式会社に往訪してきました。" }, "id":"01234567-0123-0123-0123-0123456789ab", "recordId":"2", "type":"ADD_RECORD_COMMENT", "url":"https://example.cybozu.com/k/1/show#record=2&comment=11" } パラメーター 値の型 説明 app 配列 アプリの情報を表す配列です。 app[].id 文字列 アプリのIDです。 app[].name 文字列 アプリ名です。 comment 配列 コメントの情報を表す配列です。 配列の形式は、レコードを取得するREST APIと同様です。 レコードコメントの一括取得（cybozu developer network） id 文字列 通知ごとに割り当てられる固有のIDです。 recordId 文字列 レコード番号です。 type 文字列 操作の種類です。 コメントを書き込んだ：ADD_RECORD_COMMENT url 文字列 コメントのURLです。 ハンズオンでは これを使います
- 20. 19 4.Microsoft Flow Webサービス連携サービス • 画面操作でWebサービス同士を繋ぐサーバーサイド処理を構築できるサービス • IFTTT, Zapier, Microsoft Flowが有名どころ • 様々なクラウドサービスへの接続パーツが用意されており、画面操作で何かと 何かを繋いで何かをする処理を作れる。 • Flowは後発でもあり、連携サービス数が少なめか。。 但し、日本語対応が進んでいるのと、Microsoft提供というアドバンテージ。
- 21. 20 4.Microsoft Flow Microsoft Flowにおける言葉の定義 • トリガー・・・処理を開始するきっかけとなるパーツ群 例）メール受信時、ツイート時、定期実行、Flowボタン・・・・ • アクション・・・各クラウドサービスに操作を行うパーツ群 例）メール送信、Dropboxファイル保存、天気情報の取得、翻訳・・・・ • コネクタ・・・トリガーとアクションの各パーツ群の総称 • フロー・・・コネクタを組み合わせて作成した一連の処理のこと • テンプレート・・・予め提供されているフローのサンプル
- 22. 21 4.Microsoft Flow フロー作成の基本的な流れ ① トリガーとなるコネクタを設定 （定期実行、メール受信時、ファイル作成時、HTTPリクエスト受信時、等） ② アクションのコネクタを設定 （メール送信、ファイル作成、HTTPレスポンス送信、ツイートの投稿、等） ③ 必要に応じてアクションを追加 ➢ 条件分岐やループも設定可能。 ➢ kintone用のコネクタは無いので、 HTTPリクエスト受信時といった汎用的なコ ネクタを使います。 ★近日中にkintoneの公式コネクタが提供されるらしいです。
- 23. 22 5.ハンズオン 課題① kintoneアプリのコメント欄に日本語でコメントを書くと、英語に翻訳された文章 がメール通知される。 Microsoft Translator Notifications Send me an email notification
- 24. 23 5.ハンズオン 作業手順 ① kintoneアプリの用意 ② Microsoft Flowの設定 ③ kintoneアプリのWebhook設定 ④ 動作確認
- 26. 25 5.ハンズオン ② Microsoft Flowの設定 1. Flowにログイン 2. 「マイフロー」をクリック 3. 「一から作成」をクリック 4. 「多数のコネクタやトリガーを検索する」をクリック 5. 「すべてのコネクタとトリガーを検索する」に「HTTP」と入力 6. 「要求 - HTTP要求の受信時」をクリック 7. 「要求本文の JSON スキーマ」にコメント書き込み時に送信されるJSONデー タのJSON Schemaを入力（次ページ参照）
- 27. 26 5.ハンズオン { "type": "object", "properties": { "comment": { "type": "object", "properties": { "text": { "type": "string" } } }, "recordId": { "type": "string" } } } コメント書き込み時に送信されるJSONデータの JSON Schema（一部抜粋）{ "app":{ "id":"1", "name":"案件管理" }, "comment":{ "createdAt":"2012-02-03T09:38:09Z", "creator":{ "code":"kato", "name":"加藤 美咲" }, "id":"11", "mentions":[{ "code":"kato", "type":"USER" },{ "code":"org1", "type":"ORGANIZATION" },{ "code":"group1", "type":"GROUP" }], "text":"サイボウズ株式会社に往訪してきました。" }, "id":"01234567-0123-0123-0123-0123456789ab", "recordId":"2", "type":"ADD_RECORD_COMMENT", "url":"https://example.cybozu.com/k/1/show#record=2&comment=11" } コメント書き込み時に送信されるJSONデータ こっちを入力
- 28. 27 5.ハンズオン 8. 「新しいステップ」をクリック 9. 「アクションの追加」をクリック 10.「すべてのコネクタとアクションを検索する」に「翻訳」と入力 11.「Microsoft Translator - テキストの翻訳」をクリック 12.「テキスト」欄をクリックし、「動的なコンテンツ」から「text」を選択 13.「対象言語」は「English」を選択 14.「詳細オプションを表示する」をクリック 15.「ソース言語」は「Japanese」を選択
- 29. 28 5.ハンズオン 16.「新しいステップ」をクリック 17.「アクションの追加」をクリック 18.「すべてのコネクタとアクションを検索する」に「email」と入力 19.「Notifications - Send me an email notofication」をクリック 20.「Subject」に任意の文字列を入力（例：翻訳結果） 21.「Body」欄をクリックし、「動的なコンテンツ」から「翻訳されたテキスト」 を選択 22.「フローの保存」をクリック
- 31. 30 5.ハンズオン ③ kintoneアプリのWebhook設定 1. ①で用意したkintoneアプリの「アプリの設定」を開く 2. 「設定」タブをクリック 3. 「Webhook」をクリック 4. 「＋」をクリック 5. 「説明」に任意の文字列を入力（例：コメントの通知） 6. 「Webhook URL」に先程コピーしたHTTP POSTのURLを入力 （最初の https:// は削除すること！） 7. 「通知を送信する条件」は「コメントの書き込み」を選択
- 33. 32 5.ハンズオン ④ 動作確認 1. 適当なレコードを作成し、詳細画面を開く 2. コメント欄に日本語文章を入力 3. Microsoft Flowのアカウントのメールアドレスに翻訳結果のメールが届いてい ることを確認 ※メールが届かない場合 • Flowの実行履歴を確認（Flowの画面をリロードすると確認できます） • kintoneのWebhookログを確認（Webhook設定画面の「ログを確認」で確認で きます）
- 34. 33 5.ハンズオン 課題②（余裕がある方向け） kintoneアプリのコメント欄に日本語でコメントを書くと、英語に翻訳された文章 がメール通知されると共にコメント欄にも返ってくる。 Microsoft Translator Notifications Send me an email notification
- 35. 34 5.ハンズオン ① kintoneアプリのAPIトークン設定 1. kintoneアプリの「アプリの設定」を開く 2. 「設定」タブをクリック 3. 「APIトークン」をクリック 4. 「生成する」をクリック 5. 生成された「APIトークン」をコピーしテキストエディタにペーストしておく 6. 「保存」をクリック 7. 「アプリを更新」をクリック
- 36. 35 5.ハンズオン ② Microsoft Flowの編集 1. 「フローの編集」をクリック 2. 「新しいステップ」をクリック 3. 「アクションの追加」をクリック 4. 「すべてのコネクタとアクションを検索する」に「HTTP」と入力 5. 「HTTP - HTTP」をクリック 6. 「方法」は「POST」を選択 7. 「URI」に以下を入力 https://(自身のサブドメイン名).cybozu.com/k/v1/record/comment.json
- 37. 36 5.ハンズオン 8. 「ヘッダー」に以下を入力 Content-Type application/json X-Cybozu-API-Token （生成されたAPIトークン） 9. 「本文」に以下を入力 10.「HTTP要求の受信時」と「テキストの翻訳」の間の「＋」をクリックし、 「条件の追加」をクリック { "app": （自身のアプリID）, "record": , "comment": { "text": "翻訳結果: " } }
- 38. 37 5.ハンズオン 11.左の「値の選択」には、動的なコンテンツから「text」を選択 12.中央は「次の値を含まない」を選択 13.右の「値の選択」には、「翻訳結果」と入力 14.「はいの場合」のエリアに、「テキストの翻訳」「Send me an email notification」「HTTP」をドラッグして移動 15.「フローの保存」をクリック 16.「完了」をクリック
- 39. 38 お疲れ様でした！