こちらは簡易版のチュートリアルです。
kintoneカスタマイズの概要については、kintoneカスタマイズとは を参照してください。
チュートリアルの全体図については、kintoneカスタマイズ チュートリアルの進め方 を参照してください。
はじめに
kintoneではJavaScriptプログラムを利用することで、kintoneの各機能の動作や画面をカスタマイズすることができます。
このチュートリアルではまず最初に、helloという文字を画面に表示するという簡単なカスタマイズを例に、kintoneアプリにカスタマイズを設定する手順をご紹介します。
後半には、kintone JavaScript APIやkintone REST APIを利用したカスタマイズ例をご紹介します。このチュートリアルの学習内容は以下の通りです。
- イベント処理の記載
－「hello」という文字をメッセージで表示する
- レコードの取得・操作
－レコード一覧イベントを取得し「確度」が"A"の「会社名」と「確度」を赤字に変更する
－レコード表示イベントを取得し「ユーザー数」が500人以上の顧客情報については「見込み時期」をメッセージで表示する
- kintone REST APIを使用したレコード操作
－レコード一覧表示時にレコード取得APIを使用し案件担当者が自分自身（例：山田太郎）の顧客名をメッセージで表示する
環境の準備
kintoneのカスタマイズを行うにあたり下記の環境が必要になります。
kintone
kintoneをまだお持ちでいない方は「cybozu.com」のサービスをご購入いただくか、5ユーザーで1年間無償のkintone開発者ライセンスを申し込むことができます。 ※申し込みにはメンバー登録が必要です。
Webブラウザ
ブラウザはこちらのサイトに記載されているデスクトップ用のブラウザをご用意下さい。
エディタ
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.レコード一覧取得イベント内に下記のコードを追記します。
見込時期のフィールドコードは、"日付" に変更されていませんか？
フィールドにあるキーワードが入力されている場合にアラートを表示させたいのですが、
手順３を応用しようとしてやっていますが、アラートが表示されません。
何か足らないのでしょうか？
よろしくお願いいたします。
(function() {
"use strict";
//レコード表示イベントを取得
kintone.events.on('app.record.detail.show', function(event) {
//表示したレコードの取得
var record = event.record;
//ユーザー数が500人以上であればメッセージを表示
if (record['債権']['value'] >= 未回収) {
alert("未回収案件です);
}
});
if (record['債権']['value'] >= 未回収) {
こちらの部分どういう意味でしょうか。
>= 500 ではないでしょうか
債権のフィールドに未回収という文字が入力されていればということであれば、
if (record['債権']['value'] === '未回収') {
か
if (record['債権']['value'] == '未回収') {
で動作しませんか。
「案件管理」アプリを使って、このページにある「レコード一覧イベントを取得し「確度」が"A"の「会社名」と「確度」を赤字に変更する」コードを実行しても、動作しません。
alertやボタンを追加するコードは動くようです。
ほかのコードでもフィールド値を取得するような処理が入ると動作しないようです。
文字コードはUTF-8（BOMなし）になっています。
何が原因なのでしょうか。
よろしくお願い致します。
佐藤さん
今ｱﾌﾟﾘ追加して試してみました。
私もあまり詳しくはないのですが、案件管理に手順通りjsを追加したらできました。
特に何も編集していないのです。（コピペでOKでした。）
解決にならないと思いますがご参考まで。