はじめに
本記事は、キントーンの学習を目的とした備忘録です。公式ヘルプやサンプルコードを基に記載していますが、内容に誤りがある場合もあります。誤りに気づかれた際はご指摘いただけると幸いです。公式情報はキントーン公式ヘルプをご参照ください。
キントーンをカスタマイズする方法
キントーンで作成したフォームをカスタマイズするためには、JavaScriptをテキストエディター等で作成し、ブラウザのキントーンでアップロードする必要があります
JavaScriptコードの全体構造
アップロードするJavaScriptは以下のような構造になります
(() => {
'use strict';
// コードの中身
})();
コードの補足
(() => {...})()
これは即時実行関数と呼ばれるものです。
JavaScriptのコードを他のスクリプトと衝突しないように独立させます。
この中に書いたコードはキントーン上で実行されます。
'use strict';
これはJavaScriptの厳格モードを有効にします。
コードのエラーを見つけやすくするための設定です
具体的には以下のようなエラーを発見することに役立ちます
-
未宣言の変数の使用
厳格モードでは、変数を宣言せずに使用することができなくなるため、宣言されていない変数はエラーになります -
読み取り専用のプロパティの変更
constなどで宣言した定数に対して値を上書きしようとした場合エラーになります
キントーンのイベントについて
キントーンのイベントとは、ボタンをクリックしたり、レコード一覧が表示されるタイミングや、レコード追加画面に移動したときなど、特定のタイミングで実行される処理のことを指します。これにより、画面の表示内容や動作をカスタマイズできます。
イベントの書き方
キントーンには、特定のタイミングでイベントを発生させるための関数が複数用意されています。これらの関数を使用することで、レコードの作成・更新・削除時や、画面が表示されたタイミングなど、状況に応じたJavaScriptを適用することができます。
kintone.events.on('app.record.create.show', (event) => {
// イベント発生時に実行する処理
console.log('レコード作成画面が表示されました');
return event;
});
コードの補足
kintone.events.on
これはキントーンのイベントを登録するための関数です。特定のタイミングで実行される処理を設定します。
'app.record.create.show'
これは「レコード作成画面が表示されたタイミング」のイベントです。具体的には、キントーンのアプリ内で新しいレコードを作成するための画面が表示されたときに発生します。
(event) => { ... }
ここで指定された処理（イベントハンドラー）は、イベントが発生した時に実行されます。eventという引数には、そのイベントに関する情報が含まれています。例えば、レコードのデータやユーザーの入力内容などが含まれます。
キントーンのイベント一覧
キントーンで使用できるイベントには以下の種類があります
レコード作成関連のイベント
レコード作成画面が表示されたとき
app.record.create.show
- 使用例: 新しいレコードを作成する画面が開かれた時に発動する
レコード作成画面でフィールドが変更されたとき
app.record.create.change.フィールドコード
- 使用例: 特定のフィールドの値が変更されたときに発動する
（フィールドコードは変更したいフィールド名に置き換える）
レコード編集関連のイベント
レコード編集画面が表示されたとき
app.record.edit.show
- 使用例: 既存のレコードを編集する画面が表示されたときに発動する
レコード編集画面でフィールドが変更されたとき
app.record.edit.change.フィールドコード
- 使用例: レコード編集画面で特定のフィールドが変更されたときに発動する
レコード詳細関連のイベント
レコード詳細画面が表示されたとき
app.record.detail.show
- 使用例: レコードの詳細ページが表示されたタイミングで発動する。
レコード保存関連のイベント
レコード作成時、レコードの保存（送信）直前に発動
app.record.create.submit
- 使用例: レコードを保存する直前に発動。バリデーションなどを行いたい場合に使用する
レコード編集時、レコードの保存（送信）直前に発動
app.record.edit.submit
- 使用例: レコードを編集して保存する直前に発動
レコード一覧でレコードを編集後、保存する直前に発動
app.record.index.edit.submit
発生タイミング:
使用例: レコード一覧でインライン編集した後に保存するタイミングで発動
レコード削除関連のイベント
レコード削除時、削除直前に発動
app.record.delete.submit
使用例: レコードを削除する直前に発動。
アプリ全体のイベント
レコード一覧画面が表示されたとき
app.record.index.show
使用例: レコードの一覧ページが表示されたときに発動
レコード一覧で、何らかのフィルタリングや並び替えが行われたとき
app.record.index.change
- 使用例: レコード一覧で表示内容が変わったときに発動
レコード一覧画面がリフレッシュされたとき
app.record.index.refresh
- 使用例: レコード一覧をリフレッシュした際に発動
ユーザー関連のイベント
ユーザーがレコード作成画面を開いたとき
app.record.create.show
- 使用例: ユーザーが新しいレコードを作成するために画面を開いた際に発動
フィールドイベント
フィールドごとに独立したイベントも登録可能。フィールドコードの部分に特定のフィールド名を指定することで、そのフィールドが変更されたときにイベントを発動できます。
フォーム上で指定されたフィールドが変更されたとき
app.record.create.change.フィールドコード
- 使用例: 特定のフィールド（例えば「メールアドレス」）が変更されたときに発動
レコード編集画面で指定されたフィールドが変更されたとき
app.record.edit.change.フィールドコード
- 使用例: 編集画面で特定のフィールド（例えば「ステータス」）が変更されたときに発動
実装サンプル
レコードの詳細ページを開いたときにメッセージを表示させるカスタマイズ
(() => {
"use strict";
kintone.events.on('app.record.detail.show', function(event) {
// アラートを表示
alert('このレコードのタスク名は: ' + event.record['task'].value);
return event;
});
})();
