前回の
第 2 回 レコード一覧画面にボタンを置いてみよう!で、レコード一覧にボタンを置いて簡単なアクションをしかけました。
今回は、レコード詳細画面にも同じことをやってみましょう。
kintone のイベント処理
固定リンクがコピーされました
今回利用するイベントは、
レコード詳細画面を表示した後のイベントです。
前回&前々回でもやりましたように、JavaScriptの記述はこのように書けばよいのでしたね。
1
2
3
4
5
6
7
|
(() => {
'use strict';
// レコード詳細画面が表示された後に発生するイベント
kintone.events.on('app.record.detail.show', (event) => {
// ここに具体的な処理の内容を記述する
});
})();
|
それでは、レコード詳細画面にボタンを設置してみましょう!
設置場所はやはり、レコード詳細画面のメニュー上側の空白部分が一般的ですね。
赤枠の部分の要素を取得するには、
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に慣れてきたのではないでしょうか?
レコード詳細画面では、スペースフィールドを利用してボタンを設置できます。
これについては
スペースフィールドの要素を取得するに書いてありますが、一緒にやってみましょう。
まず、ボタンを設置する場所になる「スペースフィールド」を用意します。
任意のアプリで、
アプリの設定画面を開く
や
フォームを設定する
を参考に、ドラッグ&ドロップしてスペースフィールドを追加してみてください。
続いて、追加したスペースフィールドの[設定]から、要素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をカスタマイズする上で重要な、レコードの取得にトライしましょう。
デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/4/
ログイン情報は
cybozu developer network デモ環境で確認してください。