AWSを活用したkintone開発
-kintoneとAWS最新のビッグアップデートを学ぼう!-
kintone Café 東京 Vol.3
#kintonecafe
Twitter: @yamaryu0508
FB: https://www....
• kintoneとは?
• kintone3大要素とREST API
• kintoneとAWS
• kintone REST API
• 概要
• リクエスト例
• Node.jsによるリクエスト例
• サンプルダウンロード
Today s...
自己紹介
3
2013.3
IOTとグループウェア(デヂエ)の連携を試みてkintone に出会う
2014.4 -
kintoneエバンジェリストに
2014.11
kintone好きが高じて、界隈初のkintone転職
2015.2
kin...
kintone界隈のIoTの人
4
「2015/5/22 kintone hive 開催報告」より
今日はこれやめて
おきます
福岡を離れ、SIerへの道に転向
して半年ちょっと経ちました
電柱を登るのを
やめて?
• 会社名   株式会社ジョイゾー
• 所在地   東京都江東区東陽3­5­5ラウクティビルディング3F
• 設立年月日 2010年12月20日
• 社員数   7名(kinotneエバンジェリスト2名)
• 主な事業  kintone導入支援...
ジョイゾーの所在地
7
kintoneを基盤としたシステム開発サービス「システム39」
8
定額39万円
初回作業無料
来店型
kintoneの概要
kintoneとは?(ざっくり)
10
• コンセプト
•「ファストシステム」
•「3分で業務改善アプリ」
• 構成要素
•データ
• プロセス管理(ワークフロー)
•コミュニケーション
(出典:「kintone公式サイト」)
「サイボウズプロ...
•初期費用無料
•申込3分後には利用可能
•月単位の利用(年縛りなし)
•アップデートサイクルの短期化
(最近は2ヶ月くらい)
•30日間の無料お試し
•1年間の無償開発ライセンス
kintoneとは?(ざっくり:続き)
11
目的(業務or開...
【参考】サイボウズプロダクト
12
メール共有
グループウェア
(中小企業向け)
(中堅・大企業/海外向け)
無料
グループウェア
モバイル・
リモートアクセス
(セキュアアクセス)
(モバイルアプリ)
ファストシステム
ファストに業務改善アプ...
kintoneポータル画面
13
コミュニケーション
(スペース・スレッド)
プロセス管理
(確認待ち)
データ
(アプリ)
kintoneアプリ詳細画面
14
コミュニケーション
(コメント)
プロセス管理
(処理状態)
データ
(レコード)
kintoneの2つのコース
15
• これまで作成したアプリをそのまま運用するためには「ラ
イトコース」
• これから紹介するカスタマイズを適用するためには「ス
タンダードコース」
(出典:kintone公式サイト[https://kinto...
• データ
• ドラッグ&ドロップで簡単フォーム設計(豊富なフォームパーツ、ファイル添付)
• 強化されたトップ画面(一覧、カレンダー、カスタムビュー)
• グラフや集計機能(おすすめグラフ、定期レポート、クロス集計等)
• 通知・リマインダー...
• データ(ピックアップ)
kintoneとは?(ライトコース)
17
ドラッグ&ドロップでフォーム作成
フォーム編集
おすすめグラフ
グラフの種類や集計方法の
候補を自動生成
kintoneとは?(ライトコース)
18
• ワークフロー(プロセス管理)
• 柔軟なワークフロー(電子申請・承認)設定
ステータス設定
プロセス設定
ワークフローの実行
ステータス名や条件分岐
を自由に設定
• コミュニケーション
• コメント(レコード単位、スペース単位のディスカッション)
• スペース・スレッド(データとディスカッションの融合、情報の集約・蓄積)
• ゲストスペース(社外・顧客等へのコミュニケーション範囲の拡大)
• ピープル(...
• コミュニケーション(ピックアップ)
kintoneとは?(ライトコース)
20
アプリ内コメント
スペース
ピープル
スマホ通知
メッセージ
個人間のコミュニ
ケーション
アプリやコミュニケーション
の融合
SNSの様に投稿・
フォローできる
• その他
• モバイル対応(モバイルビュー、モバイルアプリ)
• kintoneアプリストア、アプリテンプレートによるアプリの授受共有・再利用
• 強固なセキュリティ(2ファクター認証、IPアドレス制限)
• 安心のバックアップ
• 国際化対...
• その他(ピックアップ)
kintoneとは?(ライトコース)
22
モバイルビュー
2ファクター認証
4重冗長化「Square」
(出典:「cybozu.comのクラウド基盤」)
これでもか!と
言うくらいのBU
[subdomain]
モ...
kintoneカスタマイズ機能(スタンダードコース)
23
• REST API
• レコードやスペースの操作(登録・更新・削除等)、
バルクAPI、アプリ作成、ワークフロー操作
• ユーザ・組織の操作
• JavaScript/CSSカスタマ...
JavaScriptカスタマイズ例
24
他サービスを取込みつつ、
動画をブクマしたり
データをバインドして
ライブラリでグラフ化し直したり
ダイナミックなプラグインライブラリ
で見た目をオシャレにしたり
JavaScriptカスタマイズ例(続き)
25
[subdomain]
モバイルの利便性を向上させる
地図を利用したり
kintoneこの夏のビッグアップデート
26
デプロイ系API
kintone.Promise
今日はこちら!
kintone3大要素とREST API
27
データベース プロセス管理 コミュニケーション
充実 今回実装 弱い
APIからの操作も3大要素をバランスよく活用することが重要!
API操作で3大機能同士を密に結合できるようになると、更に便利に...
kintone3大要素とREST API(ポータル画面)
28
スペースの
作成・メンバー更新等
アプリの作成・更新
(欲しい)
(参考:「cybozu.com developer network > kintone API」)
kintone3大要素とREST API(詳細画面)
29
レコードの
取得・登録・更新・削除
添付ファイルの
アップロード・ダウンロード
レコードの
ステータス変更
(欲しい)
(参考:「cybozu.com developer networ...
kintoneとAWS
ナイスな相性だと
言われています!
kintoneとAWS
31
• アプリケーション寄りPaaS(SaaS)
• クライアントサイド/フロントエンド
(UI/UX)
• 行動的/解釈の共有でアクションを起こし、
コミュニケーションで業務を回す
• インフラ寄りPaas(IaaS...
IoTで考える結合・補完イメージ
32
・農業(圃場)
・見守り
・建設・工事現場
・工場設備
・エネルギー設備
現場
センサー
・温度
・湿度
・照度
・加速度
・騒音
センサー
クラウド kintone
・通知
・ワークフロー
・スレッド
...
王道っぽいAWSとkintoneの連携パターン
33
Amazon DynamoDB
Stream
Amazon SNS
Amazon S3
Amazon Kinesis
Amazon Lambda
Amazon EC2
Lambda
イベント...
kintone.proxy() &
Amazon API Gateway 経由は良さそう・・・
Today s Café Menu
34
Amazon DynamoDB
Stream
Amazon SNS
Amazon Kinesis
Amaz...
Today s Café Menu
35
Amazon S3 Amazon Lambda
REST API
kintone on cybozu.com
S3 bucket
kintoneカスタマイズ用
JSファイル
Event
P
U
T
No...
ハンズオン
(予備知識と準備)
kintone REST API
(参考:「cybozu.com developer network > kintone API」)
kintone REST APIの概要
38
• kintoneアプリのレコードやスペースの操作
kintone REST APIの用途
プロトコル
• HTTPSプロトコル
フォーマット
• JSON
文字コード
• UTF-8
認証認証
•...
kintone REST APIの概要(続き)
39
• https://{subdomain}.cybozu.com/k/v1/{command}.json【通常】
• https://{subdomain}.cybozu.com/k/gue...
リクエスト例(GET/records)
40
QWRtaW5pc3RyYXRvcjpwYXNzd29y
GETメソッドでは
Content-Typeは不要
Basic認証を使用していない場合にも
空欄で入れておく分には問題ない様子
https:...
リクエスト例(GET/records:続き)
41
リクエスト詳細
https://{subdomain}.cybozu.com/k/v1/records.json?app={app id}
QWRtaW5pc3RyYXRvcjpwYXNzd2...
リクエスト例(GET/records:続き)
42
レスポンス
"{field code}": {
"type" : "{field type}",
"value" : "{value}"
}
各フィールドはこのように記述されます
・複数値を取...
リクエスト例(POST/records)
43
HTTPクライアント設定画面
QWRtaW5pc3RyYXRvcjpwYXNzd29y
https://{subdomain}.cybozu.com/k/v1/records.json
リクエスト例(POST/records:続き)
44
リクエスト詳細
POST/PUTメソッドではContent-Lengthが
必要(自動補完してくれない言語・ライブラ
リを利用する場合は要注意)
https://{subdomain}.cy...
リクエスト例(POST/records:続き)
45
レスポンス
【POSTのレスポンス】
・ids(レコードID)とrevisions(リビジョン)
【PUTのレスポンス】
・revisions(リビジョン)
Node.jsによるリクエスト例(準備)
46
今回Node.jsでREST APIをコールする際に「request」モジュールを利用する
「npm install request」で
コードを実行するフォルダに展開
Node.jsによるリクエスト例(準備:続き)
47
multipart/form-dataリクエスト時のファイル処理に「fs」モジュールを利用する
「npm install fs」で
コードを実行するフォルダに展開
ここからちょっと実践
サンプルダウンロード
49
①「https://github.com/joyzo/
kintone-Cafe-Tokyo-3」にアクセス
②「Download ZIP」をクリックして、
ファイル一式をダウンロード
サンプルリポジトリ
50
スライドP51で利用
スライドP52で利用
スライドP98で利用
スライドP53で利用
スライドP54で利用
スライドP55で利用
スライドP82で利用
スライドP82で利用
スライドP104で利用
※スライド内リンク...
kintoneのアプリテンプレート読込
51
①右上の歯車マークから
「kintoneシステム管理」を
クリック
②「アプリテンプレート」
をクリック
③「読み込む」
をクリック
④テンプレートのZIPファイルを
選択肢て「読み込む」をクリック...
テンプレートからのアプリ作成
52
①アプリ作成の「+」をクリック
②「テンプレートから
選ぶ」をクリック
③「アプリを作成する」をクリック
④今回4つのアプリが追加される
Node.jsによるリクエスト例(GET/records)
53
HTTPSリクエストするための
「request」モジュールを利用
・「method(文字列)」
・「url(文字列)」
・「headers(連想配列)」
・「json(JSON...
Node.jsによるリクエスト例(POST/record)
54
HTTPSリクエストするための
「request」モジュールを利用
・「method(文字列)」
・「url(文字列)」
・「headers(連想配列)」
・「json(JSON...
Node.jsによるリクエスト例(POST/file)
55
HTTPSリクエスト用のモジュールを読込
・「method(文字列)」
・「url(文字列)」
・「headers(連想配列)」
・「formData」
レスポンスを文字列で表示
を指...
AWS
S3とLambda
まずはS3・バケットを設定
S3・バケットの設定
58
①「S3」をクリック
S3・バケットの設定(続き)
59
②「バケットの作成」をクリック
③「バケット名」を入力
④「リージョン」を選択
(今回は「Tokyo」)
⑤「作成」をクリック
S3・バケットの設定(続き)
60
⑥新しくバケットが作成されるので、
クリックして中身を見る(今は空)
S3・バケットの設定(続き)
61
⑦「アップロード」をクリック
⑧ファイルをドラッグアンドドロップ
⑨「アップデートの開始」をクリック
S3・バケットの設定(続き)
62
⑩新しくファイルがアップロード
※Cyberduckを使うと簡単にファイル操作が実行できる
(アクセスキーとシークレットキーが必要になりますが)
次にLambda・イベントを設定
Lambda・イベントの設定
64
①「Lambda」をクリック
Lambda・イベントの設定(続き)
65
②「Get Started Now」をクリック
Lambda・イベントの設定(続き)
66
③今回「s3-get-object」をベースに設定
Lambda・イベントの設定(続き)
67
④「Event source type」が
「S3」になっていることを確認
⑤「Bucket」に、イベントソース
にする設定済バケットを選択
⑥「Event type」は
今回「PUT」を選択
⑦「N...
Lambda・イベントの設定(続き)
68
⑧今回のLambda関数の名前を「Name」に、
説明・メモを「Description」に記入
⑨関数・コードの設定は一旦サンプルを利用
Lambda・イベントの設定(続き)
69
⑩「Handler」は一旦そのまま
※ZIPコードをアップロードする際にファイル名と同一
である必要がある(index.handler → index.js)
⑪「Role」はS3実行権限を持つ既存
...
Lambda・イベントの設定(続き)
70
⑯「Create function」をクリック
⑮「Enable event source」は
「Enable later」のまま
Lambda・イベントの設定(続き)
71
⑰イベントソースが作成される
⑱「Test」をクリック
Lambda・イベントの設定(続き)
72
⑲「Sample event template」は「S3 PUT」を選択
「HappyFace.jpg」を先程アップしたファイル名に変更
「mybucket」と「sourcebucket」を
先程作成...
Lambda・イベントの設定(続き)
73
テスト実行が成功すると「Execution result」が「succeeded」
になり、アップしたファイルのContent-Typeが出力される
Lambda・イベントの設定(続き)
74
「Disabled」状態のイベントを有効化
するために、リンクをクリック
「Enable」をクリックして、イベントを
有効化(以降、S3 PUTでコード実行)
S3 PUTでLambda関数を
ドライブする動きの確認
ここまでの設定による動き
76
Amazon S3 Amazon Lambda
S3 bucket EventPUT
Node.js①S3にファイルをPUT
②ファイルPUTで
イベントドライブ
③S3にPUTされたファイルの
Content-...
イベント履歴の確認
77
①「Monitoring」をクリックする
②直近24時間の履歴を表示
③詳細をCloudWatchで
確認するためにクリック
イベント履歴の確認(続き)
78
④直近のログストリームをクリック
⑤Content-Typeが表示され正常終了
Lambda関数の記述について
現状のS3イベントコードの内容
80
• eventからPUTされたバケット
情報やファイル名が取得できる
• バケット名とファイル名からファ
イルの実体を取得出来る
PUTされたファイルのContent-Typeを
取得するサンプルとなってい...
現状のS3イベントコードの動き
81
eventからS3にPUTされたバケット名と
ファイル名を取得
バケット名とファイル名からファイル情報
であるdataオブジェクトを取得
data.ContentTypeよりContent-Typeを
表示...
$ zip -r sample.zip index.js node_module
Lambda関数の書き方(Node.js)
82
exports.handler = function(event, context) {
// 正常として終了さ...
ここから
ハンズオン本番です
ハンズオンシナリオ
84
同じフォーム・カスタマイズのアプリを
部署毎に運用中
フォーム設定の加除、
カスタマイズの修正を
1つ1つに適用するのは
面倒臭い
カスタマイズファイルくらいは
楽に更新したい!
ハンズオンシナリオ
85
S3 bucketkintoneカスタマイズ用
JSファイル
kintoneカスタマイズ用JSファイルをS3に入れたら、
対象アプリのカスタマイズファイルを差替える
ハンズオンシナリオ(続き)
86
Amazon S3 Amazon Lambda
REST API
kintone on cybozu.com
S3 bucket
kintoneカスタマイズ用
JSファイル
Event
P
U
T
Node.j...
先程のS3イベントドライブの
Lambda関数を改造して実現
• S3イベントドライブによるLambda関数の書き方
• Lambda関数におけるファイル処理
• Node.jsによるkintone REST APIのリクエストの書き方
• ファイルアップロード
• アプリデプロイ
要求されるスキルセット...
Lambda関数の
サンプルコードの確認とアップロード
サンプルコードの動き
90
S3 bucketkintoneカスタマイズ用
JSファイル
kintoneカスタマイズ用JSファイルをS3に入れたら、
Lambda経由で1つの対象アプリのカスタマイズファイルを差替える
Amazon Lambda
S3イベントコードサンプルの部分解説
91
モジュールの読込
Node.js用モジュールの読込
kintoneパラメータ
kintone REST APIコール用のヘッダや認証情報
S3イベントコードサンプルの部分解説(続き)
92
eventからのS3情報取得
(後にS3にPUTされたファイルを取得するために、)
eventからS3バケットとPUTされたファイル名を取得
S3からファイル取得
S3からファイル取得してki...
S3イベントコードサンプルの部分解説(続き)
93
kintoneへのファイルアップロードとアプリ更新 ファイルアップロード(POST/file)
カスタマイズ情報取得(GET/customize)
更新用のカスタマイズ情報を形成
カスタマイズ情...
S3イベントコードサンプルの部分解説(続き)
94
kintone REST APIコール用の関数
kintone REST APIコール用の関数
ファイルアップロード(form形式)と
通常(JSON)形式のボディを場合分け
Lambda関数のパッケージングとアップロード
95
$ zip -r sample.zip index.js node_module
パッケージング
アップロード
Lambda関数のパッケージングとアップロード(続き)
96
①「Upload a .ZIP file」を選択する
②「Upload」を
クリックする
③ZIPファイルを選択する
④「Save」をクリックする
サンプルを試してみましょう
サンプルコードの動き
98
S3 bucketsample.js
kintoneカスタマイズ用JSファイルをS3に入れたら、
Lambda経由で1つの対象アプリのカスタマイズファイルを差替える
Amazon Lambda
同一ファイル名を更新し...
サンプルコードを変更してS3に入れる
99
現状のカスタマイズ
https://cybozudev.zendesk.com/hc/ja/articles/202640950
変更後のカスタマイズ
https://cybozudev.zendes...
ガチハンズオン
100
それでは、複数アプリの
カスタマイズ更新をやってみましょう!
ガチハンズオンシナリオ
101
S3 bucketkintoneカスタマイズ用
JSファイル
kintoneカスタマイズ用JSファイルをS3に入れたら、
複数の対象アプリのカスタマイズファイルを差替える
ガチハンズオンのコード記述例
102
asyncモジュールによる複数プロセス処理
今回はシンプルにasync.seriesで縦続処理
(parallelは動作不安定だった)
Lambda関数の正常終了(context.succeed)
単一ファ...
ガチハンズオンのコード記述例(続き)
103
今回複数プロセス処理のために「async」モジュールを利用する
「npm install async」で
コードを実行するフォルダに展開
Lambda関数のパッケージングとアップロード
104
$ zip -r sample.zip multi.js node_module
パッケージング
※ここまでのサンプルはindex.jsでしたので、Handler名を
「multi.han...
アップロード
Lambda関数のパッケージングとアップロード(続き)
105
①「Upload a .ZIP file」を選択する
②「Upload」を
クリックする
③ZIPファイルを選択する
④「Save」をクリックする
ハンズオンは以上です
kintoneアプリデプロイツール「SANZO」
107
今日は勉強のためのシナリオでしたので、
実務では「SANZO」を是非ご利用ください!
Beta版試用申込、受付中 → https://www.joyzo.co.jp/sanzo/
参考情報
108
• 開発コミュニティサイト「cybozu.com developer network」[https://
cybozudev.zendesk.com/hc/ja]
• コミュニティ(質問等)、リファレンス、Tips、サンプル、...
kintone Café 東京 Vol.3 ハンズオン資料(kintone & AWS Lambda/S3)
of 109

kintone Café 東京 Vol.3 ハンズオン資料(kintone & AWS Lambda/S3)

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


Transcripts - kintone Café 東京 Vol.3 ハンズオン資料(kintone & AWS Lambda/S3)

  • 1. AWSを活用したkintone開発 -kintoneとAWS最新のビッグアップデートを学ぼう!- kintone Café 東京 Vol.3 #kintonecafe Twitter: @yamaryu0508 FB: https://www.facebook.com/ryu.yamashita.3 2015年7月24日 株式会社ジョイゾー/kintoneエバンジェリスト/ kintone Café 運営事務局・東京支部 山下 竜
  • 2. • kintoneとは? • kintone3大要素とREST API • kintoneとAWS • kintone REST API • 概要 • リクエスト例 • Node.jsによるリクエスト例 • サンプルダウンロード Today s Café Mune 2 • AWS S3とLambda • S3・バケット設定 • Lambda・イベント設定 • Lambda関数の記述 • ハンズオン • シナリオ • サンプル(1つのアプリの更新) • ガチハンズオン(複数アプリの更新) ※スライド内リンクは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への道に転向 して半年ちょっと経ちました 電柱を登るのを やめて?
  • 6. • 会社名   株式会社ジョイゾー • 所在地   東京都江東区東陽3­5­5ラウクティビルディング3F • 設立年月日 2010年12月20日 • 社員数   7名(kinotneエバンジェリスト2名) • 主な事業  kintone導入支援、カスタマイズ開発他 • 主な取引先 カナディアン・ソーラー・ジャパン他 株式会社ジョイゾー 6
  • 7. ジョイゾーの所在地 7
  • 8. kintoneを基盤としたシステム開発サービス「システム39」 8 定額39万円 初回作業無料 来店型
  • 9. kintoneの概要
  • 10. kintoneとは?(ざっくり) 10 • コンセプト •「ファストシステム」 •「3分で業務改善アプリ」 • 構成要素 •データ • プロセス管理(ワークフロー) •コミュニケーション (出典:「kintone公式サイト」) 「サイボウズプロダクト=チームを強くするツール」 の中でも汎用性と専門性を行き来しながら、様々な 業務シーンで活用出来るクラウドデータベース (WebDB)サービス
  • 11. •初期費用無料 •申込3分後には利用可能 •月単位の利用(年縛りなし) •アップデートサイクルの短期化 (最近は2ヶ月くらい) •30日間の無料お試し •1年間の無償開発ライセンス kintoneとは?(ざっくり:続き) 11 目的(業務or開発)に応じて 使い分けてください。
  • 12. 【参考】サイボウズプロダクト 12 メール共有 グループウェア (中小企業向け) (中堅・大企業/海外向け) 無料 グループウェア モバイル・ リモートアクセス (セキュアアクセス) (モバイルアプリ) ファストシステム ファストに業務改善アプリを作る ・自分でフォームを並べて ・Excel/CSVを取込んで ・kintoneアプリストアから ・SI/サービスを受けて 稼働実績99.9%の自前・国産クラウドインフラ SLO 99.99%へ
  • 13. kintoneポータル画面 13 コミュニケーション (スペース・スレッド) プロセス管理 (確認待ち) データ (アプリ)
  • 14. kintoneアプリ詳細画面 14 コミュニケーション (コメント) プロセス管理 (処理状態) データ (レコード)
  • 15. kintoneの2つのコース 15 • これまで作成したアプリをそのまま運用するためには「ラ イトコース」 • これから紹介するカスタマイズを適用するためには「ス タンダードコース」 (出典:kintone公式サイト[https://kintone.cybozu.com/jp/price/]) プログラミングなしで 簡単アプリ作成! REST API、JavaScript/CSSで カスタマイズして更に便利に! チームワークプラットフォームですので、5ユーザーからの利用です
  • 16. • データ • ドラッグ&ドロップで簡単フォーム設計(豊富なフォームパーツ、ファイル添付) • 強化されたトップ画面(一覧、カレンダー、カスタムビュー) • グラフや集計機能(おすすめグラフ、定期レポート、クロス集計等) • 通知・リマインダー設定(メール、モバイルアプリ通知) • アプリ間データ連携(ルックアップ、関連レコード、アクション機能) • 全文検索による容易な情報の取り出し(添付ファイルの中も対象) • アクセス権設定(アプリグループ、アプリ・レコード・フィールド単位) kintoneとは?(ライトコース) 16 3分で業務改善アプリを作るためのユーザビリティ の高い標準機能(プログラミングなし)
  • 17. • データ(ピックアップ) kintoneとは?(ライトコース) 17 ドラッグ&ドロップでフォーム作成 フォーム編集 おすすめグラフ グラフの種類や集計方法の 候補を自動生成
  • 18. kintoneとは?(ライトコース) 18 • ワークフロー(プロセス管理) • 柔軟なワークフロー(電子申請・承認)設定 ステータス設定 プロセス設定 ワークフローの実行 ステータス名や条件分岐 を自由に設定
  • 19. • コミュニケーション • コメント(レコード単位、スペース単位のディスカッション) • スペース・スレッド(データとディスカッションの融合、情報の集約・蓄積) • ゲストスペース(社外・顧客等へのコミュニケーション範囲の拡大) • ピープル(SNSライクなコミュニケーション) • 通知・メンション(相手を指定したコミュニケーション) kintoneとは?(ライトコース) 19
  • 20. • コミュニケーション(ピックアップ) kintoneとは?(ライトコース) 20 アプリ内コメント スペース ピープル スマホ通知 メッセージ 個人間のコミュニ ケーション アプリやコミュニケーション の融合 SNSの様に投稿・ フォローできる
  • 21. • その他 • モバイル対応(モバイルビュー、モバイルアプリ) • kintoneアプリストア、アプリテンプレートによるアプリの授受共有・再利用 • 強固なセキュリティ(2ファクター認証、IPアドレス制限) • 安心のバックアップ • 国際化対応(日・英・中の3カ国語のフィールド名称を定義) • 専門の連携ソリューション(サードパーティー)が充実中 kintoneとは?(ライトコース) 21
  • 22. • その他(ピックアップ) kintoneとは?(ライトコース) 22 モバイルビュー 2ファクター認証 4重冗長化「Square」 (出典:「cybozu.comのクラウド基盤」) これでもか!と 言うくらいのBU [subdomain] モバイルで使って こそのクラウド ※地図はJavaScript カスタマイズです PCビュー設定出来 るようになりました
  • 23. kintoneカスタマイズ機能(スタンダードコース) 23 • REST API • レコードやスペースの操作(登録・更新・削除等)、 バルクAPI、アプリ作成、ワークフロー操作 • ユーザ・組織の操作 • JavaScript/CSSカスタマイズ • 各種イベントハンドル、情報取得 • プロキシによる外部API連携 • URL指定によるライブラリの読み込み(HTTPS対応) データ レコード スペース ユーザ UI 基幹システム Excel 他のクラウド REST API kintone.proxy
  • 24. JavaScriptカスタマイズ例 24 他サービスを取込みつつ、 動画をブクマしたり データをバインドして ライブラリでグラフ化し直したり ダイナミックなプラグインライブラリ で見た目をオシャレにしたり
  • 25. JavaScriptカスタマイズ例(続き) 25 [subdomain] モバイルの利便性を向上させる 地図を利用したり
  • 26. kintoneこの夏のビッグアップデート 26 デプロイ系API kintone.Promise 今日はこちら!
  • 27. kintone3大要素とREST API 27 データベース プロセス管理 コミュニケーション 充実 今回実装 弱い APIからの操作も3大要素をバランスよく活用することが重要! API操作で3大機能同士を密に結合できるようになると、更に便利になると期待しています!
  • 28. kintone3大要素とREST API(ポータル画面) 28 スペースの 作成・メンバー更新等 アプリの作成・更新 (欲しい) (参考:「cybozu.com developer network > kintone API」)
  • 29. kintone3大要素とREST API(詳細画面) 29 レコードの 取得・登録・更新・削除 添付ファイルの アップロード・ダウンロード レコードの ステータス変更 (欲しい) (参考:「cybozu.com developer network > kintone API」)
  • 30. kintoneとAWS ナイスな相性だと 言われています!
  • 31. kintoneとAWS 31 • アプリケーション寄りPaaS(SaaS) • クライアントサイド/フロントエンド (UI/UX) • 行動的/解釈の共有でアクションを起こし、 コミュニケーションで業務を回す • インフラ寄りPaas(IaaS、BaaS) • サーバーサイド/バックエンド    (コマンド) • 思考的/データを捌き事象を解釈する APIで 結合・補完
  • 32. IoTで考える結合・補完イメージ 32 ・農業(圃場) ・見守り ・建設・工事現場 ・工場設備 ・エネルギー設備 現場 センサー ・温度 ・湿度 ・照度 ・加速度 ・騒音 センサー クラウド kintone ・通知 ・ワークフロー ・スレッド ・カスタマイズビュー 事象・データが発生する データを捌き、 事象を解釈する 解釈の共有でアクションを 起こし、コミュニケーショ ンで業務を回す
  • 33. 王道っぽいAWSとkintoneの連携パターン 33 Amazon DynamoDB Stream Amazon SNS Amazon S3 Amazon Kinesis Amazon Lambda Amazon EC2 Lambda イベントソース REST API kintone on cybozu.com ・レコード操作 ・ワークフロー操作 ・スペース操作 ・アプリ操作 REST API kintone.proxy() & Amazon API Gateway 経由は良さそう・・・ R EST A PI プリミティブな連携 ・ホスティング ・バッチ処理
  • 34. kintone.proxy() & Amazon API Gateway 経由は良さそう・・・ Today s Café Menu 34 Amazon DynamoDB Stream Amazon SNS Amazon Kinesis Amazon EC2 Lambda イベントソース ・レコード操作 ・ワークフロー操作 ・スペース操作 ・アプリ操作 REST API R EST A PI プリミティブな連携 ・ホスティング ・バッチ処理 Amazon S3 Amazon Lambda REST API kintone on cybozu.com ・アプリ操作
  • 35. Today s Café Menu 35 Amazon S3 Amazon Lambda REST API kintone on cybozu.com S3 bucket kintoneカスタマイズ用 JSファイル Event P U T Node.js ①カスタマイズ用 ファイルをPUT ③カスタマイズ用 ファイルを更新 ②ファイルPUTで イベントドライブ モチベーション/ シナリオ カスタマイズ用ファイルを複数 アプリで一挙に更新したい!
  • 36. ハンズオン (予備知識と準備)
  • 37. kintone REST API (参考:「cybozu.com developer network > kintone API」)
  • 38. kintone REST APIの概要 38 • kintoneアプリのレコードやスペースの操作 kintone REST APIの用途 プロトコル • HTTPSプロトコル フォーマット • JSON 文字コード • UTF-8 認証認証 • ユーザ認証(パスワード、APIトークン) • Basic認証 その他 • 同時処理レコード数100件 • API同時アクセス10件 ※GET/recordsのみ500件
  • 39. kintone REST APIの概要(続き) 39 • https://{subdomain}.cybozu.com/k/v1/{command}.json【通常】 • https://{subdomain}.cybozu.com/k/guest/{space id}/v1/ {command}.json【ゲストスペース】 URI リクエストヘッダ • Host: {subdomain}.cybozu.com:443 • Content-Type:application/json • 認証情報
  • 40. リクエスト例(GET/records) 40 QWRtaW5pc3RyYXRvcjpwYXNzd29y GETメソッドでは Content-Typeは不要 Basic認証を使用していない場合にも 空欄で入れておく分には問題ない様子 https://{subdomain}.cybozu.com/k/v1/records.json?app={app id}  【認証方法の記述】 X-Cybozu-Authorization : {BASE64-encoded "id:password"} Authorization : Basic {BASE64-encoded "id:password"} ※例の{base64-encoded "id:password"}はidをAdministrator、 passwordをpasswordとした場合の値としています HTTPクライアント設定画面 ※以降、Google Chromeのアドオン「POSTMAN」を利用しています
  • 41. リクエスト例(GET/records:続き) 41 リクエスト詳細 https://{subdomain}.cybozu.com/k/v1/records.json?app={app id} QWRtaW5pc3RyYXRvcjpwYXNzd29yZA== {subdomain}.cybozu.com {app id}
  • 42. リクエスト例(GET/records:続き) 42 レスポンス "{field code}": { "type" : "{field type}", "value" : "{value}" } 各フィールドはこのように記述されます ・複数値を取りうる{value}は配列になります ・POST/PUTの際はtypeが不要です フィールドの記述
  • 43. リクエスト例(POST/records) 43 HTTPクライアント設定画面 QWRtaW5pc3RyYXRvcjpwYXNzd29y https://{subdomain}.cybozu.com/k/v1/records.json
  • 44. リクエスト例(POST/records:続き) 44 リクエスト詳細 POST/PUTメソッドではContent-Lengthが 必要(自動補完してくれない言語・ライブラ リを利用する場合は要注意) https://{subdomain}.cybozu.com/k/v1/records.json QWRtaW5pc3RyYXRvcjpwYXNzd29yZA== {subdomain}.cybozu.com
  • 45. リクエスト例(POST/records:続き) 45 レスポンス 【POSTのレスポンス】 ・ids(レコードID)とrevisions(リビジョン) 【PUTのレスポンス】 ・revisions(リビジョン)
  • 46. Node.jsによるリクエスト例(準備) 46 今回Node.jsでREST APIをコールする際に「request」モジュールを利用する 「npm install request」で コードを実行するフォルダに展開
  • 47. Node.jsによるリクエスト例(準備:続き) 47 multipart/form-dataリクエスト時のファイル処理に「fs」モジュールを利用する 「npm install fs」で コードを実行するフォルダに展開
  • 48. ここからちょっと実践
  • 49. サンプルダウンロード 49 ①「https://github.com/joyzo/ kintone-Cafe-Tokyo-3」にアクセス ②「Download ZIP」をクリックして、 ファイル一式をダウンロード
  • 50. サンプルリポジトリ 50 スライドP51で利用 スライドP52で利用 スライドP98で利用 スライドP53で利用 スライドP54で利用 スライドP55で利用 スライドP82で利用 スライドP82で利用 スライドP104で利用 ※スライド内リンクはPDFダウンロード時に有効になります (「https://github.com/joyzo/kintone-Cafe-Tokyo-3」内) ※サンプルは認証情報やアプリIDを ご自身の環境に合わせてお試しください
  • 51. kintoneのアプリテンプレート読込 51 ①右上の歯車マークから 「kintoneシステム管理」を クリック ②「アプリテンプレート」 をクリック ③「読み込む」 をクリック ④テンプレートのZIPファイルを 選択肢て「読み込む」をクリック ⑤テンプレートの読込完了
  • 52. テンプレートからのアプリ作成 52 ①アプリ作成の「+」をクリック ②「テンプレートから 選ぶ」をクリック ③「アプリを作成する」をクリック ④今回4つのアプリが追加される
  • 53. Node.jsによるリクエスト例(GET/records) 53 HTTPSリクエストするための 「request」モジュールを利用 ・「method(文字列)」 ・「url(文字列)」 ・「headers(連想配列)」 ・「json(JSON)」 レスポンスを文字列で表示 を指定 実行結果※GET/record(s)はクエリもしくはボディに リクエストパラメータを指定することができ、 クエリに指定した際にはContent-Typeが不要 サンプル
  • 54. Node.jsによるリクエスト例(POST/record) 54 HTTPSリクエストするための 「request」モジュールを利用 ・「method(文字列)」 ・「url(文字列)」 ・「headers(連想配列)」 ・「json(JSON)」 レスポンスを文字列で表示 を指定 実行結果 サンプル
  • 55. Node.jsによるリクエスト例(POST/file) 55 HTTPSリクエスト用のモジュールを読込 ・「method(文字列)」 ・「url(文字列)」 ・「headers(連想配列)」 ・「formData」 レスポンスを文字列で表示 を指定 実行結果 サンプル ファイル処理用のモジュールを読込
  • 56. AWS S3とLambda
  • 57. まずはS3・バケットを設定
  • 58. S3・バケットの設定 58 ①「S3」をクリック
  • 59. S3・バケットの設定(続き) 59 ②「バケットの作成」をクリック ③「バケット名」を入力 ④「リージョン」を選択 (今回は「Tokyo」) ⑤「作成」をクリック
  • 60. S3・バケットの設定(続き) 60 ⑥新しくバケットが作成されるので、 クリックして中身を見る(今は空)
  • 61. S3・バケットの設定(続き) 61 ⑦「アップロード」をクリック ⑧ファイルをドラッグアンドドロップ ⑨「アップデートの開始」をクリック
  • 62. S3・バケットの設定(続き) 62 ⑩新しくファイルがアップロード ※Cyberduckを使うと簡単にファイル操作が実行できる (アクセスキーとシークレットキーが必要になりますが)
  • 63. 次にLambda・イベントを設定
  • 64. Lambda・イベントの設定 64 ①「Lambda」をクリック
  • 65. Lambda・イベントの設定(続き) 65 ②「Get Started Now」をクリック
  • 66. Lambda・イベントの設定(続き) 66 ③今回「s3-get-object」をベースに設定
  • 67. Lambda・イベントの設定(続き) 67 ④「Event source type」が 「S3」になっていることを確認 ⑤「Bucket」に、イベントソース にする設定済バケットを選択 ⑥「Event type」は 今回「PUT」を選択 ⑦「Next」をクリック
  • 68. Lambda・イベントの設定(続き) 68 ⑧今回のLambda関数の名前を「Name」に、 説明・メモを「Description」に記入 ⑨関数・コードの設定は一旦サンプルを利用
  • 69. Lambda・イベントの設定(続き) 69 ⑩「Handler」は一旦そのまま ※ZIPコードをアップロードする際にファイル名と同一 である必要がある(index.handler → index.js) ⑪「Role」はS3実行権限を持つ既存 ロールか「S3 execution」を選択 ⑫S3実行権限を持つIAMロールを新 しく作る場合には「許可」をクリック ⑬「Memory」を512、Timeoutを5で設定 ⑭「Next」をクリック ※ポップアップの許可が必要な場合があります
  • 70. Lambda・イベントの設定(続き) 70 ⑯「Create function」をクリック ⑮「Enable event source」は 「Enable later」のまま
  • 71. Lambda・イベントの設定(続き) 71 ⑰イベントソースが作成される ⑱「Test」をクリック
  • 72. Lambda・イベントの設定(続き) 72 ⑲「Sample event template」は「S3 PUT」を選択 「HappyFace.jpg」を先程アップしたファイル名に変更 「mybucket」と「sourcebucket」を 先程作成したバケット名に変更 「Submit」をクリックしてテスト実行
  • 73. Lambda・イベントの設定(続き) 73 テスト実行が成功すると「Execution result」が「succeeded」 になり、アップしたファイルのContent-Typeが出力される
  • 74. Lambda・イベントの設定(続き) 74 「Disabled」状態のイベントを有効化 するために、リンクをクリック 「Enable」をクリックして、イベントを 有効化(以降、S3 PUTでコード実行)
  • 75. S3 PUTでLambda関数を ドライブする動きの確認
  • 76. ここまでの設定による動き 76 Amazon S3 Amazon Lambda S3 bucket EventPUT Node.js①S3にファイルをPUT ②ファイルPUTで イベントドライブ ③S3にPUTされたファイルの Content-Typeを表示
  • 77. イベント履歴の確認 77 ①「Monitoring」をクリックする ②直近24時間の履歴を表示 ③詳細をCloudWatchで 確認するためにクリック
  • 78. イベント履歴の確認(続き) 78 ④直近のログストリームをクリック ⑤Content-Typeが表示され正常終了
  • 79. Lambda関数の記述について
  • 80. 現状のS3イベントコードの内容 80 • eventからPUTされたバケット 情報やファイル名が取得できる • バケット名とファイル名からファ イルの実体を取得出来る PUTされたファイルのContent-Typeを 取得するサンプルとなっている サンプル
  • 81. 現状のS3イベントコードの動き 81 eventからS3にPUTされたバケット名と ファイル名を取得 バケット名とファイル名からファイル情報 であるdataオブジェクトを取得 data.ContentTypeよりContent-Typeを 表示 Lambda関数とコールバックの正常終了を 記述 Lambda関数とコールバックの異常終了を 記述 サンプル
  • 82. $ zip -r sample.zip index.js node_module Lambda関数の書き方(Node.js) 82 exports.handler = function(event, context) { // 正常として終了させたい時には context.succeed(); // 異常として終了させたい時には context.fail(); }; 記述テンプレート Node.jsモジュール利用時 Lambda関数のJSファイルとnode_modeule/を ZIPでパッケージング JSファイル名とHandler名を揃えるJSファイル名とHandler名を揃える context.succeed/fail の記述を忘れる とエラーの原因にもなるので注意
  • 83. ここから ハンズオン本番です
  • 84. ハンズオンシナリオ 84 同じフォーム・カスタマイズのアプリを 部署毎に運用中 フォーム設定の加除、 カスタマイズの修正を 1つ1つに適用するのは 面倒臭い カスタマイズファイルくらいは 楽に更新したい!
  • 85. ハンズオンシナリオ 85 S3 bucketkintoneカスタマイズ用 JSファイル kintoneカスタマイズ用JSファイルをS3に入れたら、 対象アプリのカスタマイズファイルを差替える
  • 86. ハンズオンシナリオ(続き) 86 Amazon S3 Amazon Lambda REST API kintone on cybozu.com S3 bucket kintoneカスタマイズ用 JSファイル Event P U T Node.js ①カスタマイズ用 ファイルをPUT ③カスタマイズ用 ファイルを更新 ②ファイルPUTで イベントドライブ モチベーション/ シナリオ カスタマイズ用ファイルを複数 アプリで一挙に更新したい!
  • 87. 先程のS3イベントドライブの Lambda関数を改造して実現
  • 88. • S3イベントドライブによるLambda関数の書き方 • Lambda関数におけるファイル処理 • Node.jsによるkintone REST APIのリクエストの書き方 • ファイルアップロード • アプリデプロイ 要求されるスキルセット(今日の成果) 88
  • 89. Lambda関数の サンプルコードの確認とアップロード
  • 90. サンプルコードの動き 90 S3 bucketkintoneカスタマイズ用 JSファイル kintoneカスタマイズ用JSファイルをS3に入れたら、 Lambda経由で1つの対象アプリのカスタマイズファイルを差替える Amazon Lambda
  • 91. S3イベントコードサンプルの部分解説 91 モジュールの読込 Node.js用モジュールの読込 kintoneパラメータ kintone REST APIコール用のヘッダや認証情報
  • 92. S3イベントコードサンプルの部分解説(続き) 92 eventからのS3情報取得 (後にS3にPUTされたファイルを取得するために、) eventからS3バケットとPUTされたファイル名を取得 S3からファイル取得 S3からファイル取得してkintoneアップロード用に form形式でセット
  • 93. S3イベントコードサンプルの部分解説(続き) 93 kintoneへのファイルアップロードとアプリ更新 ファイルアップロード(POST/file) カスタマイズ情報取得(GET/customize) 更新用のカスタマイズ情報を形成 カスタマイズ情報取得(PUT/customize) kintoneアプリのデプロイ(POST/deploy) Lambda関数の正常終了(context.succeed)
  • 94. S3イベントコードサンプルの部分解説(続き) 94 kintone REST APIコール用の関数 kintone REST APIコール用の関数 ファイルアップロード(form形式)と 通常(JSON)形式のボディを場合分け
  • 95. Lambda関数のパッケージングとアップロード 95 $ zip -r sample.zip index.js node_module パッケージング
  • 96. アップロード Lambda関数のパッケージングとアップロード(続き) 96 ①「Upload a .ZIP file」を選択する ②「Upload」を クリックする ③ZIPファイルを選択する ④「Save」をクリックする
  • 97. サンプルを試してみましょう
  • 98. サンプルコードの動き 98 S3 bucketsample.js kintoneカスタマイズ用JSファイルをS3に入れたら、 Lambda経由で1つの対象アプリのカスタマイズファイルを差替える Amazon Lambda 同一ファイル名を更新しますので、 「sample.js」修正してを入れてくだい
  • 99. サンプルコードを変更してS3に入れる 99 現状のカスタマイズ https://cybozudev.zendesk.com/hc/ja/articles/202640950 変更後のカスタマイズ https://cybozudev.zendesk.com/hc/ja/articles/202341964 一覧でも地図表示
  • 100. ガチハンズオン 100 それでは、複数アプリの カスタマイズ更新をやってみましょう!
  • 101. ガチハンズオンシナリオ 101 S3 bucketkintoneカスタマイズ用 JSファイル kintoneカスタマイズ用JSファイルをS3に入れたら、 複数の対象アプリのカスタマイズファイルを差替える
  • 102. ガチハンズオンのコード記述例 102 asyncモジュールによる複数プロセス処理 今回はシンプルにasync.seriesで縦続処理 (parallelは動作不安定だった) Lambda関数の正常終了(context.succeed) 単一ファイル更新の処理を関数化 (jsUpdate)
  • 103. ガチハンズオンのコード記述例(続き) 103 今回複数プロセス処理のために「async」モジュールを利用する 「npm install async」で コードを実行するフォルダに展開
  • 104. Lambda関数のパッケージングとアップロード 104 $ zip -r sample.zip multi.js node_module パッケージング ※ここまでのサンプルはindex.jsでしたので、Handler名を 「multi.handler」と変更する必要があります(P82参照)
  • 105. アップロード Lambda関数のパッケージングとアップロード(続き) 105 ①「Upload a .ZIP file」を選択する ②「Upload」を クリックする ③ZIPファイルを選択する ④「Save」をクリックする
  • 106. ハンズオンは以上です
  • 107. kintoneアプリデプロイツール「SANZO」 107 今日は勉強のためのシナリオでしたので、 実務では「SANZO」を是非ご利用ください! Beta版試用申込、受付中 → https://www.joyzo.co.jp/sanzo/
  • 108. 参考情報 108 • 開発コミュニティサイト「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