kintoneとmicrosoft flowで学ぶイマドキのシステム間連携
Post on 22-Jan-2018
452 Views
Preview:
TRANSCRIPT
サイボウズ公認kintoneエバンジェリスト
ラジカルブリッジ 代表 斎藤 栄
kintone Café JAPAN 2017 November 10, 2017
kintoneハンズオン~カスタマイズ編~
kintoneとMicrosoft Flowで学ぶイマドキのシステム間連携
1
自己紹介
•NTTデータ ➡ データクラフト ➡ ラジカルブリッジ
• kintone Café 創始者、運営事務局/札幌支部メンバー
• TwilioJP-UG 札幌コアメンバー
代表 “クラウドおじさん”
サイボウズ公認kintoneエバンジェリスト
斎藤 栄(さいとう さかえ)
2
自己紹介
リトルヘルプ合同会社
CTO 兼 宴会部長
kintoneエバンジェリスト2人います!
右から船 長 森本伸夫(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"
}
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 文字列 削除した日時です。
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です。
ハンズオンではこれを使います
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
お疲れ様でした!
top related