本日のアジェンダ 前回の課題の講評 本日のねた振り kintoneカスタマイズの概要 アプリをカスタマイズしましょう クラウド/システム連携例 cybozu.com developer networkについて kintoneのapi概要 2015/7の

本日のアジェンダ

6. cybozu.com developer networkについて 7. kintoneのAPI概要（2015/7のアップデート） 8. 本日のまとめと課題

前回の課題と講評

コースの進捗状況

本日のネタ振り

パクチー商会さんにデモしてみました

S社長「おー、こんなこともできるんだねー。 いいねぇ

いろいろ思いついたんだけどさ

kintoneのカスタマイズってなんでしょう？ ● kintoneは、ノンプログラミングでシステムが作 れるのが特徴です。しかし、標準機能の中で全 てのニーズをまかなえるわけでもありません。 ● 今回は標準機能でできないものをどう実装する かというところに入っていきます

kintoneの標準機能が苦手なところ ● フィールドにそもそもない機能（自動採番、複雑な計 算、細かな入力チェックなど） ● フォームや一覧の画面上にボタン、表、Google Mapなどの要素を組み込む ● きれいなレイアウトが必要な書類の印刷

ないものは作ってしまえ プロセス管理 いわゆるワークフロー的な 処理 データベース レコード単位で情報を整 理、検索なんかもできる コミュニケーション 情報を通じたチーム内の コミュニケーション機能 JavaScript REST API プラグイン kintone標準機能

アプリをカスタマイズしましょう 顧客マスターを使います

● お客さんの場所を地図でまとめて表示する ● 郵便番号から住所を自動入力する

ダウンロードサイトからファイルを準備

map.js：cybozu developer networkの定番サンプ ルの一つ

顧客マスターを開きます

今までなかった枠が現れましたがまだ空っ ぽです

map.jsの中を見てみましょう

若干長いので少しまとめ

大きくは以下の３つの部分に分かれます ● kintone用JavaScriptのお約束部分 ● 一覧表示時のマップ表示部分

そもそもなぜJavaScript?

お約束事（１）記述とstrictモード

● 即時関数として記述 ● strictモードとして宣言

kintone本体、他のJavaScriptに影響しないよ うにする配慮です

kintoneのイベントとhandler

kintone.events.on(イベント種類,handler);

イベント種類は決まった文字列（または配列）で指定

（詳しくはcybozu.com developer networkへ）

例）

一覧画面が表示されたときに割り当てる場合

kintone.events.on('app.record.index.show', indexShow); 詳細画面が表示されたときに割り当てる場合

一覧画面の処理

1. Google Map表示用の領域確保

2. 表示中のレコードから緯度経度情報の取得 3. Google Mapのピン表示

Google Map表示用の領域確保

操作可能な領域を取得

表示中のレコードから緯度経度情報の取得

eventオブジェクトは、 kintoneのイベントごとに内容 が変わります。

詳細画面の処理

1. Google Map用の表示領域確保 2. 住所から緯度経度情報の取得

3. 緯度、経度用フィールドへのデータ更新 4. Google Mapへのピン表示

Google Map用の表示領域確保

‘Map’ってどこで定義されて いるのでしょう？

住所から緯度経度情報の取得

詳細画面のイベントでは、 eventオブ ジェクトの’record’に、現時点のレコード の情報が格納されています。

緯度、経度用フィールドへのデータ更新

Google Mapへのピン表示

郵便番号検索を追加する

いろいろやり方はありますが・・・

ボタンをクリックすると

郵便番号から住所を検索して 住所に入力されるようにします

でもその前に・・・

え？これって標準機能でできないの？ え？JavaScriptいるの？

という声が多かったので､プラグインを作りました。 驚いたことに需要があるそうです。

サイボウズさんのユーザー誌にのってました

今日、使うのは

ハンズオン用の

簡易バージョンで

す

kintoneの環境にプラグインを組み 込みます

アプリにプラグインを設定します

このプラグインは４つの情報が必要です。 フォームの確認と準備をしておきます。

郵便番号と住所のフィール ドコードを確認！

要素IDは「btn」に しておきましょう

ボタン用のスペースを入れてお きます

プラグインに動作に必要な設定

郵便番号 Zipcode 住所 Address ボタン用スペース btn ボタンのラベル 検索

このプラグインの中身が気になる方

パッケージング前のファイル一式欲しい方はお知 らせ下さい。

現状、公式のマーケットサイトのよう なものはありませんが、各社より提供 されています

クラウド/システム連携例

実は皆さんが使ってたダウンロードサイト kviewer使わせて頂いております m(__)m

CMSとの連携

● WordPress kintoneプラグイン ● concrete5 kintone 連携アドオン ● MT連携プラグイン

クラウドとの連携がはじまってます

● AWS（特にlamda）

● Microsoft Azure (特にAzure AD)

● zapierといったHUBを介した他サービ スとの連携

cybozu.com developer network

について

kintone APIの概要

kintoneのほぼ全ての処理に対応

おまけ：そういえばもう一つありましたね

スペースなんかで使えるスタンプないの？

実はあります！

沖縄のレキサス様製 ペンギン君スタンプ

カスタマイズ基礎のまとめ ● JavaScript/プラグイン/REST APIで標準機能 の苦手をサポート ● JavaScriptにはkintone用お作法が必要 ● プラグインがあればコードを書かなくても機能を 追加できる ● REST APIでクラウド間連携ができる

いままで触れてきませんでしたが

大事な話をここで

JavaScriptカスタマイズはスタン ダードが必須です

カスタマイズ基礎の課題

● kintoneスタンプお試し版をガイダンスに従って 導入してみてください

次回　システム管理のテーマ ● いよいよS商会で実際に試して貰う運びになりま した ● お客さんの本番環境の契約や必要になる初期 設定、kintoneのセキュリティ設定などについて 見ていきます ● 加えて、今回まででとりあげなかった細かな設 定についても紹介します