（著者：落合 雄一）
はじめに
前回、レコード一覧にボタンを置いて簡単なアクションを仕掛けました。今回は、レコード詳細画面にも同じ事をやってみましょう(^^♪
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)でしたね(^^)
この引数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/
デモ環境アカウントとパスワードは、サインイン後にこちらのページでご確認ください。
表現の幅が広がっていきますね。
mobile.app.record.detail.show
を使うことでモバイルにも同様にボタンを表示させられると思ったのですが、できませんでした。
モバイルではボタンを追加することはできないのでしょうか？
佐藤さん
cstapの瀧ヶ平です。
モバイル版の場合はkintone.mobile.app.getHeaderSpaceElement()で要素を取得できるので、これを利用すれば同様にボタンを設置できるかと思います。
ヘッダーメニュー直下の空白要素以外はモバイル版では取得できないので注意が必要です。
https://developer.cybozu.io/hc/ja/community/posts/115010156086-%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AB%E7%8B%AC%E8%87%AAjs%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6
この質問者と同じ悩みを持っているのですが、回答者のようにボタンが表示されません。
このようなコードはどのように書いたらできるのでしょうか？
現在はボタン設置 (1) の通りに書いてあります。
初心者であまり、よくわかっていないですが、よろしくお願いします。
無事解決しました。
全体の方にカスタマイズしていた（一部のアプリでも構わないのにも関わらず）jsファイルを消したら無事反映されました。
さらに消した方のjsファイルがうまく読み込めていなかったのにも問題があったと思います。
カスタマイズは難しいですが、できたら楽しいと思いますね‼️
29行目で、Don't make functions within a loopという警告がでてしまいます。
JSedit for kintoneを使っています。解決方法はありませんでしょうか。
「スペースフィールドにもボタンを置くJavaScript」のサンプルコードに誤りがあります。
15行目と20行目に「mySpaceFieldButton.id」が記載されていますが、15行目と20行目で名前が違っています。
誤）
15行目：mySpaceFieldButton.id = 'my_space_field_button';
20行目：kintone.app.record.getSpaceElement('my_space_field').appendChild(mySpaceFieldButton);
正）
15行目：mySpaceFieldButton.id = 'my_space_field';
20行目：kintone.app.record.getSpaceElement('my_space_field').appendChild(mySpaceFieldButton);
本当に初心者ですみません。
提示されているコード記述で、
var myIndexButton = document.createElement('button');
myIndexButton.id = 'my_index_button';
myIndexButton.innerText = 'メニュー部ボタン';
myIndexButton.onclick = function() {
window.alert('メニュー部');
がどうして成立するのか、
はじめようJavaScriptの全ての回、そしてはじめようkintone APIのこれまでの回を観てもよくわかりません。
なんとなく、これらの記述で'メニュー部'という表記のボタンが配置されるというのが分かるレベルの理解でとどまっています。
これで講義の学習を進めていっていいのでしょうか？
もし支障があるのであれば、何をどう調べたらいいのか、できれば、上記構文の詳細な解説をお願いしたいと思います。
YK 様
お世話になっております。cybozu developer network 事務局です。
チュートリアルに取り組んでいただきありがとうございます。
https://developer.cybozu.io/hc/ja/articles/360024370392/comments/900001147486
にてお伝えしたとおりdevCampなどイベントに参加いただいたり、
https://developer.cybozu.io/hc/ja/community/posts/900001537506-はじめようJavaScript-kintone-の学習中にモヤモヤします
にてコミュニティでやりとりされていらっしゃるように、書籍やその他Web上の教材などでご自身の理解度や必要に合わせて学習いただけますと幸いです。
それらと組み合わせながら当記事のようなサンプルコードを書き写す（プログラミングの学習として「写経」とも言われます）ことで理解を深めていただければと存じます。
引き続き、技術的なご相談・ご質問はcybozu developer コミュニティをぜひご活用ください。
やはりカスタマイズはコーディングですから、それなり準備をしなければなりませんね。他にもJavaScript一通りの知識はもちろん、HTML、CSS、各種APIといろいろ勉強して、実際コードをいくつも書いて、ある程度経験してからじゃないと、「はじめよう」の記事の内容を本当に理解したり、実際に使ったりすることは適わない、ということがわかりました。
写経もやってみます。修行あるのみ。
それが明確にわかっただけでもよかったです。
ありがとうございました。