Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

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

1 691 vues

Publié le

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

Publié dans : Technologie
  • Soyez le premier à commenter

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 お疲れ様でした!

×