kintone café 東京 vol.4 ハンズオン資料(kintone & aws api gateway/lambda/machine...

112
またまたkintoneAWS連携してみよう! -お客さんがkintoneを契約してくれるかを過去データから予測する- kintone Café 東京 Vol.4 #kintonecafe Twitter: @yamaryu0508 FB: https://www.facebook.com/ryu.yamashita.3 2015年9月4日 株式会社ジョイゾー/kintoneエバンジェリスト/ kintone Café 運営事務局・東京支部 山下 竜

Upload: ryu-yamashita

Post on 07-Apr-2017

545 views

Category:

Software


3 download

TRANSCRIPT

Page 1: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

またまたkintoneとAWSを 連携してみよう!

-お客さんがkintoneを契約してくれるかを過去データから予測する- kintone Café 東京 Vol.4

#kintonecafe

Twitter: @yamaryu0508 FB: https://www.facebook.com/ryu.yamashita.3

2015年9月4日 株式会社ジョイゾー/kintoneエバンジェリスト/ kintone Café 運営事務局・東京支部 山下 竜

Page 2: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

• kintoneの概要

• kintoneのカスタマイズ機能

• AWSの概要

• kintoneとAWS

• kintone JavaScript API

• kintone.proxy()

• サンプルダウンロード

• 機械学習のモデル作成のためのデータ準備

Today’s Café Mune

2

• AWSの設定

• S3・バケットの設定

• Machine Learningの設定

• Lambda・イベントの設定

• API Gatewayの設定

• kintoneアプリのカスタマイズ

• リアルタイム予測の実行※スライド内リンクはPDFダウンロード時に有効になります

Page 3: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

自己紹介

3

2013.3 IOTとグループウェア(デヂエ)の連携を試みてkintone に出会う2014.4 - kintoneエバンジェリストに

2014.11 kintone好きが高じて、界隈初のkintone転職2015.2 kintone Café 運営事務局開設、事務局メンバーに

2014.5 - 2014.10 kintone Café 福岡 Vol.1 - 3を主催

現在(kintone歴2年ちょっと、AWS歴数週間) 多分、“日本で唯一100%kintoneでご飯食べてる人”

株式会社ジョイゾー 山下 竜(33) 福岡県大牟田市出身

「ブルーウェーブ」という共通点

Page 4: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

kintone界隈のIoTの人

4

「2015/5/22 kintone hive 開催報告」より

今日はこれやめておきます

Page 5: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

福岡を離れ、SIerへの道に転向してもうすぐ1年になります

電柱を登るのをやめて?

Page 6: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

• 会社名   株式会社ジョイゾー

• 所在地   東京都江東区東陽3-5-5ラウクティビルディング3F

• 設立年月日 2010年12月20日

• 社員数   7名(kinotneエバンジェリスト2名)

• 主な事業  kintone導入支援、カスタマイズ開発他

• 主な取引先 カナディアン・ソーラー・ジャパン他

株式会社ジョイゾー

6

Page 7: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

ジョイゾーの所在地

7

Page 8: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

kintoneを基盤としたシステム開発サービス「システム39」

8

定額39万円

初回作業無料

来店型

Page 9: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

kintoneアプリデプロイツール「SANZO」

9Beta版試用申込、受付中 → https://www.joyzo.co.jp/sanzo/

Page 10: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

kintoneの概要まずはおさらい

Page 11: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

kintoneとは?(ざっくり)

11

•コンセプト

•「ファストシステム」

•「3分で業務改善アプリ」

•構成要素

•データ

• プロセス管理(ワークフロー)

•コミュニケーション(出典:「kintone公式サイト」)

「サイボウズプロダクト=チームを強くするツール」の中でも汎用性と専門性を行き来しながら、様々な 業務シーンで活用出来るクラウドデータベース(WebDB)サービス

Page 12: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

•初期費用無料

•申込3分後には利用可能

•月単位の利用(年縛りなし)

•アップデートサイクルの短期化(最近は2ヶ月くらい)

•30日間の無料お試し

•1年間の無償開発ライセンス

kintoneとは?(ざっくり:続き)

12

目的(業務or開発)に応じて使い分けてください。

Page 13: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

kintoneのカスタマイズ機能

Page 14: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

kintoneカスタマイズ機能

14

• REST API

• レコードやスペースの操作(登録・更新・削除等)、バルクAPI、アプリ作成、ワークフロー操作

• ユーザ・組織の操作

• JavaScript/CSSカスタマイズ

• 各種イベントハンドル、情報取得

• プロキシによる外部API連携

• URL指定によるライブラリの読み込み(HTTPS対応)

データ レコード スペース ユーザ

UI

基幹システム Excel

他のクラウドREST API

kintone.proxy

Page 15: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

kintone3大要素とREST API

15

データベース プロセス管理 コミュニケーション

充実 弱いAPIからの操作も3大要素をバランスよく活用することが重要!

API操作で3大機能同士を密に結合できるようになると、更に便利になると期待しています!

一部実装

Page 16: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

kintone3大要素とREST API(ポータル画面)

16

スペースの 作成・メンバー更新等

アプリの作成・更新

(欲しい)

(参考:「cybozu.com developer network > kintone API」)

Page 17: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

kintone3大要素とREST API(詳細画面)

17

レコードの 取得・登録・更新・削除

添付ファイルの アップロード・ダウンロード

レコードの ステータス変更

(欲しい)(参考:「cybozu.com developer network > kintone API」)

Page 18: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

AWSの概要

こっちもおさらい

Page 19: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

• 低価格

• 40回を超える価格改定は全て値下げ

• 豊富なサービス

• 40を超えるアプリ・プラットフォームサービス

• APIフルマネージ

Amazon Web Services

19

Page 20: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

kintoneとAWSナイスな相性だと 言われています!

Page 21: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

kintoneとAWS

21

• アプリケーション寄りPaaS(SaaS)

• クライアントサイド/フロントエンド (UI/UX)

• 行動的/解釈の共有でアクションを起こし、コミュニケーションで業務を回す

• インフラ寄りPaas(IaaS、BaaS)

• サーバーサイド/バックエンド   (コマンド)

• 思考的/データを捌き事象を解釈する

APIで 結合・補完

Page 22: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

IoTで考える結合・補完イメージ

22

・農業(圃場) ・見守り ・建設・工事現場 ・工場設備 ・エネルギー設備

現場

センサー

・温度 ・湿度 ・照度 ・加速度 ・騒音

センサー クラウド kintone

・通知 ・ワークフロー ・スレッド ・カスタマイズビュー

事象・データが発生する データを捌き、 事象を解釈する

解釈の共有でアクションを起こし、コミュニケーションで業務を回す

Page 23: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

王道っぽいAWSとkintoneの連携パターン

23

Amazon DynamoDB Stream

Amazon SNS

Amazon S3

Amazon Kinesis

AWS Lambda

Amazon EC2Lambda

イベントソース

REST API

kintone on cybozu.com

・レコード操作 ・ワークフロー操作 ・スペース操作 ・アプリ操作

REST API

kintone.proxy() & Amazon API Gateway 経由は良さそう・・・

REST APIプリミティブな連携 ・ホスティング ・バッチ処理

Page 24: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

Amazon S3

Today’s Café Menu

24

Amazon DynamoDB Stream

Amazon SNS

Amazon Kinesis

Amazon EC2Lambda

イベントソース

・レコード操作 ・ワークフロー操作 ・スペース操作 ・アプリ操作

REST APIプリミティブな連携 ・ホスティング ・バッチ処理

AWS Lambda

REST API

kintone on cybozu.com

kintone.proxy() & Amazon API Gateway 経由は良さそう・・・

REST API

・レコード操作

REST API

Amazon Machine Learning

REST API

Page 25: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

今回フォーカスする AWSのサービス

Page 26: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

• EC2に作り込みしなくても容易にAPIが作れる

• エンドポイントの完全公開やAPIキー等アクセス・認証レベルを柔軟に設定できる

• CORS設定に対応

• APIのバージョン管理ができる

Amazon API Gateway

26

エコシステム形成・システム間連携を可能にするAPIそのものを容易に作れるので、エコシステム形成の敷居が更に下がる!

Page 27: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

API Gatewayによるkintoneラッピング

27

kintoneのデータをAPIで公開

Webhookからのkintoneアクセス

RESTfull Service

kintoneに蓄積されたデータを AWS経由でAPIによる公開

Webhook(通知等)をAPI Gatewayを経由して Lambdaで捌いた内容をkintoneに連携

Webhook Event REST API

REST API Event REST API

Page 28: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

• 3種類の予測モデル

• 二項(ロジスティック回帰)

• 多クラス分類(多項ロロジスティック回帰)

• 回帰分析(線形回帰)

• 予測の実行

• バッチ(複数データをまとめて予測)

• リアルタイム(API経由で1件ずつ予測)

Amazon Machine Learning

28

S3やRedshiftのデータを利用して、モデル作成・予測が容易に実行できるので、機械学習の敷居が下がる!

Page 29: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

ハンズオン (予備知識)

Page 30: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

ハンズオンシナリオ

30

マーケや営業で施策打ったけど・・・

このお客さん、kintone契約してもらえそうかなぁ?

kintoneの過去の契約情報から可能性見てみますか!?

対象の顧客情報や条件を入力すると・・・

契約してくれそう^^※シナリオですので、人物や内容は架空のものです

Page 31: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

Today’s Café Menu

31

AWS Lambda

kintone on cybozu.com

①kintoneデータで 予測モデル作成

Amazon API Gateway

Amazon Machine Learning

②kintoneにデータ登録 ③API(クエリ)で パラメータを渡す

④Eventでパラメータを受け取り、 APIでリアルタイム予測へ

REST API Event REST API

⑤予測実行後 予測値を返す

※初動のモデル作成は直接実施  (Lambda未経由)

kintoneのデータ管理に予測機能を追加!

対象のお客さんがkintoneを契約してくれそうかが分かる?!

⑥予測値をセット

kintone.proxy()

Page 32: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

• kintone

• JavaScriptから外部APIをコールするkintone.proxy()の利用方法

• AWS

• API Gatewayの設定方法

• Mapping Templateの設定(Lambda関数との協調)

• Machine Learningの設定方法

• datasource、ML model、predictionの作成・設定の方法と流れ

• LambdaからのMLリアルタイム予測実行方法

• API Gatewayからのeventパラメータの受取(Lambda関数との協調)

今回のハンズオンに必要とされるスキルセット(目標・成果物)

32

Page 33: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

kintone JavaScript API

(参考:「cybozu.com developer network > kintone API」)

Page 34: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

kintone.proxy()で JavaScriptから外部APIにアクセス

(参考:「cybozu.com developer network > kintone API」)

Page 35: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

kintone.proxy()におけるPOST/PUTのポイント

35

項目 フォーム形式データ JSON形式データ

リクエストヘッダ (MIMEタイプ)

'Content-Type' : 'application/x-www-form-urlencoded'

'Content-Type' : 'application/json'

リクエストボディ 記載方法

'{key1}={value1}&{key2}={value2}&...' (文字列)

※{value}はURLエンコード

JSON (文字列、オブジェクト)

サービス例 Twilio、SendGrid、Typetalk kintone、Square、Xively

※GETのレスポンスは殆どがJSON

Page 36: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

curlコマンドとkintone.proxy()の対応関係

36(出典:「kintoneマッシュアップのための豆知識(curlコマンドとkintone.proxy()の対応)」)

Page 37: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

curlコマンドとkintone.proxy()の対応関係

37

(1)リクエスト URL

curlコマンドでは正味の引数になりますので、コマンドオプションはありません。

(2)リクエストメソッド

GET、POST、PUT、DELETEのいずれかを指定できます。

(3)リクエストヘッダ

複数指定する必要があるときには、curlコマンドでは「-H "{headerKey}:{headerValue}" 」をセットとして、必要数書き並べられます。kintone.proxy()では「{"{headerKey1}":"{headerValue1}", "{headerKey2}":"{headerValue2}", ・・・}」といったようにコンマで必要数を連結してください。

(出典:「kintoneマッシュアップのための豆知識(curlコマンドとkintone.proxy()の対応)」)

Page 38: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

curlコマンドとkintone.proxy()の対応関係

38

(4)リクエストデータ(フォーム形式)

curlコマンドで「-d」のオプションでは通常フォーム形式データを言っており、対応するContent-Typeは「application/x-www-form-urlencoded」として処理されています(「-H」での明示不要)ので、kintone.proxy()ではこれをヘッダに追加しておくと良いです。

複数指定する必要があるときには、curlコマンドでは「-d {key}:{value}」をセットとして、必要数書き並べられます。kintone.proxy()では、「'{key1}={value1}&{key2}={value2}&・・・'」といったように「&」で必要数連結してください。

curlコマンドでは{value}部分をURLエンコード化する「--data-urlencode」といったオプションが使われることがありますが、これに対応するためにはkintone.proxy()では、JavaScript中で「encodeURIComponent({value})」を経由させておくと良いです。

(出典:「kintoneマッシュアップのための豆知識(curlコマンドとkintone.proxy()の対応)」)

Page 39: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

curlコマンドとkintone.proxy()の対応関係

39

(5)リクエストデータ(JSON形式)

curlコマンドで「-d」のオプションはJSON形式のデータにも対応しています。ただ、先ほどのフォーム形式と異なり、対応するContent-Typeである「application/json」はcurlコマンドでも「-H」によって明示されることになります。一方、kintone.proxy()でもこれをヘッダに追加しておく必要があります

curlコマンドでは「JSON文字列」でしか指定のしようがありませんが、kintone.proxy()では、「JSON文字列」でも「JSONオブジェクト」でも大丈夫です。

(6)Basic認証

curlコマンドで「-u」のオプションはBasic認証に用いられています。これをkintone.proxy()で対応させるには、ヘッダの方に「"Authorization":"Basic {BasicToken}"」といった具合に追加してあげることで解決されます。なお、「{BasicToken}」は「{id}:{password}」をBASE64エンコードしたものとなります。

他に、URL部分に連結して「{id}:{password}@URL」と書く方法もあります。

(出典:「kintoneマッシュアップのための豆知識(curlコマンドとkintone.proxy()の対応)」)

Page 40: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

ハンズオン

Page 41: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

サンプルダウンロード

41

①「https://github.com/joyzo/kintone-Cafe-Tokyo-4」にアクセス

②「Download ZIP」をクリックして、 ファイル一式をダウンロード

Page 42: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

サンプルリポジトリ

42

スライドP54で利用

スライドP85で利用スライドP96で利用スライドP82で利用

スライドP101で利用※スライド内リンクはPDFダウンロード時に有効になります

(「https://github.com/joyzo/kintone-Cafe-Tokyo-4」内) ※サンプルは各種パラメータを ご自身の環境に合わせてお試しください

Page 43: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

【参考】kintoneのアプリテンプレート読込

43

①右上の歯車マークから「kintoneシステム管理」を

クリック

②「アプリテンプレート」をクリック

③「読み込む」をクリック

④テンプレートのZIPファイルを選択肢て「読み込む」をクリック

⑤テンプレートの読込完了

Page 44: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

【参考】テンプレートからのアプリ作成

44

①アプリ作成の「+」をクリック

②「テンプレートから選ぶ」をクリック

③「アプリを作成する」をクリック④今回1つのアプリが追加される

Page 45: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

ハンズオンにおける作業の流れ

45

モチベーション/シナリオ テクニカルな構成

対象のお客さんが kintoneを 契約してくれそうかを 予測する!

1. 契約実績(目的変数)と顧客情報や属性(説明変数)が入力されたレコード一覧をkintoneアプリからダウンロード

2. 1.でダウンロードしたデータから機械学習の予測モデルを作成(S3/ML)

3. 対象顧客に対するリアルタイム予測が出来るAPIを作成する(API Gateway/Lambda/ML)

4. kintoneに登録した対象顧客のレコード情報をもとに3.のAPIをコールする(kintone.proxy)

Page 46: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

機械学習のモデル作成の ためのデータ準備

Page 47: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

機械学習のモデル作成のためのデータダウンロード方法

47

①「機械学習モデル作成用」の一覧を選択

②「ファイルに書き出す」をクリック

③「書き出す」をクリック

※今回はサンプル中に「kintone.csv」としてダウンロード済みですので、ハンズオン手順としては不要です

Page 48: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

「機械学習モデル作成用」一覧の内容

48

「y」が目的変数 「y」以外が説明変数

「機械学習モデル作成用」の一覧では契約実績フィールドである「y」が入力済みのレコードを絞り込み、予測値フィールドである「y_est」を非表示の設定

※ロジスティック回帰を意図

Page 49: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

AWSの設定

Page 50: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

S3・バケットの設定と データアップロード

MLのモデル作成用 ファイルをアップ

Page 51: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

S3・バケットの設定とデータアップロード

51

①「S3」をクリック

※今回は「バージニア北部(us-east-1)」

Page 52: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

S3・バケットの設定とデータアップロード(続き)

52

②「バケットの作成」をクリック

③「バケット名」を入力

④「リージョン」は今回そのまま

⑤「作成」をクリック

Page 53: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

S3・バケットの設定とデータアップロード(続き)

53

⑥新しくバケットが作成されるので、クリックして中身を見る(今は空)

Page 54: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

S3・バケットの設定とデータアップロード(続き)

54

⑦「アップロード」をクリック

⑨「アップデートの開始」をクリック

⑧対象ファイルをドラッグアンドドロップ (今回は学習用ファイルの「kintone.csv」)

Page 55: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

S3・バケットの設定とデータアップロード(続き)

55

⑩新しくファイルがアップロード

Page 56: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

Machine Learningの設定・S3のデータでデータソース作成 ・データソースからモデル作成 ・モデルでリアルタイム予測の設定

Page 57: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

Machine Learning(ML)の設定

57

①「Machine Learning」をクリック

※今回は「バージニア北部(us-east-1)」

Page 58: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

MLの設定(Datasourceの作成)

58

②「Get started」をクリック

Page 59: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

MLの設定(Datasourceの作成:続き)

59

③「View Dashboard」をクリック ※今回はDashboardで個別に設定

Page 60: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

MLの設定(Datasourceの作成:続き)

60

④「Create new...」から「Datasource」をクリック

Page 61: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

MLの設定(Datasourceの作成:続き)

61

⑤元データ(CSV)の所在である「S3」をチェック

⑥「S3 location」は元データを入力・選択

⑦「Datasource name」はデータセット等の名前を記入

⑧「Verify」をクリック

Page 62: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

MLの設定(Datasourceの作成:続き)

62

⑨MLからS3へのアクセスを許可するために「Yes」をクリック

⑩バリデーションが完了したら、「Continue」をクリック

Page 63: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

MLの設定(Datasourceの作成:続き)

63

⑫今回のデータセットでは「Data type」の変更は不要なため、「Continue」をクリック

⑪今回のデータセット(CSV)の先頭行は項目名のため、「Yes」にチェック

Page 64: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

MLの設定(Datasourceの作成:続き)

64

⑬目的変数を設定するため、「Yes」にチェック

⑮「Continue」をクリック

⑭「Data type」が「Binary(契約するかしないか)」の「y」を選択⑭「Data type」が「Binary(契約するかしないか)」の「y」を選択

Page 65: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

MLの設定(Datasourceの作成:続き)

65

⑯今回「Row ID.」は利用しないため、「No」にチェック

⑰「Review」をクリック

Page 66: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

MLの設定(Datasourceの作成:続き)

66

⑱「Finish」をクリック

Page 67: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

MLの設定(ML Modelの作成)

67

⑲「Status」が「Completed」になったことを確認

⑳「Use this datasource to」から「Create (train) an ML model」を選択

Page 68: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

MLの設定(ML Modelの作成:続き)

68

㉑「Review」をクリック

Page 69: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

MLの設定(ML Modelの作成:続き)

69

㉒「Finish」をクリック

Page 70: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

MLの設定(Real-time predictionの作成)

70

㉔「Status」が「Completed」になったことを確認

㉕「Create real-time endpoint」をクリック

㉓MLModelIdはLambdaからのキックで利用するためメモ

Page 71: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

MLの設定(Real-time predictionの作成:続き)

71

㉖リアルタイム予測を有効化するために「Create」をクリック

㉗「Real-time endpoint」が「Ready」になったことを確認

Page 72: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

Lambda・イベントを設定

API Gatewayからのアクセスによるイベントをトリガーにリアルタイム予測値を返すLambda関数の設定

Page 73: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

Lambda・イベントの設定(前準備:IAMの設定)

73

①「Identity & Access Management」をクリック

※今回は「バージニア北部(us-east-1)」

Page 74: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

Lambda・イベントの設定(前準備:IAMの設定)

74

①「新しいロールの作成」をクリック

Page 75: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

Lambda・イベントの設定(前準備:IAMの設定)

75

②「ロール名」を入力

③「次のステップ」をクリック

Page 76: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

Lambda・イベントの設定(前準備:IAMの設定)

76

④「AWS Lambda」を選択

Page 77: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

Lambda・イベントの設定(前準備:IAMの設定)

77

⑤LambdaからMachine Learningへのアクセスは「AmazonMachineLearningFullAccess」を選択

⑥「次のステップ」をクリック

Page 78: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

Lambda・イベントの設定(前準備:IAMの設定)

78

⑦「ロールの作成」をクリック

Page 79: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

Lambda・イベントの設定

79

⑧「Lambda」をクリック

※今回は「バージニア北部(us-east-1)」

Page 80: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

Lambda・イベントの設定(続き)

80

⑨「Get Started Now」をクリック

Page 81: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

Lambda・イベントの設定(続き)

81

⑩今回は「Skip」して設定

Page 82: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

Lambda・イベントの設定(続き)

82

⑬「Code entry type」は「Edit code inline」を選択

⑪「Name」に関数名を記入

⑫「Runtime」は「Node.js」を選択

⑭サンプルの「index.js」を貼付け

⑮「Handler」はデフォルト

⑯「Role」は先程設定したロールを選択

⑰「Memory」を512、「Timeout」を10で設定⑱「Next」をクリック

Page 83: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

Lambda・イベントの設定(続き)

83

⑲「Create function」をクリック

Page 84: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

Lambda・イベントの設定(続き)

84

⑳Lambda関数が作成される

㉑ML作成時にメモした「MLModelId」に書き換え

Page 85: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

Lambda・イベントの設定(続き)

85

㉒「Actions」から「Configure sample event」を選択

㉓サンプルの「sample_event.json」を貼付け

㉔「Submit」をクリックしてテスト実行

Page 86: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

Lambda・イベントの設定(続き)

86

㉔テスト実行が成功すると「Execution result」が「succeeded」になり、リアルタイム予測の結果が出力される

Page 87: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

Lambda関数の部分解説

87

Lambda関数(index.js)の部分解説

AWS-SDKの読込やMLModelId(定数)の宣言

MLModelIdからMLModelの情報を取得

API GatewayからのGETにおけるクエリ情報を取得

リアルタイム予測するためのパラメータをセット

リアルタイム予測の実行

Page 88: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

API Gatewayを設定

MLに紐付くLambda関数をキックするAPIを作成(MLリアルタイム予測を実行するAPI)

Page 89: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

API Gatewayの設定

89

①「API Gateway」をクリック

※今回は「バージニア北部(us-east-1)」

Page 90: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

API Gatewayの設定(続き)

90

②「Get started」をクリック

Page 91: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

API Gatewayの設定(続き)

91

③「Create API」をクリック

②「API name」にAPI名を記入

Page 92: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

API Gatewayの設定(続き)

92

④「Create Resource」をクリック

⑤「Resource Name」を入力

⑥「Create Resource」をクリック

Page 93: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

API Gatewayの設定(続き)

93

⑦「Create Method」をクリック

⑧「GET」を選択してチェックマークをクリック

Page 94: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

API Gatewayの設定(続き)

94

⑨「Integration type」は「Lambda Function」にチェック

⑩「Lambda Region」と「Lambda Function」を先程の設定に合わせる

⑪「Save」をクリック

    

⑫API GatewayからLambdaにアクセスできるように「OK」をクリック

Page 95: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

API Gatewayの設定(続き)

95

⑬「Integration Request」をクリック ※今回はGETのqueryだけの粗設定

クライアント API Gatewayで作成した メソッドのリクエスト/レスポンス

インテグレーション先への リクエスト/レスポンス

インテグレーション先 (今回はLambda)

Page 96: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

API Gatewayの設定(続き)

96

⑭「Mapping Templates」を展開後、 「Add mapping template」から「Content-Type」に「application/json」を追加

    

⑮「Input passthrough」右の鉛筆マーククリック後「Mapping template」を選択

⑯サンプルの「mapping_template.json」を貼付けて、「Mapping template」右のチェックマークをクリック

Page 97: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

API Gatewayの設定(続き)

97

⑰「Deploy API」をクリック

    

⑱「Deployment stage」で「New Stage」を選択して、「Stage name」を「prod」等入力する

⑲「Deploy」をクリック

Page 98: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

API Gatewayの設定(続き)

98

⑳設定したステージのAPIがデプロイされ、リクエストURLが発行される

    

㉑クリックして、デプロイしたAPIを展開

㉒設定した「GET」メソッドをクリック

㉓リソース込みのリクエストURLをメモし、確認のためにクリック

㉔GETメソッドの返りが表示される

Page 99: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

API Gatewayの設定(続き:今回のMapping Templateについて)

99

• リクエストパラメータの取得

• POST/PUTは$input.json('$')

• GETは$input.params().querystring

• パスやヘッダの値も取得可

• 詳細は「Mapping Template Reference」を確認

Lambdaのeventへ渡るパラメータの設定

Page 100: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

kintoneアプリのカスタマイズ作成したリアルタイム予測値を得るAPIをkintone.proxy()からコールし、kintoneレコードを更新

Page 101: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

kintone-JSカスタマイズの概要

101

• リアルタイム予測値を求めるAPIをコールする(kintone-subscription.js)

• 予測したい対象顧客のレコード(属性)情報をクエリにのせてGETリクエスト

• 返り値をレコードにセット(更新)

• 実績値が入力済みの場合には予測は不要

• 予測ボタンは非表示

Page 102: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

kintone-JSカスタマイズの部分解説

102

依存ライブラリ

定数の設定

依存ライブラリは別途読込

API Gatewayで作ったURL

APIキーの設定(今回スキップ)

説明変数のkey

Page 103: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

kintone-JSカスタマイズの部分解説

103

リクエストURLの作成クエリ込みのリクエストURLを作成

Page 104: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

kintone-JSカスタマイズの部分解説

104

外部APIへのリクエストkintone.proxy()でGETメソッドをコール

予測値を取得

予測値をレコードにセット(PUTで更新)

結果の表示

Page 105: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

kintone-JSカスタマイズの適用

105

今回のカスタマイズはサンプルファイル中のLAMBDA_URLの修正後カスタマイズファイルを差し替えることで動作します。

①「・・・」マークから 「アプリの設定」をクリック

②「詳細設定」を展開し「JavaScript/CSSで

カスタマイズ」をクリック

③カスタマイズファイル差し替え後「保存」をクリック

④「設定完了」をクリック⑤「OK」をクリック

Page 106: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

リアルタイム予測を試す

Page 107: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

【取組み内容確認】ハンズオンにおける作業の流れ

107

モチベーション/シナリオ テクニカルな構成

対象のお客さんが kintoneを 契約してくれそうかを 予測する!

1. 契約実績(目的変数)と顧客情報や属性(説明変数)が入力されたレコード一覧をkintoneアプリからダウンロード

2. 1.でダウンロードしたデータから機械学習の予測モデルを作成(S3/ML)

3. 対象顧客に対するリアルタイム予測が出来るAPIを作成する(API Gateway/Lambda/ML)

4. kintoneに登録した対象顧客のレコード情報をもとに3.のAPIをコールする(kintone.proxy)

Page 108: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

リアルタイム予測の実行

108

③リアルタイム予測の結果を表示して、予測値をセット

①対象顧客の情報を入力

②「リアルタイム予測」をクリック

Page 109: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

ハンズオンは以上です

Page 110: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

所感

110

• 今回、kintone-JSからAPI Gatewayへのリクエストをkintone.proxy()で行ったが、CORS設定できるので$.ajax等からのリクエストでも大丈夫そう

• kintone.proxy()でのリクエストは基本テキストベースで、multipart/form-data形式等の対応は現状ないため、API Gateway/Lambdaで添付ファイルの取扱い等を補うのも良さそう

Page 111: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)

参考情報

111

• 開発コミュニティサイト「cybozu.com developer network」[https://cybozudev.zendesk.com/hc/ja]

• コミュニティ(質問等)、リファレンス、Tips、サンプル、開発者ライセンス申込

• 「kintone API」[https://cybozudev.zendesk.com/hc/ja/categories/200147600]

• kintone APIのリファレンス(cybozu.com dev. nw.内)

• 「アプリ作成と設定の変更」[https://cybozudev.zendesk.com/hc/ja/articles/204693590]

• kintoneアプリ作成系APIリファレンス(cybozu.com dev. nw.内)

Page 112: kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)