イベントオブジェクトの内容を確認する方法（kintoneカスタマイズ初心者）
初心者がカスタマイズを作っていく時に必要な基本知識やテクニックを紹介します。今回はkintoneカスタマイズで必ずと言っていいほど遭遇する、イベントオブジェクトの内容を確認する方法を紹介します。
みなさんこんにちは。プロジェクト・アスノートの松田です。ドシキンカス（ド素人が始めるkintoneカスタマイズ）シリーズでは、非エンジニア、非プログラマーの人がどうやってkintoneカスタマイズを作れるようになるか、私の経験をもとに、その考え方やノウハウを紹介していきます。
https://pj.asunote.jp/first_step_of_kintone_customise/
kintoneカスタマイズの基本骨格
kintoneカスタマイズを作るときにまず考えるべき基本骨格は次のように簡略化することができると思います。
- いつ（何をどうしたタイミングで）
- 何をするか
- データを取得する（レコードのデータ等）
- 必要な処理を行う（演算や判断）
- アプリに反映する
kintoneのイベントのおさらい
まず最初に、カスタマイズのプログラムが動くタイミングを決める必要があります（kintone カスタマイズ の基本骨格１）。いろいろなタイミングで動作させることができますが、目的に応じて適切なタイミングを選ぶ必要があります。
ちなみに、イベントが発動することを業界用語では「発火する」と言うみたいなので覚えておきましょう
kintoneにはアプリ操作の流れの中に、いくつか「イベント」というものが作られています。このイベントの起こるタイミングが、カスタマイズを動かすタイミングでもあります。
kintone JavaScript API一覧 – deveoper network
イベントオブジェクト
イベントが発生したときには、そのイベント発生時の情報がイベントオブジェクトという形で作られていて、イベント時に行う処理の中で取り扱うことができます。
これが「２．何をするか」の中の「データを取得する」で取り扱うことができるデータの代表格です。
イベントオブジェクトで取れるもの以外のデータが必要になったときには、REST APIが必要になってくる、というイメージです。
これからkintoneカスタマイズを学んでいくとき、イベントとそこで得られるeventオブジェクトにどんな情報が入っているかを把握しておく（または調べ方を知っておく）ことは、非常に大事になります。
上で紹介した developer networkの各イベントのドキュメントに、それぞれのイベントで利用できるイベントオブジェクトについての説明があります。
イベントオブジェクトの確認方法１（プログラムによるコンソール出力）
それではさっそく、イベントオブジェクトを確認する方法を説明していきます。サンプルアプリに次のJavaScriptを登録して動かしてみましょう。
eventオブジェクトの中身を確認する
(function () {
"use strict";
const events = [
'app.record.detail.show',
'app.record.create.show',
'app.record.edit.show'
];
kintone.events.on(events, function(event) {
console.log(event);
});
})();このプログラムでは、次の３つのイベント発生時に、コンソールにeventオブジェクトを出力する、という処理を書いています。
このJavaScriptを登録した状態で、アプリの新規レコード追加または編集画面を開いたときや、既存レコードの詳細画面を開いたときに、その時のイベントで発生したイベントオブジェクトがコンソールに書き出されるはずです。
さっそくコンソールを開いてみましょう。ブラウザーはChromeを使っています。
Chromeの画面上で右クリックで表示されるメニューから「検証」を選択します。ショートカットもありますので覚えておきましょう。WindowsではF12キー、MacではCommand+Option+I でブラウザーのデベロッパーツールが開きます。設定によってブラウザーの画面の下や右側に表示されることがありますが、これはお好みで変更することができます。
デベロッパーツールが開いたら、ツール内のメニュータブから「Console」を選択します。すると、まだ何も表示されていない画面が表示されます。これがコンソールです。
アプリのレコード画面を開くと、図のようにコンソール画面に何かが書き出されていることがわかります。
コンソールに書き出されたイベントオブジェクトは１行のように見えますが、左端の▶をクリックして展開していくと、その中身を見ることができます（上の図）ドキュメントに書かれている、eventオブジェクトのプロパティに該当する内容も確認することができます。
イベントオブジェクトの確認方法２（ブレークポイントを使う）
１で行った方法は、プログラムでコンソールログに出力するという処理を記載していました。２つめの方法は、別の任意のカスタマイズプログラムを動かしているのを、途中で強制的に一時停止させます（ブレークポイント）。一時停止中には、その時点で保持されている変数等の内容をコンソールから確認することができます。この方法でイベントオブジェクトを確認してみることにしましょう。
サンプルアプリに次のJavaScriptを登録して動かしてみます。先ほどと似ていますが、今度はコンソールに出力する処理（console.log()）が書かれていないことに注目してください。これは今開発中のカスタマイズプログラムでも構いません。
イベント発火後、なにも処理せずに終了するプログラム
(function () {
"use strict";
const events = [
'app.record.detail.show',
'app.record.create.show',
'app.record.edit.show'
];
kintone.events.on(events, function(event) {
// ここにイベント時に行いたい処理を記載する
return event;
});
})();
次に、アプリを開いた状態で、Chromeのデベロッパーツールを起動します。
覚えていますか？ 右クリックから「検証」または、WindowsではF12キー、MacではCommand+Option+I でデベロッパーツールが起動します。
前回は「Console」タブを開きましたね。今回はブレークポイントという機能を使って、プログラムの実行を途中で一時停止させたいと思います。「Sources」というタブを開きましょう。
そこで左側に表示されるツリーから、kintoneのドメイン名（xxxx.cybozu.com)の下の「ｋ」というフォルダーを展開していきます。
ｋ → api/js → download.do?app=… と開いていくと右側にJavaScriptコードが表示されますので、この状態になるように展開していきましょう。
次に、JavaScriptコードの一時停止したい行の行番号をクリックします。
イベントオブジェクトはそのイベントが終わってしまう（return event）と無くなってしまうので、その直前で停止するようにしたいです。return eventが書かれた行の行番号をクリックしてください。行番号が青く反転し、プログラムが青い矢印で囲まれました。これでブレークポイントが設定されたことになります。
この状態でプログラムを実行させると、この行で一時停止します。さっそくやってみましょう。アプリのレコード詳細画面を開いてみましょう（新規追加画面や編集画面でも同じ動きとなります）。
図のようにアプリ画面がグレーになり、JavaScriptコードのブレークポイントが設定された行が青くなり、ここで停止ていることを表しています。
次にこの状態で「Console」タブに移ります。そしてコンソールに「event; 」と打ち込んでエンターを押します。event;すると、コンソールにイベントオブジェクトが出力されます。
ここで指定した「event」は、JavaScriptコードの中で書いた
kintone.events.on(events, function(event) {
の、function()の中に記載したevent を表示するという意味になります。
もしここを、
kintone.events.on(events, function(e) {
のように記載していたとしたら、「e; 」と指定する必要があります。ときどきサンプルプログラム等で、このような記載をしているものがありますので注意してください。
一時停止したプログラムは、グレーになったアプリ領域の上に表示されている、青い再生ボタンを押すことで解除されて、プログラムが進みます。
今回は、kintoneカスタマイズを学ぶうえで必要になる、イベント（event）オブジェクトの確認方法を説明しました。
- JavaScriptでコンソールに出力させる
- ブレイクポイントにより一時停止させ、コンソールで確認する。
kintone導入・活用のご相談はこちら！
◇ kintone導入がなかなか進まない
◇ アプリが思ったような動きをしてくれない・・・
◇ カスタマイズやプラグインをどう選んだらいいの？？
◇ 業務改善の進め方がよくわからない
サイボウズ公認 kintone エバンジェリストの 松田正太郎があなたの相談相手になります。
保有しているkintone認定資格：
・kintone認定アソシエイト（2017）
・kintone認定アプリデザインスペシャリスト（2017）
・kintone認定カスタマイズスペシャリスト（2020）
★業務改善アドバイス、kintone構築支援
★連携サービス・プラグイン選定支援、カスタマイズ
★詳細ヒアリングの上、御社に最適なプランを提案します
★初回打合せ（2時間程度）は無料。まずはお問い合わせください！（WebミーティングOK）