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

（著者：Cstap 落合 雄一）

前回、レコード一覧にボタンを置いて簡単なアクションを仕掛けました。今回は、レコード詳細画面にも同じ事をやってみましょう(^^♪

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

詳しくは、レコード表示イベントをご確認ください。

ボタンの設置(1)

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

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

簡単でしたね(^^)
もうkintone JavaScript APIに慣れてきたのではないでしょうか？

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

それでは、いよいよここにボタンを設置してみます。ここの要素の取得は、kintone.app.record.getSpaceElement(id)でしたね(^^)
この引数idに、同じく上記で設定した要素IDを指定します。つまり、要素IDがmy_space_fieldであればこういう事です。

• kintone.app.record.getSpaceElement('my_space_field')

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

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

ちょっとだけ応用

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

• kintone.app.record.getHeaderMenuSpaceElement
• kintone.app.record.getSpaceElement

・・・・・・・・・・

どうでしょう(^^) できましたか？
ちなみに私はこんな感じにしてみました。(￣Λ￣)ゞ

私は、ジャンケンがめっちゃ強い「ジャンケンキング」に挑戦するゲームを作ってみました(^^♪
ぜひ勝つまで挑戦してみてください！！(笑)
ちなみに私は1度も勝てませんでした(T_T)・・・(笑)

最後に

そろそろkintoneで遊ぶことがおもしろく感じてきたのではないでしょうか？これからさらに面白くなってきますので、ぜひ次回も楽しみにしていただければと思います(^^)次回から、kintoneをカスタマイズする上で重要なレコードの取得にトライしていこうと思います。それでは・・・

 Let’s kintoneカスタマイズ＼(^o^)／

このTipsは、2014年4月版で確認したものになります。

<<第2回 レコード一覧画面にボタンを置いてみよう！| 第4回 レコードの値を利用してみよう(詳細画面編)>>

デモ環境

https://dev-demo.cybozu.com/k/4/

※デモ環境についての説明はこちら