Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

kintoneとMicrosoft Flowで学ぶイマドキのシステム間連携

1,492 views

Published on

2017/11/10 kintone Café JAPAN 2017
kintoneハンズオン~カスタマイズ編~の資料

Published in: Technology
  • Be the first to comment

kintoneとMicrosoft Flowで学ぶイマドキのシステム間連携

  1. 1. サイボウズ公認kintoneエバンジェリスト ラジカルブリッジ 代表 斎藤 栄 kintone Café JAPAN 2017 November 10, 2017 kintoneハンズオン ~カスタマイズ編~ kintoneとMicrosoft Flowで学ぶ イマドキのシステム間連携
  2. 2. 1 自己紹介 • NTTデータ ➡ データクラフト ➡ ラジカルブリッジ • kintone Café 創始者、運営事務局/札幌支部メンバー • TwilioJP-UG 札幌コアメンバー 代表 “クラウドおじさん” サイボウズ公認kintoneエバンジェリスト 斎藤 栄(さいとう さかえ)
  3. 3. 2 自己紹介 リトルヘルプ合同会社 CTO 兼 宴会部長 kintoneエバンジェリスト 2人います!右から 船 長 森本伸夫(kintoneエバンジェリスト) 一応代表 松本美佐(お菓子教室主宰) 次長課長 尾井理恵(ヨガ&料理教室主宰) お教室マネージャー 『テトコ』tetoco.jp powered by
  4. 4. 3 やっていること つくってます アプリ 札幌で
  5. 5. サクサク動くからストレスフリー! に素敵なカレンダー機能をプラスする 全世界対応の定番プラグイン カレンダーPlus
  6. 6. 5 Let’s enjoy kintone together! ログミーの書き起こし記事 http://logmi.jp/222516 2017年5月19日 kintone hive tokyo vol.5 kintone hack @六本木ヒルズ
  7. 7. 6 kintone Caféの創始者ラジカルブリッジ斎藤氏が実践する「俺流」 http://ascii.jp/elem/000/001/498/1498638/ [俺流 斎藤]で検索! 2017年6月20日 ascii.jp - kintone三昧《kintoneな人》 • 大衆居酒屋「俺流」で俺流の生き方を語る • kintoneの仕事をするようになった経緯 • kintone Café への思い • 個人事業を続けることのこだわり
  8. 8. 7 11月:Kintone Connect(サンフランシスコ)で登壇!
  9. 9. 8 11月:Kintone Connect(サンフランシスコ)で登壇! クラウドおじさん Mr. Cloud
  10. 10. 9 ハンズオン開始
  11. 11. 10 1.環境の確認 ・Chromeブラウザ ・kintone環境 ※無い方は開発者ライセンス取得! https://developer.cybozu.io/hc/ja/ ・Microsoft Flow Microsoftアカウントの取得とMicrosoft Flowへのサインアップ(無料) https://japan.flow.microsoft.com/ja-jp/ ※Microsoftアカウントをお持ちの方は、そのアカウントでMicrosoft Flow にサインアップできます。
  12. 12. 11 2.kintoneのAPI概要 ・JavaScript API 画面表示のカスタマイズや画面操作時のkintone内の処理実行・外部サービスの呼び出し ・REST API 外部サービスからのレコード操作等を受け入れる仕組み ・Webhook イベント駆動型の外部API呼び出し →レコードの作成・更新時など、何か操作が行われた際に外部APIを呼び出す仕組み ※これが無い時は外部サービス側からポーリングを行う必要があった
  13. 13. 12 2.kintoneのAPI概要 ・JavaScript API 画面表示のカスタマイズや画面操作時のkintone内の処理実行・外部サービスの呼び出し ・REST API 外部サービスからのレコード操作等を受け入れる仕組み ・Webhook イベント駆動型の外部API呼び出し →レコードの作成・更新時など、何か操作が行われた際に外部APIを呼び出す仕組み ※これが無い時は外部サービス側からポーリングを行う必要があった 今日の主題は これ!
  14. 14. 13 3.kintoneのWebhook ●kintoneにレコードが追加されたらslackに通知する ●kintoneにレコードが追加・更新されたら別アプリにログを残す ●お問い合わせフォームの内容がkintoneに追加されたらGmailにメールを飛ばす
  15. 15. 14 3.kintoneのWebhook Webhookヘルプページ https://help.cybozu.com/ja/k/user/webhook.html 以下の操作でWebhook通知が発動。 ・レコードの追加 ・レコードの編集 ・レコードの削除 ・コメントの書き込み ・レコードのステータスの更新 ※画面操作だけではなく、APIによる操作でもWebhookが発火します。
  16. 16. 15 3.kintoneのWebhook ■注意点 • 次の方法でレコードを操作した場合は、Webhookの通知は送信されません。 • Excel/CSVファイルを読み込んでレコードを操作する • 複数のレコードを一括削除する • 複数のレコードを一括操作するREST APIを使用してレコードを操作する • Webhookは、kintoneスタンダードコースでkintoneをご利用の場合のみ利用で きます。 • 組織間のアクセス権の設定を有効にすると、Webhookは利用できなくなります。 • Webhookの通知は、1分間に60回まで送信されます。1分間に60回を超えてレ コードを操作すると、61回目以降の操作ではWebhookの通知が送信されません。
  17. 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. 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. 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. 20. 19 4.Microsoft Flow  Webサービス連携サービス • 画面操作でWebサービス同士を繋ぐサーバーサイド処理を構築できるサービス • IFTTT, Zapier, Microsoft Flowが有名どころ • 様々なクラウドサービスへの接続パーツが用意されており、画面操作で何かと 何かを繋いで何かをする処理を作れる。 • Flowは後発でもあり、連携サービス数が少なめか。。 但し、日本語対応が進んでいるのと、Microsoft提供というアドバンテージ。
  21. 21. 20 4.Microsoft Flow  Microsoft Flowにおける言葉の定義 • トリガー・・・処理を開始するきっかけとなるパーツ群 例)メール受信時、ツイート時、定期実行、Flowボタン・・・・ • アクション・・・各クラウドサービスに操作を行うパーツ群 例)メール送信、Dropboxファイル保存、天気情報の取得、翻訳・・・・ • コネクタ・・・トリガーとアクションの各パーツ群の総称 • フロー・・・コネクタを組み合わせて作成した一連の処理のこと • テンプレート・・・予め提供されているフローのサンプル
  22. 22. 21 4.Microsoft Flow  フロー作成の基本的な流れ ① トリガーとなるコネクタを設定 (定期実行、メール受信時、ファイル作成時、HTTPリクエスト受信時、等) ② アクションのコネクタを設定 (メール送信、ファイル作成、HTTPレスポンス送信、ツイートの投稿、等) ③ 必要に応じてアクションを追加 ➢ 条件分岐やループも設定可能。 ➢ kintone用のコネクタは無いので、 HTTPリクエスト受信時といった汎用的なコ ネクタを使います。 ★近日中にkintoneの公式コネクタが提供されるらしいです。
  23. 23. 22 5.ハンズオン  課題① kintoneアプリのコメント欄に日本語でコメントを書くと、英語に翻訳された文章 がメール通知される。 Microsoft Translator Notifications Send me an email notification
  24. 24. 23 5.ハンズオン  作業手順 ① kintoneアプリの用意 ② Microsoft Flowの設定 ③ kintoneアプリのWebhook設定 ④ 動作確認
  25. 25. 24 5.ハンズオン ① kintoneアプリの用意 • コメントが書き込めれば良いので、どんなアプリでもOKです。
  26. 26. 25 5.ハンズオン ② Microsoft Flowの設定 1. Flowにログイン 2. 「マイフロー」をクリック 3. 「一から作成」をクリック 4. 「多数のコネクタやトリガーを検索する」をクリック 5. 「すべてのコネクタとトリガーを検索する」に「HTTP」と入力 6. 「要求 - HTTP要求の受信時」をクリック 7. 「要求本文の JSON スキーマ」にコメント書き込み時に送信されるJSONデー タのJSON Schemaを入力(次ページ参照)
  27. 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. 28. 27 5.ハンズオン 8. 「新しいステップ」をクリック 9. 「アクションの追加」をクリック 10.「すべてのコネクタとアクションを検索する」に「翻訳」と入力 11.「Microsoft Translator - テキストの翻訳」をクリック 12.「テキスト」欄をクリックし、「動的なコンテンツ」から「text」を選択 13.「対象言語」は「English」を選択 14.「詳細オプションを表示する」をクリック 15.「ソース言語」は「Japanese」を選択
  29. 29. 28 5.ハンズオン 16.「新しいステップ」をクリック 17.「アクションの追加」をクリック 18.「すべてのコネクタとアクションを検索する」に「email」と入力 19.「Notifications - Send me an email notofication」をクリック 20.「Subject」に任意の文字列を入力(例:翻訳結果) 21.「Body」欄をクリックし、「動的なコンテンツ」から「翻訳されたテキスト」 を選択 22.「フローの保存」をクリック
  30. 30. 29 5.ハンズオン 23.「HTTP要求の受信時」をクリック 24.「HTTP POSTのURL」をコピー(後ろのコピーアイコンをクリック)し、テ キストエディタにペーストしておく 25.「完了」をクリック
  31. 31. 30 5.ハンズオン ③ kintoneアプリのWebhook設定 1. ①で用意したkintoneアプリの「アプリの設定」を開く 2. 「設定」タブをクリック 3. 「Webhook」をクリック 4. 「+」をクリック 5. 「説明」に任意の文字列を入力(例:コメントの通知) 6. 「Webhook URL」に先程コピーしたHTTP POSTのURLを入力 (最初の https:// は削除すること!) 7. 「通知を送信する条件」は「コメントの書き込み」を選択
  32. 32. 31 5.ハンズオン 8. ①で用意したkintoneアプリの「アプリの設定」を開く 9. 「このWebhookを有効にする」にチェックが入っていることを確認 10.「保存」をクリック 11.「アプリの設定」に戻る 12.「アプリを更新」をクリック
  33. 33. 32 5.ハンズオン ④ 動作確認 1. 適当なレコードを作成し、詳細画面を開く 2. コメント欄に日本語文章を入力 3. Microsoft Flowのアカウントのメールアドレスに翻訳結果のメールが届いてい ることを確認 ※メールが届かない場合 • Flowの実行履歴を確認(Flowの画面をリロードすると確認できます) • kintoneのWebhookログを確認(Webhook設定画面の「ログを確認」で確認で きます)
  34. 34. 33 5.ハンズオン  課題②(余裕がある方向け) kintoneアプリのコメント欄に日本語でコメントを書くと、英語に翻訳された文章 がメール通知されると共にコメント欄にも返ってくる。 Microsoft Translator Notifications Send me an email notification
  35. 35. 34 5.ハンズオン ① kintoneアプリのAPIトークン設定 1. kintoneアプリの「アプリの設定」を開く 2. 「設定」タブをクリック 3. 「APIトークン」をクリック 4. 「生成する」をクリック 5. 生成された「APIトークン」をコピーしテキストエディタにペーストしておく 6. 「保存」をクリック 7. 「アプリを更新」をクリック
  36. 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. 37. 36 5.ハンズオン 8. 「ヘッダー」に以下を入力 Content-Type application/json X-Cybozu-API-Token (生成されたAPIトークン) 9. 「本文」に以下を入力 10.「HTTP要求の受信時」と「テキストの翻訳」の間の「+」をクリックし、 「条件の追加」をクリック { "app": (自身のアプリID), "record": , "comment": { "text": "翻訳結果: " } }
  38. 38. 37 5.ハンズオン 11.左の「値の選択」には、動的なコンテンツから「text」を選択 12.中央は「次の値を含まない」を選択 13.右の「値の選択」には、「翻訳結果」と入力 14.「はいの場合」のエリアに、「テキストの翻訳」「Send me an email notification」「HTTP」をドラッグして移動 15.「フローの保存」をクリック 16.「完了」をクリック
  39. 39. 38 お疲れ様でした!

×