またまたkintoneとAWSを
連携してみよう!
-お客さんがkintoneを契約してくれるかを過去データから予測する-
kintone Café 東京 Vol.4
#kintonecafe
Twitter: @yamaryu0508
FB:...
• kintoneの概要
• kintoneのカスタマイズ機能
• AWSの概要
• kintoneとAWS
• kintone JavaScript API
• kintone.proxy()
• サンプルダウンロード
• 機械学習のモデル作...
自己紹介
3
2013.3
IOTとグループウェア(デヂエ)の連携を試みてkintone に出会う
2014.4 -
kintoneエバンジェリストに
2014.11
kintone好きが高じて、界隈初のkintone転職
2015.2
kin...
kintone界隈のIoTの人
4
「2015/5/22 kintone hive 開催報告」より
今日はこれやめて
おきます
福岡を離れ、SIerへの道に転向
してもうすぐ1年になります
電柱を登るのを
やめて?
• 会社名   株式会社ジョイゾー
• 所在地   東京都江東区東陽3­5­5ラウクティビルディング3F
• 設立年月日 2010年12月20日
• 社員数   7名(kinotneエバンジェリスト2名)
• 主な事業  kintone導入支援...
ジョイゾーの所在地
7
kintoneを基盤としたシステム開発サービス「システム39」
8
定額39万円
初回作業無料
来店型
kintoneアプリデプロイツール「SANZO」
9
Beta版試用申込、受付中 → https://www.joyzo.co.jp/sanzo/
kintoneの概要
まずはおさらい
kintoneとは?(ざっくり)
11
• コンセプト
•「ファストシステム」
•「3分で業務改善アプリ」
• 構成要素
•データ
• プロセス管理(ワークフロー)
•コミュニケーション
(出典:「kintone公式サイト」)
「サイボウズプロ...
•初期費用無料
•申込3分後には利用可能
•月単位の利用(年縛りなし)
•アップデートサイクルの短期化
(最近は2ヶ月くらい)
•30日間の無料お試し
•1年間の無償開発ライセンス
kintoneとは?(ざっくり:続き)
12
目的(業務or開...
kintoneのカスタマイズ機能
kintoneカスタマイズ機能
14
• REST API
• レコードやスペースの操作(登録・更新・削除等)、
バルクAPI、アプリ作成、ワークフロー操作
• ユーザ・組織の操作
• JavaScript/CSSカスタマイズ
• 各種イベント...
kintone3大要素とREST API
15
データベース プロセス管理 コミュニケーション
充実 弱い
APIからの操作も3大要素をバランスよく活用することが重要!
API操作で3大機能同士を密に結合できるようになると、更に便利になると期待...
kintone3大要素とREST API(ポータル画面)
16
スペースの
作成・メンバー更新等
アプリの作成・更新
(欲しい)
(参考:「cybozu.com developer network > kintone API」)
kintone3大要素とREST API(詳細画面)
17
レコードの
取得・登録・更新・削除
添付ファイルの
アップロード・ダウンロード
レコードの
ステータス変更
(欲しい)
(参考:「cybozu.com developer networ...
AWSの概要
こっちもおさらい
• 低価格
• 40回を超える価格改定は全て値下げ
• 豊富なサービス
• 40を超えるアプリ・プラットフォーム
サービス
• APIフルマネージ
Amazon Web Services
19
kintoneとAWS
ナイスな相性だと
言われています!
kintoneとAWS
21
• アプリケーション寄りPaaS(SaaS)
• クライアントサイド/フロントエンド
(UI/UX)
• 行動的/解釈の共有でアクションを起こし、
コミュニケーションで業務を回す
• インフラ寄りPaas(IaaS...
IoTで考える結合・補完イメージ
22
・農業(圃場)
・見守り
・建設・工事現場
・工場設備
・エネルギー設備
現場
センサー
・温度
・湿度
・照度
・加速度
・騒音
センサー
クラウド kintone
・通知
・ワークフロー
・スレッド
...
王道っぽいAWSとkintoneの連携パターン
23
Amazon DynamoDB
Stream
Amazon SNS
Amazon S3
Amazon Kinesis
AWS Lambda
Amazon EC2
Lambda
イベントソース...
Amazon S3
Today s Café Menu
24
Amazon DynamoDB
Stream
Amazon SNS
Amazon Kinesis
Amazon EC2
Lambda
イベントソース
・レコード操作
・ワークフロー操...
今回フォーカスする
AWSのサービス
• EC2に作り込みしなくても容易
にAPIが作れる
• エンドポイントの完全公開や
APIキー等アクセス・認証レベ
ルを柔軟に設定できる
• CORS設定に対応
• APIのバージョン管理ができる
Amazon API Gateway
26
...
API Gatewayによるkintoneラッピング
27
kintoneのデータをAPIで公開
Webhookからのkintoneアクセス
RESTfull
Service
kintoneに蓄積されたデータを
AWS経由でAPIによる公開
W...
• 3種類の予測モデル
• 二項(ロジスティック回帰)
• 多クラス分類(多項ロロジスティック回帰)
• 回帰分析(線形回帰)
• 予測の実行
• バッチ(複数データをまとめて予測)
• リアルタイム(API経由で1件ずつ予測)
Amazon ...
ハンズオン
(予備知識)
ハンズオンシナリオ
30
マーケや営業で施策打ったけど・・・
このお客さん、kintone契約
してもらえそうかなぁ?
kintoneの過去の契約情報から
可能性見てみますか!?
対象の顧客情報や条件を
入力すると・・・
契約してくれそう^^※...
Today s Café Menu
31
AWS
Lambda
kintone
on cybozu.com
①kintoneデータで
予測モデル作成
Amazon
API Gateway
Amazon
Machine Learning
②kin...
• kintone
• JavaScriptから外部APIをコールするkintone.proxy()の利用方法
• AWS
• API Gatewayの設定方法
• Mapping Templateの設定(Lambda関数との協調)
• Mac...
kintone JavaScript API
(参考:「cybozu.com developer network > kintone API」)
kintone.proxy()で
JavaScriptから外部APIにアクセス
(参考:「cybozu.com developer network > kintone API」)
kintone.proxy()におけるPOST/PUTのポイント
35
項目 フォーム形式データ JSON形式データ
リクエストヘッダ
(MIMEタイプ)
'Content-Type' : 'application/x-www-form-
ur...
curlコマンドとkintone.proxy()の対応関係
36
(出典:「kintoneマッシュアップのための豆知識(curlコマンドとkintone.proxy()の対応)」)
curlコマンドとkintone.proxy()の対応関係
37
(1)リクエスト URL
curlコマンドでは正味の引数になりますので、コマンドオプションはありません。
(2)リクエストメソッド
GET、POST、PUT、DELETEのいずれ...
curlコマンドとkintone.proxy()の対応関係
38
(4)リクエストデータ(フォーム形式)
curlコマンドで「-d」のオプションでは通常フォーム形式データを言っており、対応する
Content-Typeは「application...
curlコマンドとkintone.proxy()の対応関係
39
(5)リクエストデータ(JSON形式)
curlコマンドで「-d」のオプションはJSON形式のデータにも対応しています。ただ、先ほどのフォー
ム形式と異なり、対応するConten...
ハンズオン
サンプルダウンロード
41
①「https://github.com/joyzo/
kintone-Cafe-Tokyo-4」にアクセス
②「Download ZIP」をクリックして、
ファイル一式をダウンロード
サンプルリポジトリ
42
スライドP54で利用
スライドP85で利用
スライドP96で利用
スライドP82で利用
スライドP101で利用
※スライド内リンクはPDFダウンロード時に有効になります
(「https://github.com/joy...
【参考】kintoneのアプリテンプレート読込
43
①右上の歯車マークから
「kintoneシステム管理」を
クリック
②「アプリテンプレート」
をクリック
③「読み込む」
をクリック
④テンプレートのZIPファイルを
選択肢て「読み込む」を...
【参考】テンプレートからのアプリ作成
44
①アプリ作成の「+」をクリック
②「テンプレートから
選ぶ」をクリック
③「アプリを作成する」をクリック
④今回1つのアプリが追加される
ハンズオンにおける作業の流れ
45
モチベーション/シナリオ テクニカルな構成
対象のお客さんが
kintoneを
契約してくれそうかを
予測する!
1. 契約実績(目的変数)と顧客情報や属性(説明変数)が入力されたレコード一覧をkintone...
機械学習のモデル作成の
ためのデータ準備
機械学習のモデル作成のためのデータダウンロード方法
47
①「機械学習モデル作成用」の一覧を選択
②「ファイルに書き出す」をクリック
③「書き出す」をクリック
※今回はサンプル中に「kintone.csv」としてダウンロード済みですので、ハンズ...
「機械学習モデル作成用」一覧の内容
48
「y」が目的変数 「y」以外が説明変数
「機械学習モデル作成用」の一覧では契約実績フィールドである「y」が入力済み
のレコードを絞り込み、予測値フィールドである「y_est」を非表示の設定
※ロジスティ...
AWSの設定
S3・バケットの設定と
データアップロード
MLのモデル作成用
ファイルをアップ
S3・バケットの設定とデータアップロード
51
①「S3」をクリック
※今回は「バージニア北部(us-east-1)」
S3・バケットの設定とデータアップロード(続き)
52
②「バケットの作成」をクリック
③「バケット名」を入力
④「リージョン」は今回
そのまま
⑤「作成」をクリック
S3・バケットの設定とデータアップロード(続き)
53
⑥新しくバケットが作成されるので、
クリックして中身を見る(今は空)
S3・バケットの設定とデータアップロード(続き)
54
⑦「アップロード」をクリック
⑨「アップデートの開始」をクリック
⑧対象ファイルをドラッグアンドドロップ
(今回は学習用ファイルの「kintone.csv」)
S3・バケットの設定とデータアップロード(続き)
55
⑩新しくファイルがアップロード
Machine Learningの設定
・S3のデータでデータソース作成
・データソースからモデル作成
・モデルでリアルタイム予測の設定
Machine Learning(ML)の設定
57
①「Machine Learning」をクリック
※今回は「バージニア北部(us-east-1)」
MLの設定(Datasourceの作成)
58
②「Get started」をクリック
MLの設定(Datasourceの作成:続き)
59
③「View Dashboard」をクリック
※今回はDashboardで個別に設定
MLの設定(Datasourceの作成:続き)
60
④「Create new...」から
「Datasource」をクリック
MLの設定(Datasourceの作成:続き)
61
⑤元データ(CSV)の所在で
ある「S3」をチェック
⑥「S3 location」は
元データを入力・選択
⑦「Datasource name」は
データセット等の名前を記入
⑧「Verif...
MLの設定(Datasourceの作成:続き)
62
⑨MLからS3へのアクセスを許可する
ために「Yes」をクリック
⑩バリデーションが完了したら、
「Continue」をクリック
MLの設定(Datasourceの作成:続き)
63
⑫今回のデータセットでは「Data type」の変更は
不要なため、「Continue」をクリック
⑪今回のデータセット(CSV)の先頭行は
項目名のため、「Yes」にチェック
MLの設定(Datasourceの作成:続き)
64
⑬目的変数を設定するため、
「Yes」にチェック
⑮「Continue」をクリック
⑭「Data type」が「Binary(契約
するかしないか)」の「y」を選択
⑭「Data type」...
MLの設定(Datasourceの作成:続き)
65
⑯今回「Row ID.」は利用しない
ため、「No」にチェック
⑰「Review」をクリック
MLの設定(Datasourceの作成:続き)
66
⑱「Finish」をクリック
MLの設定(ML Modelの作成)
67
⑲「Status」が「Completed」
になったことを確認
⑳「Use this datasource to」から
「Create (train) an ML model」を選択
MLの設定(ML Modelの作成:続き)
68
「Review」をクリック
MLの設定(ML Modelの作成:続き)
69
「Finish」をクリック
MLの設定(Real-time predictionの作成)
70
「Status」が「Completed」
になったことを確認
「Create real-time
endpoint」をクリック
MLModelIdはLambdaからの
キックで...
MLの設定(Real-time predictionの作成:続き)
71
リアルタイム予測を有効化する
ために「Create」をクリック
「Real-time endpoint」が
「Ready」になったことを確認
Lambda・イベントを設定
API Gatewayからのアクセスによるイベントをトリガーに
リアルタイム予測値を返すLambda関数の設定
Lambda・イベントの設定(前準備:IAMの設定)
73
①「Identity & Access Management」
をクリック
※今回は「バージニア北部(us-east-1)」
Lambda・イベントの設定(前準備:IAMの設定)
74
①「新しいロールの作成」をクリック
Lambda・イベントの設定(前準備:IAMの設定)
75
②「ロール名」を入力
③「次のステップ」をクリック
Lambda・イベントの設定(前準備:IAMの設定)
76
④「AWS Lambda」を選択
Lambda・イベントの設定(前準備:IAMの設定)
77
⑤LambdaからMachine Learningへのアクセスは
「AmazonMachineLearningFullAccess」を選択
⑥「次のステップ」をクリック
Lambda・イベントの設定(前準備:IAMの設定)
78
⑦「ロールの作成」をクリック
Lambda・イベントの設定
79
⑧「Lambda」をクリック
※今回は「バージニア北部(us-east-1)」
Lambda・イベントの設定(続き)
80
⑨「Get Started Now」をクリック
Lambda・イベントの設定(続き)
81
⑩今回は「Skip」して設定
Lambda・イベントの設定(続き)
82
⑬「Code entry type」は
「Edit code inline」を選択
⑪「Name」に関数名を記入
⑫「Runtime」は「Node.js」を選択
⑭サンプルの「index.js」を貼付...
Lambda・イベントの設定(続き)
83
⑲「Create function」をクリック
Lambda・イベントの設定(続き)
84
⑳Lambda関数が作成される
ML作成時にメモした「MLModelId」に書き換え
Lambda・イベントの設定(続き)
85
「Actions」から「Configure
sample event」を選択
サンプルの「sample_event.json」を貼付け
「Submit」をクリックしてテスト実行
Lambda・イベントの設定(続き)
86
テスト実行が成功すると「Execution result」が
「succeeded」になり、リアルタイム予測の結果が出力される
Lambda関数の部分解説
87
Lambda関数(index.js)の部分解説
AWS-SDKの読込やMLModelId(定数)の宣言
MLModelIdからMLModelの情報を取得
API GatewayからのGETにおけるクエリ情報を取...
API Gatewayを設定
MLに紐付くLambda関数をキックするAPIを作成(MLリ
アルタイム予測を実行するAPI)
API Gatewayの設定
89
①「API Gateway」をクリック
※今回は「バージニア北部(us-east-1)」
API Gatewayの設定(続き)
90
②「Get started」をクリック
API Gatewayの設定(続き)
91
③「Create API」をクリック
②「API name」にAPI名を記入
API Gatewayの設定(続き)
92
④「Create Resource」をクリック
⑤「Resource Name」を入力
⑥「Create Resource」をクリック
API Gatewayの設定(続き)
93
⑦「Create Method」をクリック
⑧「GET」を選択してチェック
マークをクリック
API Gatewayの設定(続き)
94
⑨「Integration type」は
「Lambda Function」にチェック
⑩「Lambda Region」と「Lambda
Function」を先程の設定に合わせる
⑪「Save」をクリ...
API Gatewayの設定(続き)
95
⑬「Integration Request」をクリック
※今回はGETのqueryだけの粗設定
クライアント API Gatewayで作成した
メソッドのリクエスト/レスポンス
インテグレーション先へ...
API Gatewayの設定(続き)
96
⑭「Mapping Templates」を展開後、
「Add mapping template」から「Content-
Type」に「application/json」を追加
    
⑮「Input...
API Gatewayの設定(続き)
97
⑰「Deploy API」をクリック
 
 
 
 
⑱「Deployment stage」で「New Stage」を選択して、
「Stage name」を「prod」等入力する
⑲「Deploy」を...
API Gatewayの設定(続き)
98
⑳設定したステージのAPIがデプロイされ、
リクエストURLが発行される
    
クリックして、デプロイしたAPIを展開
設定した「GET」メソッドをクリック
リソース込みのリクエストURLをメモし...
API Gatewayの設定(続き:今回のMapping Templateについて)
99
• リクエストパラメータの取得
• POST/PUTは$input.json('$')
• GETは$input.params().querystrin...
kintoneアプリのカスタマイズ
作成したリアルタイム予測値を得るAPIをkintone.proxy()
からコールし、kintoneレコードを更新
kintone-JSカスタマイズの概要
101
• リアルタイム予測値を求めるAPIをコールす
る(kintone-subscription.js)
• 予測したい対象顧客のレコード(属性)情
報をクエリにのせてGETリクエスト
• 返り値をレ...
kintone-JSカスタマイズの部分解説
102
依存ライブラリ
定数の設定
依存ライブラリは別途読込
API Gatewayで作ったURL
APIキーの設定(今回スキップ)
説明変数のkey
kintone-JSカスタマイズの部分解説
103
リクエストURLの作成
クエリ込みのリクエストURLを作成
kintone-JSカスタマイズの部分解説
104
外部APIへのリクエスト
kintone.proxy()でGETメソッドをコール
予測値を取得
予測値をレコードにセット(PUTで更新)
結果の表示
kintone-JSカスタマイズの適用
105
今回のカスタマイズはサンプルファイル中のLAMBDA_URLの修正後
カスタマイズファイルを差し替えることで動作します。
①「・・・」マークから
「アプリの設定」をクリック
②「詳細設定」を展開し...
リアルタイム予測を試す
【取組み内容確認】ハンズオンにおける作業の流れ
107
モチベーション/シナリオ テクニカルな構成
対象のお客さんが
kintoneを
契約してくれそうかを
予測する!
1. 契約実績(目的変数)と顧客情報や属性(説明変数)が入力されたレコード...
リアルタイム予測の実行
108
③リアルタイム予測の結果を
表示して、予測値をセット
①対象顧客の情報を入力
②「リアルタイム予測」をクリック
ハンズオンは以上です
所感
110
• 今回、kintone-JSからAPI Gatewayへのリクエストを
kintone.proxy()で行ったが、CORS設定できるので$.ajax等からの
リクエストでも大丈夫そう
• kintone.proxy()でのリクエ...
参考情報
111
• 開発コミュニティサイト「cybozu.com developer network」[https://
cybozudev.zendesk.com/hc/ja]
• コミュニティ(質問等)、リファレンス、Tips、サンプル、...
kintone Café 東京 Vol.4 ハンズオン資料(kintone & AWS API Gateway/Lambda/Machine Learning)
of 112

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

kintone Café 東京 Vol.4のハンズオンパートの資料です。
Published on: Mar 3, 2016
Published in: Software      
Source: www.slideshare.net


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

  • 1. またまたkintoneとAWSを 連携してみよう! -お客さんがkintoneを契約してくれるかを過去データから予測する- kintone Café 東京 Vol.4 #kintonecafe Twitter: @yamaryu0508 FB: https://www.facebook.com/ryu.yamashita.3 2015年9月4日 株式会社ジョイゾー/kintoneエバンジェリスト/ kintone Café 運営事務局・東京支部 山下 竜
  • 2. • kintoneの概要 • kintoneのカスタマイズ機能 • AWSの概要 • kintoneとAWS • kintone JavaScript API • kintone.proxy() • サンプルダウンロード • 機械学習のモデル作成のためのデータ準備 Today s Café Mune 2 • AWSの設定 • S3・バケットの設定 • Machine Learningの設定 • Lambda・イベントの設定 • API Gatewayの設定 • kintoneアプリのカスタマイズ • リアルタイム予測の実行 ※スライド内リンクはPDFダウンロード時に有効になります
  • 3. 自己紹介 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) 福岡県大牟田市出身 「ブルーウェーブ」 という共通点
  • 4. kintone界隈のIoTの人 4 「2015/5/22 kintone hive 開催報告」より 今日はこれやめて おきます
  • 5. 福岡を離れ、SIerへの道に転向 してもうすぐ1年になります 電柱を登るのを やめて?
  • 6. • 会社名   株式会社ジョイゾー • 所在地   東京都江東区東陽3­5­5ラウクティビルディング3F • 設立年月日 2010年12月20日 • 社員数   7名(kinotneエバンジェリスト2名) • 主な事業  kintone導入支援、カスタマイズ開発他 • 主な取引先 カナディアン・ソーラー・ジャパン他 株式会社ジョイゾー 6
  • 7. ジョイゾーの所在地 7
  • 8. kintoneを基盤としたシステム開発サービス「システム39」 8 定額39万円 初回作業無料 来店型
  • 9. kintoneアプリデプロイツール「SANZO」 9 Beta版試用申込、受付中 → https://www.joyzo.co.jp/sanzo/
  • 10. kintoneの概要 まずはおさらい
  • 11. kintoneとは?(ざっくり) 11 • コンセプト •「ファストシステム」 •「3分で業務改善アプリ」 • 構成要素 •データ • プロセス管理(ワークフロー) •コミュニケーション (出典:「kintone公式サイト」) 「サイボウズプロダクト=チームを強くするツール」 の中でも汎用性と専門性を行き来しながら、様々な 業務シーンで活用出来るクラウドデータベース (WebDB)サービス
  • 12. •初期費用無料 •申込3分後には利用可能 •月単位の利用(年縛りなし) •アップデートサイクルの短期化 (最近は2ヶ月くらい) •30日間の無料お試し •1年間の無償開発ライセンス kintoneとは?(ざっくり:続き) 12 目的(業務or開発)に応じて 使い分けてください。
  • 13. kintoneのカスタマイズ機能
  • 14. kintoneカスタマイズ機能 14 • REST API • レコードやスペースの操作(登録・更新・削除等)、 バルクAPI、アプリ作成、ワークフロー操作 • ユーザ・組織の操作 • JavaScript/CSSカスタマイズ • 各種イベントハンドル、情報取得 • プロキシによる外部API連携 • URL指定によるライブラリの読み込み(HTTPS対応) データ レコード スペース ユーザ UI 基幹システム Excel 他のクラウド REST API kintone.proxy
  • 15. kintone3大要素とREST API 15 データベース プロセス管理 コミュニケーション 充実 弱い APIからの操作も3大要素をバランスよく活用することが重要! API操作で3大機能同士を密に結合できるようになると、更に便利になると期待しています! 一部実装
  • 16. kintone3大要素とREST API(ポータル画面) 16 スペースの 作成・メンバー更新等 アプリの作成・更新 (欲しい) (参考:「cybozu.com developer network > kintone API」)
  • 17. kintone3大要素とREST API(詳細画面) 17 レコードの 取得・登録・更新・削除 添付ファイルの アップロード・ダウンロード レコードの ステータス変更 (欲しい) (参考:「cybozu.com developer network > kintone API」)
  • 18. AWSの概要 こっちもおさらい
  • 19. • 低価格 • 40回を超える価格改定は全て値下げ • 豊富なサービス • 40を超えるアプリ・プラットフォーム サービス • APIフルマネージ Amazon Web Services 19
  • 20. kintoneとAWS ナイスな相性だと 言われています!
  • 21. kintoneとAWS 21 • アプリケーション寄りPaaS(SaaS) • クライアントサイド/フロントエンド (UI/UX) • 行動的/解釈の共有でアクションを起こし、 コミュニケーションで業務を回す • インフラ寄りPaas(IaaS、BaaS) • サーバーサイド/バックエンド    (コマンド) • 思考的/データを捌き事象を解釈する APIで 結合・補完
  • 22. IoTで考える結合・補完イメージ 22 ・農業(圃場) ・見守り ・建設・工事現場 ・工場設備 ・エネルギー設備 現場 センサー ・温度 ・湿度 ・照度 ・加速度 ・騒音 センサー クラウド kintone ・通知 ・ワークフロー ・スレッド ・カスタマイズビュー 事象・データが発生する データを捌き、 事象を解釈する 解釈の共有でアクションを 起こし、コミュニケーショ ンで業務を回す
  • 23. 王道っぽいAWSとkintoneの連携パターン 23 Amazon DynamoDB Stream Amazon SNS Amazon S3 Amazon Kinesis AWS Lambda Amazon EC2 Lambda イベントソース REST API kintone on cybozu.com ・レコード操作 ・ワークフロー操作 ・スペース操作 ・アプリ操作 REST API kintone.proxy() & Amazon API Gateway 経由は良さそう・・・ R EST A PI プリミティブな連携 ・ホスティング ・バッチ処理
  • 24. Amazon S3 Today s Café Menu 24 Amazon DynamoDB Stream Amazon SNS Amazon Kinesis Amazon EC2 Lambda イベントソース ・レコード操作 ・ワークフロー操作 ・スペース操作 ・アプリ操作 R EST A PI プリミティブな連携 ・ホスティング ・バッチ処理 AWS Lambda REST API kintone on cybozu.com kintone.proxy() & Amazon API Gateway 経由は良さそう・・・ REST API ・レコード操作 REST API Amazon Machine Learning REST API
  • 25. 今回フォーカスする AWSのサービス
  • 26. • EC2に作り込みしなくても容易 にAPIが作れる • エンドポイントの完全公開や APIキー等アクセス・認証レベ ルを柔軟に設定できる • CORS設定に対応 • APIのバージョン管理ができる Amazon API Gateway 26 エコシステム形成・システム間連携を可能にするAPIそのもの を容易に作れるので、エコシステム形成の敷居が更に下がる!
  • 27. 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
  • 28. • 3種類の予測モデル • 二項(ロジスティック回帰) • 多クラス分類(多項ロロジスティック回帰) • 回帰分析(線形回帰) • 予測の実行 • バッチ(複数データをまとめて予測) • リアルタイム(API経由で1件ずつ予測) Amazon Machine Learning 28 S3やRedshiftのデータを利用して、モデル作成・予測 が容易に実行できるので、機械学習の敷居が下がる!
  • 29. ハンズオン (予備知識)
  • 30. ハンズオンシナリオ 30 マーケや営業で施策打ったけど・・・ このお客さん、kintone契約 してもらえそうかなぁ? kintoneの過去の契約情報から 可能性見てみますか!? 対象の顧客情報や条件を 入力すると・・・ 契約してくれそう^^※シナリオですので、人物や内容は架空のものです
  • 31. 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()
  • 32. • kintone • JavaScriptから外部APIをコールするkintone.proxy()の利用方法 • AWS • API Gatewayの設定方法 • Mapping Templateの設定(Lambda関数との協調) • Machine Learningの設定方法 • datasource、ML model、predictionの作成・設定の方法と流れ • LambdaからのMLリアルタイム予測実行方法 • API Gatewayからのeventパラメータの受取(Lambda関数との協調) 今回のハンズオンに必要とされるスキルセット(目標・成果物) 32
  • 33. kintone JavaScript API (参考:「cybozu.com developer network > kintone API」)
  • 34. kintone.proxy()で JavaScriptから外部APIにアクセス (参考:「cybozu.com developer network > kintone API」)
  • 35. 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
  • 36. curlコマンドとkintone.proxy()の対応関係 36 (出典:「kintoneマッシュアップのための豆知識(curlコマンドとkintone.proxy()の対応)」)
  • 37. 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()の対応)」)
  • 38. 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()の対応)」)
  • 39. 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()の対応)」)
  • 40. ハンズオン
  • 41. サンプルダウンロード 41 ①「https://github.com/joyzo/ kintone-Cafe-Tokyo-4」にアクセス ②「Download ZIP」をクリックして、 ファイル一式をダウンロード
  • 42. サンプルリポジトリ 42 スライドP54で利用 スライドP85で利用 スライドP96で利用 スライドP82で利用 スライドP101で利用 ※スライド内リンクはPDFダウンロード時に有効になります (「https://github.com/joyzo/kintone-Cafe-Tokyo-4」内) ※サンプルは各種パラメータを ご自身の環境に合わせてお試しください
  • 43. 【参考】kintoneのアプリテンプレート読込 43 ①右上の歯車マークから 「kintoneシステム管理」を クリック ②「アプリテンプレート」 をクリック ③「読み込む」 をクリック ④テンプレートのZIPファイルを 選択肢て「読み込む」をクリック ⑤テンプレートの読込完了
  • 44. 【参考】テンプレートからのアプリ作成 44 ①アプリ作成の「+」をクリック ②「テンプレートから 選ぶ」をクリック ③「アプリを作成する」をクリック ④今回1つのアプリが追加される
  • 45. ハンズオンにおける作業の流れ 45 モチベーション/シナリオ テクニカルな構成 対象のお客さんが kintoneを 契約してくれそうかを 予測する! 1. 契約実績(目的変数)と顧客情報や属性(説明変数)が入力されたレコード一覧をkintoneア プリからダウンロード 2. 1.でダウンロードしたデータから機械学習の予測モデルを作成(S3/ML) 3. 対象顧客に対するリアルタイム予測が出来るAPIを作成する(API Gateway/Lambda/ML) 4. kintoneに登録した対象顧客のレコード情報をもとに3.のAPIをコールする(kintone.proxy)
  • 46. 機械学習のモデル作成の ためのデータ準備
  • 47. 機械学習のモデル作成のためのデータダウンロード方法 47 ①「機械学習モデル作成用」の一覧を選択 ②「ファイルに書き出す」をクリック ③「書き出す」をクリック ※今回はサンプル中に「kintone.csv」としてダウンロード済みですので、ハンズオン手順としては不要です
  • 48. 「機械学習モデル作成用」一覧の内容 48 「y」が目的変数 「y」以外が説明変数 「機械学習モデル作成用」の一覧では契約実績フィールドである「y」が入力済み のレコードを絞り込み、予測値フィールドである「y_est」を非表示の設定 ※ロジスティック回帰を意図
  • 49. AWSの設定
  • 50. S3・バケットの設定と データアップロード MLのモデル作成用 ファイルをアップ
  • 51. S3・バケットの設定とデータアップロード 51 ①「S3」をクリック ※今回は「バージニア北部(us-east-1)」
  • 52. S3・バケットの設定とデータアップロード(続き) 52 ②「バケットの作成」をクリック ③「バケット名」を入力 ④「リージョン」は今回 そのまま ⑤「作成」をクリック
  • 53. S3・バケットの設定とデータアップロード(続き) 53 ⑥新しくバケットが作成されるので、 クリックして中身を見る(今は空)
  • 54. S3・バケットの設定とデータアップロード(続き) 54 ⑦「アップロード」をクリック ⑨「アップデートの開始」をクリック ⑧対象ファイルをドラッグアンドドロップ (今回は学習用ファイルの「kintone.csv」)
  • 55. S3・バケットの設定とデータアップロード(続き) 55 ⑩新しくファイルがアップロード
  • 56. Machine Learningの設定 ・S3のデータでデータソース作成 ・データソースからモデル作成 ・モデルでリアルタイム予測の設定
  • 57. Machine Learning(ML)の設定 57 ①「Machine Learning」をクリック ※今回は「バージニア北部(us-east-1)」
  • 58. MLの設定(Datasourceの作成) 58 ②「Get started」をクリック
  • 59. MLの設定(Datasourceの作成:続き) 59 ③「View Dashboard」をクリック ※今回はDashboardで個別に設定
  • 60. MLの設定(Datasourceの作成:続き) 60 ④「Create new...」から 「Datasource」をクリック
  • 61. MLの設定(Datasourceの作成:続き) 61 ⑤元データ(CSV)の所在で ある「S3」をチェック ⑥「S3 location」は 元データを入力・選択 ⑦「Datasource name」は データセット等の名前を記入 ⑧「Verify」をクリック
  • 62. MLの設定(Datasourceの作成:続き) 62 ⑨MLからS3へのアクセスを許可する ために「Yes」をクリック ⑩バリデーションが完了したら、 「Continue」をクリック
  • 63. MLの設定(Datasourceの作成:続き) 63 ⑫今回のデータセットでは「Data type」の変更は 不要なため、「Continue」をクリック ⑪今回のデータセット(CSV)の先頭行は 項目名のため、「Yes」にチェック
  • 64. MLの設定(Datasourceの作成:続き) 64 ⑬目的変数を設定するため、 「Yes」にチェック ⑮「Continue」をクリック ⑭「Data type」が「Binary(契約 するかしないか)」の「y」を選択 ⑭「Data type」が「Binary(契約 するかしないか)」の「y」を選択
  • 65. MLの設定(Datasourceの作成:続き) 65 ⑯今回「Row ID.」は利用しない ため、「No」にチェック ⑰「Review」をクリック
  • 66. MLの設定(Datasourceの作成:続き) 66 ⑱「Finish」をクリック
  • 67. MLの設定(ML Modelの作成) 67 ⑲「Status」が「Completed」 になったことを確認 ⑳「Use this datasource to」から 「Create (train) an ML model」を選択
  • 68. MLの設定(ML Modelの作成:続き) 68 「Review」をクリック
  • 69. MLの設定(ML Modelの作成:続き) 69 「Finish」をクリック
  • 70. MLの設定(Real-time predictionの作成) 70 「Status」が「Completed」 になったことを確認 「Create real-time endpoint」をクリック MLModelIdはLambdaからの キックで利用するためメモ
  • 71. MLの設定(Real-time predictionの作成:続き) 71 リアルタイム予測を有効化する ために「Create」をクリック 「Real-time endpoint」が 「Ready」になったことを確認
  • 72. Lambda・イベントを設定 API Gatewayからのアクセスによるイベントをトリガーに リアルタイム予測値を返すLambda関数の設定
  • 73. Lambda・イベントの設定(前準備:IAMの設定) 73 ①「Identity & Access Management」 をクリック ※今回は「バージニア北部(us-east-1)」
  • 74. Lambda・イベントの設定(前準備:IAMの設定) 74 ①「新しいロールの作成」をクリック
  • 75. Lambda・イベントの設定(前準備:IAMの設定) 75 ②「ロール名」を入力 ③「次のステップ」をクリック
  • 76. Lambda・イベントの設定(前準備:IAMの設定) 76 ④「AWS Lambda」を選択
  • 77. Lambda・イベントの設定(前準備:IAMの設定) 77 ⑤LambdaからMachine Learningへのアクセスは 「AmazonMachineLearningFullAccess」を選択 ⑥「次のステップ」をクリック
  • 78. Lambda・イベントの設定(前準備:IAMの設定) 78 ⑦「ロールの作成」をクリック
  • 79. Lambda・イベントの設定 79 ⑧「Lambda」をクリック ※今回は「バージニア北部(us-east-1)」
  • 80. Lambda・イベントの設定(続き) 80 ⑨「Get Started Now」をクリック
  • 81. Lambda・イベントの設定(続き) 81 ⑩今回は「Skip」して設定
  • 82. Lambda・イベントの設定(続き) 82 ⑬「Code entry type」は 「Edit code inline」を選択 ⑪「Name」に関数名を記入 ⑫「Runtime」は「Node.js」を選択 ⑭サンプルの「index.js」を貼付け ⑮「Handler」はデフォルト ⑯「Role」は先程設定したロールを選択 ⑰「Memory」を512、「Timeout」を10で設定 ⑱「Next」をクリック
  • 83. Lambda・イベントの設定(続き) 83 ⑲「Create function」をクリック
  • 84. Lambda・イベントの設定(続き) 84 ⑳Lambda関数が作成される ML作成時にメモした「MLModelId」に書き換え
  • 85. Lambda・イベントの設定(続き) 85 「Actions」から「Configure sample event」を選択 サンプルの「sample_event.json」を貼付け 「Submit」をクリックしてテスト実行
  • 86. Lambda・イベントの設定(続き) 86 テスト実行が成功すると「Execution result」が 「succeeded」になり、リアルタイム予測の結果が出力される
  • 87. Lambda関数の部分解説 87 Lambda関数(index.js)の部分解説 AWS-SDKの読込やMLModelId(定数)の宣言 MLModelIdからMLModelの情報を取得 API GatewayからのGETにおけるクエリ情報を取得 リアルタイム予測するためのパラメータをセット リアルタイム予測の実行
  • 88. API Gatewayを設定 MLに紐付くLambda関数をキックするAPIを作成(MLリ アルタイム予測を実行するAPI)
  • 89. API Gatewayの設定 89 ①「API Gateway」をクリック ※今回は「バージニア北部(us-east-1)」
  • 90. API Gatewayの設定(続き) 90 ②「Get started」をクリック
  • 91. API Gatewayの設定(続き) 91 ③「Create API」をクリック ②「API name」にAPI名を記入
  • 92. API Gatewayの設定(続き) 92 ④「Create Resource」をクリック ⑤「Resource Name」を入力 ⑥「Create Resource」をクリック
  • 93. API Gatewayの設定(続き) 93 ⑦「Create Method」をクリック ⑧「GET」を選択してチェック マークをクリック
  • 94. API Gatewayの設定(続き) 94 ⑨「Integration type」は 「Lambda Function」にチェック ⑩「Lambda Region」と「Lambda Function」を先程の設定に合わせる ⑪「Save」をクリック         ⑫API GatewayからLambdaにアクセス できるように「OK」をクリック
  • 95. API Gatewayの設定(続き) 95 ⑬「Integration Request」をクリック ※今回はGETのqueryだけの粗設定 クライアント API Gatewayで作成した メソッドのリクエスト/レスポンス インテグレーション先への リクエスト/レスポンス インテグレーション先 (今回はLambda)
  • 96. API Gatewayの設定(続き) 96 ⑭「Mapping Templates」を展開後、 「Add mapping template」から「Content- Type」に「application/json」を追加      ⑮「Input passthrough」右の鉛筆マーク クリック後「Mapping template」を選択 ⑯サンプルの「mapping_template.json」を貼付けて、 「Mapping template」右のチェックマークをクリック
  • 97. API Gatewayの設定(続き) 97 ⑰「Deploy API」をクリック         ⑱「Deployment stage」で「New Stage」を選択して、 「Stage name」を「prod」等入力する ⑲「Deploy」をクリック
  • 98. API Gatewayの設定(続き) 98 ⑳設定したステージのAPIがデプロイされ、 リクエストURLが発行される      クリックして、デプロイしたAPIを展開 設定した「GET」メソッドをクリック リソース込みのリクエストURLをメモし、 確認のためにクリック GETメソッドの返りが表示される
  • 99. API Gatewayの設定(続き:今回のMapping Templateについて) 99 • リクエストパラメータの取得 • POST/PUTは$input.json('$') • GETは$input.params().querystring • パスやヘッダの値も取得可 • 詳細は「Mapping Template Reference」を確認 Lambdaのeventへ渡るパラメータの設定
  • 100. kintoneアプリのカスタマイズ 作成したリアルタイム予測値を得るAPIをkintone.proxy() からコールし、kintoneレコードを更新
  • 101. kintone-JSカスタマイズの概要 101 • リアルタイム予測値を求めるAPIをコールす る(kintone-subscription.js) • 予測したい対象顧客のレコード(属性)情 報をクエリにのせてGETリクエスト • 返り値をレコードにセット(更新) • 実績値が入力済みの場合には予測は不要 • 予測ボタンは非表示
  • 102. kintone-JSカスタマイズの部分解説 102 依存ライブラリ 定数の設定 依存ライブラリは別途読込 API Gatewayで作ったURL APIキーの設定(今回スキップ) 説明変数のkey
  • 103. kintone-JSカスタマイズの部分解説 103 リクエストURLの作成 クエリ込みのリクエストURLを作成
  • 104. kintone-JSカスタマイズの部分解説 104 外部APIへのリクエスト kintone.proxy()でGETメソッドをコール 予測値を取得 予測値をレコードにセット(PUTで更新) 結果の表示
  • 105. kintone-JSカスタマイズの適用 105 今回のカスタマイズはサンプルファイル中のLAMBDA_URLの修正後 カスタマイズファイルを差し替えることで動作します。 ①「・・・」マークから 「アプリの設定」をクリック ②「詳細設定」を展開し 「JavaScript/CSSで カスタマイズ」をクリック ③カスタマイズファイル差し 替え後「保存」をクリック ④「設定完了」をクリック ⑤「OK」をクリック
  • 106. リアルタイム予測を試す
  • 107. 【取組み内容確認】ハンズオンにおける作業の流れ 107 モチベーション/シナリオ テクニカルな構成 対象のお客さんが kintoneを 契約してくれそうかを 予測する! 1. 契約実績(目的変数)と顧客情報や属性(説明変数)が入力されたレコード一覧をkintoneア プリからダウンロード 2. 1.でダウンロードしたデータから機械学習の予測モデルを作成(S3/ML) 3. 対象顧客に対するリアルタイム予測が出来るAPIを作成する(API Gateway/Lambda/ML) 4. kintoneに登録した対象顧客のレコード情報をもとに3.のAPIをコールする(kintone.proxy)
  • 108. リアルタイム予測の実行 108 ③リアルタイム予測の結果を 表示して、予測値をセット ①対象顧客の情報を入力 ②「リアルタイム予測」をクリック
  • 109. ハンズオンは以上です
  • 110. 所感 110 • 今回、kintone-JSからAPI Gatewayへのリクエストを kintone.proxy()で行ったが、CORS設定できるので$.ajax等からの リクエストでも大丈夫そう • kintone.proxy()でのリクエストは基本テキストベースで、multipart/ form-data形式等の対応は現状ないため、API Gateway/Lambdaで 添付ファイルの取扱い等を補うのも良さそう
  • 111. 参考情報 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.内)

Related Documents