第 2 回 レコード一覧画面にボタンを置いてみよう!

著者名: 落合 雄一 (External link)

目次

information

初めて kintone をカスタマイズする人が kintone API の基礎知識を学べるよう、チュートリアルの内容を充実させてリニューアルしました。
リニューアル後のチュートリアルは次のページを参照してください。
はじめよう kintone API

はじめに

さて、前回の 第 1 回 kintone JavaScript API のイジりかた で kintone JavaScript API の基本の「き」をご理解いただけたかと思います。
今回からは、実際に JavaScript を使ったカスタマイズをやってみましょう。

それでは、「kintone にボタンを設置して、アクションを起こしたい!」という最も一般的なカスタマイズについて第 2 回と第 3 回の 2 回に分けて紹介します。

kintone のイベント処理

kintone のイベント処理については、前回ちょっと触れましたね。
今回は、 レコード一覧画面を表示した後のイベント を使うのでこんな感じになります。

1
2
3
4
5
6
7
8
(() => {
  'use strict';

  // レコード一覧画面の表示後イベント
  kintone.events.on('app.record.index.show', (event) => {
    // ここに具体的な処理の内容を記述する
  });
})();

詳しくは、前回の 第 1 回 kintone JavaScript API のイジりかた イベント処理の記述方法 を確認してください。

ボタンの設置

それでは、実際にレコード一覧にボタンを設置してみましょう。
設置場所はやはり、レコード一覧画面のメニュー右側の空白部分が一般的ですね。

赤枠の部分の要素を取得するには、 kintone.app.getHeaderMenuSpaceElement() を使います。
それでは、実際に JavaScript を記述してみます。

1
2
3
4
5
6
7
(() => {
  'use strict';

  kintone.events.on('app.record.index.show', (event) => {
    kintone.app.getHeaderMenuSpaceElement().innerHTML = '<button id=\'my_index_button\'>一覧のボタン</button>';
  });
})();

それでは、このソースを任意のアプリに取り込みましょう。
保存するファイルは拡張子「.js」、文字コードは UTF-8(BOM なし)で作成することを忘れずに。

あっさり出来ちゃいましたね。

しかし、上記のように innerHTML でタグごとまとめて突っ込んでしまう書き方は、バグが入りやすく、あまりよいとはいえません。
今のうちに書き換えておきましょう。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
(() => {
  'use strict';
  // レコード一覧の表示後イベント
  kintone.events.on('app.record.index.show', (event) => {
    // ボタン
    const myIndexButton = document.createElement('button');
    myIndexButton.id = 'my_index_button';
    myIndexButton.innerText = '一覧のボタン';

    // メニューの右側の空白部分にボタンを設置
    kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);
  });
})();

ボタン要素を作成し、赤枠の部分に設置しています。
こちらの方がいいですね。

増殖バグを防ぐ

上記のコードでは、次の操作をする度に一覧のボタンが次々生まれてきますね。

  • ページめくりをしたとき
  • カラムソートしたとき

俗にいう増殖バグってやつです。
冒頭に、ボタン要素 my_index_button の有無を判定する if 文を追加して対処しましょう。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
(() => {
  'use strict';
  kintone.events.on('app.record.index.show', (event) => {
    // 増殖バグを防ぐ
    if (document.getElementById('my_index_button') !== null) {
      return;
    }

    const myIndexButton = document.createElement('button');
    myIndexButton.id = 'my_index_button';
    myIndexButton.innerText = '一覧のボタン';
    kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);
  });
})();

ボタンクリック時の処理

それでは、このボタンがクリックされた時の処理を追加してみましょう。
今回は、ボタンがクリックされた時にアラート処理を行う JavaScript を記述してみます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
(() => {
  'use strict';
  kintone.events.on('app.record.index.show', (event) => {
    if (document.getElementById('my_index_button') !== null) {
      return;
    }

    const myIndexButton = document.createElement('button');
    myIndexButton.id = 'my_index_button';
    myIndexButton.innerText = '一覧のボタン';

    // ボタンクリック時の処理
    myIndexButton.onclick = () => {
      confirm('いま押しましたね?');
    };

    kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);
  });
})();

先の例で追加したボタン要素に onclick イベントを普通に記述してあげればよいだけですね。

それでは、このソースを任意のアプリに取り込みましょう。
これまでと同じ「一覧のボタン」が表示されましたら、勇気を振り絞ってボタンをクリックしてみましょう。

これも簡単にできましたね。

ちょっと応用

それでは、今までやったことを踏まえて少し応用してみましょう。
レコード一覧画面にはもうひとつ、メニューの下側の空白部分の要素も取得できるのでこれを利用してみます。

赤枠の部分は、 kintone.app.getHeaderSpaceElement() で取得できます。
それでは、ボタンクリック時にメニューの下側の空白部分に文字列が表示される JavaScript を記述してみます。

 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
29
(() => {
  'use strict';
  kintone.events.on('app.record.index.show', (event) => {
    if (document.getElementById('my_index_button') !== null) {
      return;
    }
    const myIndexButton = document.createElement('button');
    myIndexButton.id = 'my_index_button';
    myIndexButton.innerText = '一覧のボタン';
    myIndexButton.onclick = () => {
      const myHeaderSpace = kintone.app.getHeaderSpaceElement();
      // 文字列要素
      const myListHeaderDiv = document.createElement('div');
      myListHeaderDiv.style.width = '100%';
      myListHeaderDiv.style.height = '35px';
      myListHeaderDiv.style.textAlign = 'center';
      myListHeaderDiv.style.fontSize = '30px';
      myListHeaderDiv.style.fontWeight = 'bold';
      myListHeaderDiv.style.backgroundColor = '#ffd78c';
      myListHeaderDiv.innerText = '押されて飛び出てじゃじゃじゃじゃーん';

      // メニューの下側の空白部分に文字列を表示
      myHeaderSpace.innerText = ''; // ← 増殖を防ぐため一旦明示的に空文字をセット
      myHeaderSpace.appendChild(myListHeaderDiv);
    };

    kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);
  });
})();

先の例で利用した onclick イベントを使って、文字列要素の作成とメニューの下側の空白部分へ文字列を表示しています。
この一行を外すとどうなるか、おもしろいことがおきますよ。
試してみてください。

それでは、このソースを任意のアプリに取り込みましょう。

こんな感じで皆さんも kintone JavaScript API を楽しみながらいじり倒して、業務用の kintone アプリをどんどんよいものにしていっていただければと思います。

最後に

最後に、ちょっとだけ堅い話をします。
今回、一覧画面でボタンや文字列を表示した場所(要素)はリファレンスに記載されている関数を利用して取得しました。
kintone.app.getHeaderMenuSpaceElement() kintone.app.getHeaderSpaceElement() ですね。
しかし、「別にこんなもの利用しなかったとしても、普通に document.getElementById() で取得すれば同じことできるんちゃう?」と思われたのではないでしょうか?

はい、そのとおりです。
ただし、 kintone JavaScript コーディングガイドライン に以下のように記載があることをお忘れなく。

kintone で使われている id/class 属性について 各要素に付与されている id や class 属性の値は、予告なく変更されます。 DOM 構造についても変更されることがあります。

カスタマイズするときは、id や class 属性の値、および DOM 構造を変更するカスタマイズを加えないでください。

つまり、提供された関数以外を利用したコーディングをすると、バージョンアップなどで HTML が更新されたときに動かなくなってしまうかもしれません。
そのため、おススメの方法としてリファレンスに記載されている関数を利用したコードを紹介しました。
もちろん、今回紹介した方法以外にも書き方はいろいろあると思います。
しかし、裏ワザ的な用法で JavaScript を書く場合は、バージョンアップすると動かなくなる可能性があるので注意してください。

今回はここまでです。

information

この Tips は、2022 年 6 月版 kintone で動作を確認しています。

デモ環境

デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/2/ (External link)

ログイン情報は cybozu developer network デモ環境 で確認してください。