kintone

塾講師と学ぶkintoneカスタマイズ【イベント編】

Teru
Teru
塾講師と学ぶkintoneカスタマイズへようこそ!

■塾講師と学ぶkintoneカスタマイズとは
kintoneをカスタマイズしたいけど、やり方がわからない!という方のために
現役塾講師が実経験をもとに1からカスタマイズ方法をお教えします。
最終ゴールはもちろん、自分の環境にあったカスタマイズを実現することです。

■ご質問やご意見はTwitterまたはお問い合わせフォームまで!

イベント編

Teru
Teru
まずはkintoneカスタマイズの基礎、イベントについて理解していきましょう。

イベントとは

Teru
Teru
イベントとは簡単に言えば、どのタイミングでカスタマイズを発動させるか、というタイミングです。

ドラゴンクエストのイメージで

村を訪れると何度話しかけても同じことしか話さない村人がいます。

このような動作もすべてプログラムで書かれているわけですが、
この動作にもイベントが含まれています。

主人公が「村人に話しかける」というのがイベント(プログラムの着火合図)で、
そのイベントが着火したら「会話を表示する」というコードになっています。

kintoneでも「村人に話しかける」のような着火合図が複数用意されており、
作りたいプログラムに合ったイベントを選択していくことになります。

イベントの記述の仕方

Teru
Teru
まずは試しにプログラムを作り、イベントがどのようなものかを理解しましょう。

サンプルコード

まずは手始めに下記のコードをJSEdit for kintoneにコピー&ペーストしてみましょう。

(function() {
   "use strict";
   kintone.events.on("app.record.index.show", function(event) {
       alert('kintoneカスタマイズ');
   });
})();

保存してアプリを開き、下記のような画面が出れば成功です。

解説

先ほどのコードを解説していきます。
まずは下の図をご覧ください。

同じ色で塗られた場所がグループだと思ってくだされば結構です。

青い枠のグループ
これはいわば定型文です。
JavaScriptを正しく動かすために必須なコードと思えば大丈夫です。
簡単に言うと、上部が「拝啓」、下部が「敬具」です。


黄色い枠のグループ
ここが今回学ぶイベントを記述している箇所です。
app.record.index.showは「アプリの一覧画面が表示されたら」というイベントを表しています。

赤い枠のグループ
この枠の中にイベント発火後に「実現したいこと」を記述していきます。
今回はalertというアラートを表示する機能を使っています。

イベントの種類

Teru
Teru
イベントの種類を知るということは、どんなものが作れるかを知るということでもあります。多くのイベントが用意されているので、一つ一つ理解していきましょう。

参考サイト:cybozu developer network

イベントごとにできること・できないこと

Teru
Teru
イベントごとにできること・できないことが決まっています。それを理解していないと、「なぜ動かないんだ!?」と何時間も悩むことになってしまいます。

サンプルコード

まずは下のコードをコピー&ペーストして実行してみましょう。

(function() {
   "use strict";
   kintone.events.on("app.record.create.submit", function(event) {
       var record = event.record;
       var recordId = record.$id.value;
       alert(recordId);
   });
})();

レコードを作成して保存してみてください。
あれ?保存ボタンが押せませんね。
では次のコードに書き換えてください。

(function() {
   "use strict";
   kintone.events.on("app.record.create.submit.success", function(event) {
       var record = event.record;
       var recordId = record.$id.value;
       alert(recordId);
   });
})();

どうでしょうか。今回は見事にレコード番号が表示されました。

解説

最初のコードと、2回目のコードで変わったことはイベントの種類だけです。
最 初:app.record.create.submit (レコード保存実行前)
2回目:app.record.create.submit.success(レコード保存実行後)

今回表示されているのはレコードID(数あるレコードの中からそのレコードを特定するID)と呼ばれるものですが、実はこれ、レコードの保存が完了した時点で発行されるものなのです。
つまり、レコード保存実行前にレコードIDをいくら取得しようとしても取得することができません。

このように、イベントにはできること・できないことが存在します。
それを理解したうえでカスタマイズを進めていきましょう。