初めて kintone をカスタマイズする人が kintone API の基礎知識を学べるよう、チュートリアルの内容を充実させてリニューアルしました。
リニューアル後のチュートリアルは次のページを参照してください。
はじめよう kintone API
はじめに
前回の
第 2 回 レコード一覧画面にボタンを置いてみよう! で、レコード一覧にボタンを置いて簡単なアクションをしかけました。
今回は、レコード詳細画面にも同じことをやってみましょう。
kintone のイベント処理
今回利用するイベントは、
レコード詳細画面を表示した後のイベント です。
前回&前々回でもやりましたように、JavaScript の記述はこのように書けばよいのでしたね。
|
|
ボタンの設置(1)
それでは、レコード詳細画面にボタンを設置してみましょう!
設置場所はやはり、レコード詳細画面のメニュー上側の空白部分が一般的ですね。
赤枠の部分の要素を取得するには、
kintone.app.record.getHeaderMenuSpaceElement() を使います。
それでは、実際に JavaScript を書いてみましょう。
|
|
簡単でしたね!
もう 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 を追加してみましょう。
|
|
スペースフィールドだからといって、特別なことはありませんでしたね。
この調子で書いていけば好きな場所にいくつでもボタン置けそうですね。
いろいろ遊んでみてください!
ちょっとだけ応用
それでは、今までやったことを踏まえて少し応用してみましょう。
皆さんもそろそろ kintone JavaScript API でやってみたいことのイメージが湧いてきたのではないでしょうか?
ということで、次は今まで習ったことを応用して各自で自分のアイデアを実現してみましょう。
条件は以下の 2 つの要素取得関数を利用することと、誰かをクスッと笑わせるようなもの!ってことで気合い入れて行ってみよー!
kintone.app.record.getHeaderMenuSpaceElement()
kintone.app.record.getSpaceElement()
できましたか?
ちなみに私はこんな感じにしてみました。
|
|
私は、ジャンケンがめっちゃ強い「ジャンケンキング」に挑戦するゲームを作ってみました。
ぜひ勝つまで挑戦してみてください!
ちなみに私は一度も勝てませんでした。
最後に
そろそろ kintone で遊ぶことがおもしろく感じてきたのではないでしょうか?
次回は、kintone をカスタマイズする上で重要な、レコードの取得にトライしましょう。
この Tips は、2022 年 6 月版 kintone で動作を確認しています。
デモ環境
デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/4/
ログイン情報は cybozu developer network デモ環境 で確認してください。