109
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é 運営事務局・東京支部 山下 竜

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

Embed Size (px)

Citation preview

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

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é 運営事務局・東京支部 山下 竜

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

• kintoneとは?

• kintone3大要素とREST API

• kintoneとAWS

• kintone REST API

• 概要

• リクエスト例

• Node.jsによるリクエスト例

• サンプルダウンロード

Today’s Café Mune

2

• AWS S3とLambda

• S3・バケット設定

• Lambda・イベント設定

• Lambda関数の記述

• ハンズオン

• シナリオ

• サンプル(1つのアプリの更新)

• ガチハンズオン(複数アプリの更新)※スライド内リンクはPDFダウンロード時に有効になります

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

自己紹介

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.3 ハンズオン資料(kintone & AWS Lambda/S3)

kintone界隈のIoTの人

4

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

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

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

福岡を離れ、SIerへの道に転向して半年ちょっと経ちました

電柱を登るのをやめて?

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

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

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

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

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

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

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

株式会社ジョイゾー

6

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

ジョイゾーの所在地

7

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

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

8

定額39万円

初回作業無料

来店型

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

kintoneの概要

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

kintoneとは?(ざっくり)

10

•コンセプト

•「ファストシステム」

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

•構成要素

•データ

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

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

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

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

•初期費用無料

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

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

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

•30日間の無料お試し

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

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

11

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

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

【参考】サイボウズプロダクト

12

メール共有

グループウェア

(中小企業向け)

(中堅・大企業/海外向け)

無料 グループウェア

モバイル・ リモートアクセス

(セキュアアクセス)

(モバイルアプリ)

ファストシステム

ファストに業務改善アプリを作る

・自分でフォームを並べて ・Excel/CSVを取込んで ・kintoneアプリストアから ・SI/サービスを受けて

稼働実績99.9%の自前・国産クラウドインフラ

SLO 99.99%へ

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

kintoneポータル画面

13

コミュニケーション (スペース・スレッド)

プロセス管理 (確認待ち)

データ (アプリ)

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

kintoneアプリ詳細画面

14

コミュニケーション (コメント)

プロセス管理 (処理状態)

データ (レコード)

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

kintoneの2つのコース

15

• これまで作成したアプリをそのまま運用するためには「ライトコース」

• これから紹介するカスタマイズを適用するためには「スタンダードコース」

(出典:kintone公式サイト[https://kintone.cybozu.com/jp/price/])

プログラミングなしで 簡単アプリ作成!

REST API、JavaScript/CSSで カスタマイズして更に便利に!

チームワークプラットフォームですので、5ユーザーからの利用です

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

• データ

• ドラッグ&ドロップで簡単フォーム設計(豊富なフォームパーツ、ファイル添付)

• 強化されたトップ画面(一覧、カレンダー、カスタムビュー)

• グラフや集計機能(おすすめグラフ、定期レポート、クロス集計等)

• 通知・リマインダー設定(メール、モバイルアプリ通知)

• アプリ間データ連携(ルックアップ、関連レコード、アクション機能)

• 全文検索による容易な情報の取り出し(添付ファイルの中も対象)

• アクセス権設定(アプリグループ、アプリ・レコード・フィールド単位)

kintoneとは?(ライトコース)

16

3分で業務改善アプリを作るためのユーザビリティの高い標準機能(プログラミングなし)

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

• データ(ピックアップ)

kintoneとは?(ライトコース)

17

ドラッグ&ドロップでフォーム作成

フォーム編集

おすすめグラフ

グラフの種類や集計方法の候補を自動生成

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

kintoneとは?(ライトコース)

18

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

• 柔軟なワークフロー(電子申請・承認)設定

ステータス設定

プロセス設定

ワークフローの実行

ステータス名や条件分岐を自由に設定

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

• コミュニケーション

• コメント(レコード単位、スペース単位のディスカッション)

• スペース・スレッド(データとディスカッションの融合、情報の集約・蓄積)

• ゲストスペース(社外・顧客等へのコミュニケーション範囲の拡大)

• ピープル(SNSライクなコミュニケーション)

• 通知・メンション(相手を指定したコミュニケーション)

kintoneとは?(ライトコース)

19

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

• コミュニケーション(ピックアップ)

kintoneとは?(ライトコース)

20

アプリ内コメント

スペース

ピープル

スマホ通知

メッセージ

個人間のコミュニケーション

アプリやコミュニケーションの融合

SNSの様に投稿・フォローできる

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

• その他

• モバイル対応(モバイルビュー、モバイルアプリ)

• kintoneアプリストア、アプリテンプレートによるアプリの授受共有・再利用

• 強固なセキュリティ(2ファクター認証、IPアドレス制限)

• 安心のバックアップ

• 国際化対応(日・英・中の3カ国語のフィールド名称を定義)

• 専門の連携ソリューション(サードパーティー)が充実中

kintoneとは?(ライトコース)

21

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

• その他(ピックアップ)kintoneとは?(ライトコース)

22

モバイルビュー

2ファクター認証

4重冗長化「Square」

(出典:「cybozu.comのクラウド基盤」)

これでもか!と言うくらいのBU

[subdomain]

モバイルで使ってこそのクラウド

※地図はJavaScript カスタマイズです

PCビュー設定出来るようになりました

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

kintoneカスタマイズ機能(スタンダードコース)

23

• REST API

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

• ユーザ・組織の操作

• JavaScript/CSSカスタマイズ

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

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

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

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

UI

基幹システム Excel

他のクラウドREST API

kintone.proxy

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

JavaScriptカスタマイズ例

24

他サービスを取込みつつ、 動画をブクマしたり

データをバインドして ライブラリでグラフ化し直したり

ダイナミックなプラグインライブラリで見た目をオシャレにしたり

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

JavaScriptカスタマイズ例(続き)

25

[subdomain]

モバイルの利便性を向上させる 地図を利用したり

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

kintoneこの夏のビッグアップデート

26

デプロイ系API kintone.Promise

今日はこちら!

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

kintone3大要素とREST API

27

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

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

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

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

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

28

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

アプリの作成・更新

(欲しい)

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

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

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

29

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

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

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

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

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

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

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

kintoneとAWS

31

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

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

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

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

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

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

APIで 結合・補完

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

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

32

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

現場

センサー

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

センサー クラウド kintone

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

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

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

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

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

33

Amazon DynamoDB Stream

Amazon SNS

Amazon S3

Amazon Kinesis

Amazon Lambda

Amazon EC2Lambda

イベントソース

REST API

kintone on cybozu.com

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

REST API

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

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

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

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

Today’s Café Menu

34

Amazon DynamoDB Stream

Amazon SNS

Amazon Kinesis

Amazon EC2Lambda

イベントソース

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

REST API

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

Amazon S3

Amazon Lambda

REST API

kintone on cybozu.com

・アプリ操作

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

Today’s Café Menu

35Amazon S3 Amazon Lambda

REST API

kintone on cybozu.com

S3 bucket

kintoneカスタマイズ用 JSファイル

Event

PUT

Node.js

①カスタマイズ用 ファイルをPUT

③カスタマイズ用 ファイルを更新

②ファイルPUTで イベントドライブ

モチベーション/ シナリオ

カスタマイズ用ファイルを複数アプリで一挙に更新したい!

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

ハンズオン (予備知識と準備)

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

kintone REST API

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

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

kintone REST APIの概要

38

• kintoneアプリのレコードやスペースの操作

kintone REST APIの用途

プロトコル

• HTTPSプロトコル

フォーマット

• JSON

文字コード

• UTF-8

認証認証

• ユーザ認証(パスワード、APIトークン)

• Basic認証

その他

• 同時処理レコード数100件

• API同時アクセス10件※GET/recordsのみ500件

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

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

• 認証情報

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

リクエスト例(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」を利用しています

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

リクエスト例(GET/records:続き)

41

リクエスト詳細

https://{subdomain}.cybozu.com/k/v1/records.json?app={app id}

QWRtaW5pc3RyYXRvcjpwYXNzd29yZA==

{subdomain}.cybozu.com

{app id}

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

リクエスト例(GET/records:続き)

42

レスポンス

"{field code}": { "type" : "{field type}", "value" : "{value}" }

各フィールドはこのように記述されます ・複数値を取りうる{value}は配列になります ・POST/PUTの際はtypeが不要です

フィールドの記述

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

リクエスト例(POST/records)

43

HTTPクライアント設定画面

QWRtaW5pc3RyYXRvcjpwYXNzd29y

https://{subdomain}.cybozu.com/k/v1/records.json

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

リクエスト例(POST/records:続き)

44

リクエスト詳細

POST/PUTメソッドではContent-Lengthが必要(自動補完してくれない言語・ライブラリを利用する場合は要注意)

https://{subdomain}.cybozu.com/k/v1/records.json

QWRtaW5pc3RyYXRvcjpwYXNzd29yZA==

{subdomain}.cybozu.com

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

リクエスト例(POST/records:続き)

45

レスポンス

【POSTのレスポンス】 ・ids(レコードID)とrevisions(リビジョン) 【PUTのレスポンス】 ・revisions(リビジョン)

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

Node.jsによるリクエスト例(準備)

46

今回Node.jsでREST APIをコールする際に「request」モジュールを利用する

「npm install request」で コードを実行するフォルダに展開

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

Node.jsによるリクエスト例(準備:続き)

47

multipart/form-dataリクエスト時のファイル処理に「fs」モジュールを利用する

「npm install fs」で コードを実行するフォルダに展開

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

ここからちょっと実践

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

サンプルダウンロード

49

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

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

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

サンプルリポジトリ

50

スライドP51で利用スライドP52で利用スライドP98で利用

スライドP53で利用スライドP54で利用スライドP55で利用スライドP82で利用

スライドP82で利用スライドP104で利用

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

(「https://github.com/joyzo/kintone-Cafe-Tokyo-3」内) ※サンプルは認証情報やアプリIDを ご自身の環境に合わせてお試しください

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

kintoneのアプリテンプレート読込

51

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

クリック

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

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

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

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

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

テンプレートからのアプリ作成

52

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

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

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

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

Node.jsによるリクエスト例(GET/records)

53

HTTPSリクエストするための 「request」モジュールを利用

・「method(文字列)」 ・「url(文字列)」 ・「headers(連想配列)」 ・「json(JSON)」

レスポンスを文字列で表示

を指定

実行結果※GET/record(s)はクエリもしくはボディに リクエストパラメータを指定することができ、 クエリに指定した際にはContent-Typeが不要

サンプル

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

Node.jsによるリクエスト例(POST/record)

54

HTTPSリクエストするための 「request」モジュールを利用

・「method(文字列)」 ・「url(文字列)」 ・「headers(連想配列)」 ・「json(JSON)」

レスポンスを文字列で表示

を指定

実行結果

サンプル

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

Node.jsによるリクエスト例(POST/file)

55

HTTPSリクエスト用のモジュールを読込

・「method(文字列)」 ・「url(文字列)」 ・「headers(連想配列)」 ・「formData」

レスポンスを文字列で表示

を指定

実行結果

サンプル

ファイル処理用のモジュールを読込

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

AWS S3とLambda

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

まずはS3・バケットを設定

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

S3・バケットの設定

58

①「S3」をクリック

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

S3・バケットの設定(続き)

59

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

③「バケット名」を入力

④「リージョン」を選択 (今回は「Tokyo」)

⑤「作成」をクリック

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

S3・バケットの設定(続き)

60

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

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

S3・バケットの設定(続き)

61

⑦「アップロード」をクリック ⑧ファイルをドラッグアンドドロップ

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

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

S3・バケットの設定(続き)

62

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

※Cyberduckを使うと簡単にファイル操作が実行できる(アクセスキーとシークレットキーが必要になりますが)

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

次にLambda・イベントを設定

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

Lambda・イベントの設定

64

①「Lambda」をクリック

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

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

65

②「Get Started Now」をクリック

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

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

66

③今回「s3-get-object」をベースに設定

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

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

67

④「Event source type」が「S3」になっていることを確認

⑤「Bucket」に、イベントソースにする設定済バケットを選択

⑥「Event type」は今回「PUT」を選択

⑦「Next」をクリック

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

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

68

⑧今回のLambda関数の名前を「Name」に、説明・メモを「Description」に記入

⑨関数・コードの設定は一旦サンプルを利用

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

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

69

⑩「Handler」は一旦そのまま ※ZIPコードをアップロードする際にファイル名と同一である必要がある(index.handler → index.js)

⑪「Role」はS3実行権限を持つ既存ロールか「S3 execution」を選択

⑫S3実行権限を持つIAMロールを新しく作る場合には「許可」をクリック

⑬「Memory」を512、Timeoutを5で設定

⑭「Next」をクリック

※ポップアップの許可が必要な場合があります

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

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

70

⑯「Create function」をクリック

⑮「Enable event source」は 「Enable later」のまま

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

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

71

⑰イベントソースが作成される

⑱「Test」をクリック

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

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

72

⑲「Sample event template」は「S3 PUT」を選択

㉑「HappyFace.jpg」を先程アップしたファイル名に変更

㉒「mybucket」と「sourcebucket」を先程作成したバケット名に変更

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

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

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

73

㉔テスト実行が成功すると「Execution result」が「succeeded」になり、アップしたファイルのContent-Typeが出力される

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

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

74

㉕「Disabled」状態のイベントを有効化 するために、リンクをクリック

㉖「Enable」をクリックして、イベントを有効化(以降、S3 PUTでコード実行)

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

S3 PUTでLambda関数を ドライブする動きの確認

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

ここまでの設定による動き

76

Amazon S3 Amazon Lambda

S3 bucket EventPUT

Node.js①S3にファイルをPUT ②ファイルPUTで イベントドライブ

③S3にPUTされたファイルの Content-Typeを表示

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

イベント履歴の確認

77

①「Monitoring」をクリックする

②直近24時間の履歴を表示

③詳細をCloudWatchで確認するためにクリック

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

イベント履歴の確認(続き)

78

④直近のログストリームをクリック

⑤Content-Typeが表示され正常終了

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

Lambda関数の記述について

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

現状のS3イベントコードの内容

80

• eventからPUTされたバケット情報やファイル名が取得できる

• バケット名とファイル名からファイルの実体を取得出来る

PUTされたファイルのContent-Typeを 取得するサンプルとなっている

サンプル

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

現状のS3イベントコードの動き

81

eventからS3にPUTされたバケット名と ファイル名を取得

バケット名とファイル名からファイル情報 であるdataオブジェクトを取得

data.ContentTypeよりContent-Typeを 表示Lambda関数とコールバックの正常終了を 記述

Lambda関数とコールバックの異常終了を 記述

サンプル

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

$ 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 の記述を忘れるとエラーの原因にもなるので注意

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

ここから ハンズオン本番です

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

ハンズオンシナリオ

84

同じフォーム・カスタマイズのアプリを部署毎に運用中

フォーム設定の加除、 カスタマイズの修正を 1つ1つに適用するのは 面倒臭い

カスタマイズファイルくらいは 楽に更新したい!

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

ハンズオンシナリオ

85

S3 bucketkintoneカスタマイズ用 JSファイル

kintoneカスタマイズ用JSファイルをS3に入れたら、 対象アプリのカスタマイズファイルを差替える

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

ハンズオンシナリオ(続き)

86Amazon S3 Amazon Lambda

REST API

kintone on cybozu.com

S3 bucket

kintoneカスタマイズ用 JSファイル

Event

PUT

Node.js

①カスタマイズ用 ファイルをPUT

③カスタマイズ用 ファイルを更新

②ファイルPUTで イベントドライブ

モチベーション/ シナリオ

カスタマイズ用ファイルを複数アプリで一挙に更新したい!

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

先程のS3イベントドライブのLambda関数を改造して実現

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

• S3イベントドライブによるLambda関数の書き方

• Lambda関数におけるファイル処理

• Node.jsによるkintone REST APIのリクエストの書き方

• ファイルアップロード

• アプリデプロイ

要求されるスキルセット(今日の成果)

88

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

Lambda関数の サンプルコードの確認とアップロード

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

サンプルコードの動き

90

S3 bucketkintoneカスタマイズ用 JSファイル

kintoneカスタマイズ用JSファイルをS3に入れたら、 Lambda経由で1つの対象アプリのカスタマイズファイルを差替える

Amazon Lambda

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

S3イベントコードサンプルの部分解説

91

モジュールの読込

Node.js用モジュールの読込

kintoneパラメータ

kintone REST APIコール用のヘッダや認証情報

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

S3イベントコードサンプルの部分解説(続き)

92

eventからのS3情報取得(後にS3にPUTされたファイルを取得するために、)eventからS3バケットとPUTされたファイル名を取得

S3からファイル取得S3からファイル取得してkintoneアップロード用に form形式でセット

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

S3イベントコードサンプルの部分解説(続き)

93

kintoneへのファイルアップロードとアプリ更新 ファイルアップロード(POST/file)

カスタマイズ情報取得(GET/customize)

更新用のカスタマイズ情報を形成

カスタマイズ情報取得(PUT/customize)

kintoneアプリのデプロイ(POST/deploy)

Lambda関数の正常終了(context.succeed)

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

S3イベントコードサンプルの部分解説(続き)

94

kintone REST APIコール用の関数

kintone REST APIコール用の関数

ファイルアップロード(form形式)と通常(JSON)形式のボディを場合分け

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

Lambda関数のパッケージングとアップロード

95

$ zip -r sample.zip index.js node_module

パッケージング

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

アップロード

Lambda関数のパッケージングとアップロード(続き)

96

①「Upload a .ZIP file」を選択する

②「Upload」をクリックする ③ZIPファイルを選択する

④「Save」をクリックする

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

サンプルを試してみましょう

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

サンプルコードの動き

98

S3 bucketsample.js

kintoneカスタマイズ用JSファイルをS3に入れたら、 Lambda経由で1つの対象アプリのカスタマイズファイルを差替える

Amazon Lambda同一ファイル名を更新しますので、 「sample.js」修正してを入れてくだい

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

サンプルコードを変更してS3に入れる

99

現状のカスタマイズ

https://cybozudev.zendesk.com/hc/ja/articles/202640950

変更後のカスタマイズ

https://cybozudev.zendesk.com/hc/ja/articles/202341964

一覧でも地図表示

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

ガチハンズオン

100

それでは、複数アプリの カスタマイズ更新をやってみましょう!

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

ガチハンズオンシナリオ

101

S3 bucketkintoneカスタマイズ用 JSファイル

kintoneカスタマイズ用JSファイルをS3に入れたら、 複数の対象アプリのカスタマイズファイルを差替える

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

ガチハンズオンのコード記述例

102

asyncモジュールによる複数プロセス処理

今回はシンプルにasync.seriesで縦続処理 (parallelは動作不安定だった)

Lambda関数の正常終了(context.succeed)

単一ファイル更新の処理を関数化(jsUpdate)

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

ガチハンズオンのコード記述例(続き)

103

今回複数プロセス処理のために「async」モジュールを利用する

「npm install async」で コードを実行するフォルダに展開

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

Lambda関数のパッケージングとアップロード

104

$ zip -r sample.zip multi.js node_module

パッケージング

※ここまでのサンプルはindex.jsでしたので、Handler名を 「multi.handler」と変更する必要があります(P82参照)

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

アップロード

Lambda関数のパッケージングとアップロード(続き)

105

①「Upload a .ZIP file」を選択する

②「Upload」をクリックする ③ZIPファイルを選択する

④「Save」をクリックする

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

ハンズオンは以上です

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

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

107

今日は勉強のためのシナリオでしたので、 実務では「SANZO」を是非ご利用ください!

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

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

参考情報

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.内)

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