第 3 回 レコード詳細画面にもボタンを設置しよう!

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

目次

information

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

はじめに

前回の 第 2 回 レコード一覧画面にボタンを置いてみよう! で、レコード一覧にボタンを置いて簡単なアクションをしかけました。
今回は、レコード詳細画面にも同じことをやってみましょう。

kintone のイベント処理

今回利用するイベントは、 レコード詳細画面を表示した後のイベント です。
前回&前々回でもやりましたように、JavaScript の記述はこのように書けばよいのでしたね。

1
2
3
4
5
6
7
(() => {
  'use strict';
  // レコード詳細画面が表示された後に発生するイベント
  kintone.events.on('app.record.detail.show', (event) => {
    // ここに具体的な処理の内容を記述する
  });
})();

ボタンの設置(1)

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
(() => {
  'use strict';

  kintone.events.on('app.record.detail.show', (event) => {
    // メニューの上側の空白部分にボタンを設置
    const myIndexButton = document.createElement('button');
    myIndexButton.id = 'my_index_button';
    myIndexButton.innerText = 'メニュー部ボタン';
    myIndexButton.onclick = () => {
      window.alert('メニュー部');
    };
    kintone.app.record.getHeaderMenuSpaceElement().appendChild(myIndexButton);
  });
})();

簡単でしたね!
もう kintone JavaScript API に慣れてきたのではないでしょうか?

ボタンの設置(2)

レコード詳細画面では、スペースフィールドを利用してボタンを設置できます。

これについては スペースフィールドの要素を取得する に書いてありますが、一緒にやってみましょう。

まず、ボタンを設置する場所になる「スペースフィールド」を用意します。
任意のアプリで、 アプリの設定画面を開く (External link) フォームを設定する (External link) を参考に、ドラッグ&ドロップしてスペースフィールドを追加してみてください。

続いて、追加したスペースフィールドの[設定]から、要素 ID を設定します。
ここで設定した要素 ID を使って JavaScript を書いていくことになりますので、他と重複しない分かりやすい ID にしておきましょう。
今回は、my_space_field という ID を設定してみます。

それでは、いよいよここにボタンを設置してみます。
ここの要素の取得は、 kintone.app.record.getSpaceElement(id) でしたね。
この API の引数 id には、上記で設定した要素 ID my_space_field を指定します。
つまり kintone.app.record.getSpaceElement('my_space_field') と書くと、スペースフィールドを取得できます。

それでは先ほどの JavaScript に、スペースフィールドにもボタンを置く JavaScript を追加してみましょう。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
(() => {
  'use strict';

  kintone.events.on('app.record.detail.show', (event) => {
    const myIndexButton = document.createElement('button');
    myIndexButton.id = 'my_index_button';
    myIndexButton.innerText = 'メニュー部ボタン';
    myIndexButton.onclick = () => {
      window.alert('メニュー部');
    };
    kintone.app.record.getHeaderMenuSpaceElement().appendChild(myIndexButton);

    // 任意のスペースフィールドにボタンを設置
    const mySpaceFieldButton = document.createElement('button');
    mySpaceFieldButton.id = 'my_space_field_button';
    mySpaceFieldButton.innerText = 'スペースボタン';
    mySpaceFieldButton.onclick = () => {
      window.alert('スペースフィールド');
    };
    kintone.app.record.getSpaceElement('my_space_field').appendChild(mySpaceFieldButton);
  });
})();

スペースフィールドだからといって、特別なことはありませんでしたね。
この調子で書いていけば好きな場所にいくつでもボタン置けそうですね。
いろいろ遊んでみてください!

ちょっとだけ応用

それでは、今までやったことを踏まえて少し応用してみましょう。
皆さんもそろそろ kintone JavaScript API でやってみたいことのイメージが湧いてきたのではないでしょうか?
ということで、次は今まで習ったことを応用して各自で自分のアイデアを実現してみましょう。
条件は以下の 2 つの要素取得関数を利用することと、誰かをクスッと笑わせるようなもの!ってことで気合い入れて行ってみよー!

  • kintone.app.record.getHeaderMenuSpaceElement()
  • kintone.app.record.getSpaceElement()

できましたか?
ちなみに私はこんな感じにしてみました。

 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
30
31
32
33
34
(() => {
  'use strict';

  kintone.events.on('app.record.detail.show', (event) => {
    const myHeaderMenuSpace = kintone.app.record.getHeaderMenuSpaceElement();
    const startButton = document.createElement('button');
    startButton.id = 'janken_start_button';
    startButton.innerText = 'ジャンケンキングに挑戦!!';
    myHeaderMenuSpace.innerText = '';

    const jankenItems = ['グー', 'チョキ', 'パー'];
    // ジャンケンキングに挑戦!!ボタンクリック
    startButton.onclick = () => {
      // ジャンケンスペース
      const jankenSpace = kintone.app.record.getSpaceElement('my_space_field');
      jankenSpace.innerText = '最初はグー!!\nジャンケン・・・\n';
      jankenSpace.style.width = '400px';
      jankenSpace.parentNode.style.width = '400px';

      for (let i = 0; i < jankenItems.length; i++) {
        const tmpButton = document.createElement('button');
        tmpButton.id = 'j_button' + i;
        tmpButton.innerText = jankenItems[i] + '!!';
        tmpButton.onclick = (e) => {
          const you = e.target.id.replace('j_button', '');
          const com = (you + 2) % jankenItems.length;
          jankenSpace.innerText = 'あなた:' + jankenItems[you] + '\nジャンケンキング:' + jankenItems[com] + '\nもう一度やりますか?';
        };
        jankenSpace.appendChild(tmpButton);
      }
    };
    myHeaderMenuSpace.appendChild(startButton);
  });
})();

私は、ジャンケンがめっちゃ強い「ジャンケンキング」に挑戦するゲームを作ってみました。
ぜひ勝つまで挑戦してみてください!
ちなみに私は一度も勝てませんでした。

最後に

そろそろ kintone で遊ぶことがおもしろく感じてきたのではないでしょうか?
次回は、kintone をカスタマイズする上で重要な、レコードの取得にトライしましょう。

information

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

デモ環境

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

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