ノンプログラミングで API はじめて体験！_築山春木氏

株式会社セゾン情報システムズ
株式会社アプレッソ

本日のテーマ
「連携の可能性」
DataSpider を利用することで
プログラムを一切書かずにAPI 連携を体験していただ
きます。
プログラミング経験が無い方、大歓迎です！

1.DataSpider を通じて kintone の REST API で実
現できることを体験する
2.他サービスの API を kintone / DataSpider を通
じて体験する
3.ついでに少しだけ Webhook も体験する
このセッションで体験していただくこと

• kintone REST API とは
– kintone アプリのレコード操作やフォーム設計情報の取得、スペースの操
作が可能
– 参考 URL
https://developer.cybozu.io/hc/ja/articles/201941754
kintone の REST API を体験する

REST API を使えると何が嬉しい？
BI ツールでより詳細な
分析がしたい
経営層システム担当者
基幹システム側の顧客マスタ
を kintone に反映してほしい
案件管理アプリ
顧客名製品名受注時期
受注確度金額ステータス

REST API を使えると何が嬉しい？
基幹システム
レコード書き込み
案件管理アプリ
顧客名製品名受注時期
受注確度金額ステータス
レコード読み取り
BI ツール
REST API

API 連携で DataSpider を使うメリット
クラウドサービスの制限をアダプタで吸収
プログラム開発
kintone アダプタ
1. API調査
2. JSON 形式解析開発
3. ログイン処理開発
4. クエリ実行処理開発
5. 結果データ生成処理開発
+ API処理回数制限考慮
+ ネットワークエラー時考慮
-ID
-PW
-接続先URL など
1. 接続先情報入力
2. アイコンを Drop
kintone
連携

kintone アプリを作成します
– アプリ名：顧客リスト
– kintone アプリストアの
「営業・セールス」にあります！
– アプリを作成したら、1レコード
追加しておいてください。
（内容はなんでも構いません）
下準備

DataSpider で実現すること
– CSV ファイルのデータを読み取る
– kintone アプリにデータを書き込む
– スケジュールによる自動実行を行う
早速試してみましょう！

スクリプト
– DataSpider における処理の最小単位
– 実行するときにはこのスクリプトを呼び出して動かす
– スクリプトを入れるための器は「プロジェクト」
トリガー
– スクリプトを呼び出す仕組み
– 「xx分置き」に実行・・・スケジュールトリガー
– 「HTTP リクエストを元に実行」・・・HTTPトリガー
DataSpider 使い方：用語

Studio
– DataSpider の開発環境です。
– ハンズオンでは DataSpider Cloud の環境を用意しているため、皆さん
の端末からブラウザで Studio を開いて開発していただきます。（開発と
言ってもプログラムは書きません）
DataSpider 使い方：用語

1. Studio にログイン
2. プロジェクト（スクリプト）を作成
3. スクリプト開発
– ドラッグ & ドロップでアイコンを配置
– データ加工の定義
4. テスト実行
5. サービス登録（作成したスクリプトのビルド）
6. トリガー設定
DataSpider 使い方：全体の流れ

• URL
– http://xxx.xxx.xxx.xxx/WebStudio
（別紙にてご案内致します）
• ログイン情報
– ユーザー名：xxxx
– パスワード：xxxx
（別紙にてご案内致します）
DataSpider 使い方：1.Studio にログイン

DataSpider 使い方：2.プロジェクト（スクリプト）を作成
新しいプロジェクト

• 作成するプロジェクトに名前をつけます
– 皆さんが環境を共有（相乗り）しているため、
ご自身だとわかる名前をつけてください
– 「プロジェクト-<座席番号>」
例：座席番号 18 の方
プロジェクト-18
※今後何度か <座席番号> を入力いただく
場面がありますが配布用紙の座席番号
（カッコ無し）を入力してください
– 名前を付けて
[次へ]をクリックします

• スクリプトに名前をつけます
– スクリプトは”プロジェクト内”で一意となります。
– スクリプトが1つの実行単位となるため、分かりやすい処理名をつけるのが良いでしょ
う。
– 例：「kintone 連携スクリプト」

• 画面の説明（デザイナ）
DataSpider 使い方：3.スクリプト開発
スクリプトキャンバス
ツールパレット
（パーツ）
ログ
プロジェクト
エクスプローラ

• やること
1. CSV ファイルからデータを読み取る
（CSV ファイルは用意済み）
2. データを加工する
• 「電話番号」フィールド
電話：03-4321-1111 → 03-4321-1111
(：より後だけを抽出）
3. kintone に書き込む

• 「ツールパレット」-「ファイル」-「CSV」
と開き、「CSVファイル読み取り」アイコンをキャンバスにドラッグアンド
ドロップします。

• 「CSV ファイル読み取り処理」の設定を行います。
CSV 読み取り処理
/data/基幹システム顧客マスタ.csv
クリック

• 「読み取り設定」タブを選択
チェック

• 「ツールパレット」-「クラウド」と開き、
「kintone レコード追加」アイコンをキャンバスにドラッグアンドドロップ
します。
このへんに

• 「kintone レコード追加」の設定を行います。
kintone レコード追加
プルダウン
今はこのまま
追加

• 「グローバルリソース」の設定が開きます
kintone 接続設定
 グローバルリソース
– DB やクラウドサービスなど、認
証が必要な接続先への設定を予め
作成しておく
– 各スクリプトをつくる際にはこの
グローバルリソースを指定して呼
び出す

• kintone アプリへの接続設定を行います。
kintone 接続設定-<座席番号>
サブドメイン名アプリID
サブドメイン名
アプリ ID
(kintoneの) ログインID
(kintoneの) パスワード

• 「デザイナ」へ戻り、残りの設定を行います。
プルダウンから
「kintone 接続設定-<座席番号>」を選択
①
②わかりにくい！
クリック

• kintone のアプリ設定にてフィールドコードを修正します。
Before After
会社名 company
部署名 division
担当者名 owner
備考 note
忘れずに「アプリの更新」を！

• 「デザイナ」へ戻り、残りの設定を行います。
①
わかりやすい！
「作成者」「更新者」
「作成日時」「更新日時」
のチェックを外す
②

• キャンバス上の「CSV 読み取り処理」アイコンをドラッグ＆ドロップし、
「kintone レコード追加」アイコンに重ねます

• 「プロセスフローとデータフローを引く」「マッピングを追加する」に
チェックを入れ、[OK]を押します。
プロセスフロー
⁃ 処理の順番を示す
⁃ キャンバス上では黒の実線で表される
データフロー
⁃ データの流れを示す
⁃ キャンバス上では黄色の破線で表される

• 「mapping」アイコンをダブルクリックして開きます。
マッピング（機能名：mapper/マッパー）
⁃ データソース間の項目のヒモ付やデータの加工を行う

入力元（CSVファイル）
のカラム構造
出力先（kintone）
のカラム構造
(フィールドコード)
データ加工
のためのアイコン

• 「ツールパレット」「繰り返し」より、「単純な繰り返し」アイコンをド
ラッグ＆ドロップで配置します。
このへんに

• ドラッグ＆ドロップで項目間のリンクを張ります。
※「電話番号」はまだです。

• 「ツールパレット」-「文字列」-「関数」と開き、
「指定文字より後」アイコンをドラッグ＆ドロップして配置します。
このへんに

• 「指定文字より後」ロジックの設定をします。
：（全角コロン）

• ドラッグ＆ドロップで「電話番号」 -「指定文字より後」-
「value(=‘TEL’)」の間にリンクを張ります。

• 「kintone連携スクリプト」タブを選んでスクリプト作成画面に戻り、
[Start]-[CSV 読み取り処理]間、[kintone レコード追加]-[End]間をプロセ
スフローで結びます。
タブをクリック

DataSpider 使い方：4.テスト実行
• 「デバッグ実行」ボタンを押してみましょう。
• 「実行ログ」と kintone の画面で無事デー
タが登録されたことを確認しましょう。

1. Studio にログイン
2. プロジェクト（スクリプト）を作成
3. スクリプト開発
– ドラッグ & ドロップでアイコンを配置
– データ加工の定義
4. テスト実行
5. サービス登録（作成したスクリプトのビルド）
6. トリガー設定
DataSpider 使い方：全体の流れ
ここまで完了

• 「ファイル」メニューより「プロジェクトをサービスとして登録」を選択し
ます。
DataSpider 使い方：5.サービス登録

• プロジェクトを保存し、サービス登録を行います。
DataSpider 使い方：5.サービス登録

• 「マイトリガー」を選択します。
DataSpider 使い方：6.トリガー設定

• 「マイトリガーのタスク」より「新しいスケジュールトリガーを作成する」
を選択します。

• 「インターバル」にチェックを入れ次へ進みます。

新しいインターバルトリガー-<座席番号>
00:03:00

• 「休日の動作設定」はデフォルトのまま次へ

ご自身で作ったサービス名
ご自身で作ったスクリプト名
3分おきに kintone のレコードが追加され
ていることを確認しましょう

• DataSpider を使うと簡単に kintone と外部システムの
データ連携ができることを知っていただけたかと思いま
す。
• 後半は DataSpider を使って遊んでみたいと思います。
前半終了です。

後半戦スタート！
How-Old.net
Microsoft 社の顔検出 API を使って
被写体の年齢を当てるサービス
後半は
kintone を使ってこれを作ります！

概要図
HTTP
トリガー
画像アップロード
①
③ ファイル取得
kintone
アダプタ
Webhook
②
REST
アダプタ
Microsoft
Cognitive Services
Face API
④ API による
画像解析
⑤ レコード更新

1. kintone アプリを作成する
2. Webhook を受け取るためのエンドポイントを作成する
3. Webhook で受け取った JSON データを元に画像ファイルを
kintone から取得する
4. Microsoft Cognitive Services （Face API）に画像ファイルを
送信し、解析結果を得る
5. 画像解析結果を基に kintone のレコードを更新する
全体の流れ

kintone のアプリを作成します。
1.kintone アプリの作成
フィールド名フィールドコードフィールドタイプ
名前 name 文字列（1行）
推定年齢 age 数値
写真 photo 添付ファイル
アプリ名：how-old-<座席番号>
（全て半角で入力してください）

1. 新しいプロジェクト・スクリプトを作成します。
プロジェクト名：年齢チェック-<座席番号>
スクリプト名：年齢当てスクリプト
2.エンドポイントの作成

2. プロジェクトエクスプローラのスクリプト上で右クリックし、スクリプト
変数を作成します。
kintoneData
XML 型
スクリプト入力変数
として使用する

3. XML ファイル書き込みアイコンを配置し、以下の通り設定を行います。
/data/kintoneData-<座席番号>.xml
kintoneData
受信データ出力

4. [Start]から[End]までプロセスフロー（矢印）を繋げて一旦スクリプトを
完成させます。

5. サービス登録を行います。

5. 続いて、HTTP トリガーの設定を行います。
（参考：HTTP トリガーとは）
DataSpider Cloud 自身が Webサーバとなり、外部からの HTTP リクエストを受け、受
信したリクエストを元にスクリプトを実行するための機構です。
今回は、kintone の Webhook を元にスクリプトを実行するために使用します。

7. 以下の通り HTTP トリガーの設定を行います。
新規HTTPトリガー<座席番号>
how-old-<座席番号>
（kintone アプリ名と同じ）
ご自身で作ったサービス名
ご自身で作ったスクリプト名
kintone の Webhook
で指定する URL (次項にて補足)
ボタンを押すと利用可能な変数が
表示されます。「入力データ」を選択します。

8. kintone のアプリ設定画面にて Webhook の設定を行います。
前項の URL

• Webhook の設定が終わったら早速、kintone にレコードを登録してテスト
をしてみます。
• 「名前」フィールドのみにデータを入力し、画像には適当な添付ファイルを
添付して「保存」します。
※/data 配下にある tsukiyama.jpg , tsushima.jpg , wakino.jpg はご自由
にお使いください。DataSpider Cloud の「エクスプローラ」より右クリッ
クでダウンロードいただけます。

• kintone にレコードを登録した結果、Webhook によって DataSpider 側に
通知が飛んでいます。
• 現在の設定では、先程作成したスクリプトによって以下のように
kintoneData-<座席番号>.xml というファイルが作成されているので、
DataSpider Cloud のエクスプローラで確認します。

• 作業概要
– Webhook では「レコードが追加されたことの通知」はできま
すが、添付ファイル自体は送信することができません。
– そのため、「レコード通知をきっかけに、当該レコードの添付
ファイルを取得する」処理を実装します。
3.画像ファイルの取得

1. 先ほど作成したスクリプトにて、以下 2 つの変数を作成します。入力変
数・出力変数のチェックは要りません。
変数名変数型用途
recordId 文字列型 kintone の該当レコードのレコード番号を格納します
filePath 文字列型 kintone から取得した画像ファイルを保存するパスを格
納します
DataSpider Cloud の kintone アダプタでは取得した添付ファイルは
/<保存先として設定したフォルダ>/<レコード番号>/<フィールドコード>/<filekey>/
の下に保存されます。
のちほど、この添付ファイルを API 経由で送信するため、上記のパスを簡単に呼び出すために変数に格納して
おきます。

2. [Mapping]アイコンを配置し、「入力データ」上で右クリックし、「仮ス
キーマを設定」を選択します。
3. 「仮スキーマ」上で右クリックし、「スキーマを読み込む」を選択

4. 「XML ファイルから読み込み」で、先ほど保存した kintoneData-<座席番
号>.xml を指定します。
これにより、入力スキーマとして kintone より送信された Webhook のスキーマを選択できるようになります。

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>

6. kintone アダプタの「レコード取得」アイコンを配置し、該当レコードに
ある添付ファイルを取得する設定を行います。
添付ファイル取得
プルダウン追加

7. グローバルリソースの設定を行います。
kintone 接続設定-<座席番号>-2
サブドメイン名アプリID
サブドメイン名
アプリ ID
(kintoneの) ログインID
(kintoneの) パスワード

8. 「デザイナ」へ戻り、残りの設定を行います。
「kintone 接続設定-<座席番号>-2」
を選択
フィールド一覧の更新
①
②
レコード番号=“${recordId}”
③
→ ボタンを押すと変数アシスタンス機
能で定義済み変数が表示されます。

9. 「添付ファイル」タブに切り替え、以下設定を行います。
添付ファイル取得
/data/kintone/<ユーザ名>
この設定によって、Webhook で
受信したレコードと同じレコードにあ
る画像ファイルを
/data/kintone/<ユーザ名>
配下に格納することができます

• 作業概要
– ここまでの作業によって、kintone に登録されたファイルを取
得することができました。
– 取得した画像を Microsoft Cognitive Services の Face API に
送信します。
4.API に画像ファイルを送信し、解析結果を得る

• Face API 仕様
– 参考 URL
https://westus.dev.cognitive.microsoft.com/docs/service
s/563879b61984550e40cbbe8d/operations/563879b619
84550f30395236

Java サンプル

設定内容
RequestURL
https://westcentralus.api.cognitive.microsoft.com/face/v1.0/detect
Request parameters
Request Headers
Request body
バイナリデータ
returnFaceAttributes age,gender
Ocp-Apim-Subscription-Key （取得した Key ）
Content-Type application/octet-stream

1. グローバルリソース設定（設定済み）

2. 「ネットワーク」-「REST」-「POST実行」をキャンバスに配置し、以下
設定を行います。
REST接続設定_MScognitive
/face/v1.0/detect
名前値
returnFaceAttributes age,gender

3. 「リクエスト設定」タブに切り替え、以下設定を行います。
${filePath}

4. 「レスポンス設定」タブに切り替え、以下設定を行います。
/data/response-<座席番号>.json

5. 「ヘッダ設定」にタブを切り替え、以下設定を行います。
名前値
Ocp-Apim-Subscription-Key 取得した Key
Content-Type application/octet-stream

6. 配置したアイコン間を繋げます。
削除

7. 「サービス登録」（上書き）を行い、kintone 側に画像をアップしてテス
トします。

結果を確認します
[{"faceId":"171b8c57-b9d4-4eba-a6dd-
f57d9bde4b1d","faceRectangle":{"top":106,"left"
:248,"width":155,"height":155},"faceAttributes":
{"gender":"male","age":28.7}}]

• 作業概要
– ここまでで kintone に登録された画像ファイルを元に
Microsoft Cognitive Services で画像解析ができることが確認
できました。最後に受け取った解析結果を kintone に反映す
る設定を行います。
5.画像解析結果を基に kintone のレコードを更新する
もうちょっとで完成デス

1. REST アダプタ（Face API 呼び出し）のプロパティを開き、以下設定を行
います。

2. kintone アダプタの「レコード更新」アイコンを配置し、以下のように設
定を行います。
チェック外す
「kintone 接続設定-<座席番号>-2」
を選択
kintone レコード更新

3. kintone アダプタの「レコード追加」アイコンを配置し、以下のように
「Face API 呼び出し」アイコンと繋げます。
ドラッグ＆ドロップ

4. 「Mapping(1)」アイコンが現れるので、ダブルクリックして開きます。

5. mapping 画面で以下の通り項目間を紐付けます。
1. 「age」と「value(=‘$id’)」
を紐付けます。
2. 「recordId」と
「value(=‘age’)を紐付けま
す。

6. 「年齢当てスクリプト」タブを押してスクリプト作成画面に戻り、
「kintone レコード更新」と[end]を紐付けます。

7. 「サービス登録」（上書き）を行い、kintone 側に画像をアップしてテス
トします。

懇親会でいきなり写真を撮るのはやめましょう
今回の方法は複数の画像がある場合には対応していません
→ サブテーブルを使えば実現可能です！
kintone 便利！！！
最後に

ノンプログラミングで API はじめて体験！_築山春木氏

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie ノンプログラミングで API はじめて体験！_築山春木氏

Ähnlich wie ノンプログラミングで API はじめて体験！_築山春木氏 (20)

Mehr von kintone papers

Mehr von kintone papers (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (12)