kintone JavaScript API を使ってみよう

目次

kintone JavaScript APIとは

kintone JavaScript APIは、ブラウザーの画面上の情報を取得・操作できるAPIです。

kintoneには独自のメソッドが複数用意されており、さまざまな情報が取得できます。

kintone.events.on()

JavaScriptでは、addEventListener()を使ってイベントと関数を紐付けます。
kintoneには独自のイベントがあり、その独自イベントと関数を紐付けるためにkintone.events.on()を利用します。

JavaScript kintone JavaScript API
イベント click,changeなど app.record.create.showなど
イベントと関数の紐付け addEventListener(イベント, 関数) kintone.events.on(イベント,関数)

kintoneでイベントと関数を紐付けるには、次のように書きます。

1
2
3
kintone.events.on('app.record.create.show', (event) => {
  // イベントで行いたい処理を書く
});

kintoneのイベントオブジェクト

kintoneのイベント発生時の情報が格納されたオブジェクトです。
kintoneのイベントと紐づけられた関数の引数で受け取ることができます。

1
2
3
4
kintone.events.on('app.record.create.show', (event) => { // この「event」がイベントオブジェクト
  event.record['加工したいフィールドコード'].value = '加工したい内容';
  // ~~~
});

kintoneのイベントオブジェクトをreturnする

関数内でイベントオブジェクトを加工した後returnすることで、加工内容をkintoneに反映できます。

1
2
3
4
kintone.events.on('app.record.create.show', (event) => {
  event.record['加工したいフィールドコード'].value = '加工したい内容';
  return event; // returnすることで加工内容が反映される
});

イベントオブジェクトできること

イベントオブジェクトを取得・操作することで、次のことができます。

  • フィールドの値を書き換える。
  • フィールドの編集可/不可を設定する。
  • フィールドにエラーを表示する。
  • レコードにエラーを表示する。
  • 変更されたフィールド、テーブル内の行オブジェクトを取得する。
  • ルックアップを自動取得する。
  • ルックアップのコピー先のフィールドの値を自動でクリアする。

よく使うkintone JavaScript API

kintone.app.getId()

kintone.app.getId()は、開いているアプリのIDを取得するメソッドです。
kintone REST APIでアプリIDを指定するときなどに利用します。
直接IDを指定すると、環境やアプリが変わったときにコードの書き直しが必要です。
しかし、このメソッドを利用すればその手間を省くことができます。

kintone.getLoginUser()

kintone.getLoginUser()は、ログインユーザーの情報を取得するメソッドです。
ログインユーザーのログイン名や表示名、メールアドレスなどを取得できます。
イベントオブジェクトの操作と組み合わせることで、「ログインユーザーに応じた情報を表示する」といったカスタマイズが可能になります。

kintone.app.getHeaderMenuSpaceElement()

kintone.app.getHeaderMenuSpaceElement()は、アプリ詳細画面でメニューの上側の空白部分の要素を取得するメソッドです。
「取得した要素にボタンを配置する」といったカスタマイズが可能になります。

まとめ

今回はkintone JavaScript APIについて学びました。
kintone独自のメソッドを理解して書けるようになりましょう。

次回は、 レコード画面に任意のテキストを表示してみようです。
よくあるカスタマイズのサンプルコードを通して、カスタマイズのポイントを学んでいきましょう。