ノンプログラミングで API はじめて体験！_築山 春木氏
?Download as PPTX, PDF?
1 like?3,602 views
kintone devCamp 2017 D-5セッション資料。 「ノンプログラミングで API はじめて体験！ ～DataSpider で学ぶ API 連携～」
![? 作成するプロジェクトに名前をつけます
– 皆さんが環境を共有（相乗り）しているため、
ご自身だとわかる名前をつけてください
– 「プロジェクト-<座席番号>」
例：座席番号 18 の方
プロジェクト-18
※今後何度か <座席番号> を入力いただく
場面がありますが配布用紙の座席番号
（カッコ無し）を入力してください
– 名前を付けて
[次へ]をクリックします
DataSpider 使い方：2.プロジェクト（スクリプト）を作成](https://image.slidesharecdn.com/20170707kintondevcampdataspider-170714014552/85/API-_-15-320.jpg)
![? 「プロセスフローとデータフローを引く」「マッピングを追加する」に
チェックを入れ、[OK]を押します。
DataSpider 使い方：3.スクリプト开発
?プロセスフロー
? 処理の順番を示す
? キャンバス上では黒の実線で表される
?データフロー
? データの流れを示す
? キャンバス上では黄色の破線で表される](https://image.slidesharecdn.com/20170707kintondevcampdataspider-170714014552/85/API-_-30-320.jpg)
![? 「kintone連携スクリプト」タブを選んでスクリプト作成画面に戻り、
[Start]-[CSV 読み取り処理]間、[kintone レコード追加]-[End]間をプロセ
スフローで結びます。
DataSpider 使い方：3.スクリプト开発
タブをクリック](https://image.slidesharecdn.com/20170707kintondevcampdataspider-170714014552/85/API-_-38-320.jpg)
![4. [Start]から[End]までプロセスフロー（矢印）を繋げて一旦スクリプトを
完成させます。
2.エンドポイントの作成](https://image.slidesharecdn.com/20170707kintondevcampdataspider-170714014552/85/API-_-57-320.jpg)
![2. [Mapping]アイコンを配置し、「入力データ」上で右クリックし、「仮ス
キーマを設定」を選択します。
3. 「仮スキーマ」上で右クリックし、「スキーマを読み込む」を選択
3.画像ファイルの取得](https://image.slidesharecdn.com/20170707kintondevcampdataspider-170714014552/85/API-_-68-320.jpg)
![結果を確認します
4.API に画像ファイルを送信し、解析结果を得る
[{"faceId":"171b8c57-b9d4-4eba-a6dd-
f57d9bde4b1d","faceRectangle":{"top":106,"left"
:248,"width":155,"height":155},"faceAttributes":
{"gender":"male","age":28.7}}]](https://image.slidesharecdn.com/20170707kintondevcampdataspider-170714014552/85/API-_-87-320.jpg)
![5.画像解析結果を基に kintone のレコードを更新する
6. 「年齢当てスクリプト」タブを押してスクリプト作成画面に戻り、
「kintone レコード更新」と[end]を紐付けます。](https://image.slidesharecdn.com/20170707kintondevcampdataspider-170714014552/85/API-_-95-320.jpg)
ノンプログラミングで API はじめて体験！_築山 春木氏
- 3. 1.DataSpider を通じて kintone の REST API で実 現できることを体験する 2.他サービスの API を kintone / DataSpider を通 じて体験する 3.ついでに少しだけ Webhook も体験する このセッションで体験していただくこと
- 4. ? kintone REST API とは – kintone アプリのレコード操作やフォーム設計情報の取得、スペースの操 作が可能 – 参考 URL https://developer.cybozu.io/hc/ja/articles/201941754 kintone の REST API を体験する
- 5. REST API を使えると何が嬉しい？ BI ツールでより詳細な 分析がしたい 経営層 システム担当者 基幹システム側の顧客マスタ を kintone に反映してほしい 案件管理アプリ 顧客名 製品名 受注時期 受注確度 金額 ステータス
- 6. REST API を使えると何が嬉しい？ 基幹システム レコード書き込み 案件管理アプリ 顧客名 製品名 受注時期 受注確度 金額 ステータス レコード読み取り BI ツール REST API
- 7. API 連携で DataSpider を使うメリット クラウドサービスの制限を アダプタ で吸収 プログラム開発 kintone アダプタ 1. API調査 2. JSON 形式解析 開発 3. ログイン処理 開発 4. クエリ実行処理 開発 5. 結果データ生成処理 開発 + API処理回数制限 考慮 + ネットワークエラー時 考慮 -ID -PW -接続先URL など 1. 接続先情報 入力 2. アイコンを Drop kintone 連携
- 8. kintone アプリを作成します – アプリ名：顧客リスト – kintone アプリストアの 「営業?セールス」にあります！ – アプリを作成したら、1レコード 追加しておいてください。 （内容はなんでも構いません） 下準備
- 9. ?DataSpider で実現すること – CSV ファイルのデータを読み取る – kintone アプリにデータを書き込む – スケジュールによる自動実行を行う 早速試してみましょう！
- 10. ?スクリプト – DataSpider における処理の最小単位 – 実行するときにはこのスクリプトを呼び出して動かす – スクリプトを入れるための器は「プロジェクト」 ?トリガー – スクリプトを呼び出す仕組み – 「xx分置き」に実行???スケジュールトリガー – 「HTTP リクエストを元に実行」???HTTPトリガー DataSpider 使い方：用語
- 11. ?Studio – DataSpider の開発環境です。 – ハンズオンでは DataSpider Cloud の環境を用意しているため、皆さん の端末からブラウザで Studio を開いて開発していただきます。（開発と 言ってもプログラムは書きません） DataSpider 使い方：用語
- 12. 1. Studio にログイン 2. プロジェクト（スクリプト）を作成 3. スクリプト開発 – ドラッグ & ドロップでアイコンを配置 – データ加工の定義 4. テスト実行 5. サービス登録（作成したスクリプトのビルド） 6. トリガー設定 DataSpider 使い方：全体の流れ
- 13. ? URL – http://xxx.xxx.xxx.xxx/WebStudio （別紙にてご案内致します） ? ログイン情報 – ユーザー名：xxxx – パスワード：xxxx （別紙にてご案内致します） DataSpider 使い方：1.Studio にログイン
- 15. ? 作成するプロジェクトに名前をつけます – 皆さんが環境を共有（相乗り）しているため、 ご自身だとわかる名前をつけてください – 「プロジェクト-<座席番号>」 例：座席番号 18 の方 プロジェクト-18 ※今後何度か <座席番号> を入力いただく 場面がありますが配布用紙の座席番号 （カッコ無し）を入力してください – 名前を付けて [次へ]をクリックします DataSpider 使い方：2.プロジェクト（スクリプト）を作成
- 16. ? スクリプトに名前をつけます – スクリプトは”プロジェクト内”で一意となります。 – スクリプトが1つの実行単位となるため、分かりやすい処理名をつけるのが良いでしょ う。 – 例：「kintone 連携スクリプト」 DataSpider 使い方：2.プロジェクト（スクリプト）を作成
- 18. ? やること 1. CSV ファイルからデータを読み取る （CSV ファイルは用意済み） 2. データを加工する ? 「電話番号」フィールド 電話：03-4321-1111 → 03-4321-1111 (： より後だけを抽出） 3. kintone に書き込む DataSpider 使い方：3.スクリプト开発
- 20. ? 「CSV ファイル読み取り処理」の設定を行います。 DataSpider 使い方：3.スクリプト开発 CSV 読み取り処理 /data/基幹システム顧客マスタ.csv クリック
- 22. ? 「ツールパレット」-「クラウド」と開き、 「kintone レコード追加」アイコンをキャンバスにドラッグアンドドロップ します。 DataSpider 使い方：3.スクリプト开発 このへんに
- 23. ? 「kintone レコード追加」の設定を行います。 DataSpider 使い方：3.スクリプト开発 kintone レコード追加 プルダウン 今はこのまま 追加
- 24. ? 「グローバルリソース」の設定が開きます DataSpider 使い方：3.スクリプト开発 kintone 接続設定 ? グローバルリソース – DB や クラウドサービスなど、認 証が必要な接続先への設定を予め 作成しておく – 各スクリプトをつくる際にはこの グローバルリソースを指定して呼 び出す
- 25. ? kintone アプリへの接続設定を行います。 DataSpider 使い方：3.スクリプト开発 kintone 接続設定-<座席番号> サブドメイン名 アプリID サブドメイン名 アプリ ID (kintoneの) ログインID (kintoneの) パスワード
- 26. ? 「デザイナ」へ戻り、残りの設定を行います。 DataSpider 使い方：3.スクリプト开発 プルダウンから 「kintone 接続設定-<座席番号>」を選択 ① ②わかりにくい！ クリック
- 27. ? kintone のアプリ設定にてフィールドコードを修正します。 DataSpider 使い方：3.スクリプト开発 Before After 会社名 company 部署名 division 担当者名 owner 備考 note 忘れずに「アプリの更新」を！
- 29. ? キャンバス上の「CSV 読み取り処理」アイコンをドラッグ＆ドロップし、 「kintone レコード追加」アイコンに重ねます DataSpider 使い方：3.スクリプト开発
- 30. ? 「プロセスフローとデータフローを引く」「マッピングを追加する」に チェックを入れ、[OK]を押します。 DataSpider 使い方：3.スクリプト开発 ?プロセスフロー ? 処理の順番を示す ? キャンバス上では黒の実線で表される ?データフロー ? データの流れを示す ? キャンバス上では黄色の破線で表される
- 31. ? 「mapping」アイコンをダブルクリックして開きます。 DataSpider 使い方：3.スクリプト开発 ?マッピング（機能名：mapper/マッパー） ? データソース间の项目のヒモ付やデータの加工を行う
- 37. ? ドラッグ＆ドロップで「電話番号」 -「指定文字より後」- 「value(=‘TEL’)」の間にリンクを張ります。 DataSpider 使い方：3.スクリプト开発
- 38. ? 「kintone連携スクリプト」タブを選んでスクリプト作成画面に戻り、 [Start]-[CSV 読み取り処理]間、[kintone レコード追加]-[End]間をプロセ スフローで結びます。 DataSpider 使い方：3.スクリプト开発 タブをクリック
- 39. DataSpider 使い方：4.テスト実行 ? 「デバッグ実行」ボタンを押してみましょう。 ? 「実行ログ」と kintone の画面で無事デー タが登録されたことを確認しましょう。
- 40. 1. Studio にログイン 2. プロジェクト（スクリプト）を作成 3. スクリプト開発 – ドラッグ & ドロップでアイコンを配置 – データ加工の定義 4. テスト実行 5. サービス登録（作成したスクリプトのビルド） 6. トリガー設定 DataSpider 使い方：全体の流れ ここまで完了
- 48. DataSpider 使い方：6.トリガー設定 ご自身で作ったサービス名 ご自身で作ったスクリプト名 3分おきに kintone のレコードが追加され ていることを確認しましょう
- 49. ? DataSpider を使うと簡単に kintone と外部システムの データ連携ができることを知っていただけたかと思いま す。 ? 後半は DataSpider を使って遊んでみたいと思います。 前半終了です。
- 50. 後半戦スタート！ How-Old.net Microsoft 社の顔検出 API を使って 被写体の年齢を当てるサービス 後半は kintone を使ってこれを作ります！
- 51. 概要図 HTTP トリガー 画像アップロード ① ③ ファイル取得 kintone アダプタ Webhook ② REST アダプタ Microsoft Cognitive Services Face API ④ API による 画像解析 ⑤ レコード更新
- 52. 1. kintone アプリを作成する 2. Webhook を受け取るためのエンドポイントを作成する 3. Webhook で受け取った JSON データを元に画像ファイルを kintone から取得する 4. Microsoft Cognitive Services （Face API）に画像ファイルを 送信し、解析結果を得る 5. 画像解析結果を基に kintone のレコードを更新する 全体の流れ
- 53. kintone のアプリを作成します。 1.kintone アプリの作成 フィールド名 フィールドコード フィールドタイプ 名前 name 文字列（1行） 推定年齢 age 数値 写真 photo 添付ファイル アプリ名：how-old-<座席番号> （全て半角で入力してください）
- 56. 3. XML ファイル書き込みアイコンを配置し、以下の通り設定を行います。 2.エンドポイントの作成 /data/kintoneData-<座席番号>.xml kintoneData 受信データ出力
- 59. 5. 続いて、HTTP トリガーの設定を行います。 2.エンドポイントの作成 （参考：HTTP トリガーとは） DataSpider Cloud 自身が Webサーバとなり、外部からの HTTP リクエストを受け、受 信したリクエストを元にスクリプトを実行するための機構です。 今回は、kintone の Webhook を元にスクリプトを実行するために使用します。
- 60. 概要図 HTTP トリガー 画像アップロード ① ③ ファイル取得 kintone アダプタ Webhook ② REST アダプタ Microsoft Cognitive Services Face API ④ API による 画像解析 ⑤ レコード更新
- 61. 7. 以下の通り HTTP トリガーの設定を行います。 2.エンドポイントの作成 新規HTTPトリガー<座席番号> how-old-<座席番号> （kintone アプリ名と同じ） ご自身で作ったサービス名 ご自身で作ったスクリプト名 kintone の Webhook で指定する URL (次項にて補足) ボタンを押すと利用可能な変数が 表示されます。「入力データ」を選択します。
- 62. 8. kintone のアプリ設定画面にて Webhook の設定を行います。 2.エンドポイントの作成 前項の URL
- 63. ? Webhook の設定が終わったら早速、kintone にレコードを登録してテスト をしてみます。 ? 「名前」フィールドのみにデータを入力し、画像には適当な添付ファイルを 添付して「保存」します。 ※/data 配下にある tsukiyama.jpg , tsushima.jpg , wakino.jpg はご自由 にお使いください。DataSpider Cloud の「エクスプローラ」より右クリッ クでダウンロードいただけます。 2.エンドポイントの作成
- 64. ? kintone にレコードを登録した結果、Webhook によって DataSpider 側に 通知が飛んでいます。 ? 現在の設定では、先程作成したスクリプトによって以下のように kintoneData-<座席番号>.xml というファイルが作成されているので、 DataSpider Cloud のエクスプローラで確認します。 2.エンドポイントの作成
- 65. ? 作業概要 – Webhook では「レコードが追加されたことの通知」はできま すが、添付ファイル自体は送信することができません。 – そのため、「レコード通知をきっかけに、当該レコードの添付 ファイルを取得する」処理を実装します。 3.画像ファイルの取得
- 66. 概要図 HTTP トリガー 画像アップロード ① ③ ファイル取得 kintone アダプタ Webhook ② REST アダプタ Microsoft Cognitive Services Face API ④ API による 画像解析 ⑤ レコード更新
- 67. 1. 先ほど作成したスクリプトにて、以下 2 つの変数を作成します。入力変 数?出力変数のチェックは要りません。 3.画像ファイルの取得 変数名 変数型 用途 recordId 文字列型 kintone の該当レコードのレコード番号を格納します filePath 文字列型 kintone から取得した画像ファイルを保存するパスを格 納します DataSpider Cloud の kintone アダプタでは取得した添付ファイルは /<保存先として設定したフォルダ>/<レコード番号>/<フィールドコード>/<filekey>/ の下に保存されます。 のちほど、この添付ファイルを API 経由で送信するため、上記のパスを簡単に呼び出すために変数に格納して おきます。
- 69. 4. 「XML ファイルから読み込み」で、先ほど保存した kintoneData-<座席番 号>.xml を指定します。 3.画像ファイルの取得 これにより、入力スキーマとして kintone より送信された Webhook のスキーマを選択できるようになります。
- 70. 3.画像ファイルの取得 1. value と「recordId」を紐付けます 2. 「文字列」-「基本」-「単一行文字列定数」ア イコンを 3つ配置します。 それぞれ以下の通り設定します。 コメント 一行文字列 /data/kintone/<ユーザ名>/ /data/kintone/<ユーザ名>/ /photo/ /photo/ / / 3. 「文字列」-「演算」-「連結」アイコンを配置します。 配置したアイコンをダブルクリックして、「入力数」を 6 に設定し、以下の順に紐付けます。 5. mapping 画面で「文字列連結」アイコンと「単一行文字列定数」アイコンを使い、以下の 通り設定を行います。 /data/kintone/<ユーザ名>/ <value> /photo/ <filekey> / <name> 変数 filepath に「/data/kintone/<ユーザ名>/< レコード番号>/<フィールドコード>/<filekey>/ ファイル名」が格納されるように設定を行います。 レコード番号 <value> photo-value-element <filekey> photo-value-element <name>
- 72. 3.画像ファイルの取得 7. グローバルリソースの設定を行います。 kintone 接続設定-<座席番号>-2 サブドメイン名 アプリID サブドメイン名 アプリ ID (kintoneの) ログインID (kintoneの) パスワード
- 73. 8. 「デザイナ」へ戻り、残りの設定を行います。 3.画像ファイルの取得 プルダウンから 「kintone 接続設定-<座席番号>-2」 を選択 フィールド一覧の更新 ① ② レコード番号=“${recordId}” ③ → ボタンを押すと変数アシスタンス機 能で定義済み変数が表示されます。
- 75. ? 作業概要 – ここまでの作業によって、kintone に登録されたファイルを取 得することができました。 – 取得した画像を Microsoft Cognitive Services の Face API に 送信します。 4.API に画像ファイルを送信し、解析结果を得る
- 76. 概要図 HTTP トリガー 画像アップロード ① ③ ファイル取得 kintone アダプタ Webhook ② REST アダプタ Microsoft Cognitive Services Face API ④ API による 画像解析 ⑤ レコード更新
- 77. ? Face API 仕様 – 参考 URL https://westus.dev.cognitive.microsoft.com/docs/service s/563879b61984550e40cbbe8d/operations/563879b619 84550f30395236 4.API に画像ファイルを送信し、解析结果を得る
- 79. 設定内容 RequestURL https://westcentralus.api.cognitive.microsoft.com/face/v1.0/detect Request parameters Request Headers Request body バイナリデータ 4.API に画像ファイルを送信し、解析结果を得る returnFaceAttributes age,gender Ocp-Apim-Subscription-Key （取得した Key ） Content-Type application/octet-stream
- 81. 2. 「ネットワーク」-「REST」-「POST実行」をキャンバスに配置し、以下 設定を行います。 4.API に画像ファイルを送信し、解析结果を得る REST接続設定_MScognitive /face/v1.0/detect 名前 値 returnFaceAttributes age,gender
- 84. 5. 「ヘッダ設定」にタブを切り替え、以下設定を行います。 4.API に画像ファイルを送信し、解析结果を得る 名前 値 Ocp-Apim-Subscription-Key 取得した Key Content-Type application/octet-stream
- 86. 7. 「サービス登録」（上書き）を行い、kintone 側に画像をアップしてテス トします。 4.API に画像ファイルを送信し、解析结果を得る
- 88. ? 作業概要 – ここまでで kintone に登録された画像ファイルを元に Microsoft Cognitive Services で画像解析ができることが確認 できました。最後に 受け取った解析結果を kintone に反映す る設定を行います。 5.画像解析結果を基に kintone のレコードを更新する もうちょっとで完成デス
- 89. 概要図 HTTP トリガー 画像アップロード ① ③ ファイル取得 kintone アダプタ Webhook ② REST アダプタ Microsoft Cognitive Services Face API ④ API による 画像解析 ⑤ レコード更新
- 90. 1. REST アダプタ（Face API 呼び出し）のプロパティを開き、以下設定を行 います。 5.画像解析結果を基に kintone のレコードを更新する
- 91. 2. kintone アダプタの「レコード更新」アイコンを配置し、以下のように設 定を行います。 5.画像解析結果を基に kintone のレコードを更新する チェック外す プルダウンから 「kintone 接続設定-<座席番号>-2」 を選択 kintone レコード更新
- 92. 3. kintone アダプタの「レコード追加」アイコンを配置し、以下のように 「Face API 呼び出し」アイコンと繋げます。 5.画像解析結果を基に kintone のレコードを更新する ドラッグ＆ドロップ
- 93. 4. 「Mapping(1)」アイコンが現れるので、ダブルクリックして開きます。 5.画像解析結果を基に kintone のレコードを更新する
- 94. 5. mapping 画面で以下の通り項目間を紐付けます。 5.画像解析結果を基に kintone のレコードを更新する 1. 「age」 と 「value(=‘$id’)」 を紐付けます。 2. 「recordId」と 「value(=‘age’)を紐付けま す。
- 95. 5.画像解析結果を基に kintone のレコードを更新する 6. 「年齢当てスクリプト」タブを押してスクリプト作成画面に戻り、 「kintone レコード更新」と[end]を紐付けます。
- 96. 7. 「サービス登録」（上書き）を行い、kintone 側に画像をアップしてテス トします。 5.画像解析結果を基に kintone のレコードを更新する