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

サイボウズ公認kintoneエバンジェリスト

ラジカルブリッジ代表斎藤栄

kintone Café JAPAN 2017 November 10, 2017

kintoneハンズオン～カスタマイズ編～

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

1

自己紹介

•NTTデータ ➡ データクラフト ➡ ラジカルブリッジ

• kintone Café 創始者、運営事務局/札幌支部メンバー

• TwilioJP-UG 札幌コアメンバー

代表 “クラウドおじさん”

サイボウズ公認kintoneエバンジェリスト

斎藤栄（さいとうさかえ）

2

自己紹介

リトルヘルプ合同会社

CTO 兼宴会部長

kintoneエバンジェリスト２人います！

右から船長森本伸夫（kintoneエバンジェリスト）一応代表松本美佐（お菓子教室主宰）次長課長尾井理恵（ヨガ＆料理教室主宰）

お教室マネージャー『テトコ』tetoco.jp

powered by

3

やっていること

つくってます

アプリ

札幌で

サクサク動くからストレスフリー！に素敵なカレンダー機能をプラスする

全世界対応の定番プラグイン

カレンダーPlus

5

Let’s enjoy kintone together!

ログミーの書き起こし記事http://logmi.jp/222516

2017年5月19日kintone hive tokyo vol.5kintone hack@六本木ヒルズ

6

kintone Caféの創始者ラジカルブリッジ斎藤氏が実践する「俺流」

http://ascii.jp/elem/000/001/498/1498638/

［俺流斎藤］で検索！

2017年6月20日ascii.jp - kintone三昧《kintoneな人》

• 大衆居酒屋「俺流」で俺流の生き方を語る

• kintoneの仕事をするようになった経緯

• kintone Café への思い

• 個人事業を続けることのこだわり

7

11月：Kintone Connect（サンフランシスコ）で登壇！

8

11月：Kintone Connect（サンフランシスコ）で登壇！

クラウドおじさん

Mr. Cloud

9

ハンズオン開始

10

1.環境の確認

・Chromeブラウザ

・kintone環境※無い方は開発者ライセンス取得！

https://developer.cybozu.io/hc/ja/

・Microsoft FlowMicrosoftアカウントの取得とMicrosoft Flowへのサインアップ（無料）https://japan.flow.microsoft.com/ja-jp/※Microsoftアカウントをお持ちの方は、そのアカウントでMicrosoft Flowにサインアップできます。

11

2.kintoneのAPI概要

・JavaScript API画面表示のカスタマイズや画面操作時のkintone内の処理実行・外部サービスの呼び出し

・REST API外部サービスからのレコード操作等を受け入れる仕組み

・Webhookイベント駆動型の外部API呼び出し→レコードの作成・更新時など、何か操作が行われた際に外部APIを呼び出す仕組み※これが無い時は外部サービス側からポーリングを行う必要があった

12

2.kintoneのAPI概要

・JavaScript API画面表示のカスタマイズや画面操作時のkintone内の処理実行・外部サービスの呼び出し

・REST API外部サービスからのレコード操作等を受け入れる仕組み

・Webhookイベント駆動型の外部API呼び出し→レコードの作成・更新時など、何か操作が行われた際に外部APIを呼び出す仕組み※これが無い時は外部サービス側からポーリングを行う必要があった

今日の主題はこれ！

13

3.kintoneのWebhook

●kintoneにレコードが追加されたらslackに通知する

●kintoneにレコードが追加・更新されたら別アプリにログを残す

●お問い合わせフォームの内容がkintoneに追加されたらGmailにメールを飛ばす

14

3.kintoneのWebhook

Webhookヘルプページhttps://help.cybozu.com/ja/k/user/webhook.html

以下の操作でWebhook通知が発動。

・レコードの追加・レコードの編集・レコードの削除・コメントの書き込み・レコードのステータスの更新

※画面操作だけではなく、APIによる操作でもWebhookが発火します。

15

3.kintoneのWebhook

■注意点• 次の方法でレコードを操作した場合は、Webhookの通知は送信されません。

• Excel/CSVファイルを読み込んでレコードを操作する• 複数のレコードを一括削除する• 複数のレコードを一括操作するREST APIを使用してレコードを操作する

• Webhookは、kintoneスタンダードコースでkintoneをご利用の場合のみ利用できます。

• 組織間のアクセス権の設定を有効にすると、Webhookは利用できなくなります。

• Webhookの通知は、1分間に60回まで送信されます。1分間に60回を超えてレコードを操作すると、61回目以降の操作ではWebhookの通知が送信されません。

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://developer.cybozu.io/hc/ja/articles/202331474

https://help.cybozu.com/ja/k/user/title_field.html

17

3.kintoneのWebhook

●レコードの削除

{"app":{


},"id":"01234567-0123-0123-0123-0123456789ab","recordId":"2","deleteBy":{

"code":"sato","name":"佐藤昇"

},"deleteAt":"2017-07-03T09:38:09Z""type":"DELETE_RECORD"

}



type 文字列操作の種類です。レコードを削除した：DELETE_RECORD




recordId 配列レコード番号です。

deleteBy 配列レコードを削除したユーザーの情報を表す配列です。

deleteBy[].code 文字列ユーザーのログイン名です。

deleteBy[].name 文字列ユーザーの名前です。

deleteAt 文字列削除した日時です。

18

3.kintoneのWebhook

●コメントの書き込み

{"app":{


},"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"

}





comment 配列コメントの情報を表す配列です。配列の形式は、レコードを取得するREST APIと同様です。レコードコメントの一括取得（cybozu developer network）


recordId 文字列レコード番号です。

type 文字列操作の種類です。コメントを書き込んだ：ADD_RECORD_COMMENT

url 文字列コメントのURLです。

ハンズオンではこれを使います

https://developer.cybozu.io/hc/ja/articles/208242326

19

4.Microsoft Flow

Webサービス連携サービス• 画面操作でWebサービス同士を繋ぐサーバーサイド処理を構築できるサービス

• IFTTT, Zapier, Microsoft Flowが有名どころ

• 様々なクラウドサービスへの接続パーツが用意されており、画面操作で何かと何かを繋いで何かをする処理を作れる。

• Flowは後発でもあり、連携サービス数が少なめか。。但し、日本語対応が進んでいるのと、Microsoft提供というアドバンテージ。

20

4.Microsoft Flow

Microsoft Flowにおける言葉の定義

• トリガー・・・処理を開始するきっかけとなるパーツ群例）メール受信時、ツイート時、定期実行、Flowボタン・・・・

• アクション・・・各クラウドサービスに操作を行うパーツ群例）メール送信、Dropboxファイル保存、天気情報の取得、翻訳・・・・

• コネクタ・・・トリガーとアクションの各パーツ群の総称

• フロー・・・コネクタを組み合わせて作成した一連の処理のこと

• テンプレート・・・予め提供されているフローのサンプル

21

4.Microsoft Flow

フロー作成の基本的な流れ

① トリガーとなるコネクタを設定（定期実行、メール受信時、ファイル作成時、HTTPリクエスト受信時、等）

② アクションのコネクタを設定（メール送信、ファイル作成、HTTPレスポンス送信、ツイートの投稿、等）

③ 必要に応じてアクションを追加

➢ 条件分岐やループも設定可能。➢ kintone用のコネクタは無いので、 HTTPリクエスト受信時といった汎用的なコ

ネクタを使います。★近日中にkintoneの公式コネクタが提供されるらしいです。

22

5.ハンズオン

課題①kintoneアプリのコメント欄に日本語でコメントを書くと、英語に翻訳された文章がメール通知される。

Microsoft Translator

NotificationsSend me an email notification

23

5.ハンズオン

作業手順

① kintoneアプリの用意

② Microsoft Flowの設定

③ kintoneアプリのWebhook設定

④ 動作確認

24

5.ハンズオン

① kintoneアプリの用意

• コメントが書き込めれば良いので、どんなアプリでもOKです。

25

5.ハンズオン

② Microsoft Flowの設定1. Flowにログイン

2. 「マイフロー」をクリック

3. 「一から作成」をクリック

4. 「多数のコネクタやトリガーを検索する」をクリック

5. 「すべてのコネクタとトリガーを検索する」に「HTTP」と入力

6. 「要求 - HTTP要求の受信時」をクリック

7. 「要求本文の JSON スキーマ」にコメント書き込み時に送信されるJSONデータのJSON Schemaを入力（次ページ参照）

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データ

こっちを入力

27

5.ハンズオン

8. 「新しいステップ」をクリック

9. 「アクションの追加」をクリック

10.「すべてのコネクタとアクションを検索する」に「翻訳」と入力

11.「Microsoft Translator - テキストの翻訳」をクリック

12.「テキスト」欄をクリックし、「動的なコンテンツ」から「text」を選択

13.「対象言語」は「English」を選択

14.「詳細オプションを表示する」をクリック

15.「ソース言語」は「Japanese」を選択

28

5.ハンズオン

16.「新しいステップ」をクリック

17.「アクションの追加」をクリック

18.「すべてのコネクタとアクションを検索する」に「email」と入力

19.「Notifications - Send me an email notofication」をクリック

20.「Subject」に任意の文字列を入力（例：翻訳結果）

21.「Body」欄をクリックし、「動的なコンテンツ」から「翻訳されたテキスト」を選択

22.「フローの保存」をクリック

29

5.ハンズオン

23.「HTTP要求の受信時」をクリック

24.「HTTP POSTのURL」をコピー（後ろのコピーアイコンをクリック）し、テキストエディタにペーストしておく

25.「完了」をクリック

30

5.ハンズオン

③ kintoneアプリのWebhook設定1. ①で用意したkintoneアプリの「アプリの設定」を開く

2. 「設定」タブをクリック

3. 「Webhook」をクリック

4. 「＋」をクリック

5. 「説明」に任意の文字列を入力（例：コメントの通知）

6. 「Webhook URL」に先程コピーしたHTTP POSTのURLを入力（最初の https:// は削除すること！）

7. 「通知を送信する条件」は「コメントの書き込み」を選択

31

5.ハンズオン

8. ①で用意したkintoneアプリの「アプリの設定」を開く

9. 「このWebhookを有効にする」にチェックが入っていることを確認

10.「保存」をクリック

11.「アプリの設定」に戻る

12.「アプリを更新」をクリック

32

5.ハンズオン

④ 動作確認1. 適当なレコードを作成し、詳細画面を開く

2. コメント欄に日本語文章を入力

3. Microsoft Flowのアカウントのメールアドレスに翻訳結果のメールが届いていることを確認

※メールが届かない場合• Flowの実行履歴を確認（Flowの画面をリロードすると確認できます）• kintoneのWebhookログを確認（Webhook設定画面の「ログを確認」で確認で

きます）

33

5.ハンズオン

課題②（余裕がある方向け）kintoneアプリのコメント欄に日本語でコメントを書くと、英語に翻訳された文章がメール通知されると共にコメント欄にも返ってくる。

Microsoft Translator

NotificationsSend me an email notification

34

5.ハンズオン

① kintoneアプリのAPIトークン設定1. kintoneアプリの「アプリの設定」を開く

2. 「設定」タブをクリック

3. 「APIトークン」をクリック

4. 「生成する」をクリック

5. 生成された「APIトークン」をコピーしテキストエディタにペーストしておく

6. 「保存」をクリック

7. 「アプリを更新」をクリック

35

5.ハンズオン

② Microsoft Flowの編集1. 「フローの編集」をクリック

2. 「新しいステップ」をクリック

3. 「アクションの追加」をクリック

4. 「すべてのコネクタとアクションを検索する」に「HTTP」と入力

5. 「HTTP - HTTP」をクリック

6. 「方法」は「POST」を選択

7. 「URI」に以下を入力https://(自身のサブドメイン名).cybozu.com/k/v1/record/comment.json

36

5.ハンズオン

8. 「ヘッダー」に以下を入力Content-Type application/jsonX-Cybozu-API-Token （生成されたAPIトークン）

9. 「本文」に以下を入力

10.「HTTP要求の受信時」と「テキストの翻訳」の間の「＋」をクリックし、「条件の追加」をクリック

{"app": （自身のアプリID）,"record": ,"comment": {

"text": "翻訳結果: "}

}

37

5.ハンズオン

11.左の「値の選択」には、動的なコンテンツから「text」を選択

12.中央は「次の値を含まない」を選択

13.右の「値の選択」には、「翻訳結果」と入力

14.「はいの場合」のエリアに、「テキストの翻訳」「Send me an email notification」「HTTP」をドラッグして移動

15.「フローの保存」をクリック

16.「完了」をクリック

38

お疲れ様でした！

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

Technology