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

固定リンクがコピーされました

著者名：落合雄一

はじめに

固定リンクがコピーされました

前回の第 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）

固定リンクがコピーされました

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

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

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

続いて、追加したスペースフィールドの[設定]から、要素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をカスタマイズする上で重要な、レコードの取得にトライしましょう。

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

デモ環境

固定リンクがコピーされました

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

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

旧：はじめよう kintone JavaScript API