JavaScriptを使用したkintoneのカスタマイズ

はじめに

kintoneではJavaScriptプログラムを利用することで、kintoneの各機能の動作や画面をカスタマイズすることができます。
このチュートリアルではまず最初に、helloという文字を画面に表示するという簡単なカスタマイズを例に、kintoneアプリにカスタマイズを設定する手順をご紹介します。

後半には、kintone JavaScript APIやkintone REST APIを利用したカスタマイズ例をご紹介します。このチュートリアルの学習内容は以下の通りです。

• イベント処理の記載
  －「hello」という文字をメッセージで表示する

• レコードの取得・操作　　
  －レコード一覧イベントを取得し「確度」が"A"の「会社名」と「確度」を赤字に変更する
  －レコード表示イベントを取得し「ユーザー数」が500人以上の顧客情報については「見込み時期」をメッセージで表示する

• kintone REST APIを使用したレコード操作
  －レコード一覧表示時にレコード取得APIを使用し案件担当者が自分自身（例：山田太郎）の顧客名をメッセージで表示する

 

環境の準備

kintoneのカスタマイズを行うにあたり下記の環境が必要になります。

kintone

kintoneをまだお持ちでいない方は「cybozu」のサービスをご購入いただくか、5ユーザーで1年間無償のkintone開発者ライセンスを申し込むことができます。 ※申し込みにはメンバー登録が必要です。

Webブラウザ

下記のブラウザをご用意ください。

• Internet Explorer 8 以上
• Mozilla Firefox 最新版
• Google Chrome 最新版
• Safari 6.0 以上

kintoneの動作環境に準じていますので詳細はこちらをご参照ください。

エディタ

JavaScriptのコーディングを行うためのエディタです。

カスタマイズ

アプリの作成

まず、カスタマイズ対象となるアプリをkintoneアプリストアから取得します。

手順1.kintoneにログインします。

 

手順2.kintoneのトップページで[アプリを作成]をクリックします。

 

手順3.「アプリストアから選ぶ」を選択します。

 

手順4.kintoneアプリストアに遷移します。kintoneアプリストアには、さまざまなアプリが用意されていますが、このチュートリアルでは「案件管理」アプリを使用しますので「案件管理」アプリの[このアプリを追加]をクリックします。

 

手順5.確認ダイアログが表示されますので[追加]をクリックします。

 

手順6.作成した「案件管理」アプリに事前にデータを登録します。

会社名	先方担当者	見込み時期	確度	ユーザー数	案件担当者名
森川不動産	佐藤昇	2014-04-01	A	300	山田太郎
ミヤタシステムズ	加藤美咲	2014-04-10	B	150	田中麻子
東山産業	白石航平	2014-05-31	C	1200	山田太郎
安井電機	菊地浩二	2014-04-20	A	200	山田太郎
医療法人坊主会	高橋太郎	2014-05-15	B	500	田中麻子

（山田太郎=ログインユーザ）

JavaScriptファイルの実装

実際にJavaScriptファイルを実装して動きを確認します。

手順1.JavaScriptファイルを用意します。

ファイル名は「sample_customize.js」とし、次のように編集します。

※文字コードは「utf-8」にしてください。

 

手順2.「案件管理」アプリの一覧画面右側の[・・・]アイコンをクリックし[アプリの設定を変更]を選択します。

 

手順3.【設定】タブを選択し、[JavaScript / CSSでカスタマイズ]をクリックします。

 

手順4.今回はPC用のカスタマイズを実施しますので、「PC用のJavaScriptファイル」の[アップロードして追加]をクリックし、先ほど作成したJavaScriptファイル（sample_customize.js）を選択します。選択後[保存]ボタンをクリックし、管理画面に戻ります。

 

手順5.[アプリを更新]ボタンをクリックすると確認用ダイアログが表示されますので、[OK]ボタンをクリックします。

 

手順6.一覧画面に遷移し、メッセージが表示されていれば成功です。

 

 

JavaScript APIの利用

JavaScript APIはkintone アプリのウェブ画面をカスタマイズするためのAPIを提供しています。このAPIを利用することで、多様なユーザーニーズを表現することができます。

JavaScript APIではkintone 使用中に発生する様々なイベントについて、ハンドラーを紐付けして実行することができます。
今回は下記のイベント取得及び処理を実装します。

• レコード一覧イベントを取得し「確度」が"A"の「会社名」と「確度」を赤字に変更する
• レコード表示イベントを取得し「ユーザー数」が500人以上の顧客情報については「見込み時期」をメッセージで表示する

＜レコード一覧イベントを取得し「確度」が"A"の「会社名」と「確度」を赤字に変更する＞

手順1.先ほど実装した「sample_customize.js」をエディタで編集します。

 

手順2.JavaScriptを実装します。

※既に実装してあるファイルを削除してから実装してください。

 

 

 ＜レコード表示イベントを取得し「ユーザー数」が500人以上の顧客情報については「見込み時期」をメッセージで表示する＞

手順3.手順2で実装した「sample_customize.js」を再度編集します。

先ほど記載したイベント処理の次の項目に処理を記載し、JavaScriptファイルを実装します。

 

kintone REST APIの利用

kintone REST APIはkintone アプリのフォーム設計情報の取得やレコードの操作、スペースを操作することができます。今回は下記の実装をします。

• レコード一覧表示時にレコード取得APIを使用し案件担当者が自分自身（例：山田太郎）の顧客名をメッセージで表示する

 ＜レコード一覧表示時にレコード取得APIを使用し案件担当者が自分自身（例：山田太郎）の顧客名をメッセージで表示する＞

手順1.JavaScript APIで使用した「sample_customize.js」をエディタで編集します。

手順2.レコード一覧取得イベント内に下記のコードを追記します。