【ハンズオン初級編】90分で実践！ はじめてのkintone JavaScript カスタマイズ # kintonedevcamp 1

Welcome to kintone devCamp 質問は気軽にこの柄の Tシャツ着ている メンターまで！ 1. Wifi環境に繋ぐ SSID: GUEST@CYBOZU 　ID : guestuser 　PASS : kUD3r 2. 資料を下記URLからダウンロードする 　 http://bit.ly/devCamp2017_B-1_B-3 3. PCで下記を用意する 　- kintone環境（システム管理権限のあるアカウント） 　　- 開発者ライセンス（事前取得） 　　※上記ライセンスをお持ちでない方は以下より30日間お試し環境を取得してください 　　　　　 https://kintone.cybozu.com/jp/trial/ 　　- テキストエディタ（Brackets, Sublime Textなど） 　- Chromeブラウザ

【ハンズオン初級編】90分で実践！ はじめてのkintone JavaScript カスタマイズ Cybozu Inc. Tomoko Miyake 七夕/2017

三宅 智子（みやけ ともこ）です 岡山　➡　京都　➡　東京へ 趣味はサイクリング 仕事はkintoneカスタマイズや イベントの運営

今日はこのハッシュタグで ぜひツイートを！ # kintone # kintonedevcamp 告知！ @ kintonedevjp

http://bit.ly/devCamp2017_B-1_B-3 本日の資料 はじめてのkintone JavaScript カスタマイズ.pptx sample.js（穴埋め問題になっています） answer.js（正解ファイルです） 顧客情報.csv（顧客情報アプリに読み込むデータです）

アジェンダ kintoneの基本とAPIによる拡張性（講義） kintoneアプリを作ってみよう kintoneアプリをJavaScriptでいじってみよう プラグインを使ってお手軽カスタマイズをしてみよう もうひと工夫！グラフ作成&通知設定(おまけ) まとめ

kintoneの基本とAPIによる拡張性

Keyword of 簡単・早い コミュニ ケーション API JavaScript API REST API

標準機能で足りない部分を補う kintoneカスタマイズ 画面開発・機能追加 （JavaScript API・HTML・CSS） ガントチャート Map表示 システムデータ連携 （REST API） 基幹システムと連携 センサーと連携 プラグイン（機能追加パッケージ）

kintoneの拡張性 kintoneには大きく分けて2種類のAPIを用意しています JavaScript API REST API 画面のカスタマイズ データ連携

JavaScript API イベントハンドラ（一覧、表示、追加、編集、削除） 画面上の値を取得・設定 REST APIの実行

JavaScript API イベントと画面 〇〇のとき、××がしたい の 〇〇にあたるのがイベント （例）レコード追加画面が 表示されたとき イベントが発生 イベント時の画面情報 JSカスタマイズ処理可能

JavaScript API 活用例 ダッシュボード ガントチャート 帳票

カスタマイズビュー 一覧の画面をHTML5で記述できるビュー

カスタマイズビュー活用例 番外編 >

REST API レコードの取得・追加・更新・削除 スペースの作成・更新 デプロイ（アプリ作成・設定変更）

REST API 連携例 REST API

REST API 活用例

ドキュメント cybozu developer network https://developer.cybozu.io/hc/ja

kintoneカスタマイズに興味ある貴方へ・・・はじめのリンク集 developer network内記事 はじめようJavaScript シリーズ https://developer.cybozu.io/hc/ja/articles/115002336526 はじめよう kintone API シリーズ（全13回） https://developer.cybozu.io/hc/ja/articles/211029283 開発前によくある質問 https://developer.cybozu.io/hc/ja/articles/213504206 Tips > プラグイン https://developer.cybozu.io/hc/ja/sections/200681620 Tips > サンプル https://developer.cybozu.io/hc/ja/sections/200263970 Tips > 外部連携サービス https://developer.cybozu.io/hc/ja/sections/200143874 （左サイドバーから） Cybozu CDN & 活用Tips https://developer.cybozu.io/hc/ja/articles/202960194 イベント情報 devCamp(勉強会) https://kintonedevcamp.connpass.com/ kintone hive online（ブログ） developersカテゴリ http://kintone-blog.cybozu.co.jp/developer// Tipsカテゴリ http://kintone-blog.cybozu.co.jp/tips/ 鉄板！ 直接聞ける ささっと 読める

kintoneアプリを作ってみよう

https://サブドメイン.cybozu.com/ ログイン画面にアクセス https://サブドメイン.cybozu.com/

ログイン完了 メンテナンス等のお知らせ ユーザー情報の管理や cybozu.com 全体に影響する設定 クリックして kintone にアクセス メンテナンス等のお知らせ ユーザー情報の管理や cybozu.com 全体に影響する設定

kintoneのポータル画面紹介 アカウントやシステムの設定 クリックしてアプリを作成 未処理のプロセス一覧 全社向けメッセージ（売上・アプリ一覧） プロジェクトや部署ごとに 情報共有 自分宛通知＆すべて通知 データ蓄積のアプリ クリックしてアプリを作成

アプリストアからアプリを選ぶ 営業支援（SFA）パックの「このアプリを追加」をクリックします

アプリの追加を確認

顧客情報と案件情報アプリの関係性 顧客情報アプリ 案件情報アプリ 顧客情報 顧客情報 案件情報 案件情報 マスタアプリ 会社名がキー！ 顧客情報をコピー 会社名 部署名 担当者名 会社名 部署名 担当者名 住所 メアド etc. 案件情報 案件名 詳細 案件情報 会社名が一致する 案件情報を表示 案件一覧 商談履歴 マスタアプリ

顧客情報アプリ 【関連レコード一覧】 会社名が一致する 案件情報を参照

案件情報アプリ 【ルックアップ】 顧客情報をコピー

アプリにデータを追加してみよう

データ登録の画面遷移 レコード一覧画面 レコード追加画面

データ編集の画面遷移 レコード詳細画面 レコード一覧画面 レコード編集画面

データの追加手順 顧客情報アプリにCSVファイルからデータ読み込み 案件情報アプリにもデータを２～３件追加 ※この時、顧客情報はそのアプリからルックアップ

顧客情報アプリ CSVファイルから読み込む

参照をクリック

データを確認後、読み込むボタンをクリック

読み込み完了を確認

案件情報アプリ 右上のデータ追加ボタンをクリック

ルックアップで他アプリからデータを取得する

顧客情報アプリから案件先の会社を選択

会社名に紐づく「部署名」と「ご担当者名」を自動コピー

会社名に紐づく案件一覧を表示（関連レコード一覧）

アプリの設定変更画面を触ってみよう

アプリの設定変更(1)

アプリの設定変更(2) ドラッグ＆ドロップで開発が可能

フィールドの設定(1) 項目にフォーカスをあわせて歯車をクリック 設定をクリック

フィールドの設定（2) フィールドコードはコーディングに使用

フィールドコード（カスタマイズで使う箇所のみ） ドロップダウン 数値

いよいよ！ kintoneアプリをJavaScriptでいじってみよう

C ドキュメントのあるサイトを確認 https://developer.cybozu.io/hc/jaに移動し、ブックマーク このハンズオンでは、以下のマークのあるページでcybozu developer networkの該当箇所を参照します 「kintone developer」で検索 C

C このサイトでドキュメントを調べながら進めます https://developer.cybozu.io/hc/ja

イベントと操作の確認(1) C APIドキュメント・ツール にマウスオン kintone JavaScript API をクリック

イベントと操作の確認(2) C kintoneにはレコード一覧やレコード表示などのイベントがある

（復習）JavaScript API イベントと画面 〇〇のとき、××がしたい の 〇〇にあたるのがイベント （例）レコード追加画面が表示されたとき イベントが発生 イベント時の画面情報 JSカスタマイズ処理可能

イベントと操作の確認(3) C 詳細ページにイベントと操作の一覧がある

C イベントと操作の確認(3) JavaScript APIは各画面で、可能なイベントと操作が決まっている 以下は各画面におけるイベントと操作の例（一部） 画面 イベント 操作 一覧 編集開始時 フィールドの編集可/不可を設定する 保存実行前 （保存ボタンクリック後） フィールドの値を書き換える フィールドにエラーを表示する レコードにエラーを表示する 詳細 表示後 フィールドの表示/非表示を切り替える 追加/編集 例）可能　　・・・　追加画面で「保存実行前」に「フィールドの値を書き換える」 　　不可能　・・・　詳細画面で「表示後」に「フィールドの値を書き換える」 ※APIを利用せずに実装するとバージョンアップで動作しなくなる可能性

やりたいこと1 レコード追加、編集画面でフィールドの値を変更したとき レコード追加、編集、詳細画面を表示したとき 受注確度が「受注」だったら、受注金額を表示する （それ以外の時は非表示） こんなとき: 必要な時のみ フィールドを表示したい 受注金額を 表示

やりたいこと2 レコード保存時にアラート表示（リマインド） 「登録ありがとうございます！商談ごとに記録を残してください」

コーディングルール(1) ファイルの拡張子はjsで保存（例：sample1.js） ファイルは文字コードUTF-8で保存 　　正確にはUTF-8N（BOMなし）で保存 今後はこのファイルを編集していきます。

コーディングルール(2) 即時関数で記述 変数の影響範囲を即時関数内だけに制限する （即時関数外の変数を上書きしない） (function() { })(); 変数の影響範囲を即時関数内だけに制限する 　　（即時関数外の変数を上書きしない） 関数の定義と呼び出しを同時に実行する

コーディングルール(3) strict（厳格）モードを使用 的確なエラーチェックが行われる。 例）宣言していない変数の使用 (function() { 'use strict'; })(); 的確なエラーチェックが行われる。 例）宣言していない変数の使用

イベントの記述(1) イベントと操作は以下のように記述 (function() { 'use strict'; // レコード追加画面が表示されたら kintone.events.on('イベント', function(event) { // 操作 }); })(); ★TRY★ 'イベント'をレコード追加画面が表示されたときのイベント名に書き換えよう

イベントの記述(2) C ヒント APIドキュメント > JavaScript APIのイベント > レコード追加イベント

イベントの記述(3) 正解 (function() { 'use strict'; // レコード追加画面が表示されたら kintone.events.on('app.record.create.show', function(event) { // 操作 }); })();

イベントの記述(4) ・レコード追加、編集、詳細画面を表示したとき ・レコード追加、編集画面でフィールドの値を変更したとき ★TRY★ 追加画面以外のイベント名も追加してみよう (function() { 'use strict'; 　//レコードの追加、編集、詳細画面で、フィールドの表示非表示を切り替える kintone.events.on([‘app.record.create.show’, 　　　 ‘app.record.×××.show’, 　　　 ‘app.record.×××.show’, 　　　 ‘app.record.×××.×××.×××’, 　　　 ‘app.record.×××.×××.×××’], function(event) { // 操作 }); })(); レコード追加、編集、詳細画面を表示したとき レコード追加、編集画面でフィールドの値を変更したとき

イベントの記述(5) 正解 ・レコード追加、編集、詳細画面を表示したとき ・レコード追加、編集画面でフィールドの値を変更したとき (function() { 'use strict'; 　//レコードの追加、編集、詳細画面で、フィールドの表示非表示を切り替える kintone.events.on([‘app.record.create.show’, 　　　 ‘app.record.edit.show’, 　　　 ‘app.record.detail.show’, 　　　 ‘app.record.create.change.ドロップダウン’, 　　　 ‘app.record.edit.change.ドロップダウン’], function(event) { // 操作 }); })(); レコード追加、編集、詳細画面を表示したとき レコード追加、編集画面でフィールドの値を変更したとき

操作の記述(1) C フィールドの表示非表示を切り替えるをクリック

操作の記述(2) C サンプルコードを確認

サンプルの2行目の解説 kintone.events.on(‘app.record.create.show’, function(event) { var record = event.record; kintone.app.record.setFieldShown('文字列__1行', false); }); 1 変数event配下のrecordを変数recordに代入 変数event, recordって？ 2 3 4

変数event, recordの内容を確認 F12>consoleで確認 フィールドコードの一覧 type : フィールドの種類 value: フィールドの値 valueにはイベント時の値が入っている … （以下略）

サンプルの3行目の解説 kintone.events.on(‘app.record.create.show’, function(event) { var record = event.record; kintone.app.record.setFieldShown('文字列__1行', false); }); 1 2 3 4 文字列1行フィールドの値を非表示にしている false:非表示 true:表示

やりたいこと1をやってみる ★TRY★ XXXを埋めて、レコード追加、編集画面でフィールドの値を変更したとき＆レコード追加、編集、詳細画面を表示したとき 受注確度が「受注」だったら、受注金額を表示してみよう（それ以外の場合は非表示） (function() { ‘use strict’; //レコードの追加、編集、詳細画面で、フィールド表示非表示を切り替える kintone.events.on([‘app.record.create.show’, 　　　 ‘app.record.edit.show’, 　　　 ‘app.record.detail.show’, 　　　 ‘app.record.create.change.ドロップダウン’, 　　　 ‘app.record.edit.change.ドロップダウン’], function(event) { var record = event.record; var result = record['ドロップダウン'].value; //受注確度フィールドで「受注」が選択された場合のみ受注金額フィールドを表示にする if (result === ‘×××') { kintone.app.record.setFieldShown('数値', ×××); }else { } 　　}); })();

フィールドコード（カスタマイズで使う箇所） ドロップダウン 数値

C ヒント フィールドの表示非表示を切り替えるを調べてみよう（レコー ド追加・編集・詳細イベントのページ共通の記載） レコード追加、編集画面のフィールド値変更時イベントを使用 サンプル「回答の条件によって別フィールドの表示-非表示を 切り替える」の書き方も参考になる https://developer.cybozu.io/hc/ja/articles/202377614

正解 (function() { ‘use strict’; //レコードの追加、編集、詳細画面で、フィールドの表示非表示を切り替える kintone.events.on([‘app.record.create.show’, 　　　 ‘app.record.edit.show’, 　　　 ‘app.record.detail.show’, 　　　 ‘app.record.create.change.ドロップダウン’, 　　　 ‘app.record.edit.change.ドロップダウン’], function(event) {, function(event) { var record = event.record; var result = record['ドロップダウン'].value; 　　 //受注確度で「受注」が選択された場合のみ受注金額フィールドを表示する if (result === '受注') { kintone.app.record.setFieldShown('数値', true); }else { kintone.app.record.setFieldShown('数値', false); } 　 }); })();

作成したJavaScriptファイルをアプリに適用(1) 歯車マークをクリック

作成したJavaScriptファイルをアプリに適用(2) JavaScript / CSSでカスタマイズ をクリック

作成したJavaScriptファイルをアプリに適用(3) PC用のJavaScriptファイルのアップロードして追加 をクリックし、 先ほど作成したJavaScriptファイルを選択 保存 をクリック

作成したJavaScriptファイルをアプリに適用(4) アプリを更新 をクリック OKをクリック

動作確認 アプリに適用 想定通りか確認 この後も引き続きsample.jsファイルを編集

（おまけ）JSEdit for kintone ①kintone APIの補完機能 ②保存したらすぐに反映 ③ライブラリも簡単に設定可能 https://developer.cybozu.io/hc/ja/articles/205452613

やりたいこと2をやってみる ★TRY★ レコード保存時に、アラート表示をしてみよう（追加画面＆編集画面） (function() { ‘use strict‘; // レコード保存実行時に、アラート表示する kintone.events.on(['app.record.create.submit', 'app.record.×××.submit'], function(event) { alert(‘××××××××’); }); })();

ヒント C アラート表示メソッドのサンプルはこちら 　　alert(‘Hello’); 編集を英語で表すと？

正解 (function() { ‘use strict’; // レコード保存実行時に、アラート表示する kintone.events.on(['app.record.create.submit', 'app.record.edit.submit'], function(event) { alert('登録ありがとうございます！商談ごとに記録を残してください。'); }); })();

（おまけ）OKとキャンセルの分岐を作ることも可能 (function() { ‘use strict’; // レコード保存実行時に、アラート表示する kintone.events.on(['app.record.create.submit', 'app.record.edit.submit'], function(event) { var result = confirm('登録してもいいですか？'); if(result) { return true; }else { return false; } }); })();

やりたいこと1と2をまとめると… ① ② (function() { 'use strict'; //レコードの追加、編集、詳細画面で、フィールドの表示非表示を切り替える kintone.events.on(['app.record.create.show', 'app.record.edit.show', 'app.record.detail.show', 'app.record.create.change.ドロップダウン', 'app.record.edit.change.ドロップダウン'], function(event) { var record = event.record; var result = record['ドロップダウン'].value; //受注確度で「受注」が選択された場合のみ受注金額フィールドを表示する if (result === '受注') { kintone.app.record.setFieldShown('数値', true); }else { kintone.app.record.setFieldShown('数値', false); } }); // レコード保存実行時に、アラート表示する kintone.events.on(['app.record.create.submit', 'app.record.edit.submit'], function(event) { alert('登録ありがとうございます！商談ごとに記録を残してください。'); })(); ① ②

動作確認 アプリに適用 想定通りか確認 皆さん成功しましたか？

プラグインを使ってお手軽カスタマイズ をしてみよう

既製品（プラグイン）を使えば もっとお手軽にカスタマイズ可能！ ※お手軽なプラグイン等がないところだけ自分で開発 →これぞ賢い方法！ 既製品（プラグイン）を使えば もっとお手軽にカスタマイズ可能！ ※お手軽なプラグイン等がないところだけ自分で開発　　 　 →これぞ賢い方法！

プラグインとは 複数のJavaScriptファイルやCSSファイルをまとめて適用できる アプリの機能拡張や他サービスとの連携をより簡単に実現できる

メリット：GUIで設定変更できる プラグインでない場合は、アプリに合わせてJavaScriptファイルを編集する 必要あるが、プラグインの場合は設定画面から設定変更できる ※他にもAPIキーなどの重要情報をプラグインに隠せたり、 　 バージョンアップが楽だったりといったメリットあり

条件によって書式を変更したい！ →因みに普通にカスタマイズしたらこんな感じ 途中で色を変えたい！条件を変えたい！となったら その都度コード修正が必要 https://developer.cybozu.io/hc/ja/articles/202341944

C 条件書式プラグインを試してみよう 下記より条件書式プラグインをダウンロードして適用します デモへLet’s go! プラグイン内のコードを修正して再パッケージングすれば、自分仕様にカスタマイズすることもできます！ チャレンジしたい方はこちらを参考に↓ https://developer.cybozu.io/hc/ja/articles/203455680 https://cybozudev.zendesk.com/hc/ja/articles/208236353

これ以降はプラグインの設定手順を記載しています。 復習の際にお使いください。

One more thing

１．kintoneモバイルでもカスタマイズを適用させたい C １．kintoneモバイルでもカスタマイズを適用させたい kintoneモバイルのイベント名は別に用意されているので、 追加で指定してあげる必要がある 【参考Tips】スマートフォン用APIを使ってみよう！ https://developer.cybozu.io/hc/ja/articles/217201486 （例） ‘kintone.mobile.app.record.create.change.ドロップダウン'

２．回答の条件によってグループフィールドを切り替える C ２．回答の条件によってグループフィールドを切り替える 複数のフィールドをまとめて切り替えたい場合 kintoneのグループフィールド＆グループ開閉APIがある 【参考Tips】回答の条件によってグループフィールドの開閉を切り替える https://developer.cybozu.io/hc/ja/articles/207377396

C グループフィールドを使った場合

３．SweetAlert（ライブラリ）を使ってスタイリッシュな アラート表示に C ３．SweetAlert（ライブラリ）を使ってスタイリッシュな 　　アラート表示に https://developer.cybozu.io/hc/ja/articles/204790870

まとめ

kintone まとめ 業務アプリケーションをドラッグ＆ドロップで作れる プラットフォーム kintone JavaScriptカスタマイズ 業務アプリケーションをドラッグ＆ドロップで作れる プラットフォーム kintone JavaScriptカスタマイズ 入力制御をしたり、表示を変えることができたりする 他サービスと連携ができる 楽しい←ここ重要！

cybozu developer network ★メンバー登録特典★ 5ユーザー、1年間無償のkintone開発者ライセンスを申し込むことができます。 コミュニティに投稿やコメントしたり、Tips に質問できます。 API のアップデート情報の通知を受け取ることができます。 Tipsやサンプルのkintone デモサイトを利用できます。 気になるユーザーをフォローすることができます。 kintone専用のHTTPクライアントツールを利用できます。 https://developer.cybozu.io/hc/ja

Thank You. Let’s enjoy kintone customizing together！