kintone JavaScript API

kintone JavaScript API とは

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

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

よく使う kintone JavaScript API

`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.app.getId()`

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

`kintone.getLoginUser()`

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

`kintone.app.getHeaderMenuSpaceElement()`

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

UseCase1：ログインユーザーに応じてヘッダー上部の情報を変更する

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


(() => {
  'use strict';

  kintone.events.on('app.record.index.show', (event) => {
    // ログインユーザーのコードを取得
    const loginUser = kintone.getLoginUser().code;

    // 表示するユーザーを設定
    const permission = ['taro', 'jiro'];

    if (permission.includes(loginUser)) {
      // ログインユーザーに応じた処理をここに書く
      kintone.app.getHeaderSpaceElement().textContent = 'Hello Members!';
    }
    return event;
  });
})();

UseCase2：ラジオボタンの値に応じてフィールドの表示非表示を切り替える

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


(() => {
  'use strict';
  // 表示非表示を切り替えるフィールドコードを指定
  const fields = ['入金日', '入金確認者'];
  // 制御するラジオボタンを指定
  const radio = '入金ステータス';
  // 制御するラジオボタンの値を指定
  const radioValue = '確認済';

  // ラジオボタンの値に応じてフィールドを表示する処理
  kintone.events.on([
    'app.record.create.show',
    'app.record.edit.show',
    `app.record.create.change.${radio}`,
    `app.record.edit.change.${radio}`
  ], (event) => {
    if (event.record[radio].value !== radioValue) {
      fields.forEach((field) => {
        kintone.app.record.setFieldShown(field, false);
      });
    } else {
      fields.forEach((field) => {
        kintone.app.record.setFieldShown(field, true);
      });
    }
    return event;
  });
})();

まとめ

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

次回は、 kintone カスタマイズにおける PC とモバイルの違いについて学習しましょう。

はじめよう kintone API