（著者：落合 雄一）
はじめに
前回、レコード一覧にボタンを置いて簡単なアクションを仕掛けました。今回は、レコード詳細画面にも同じ事をやってみましょう(^^♪
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は、2022年6月版で確認したものになります。
<<第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といろいろ勉強して、実際コードをいくつも書いて、ある程度経験してからじゃないと、「はじめよう」の記事の内容を本当に理解したり、実際に使ったりすることは適わない、ということがわかりました。
写経もやってみます。修行あるのみ。
それが明確にわかっただけでもよかったです。
ありがとうございました。
var com = (you + 2) % jankenItems.length;
では、ジャンケンキングに永遠に勝てないと思います。
com変数には乱数で値を設定するとかしないとダメじゃないでしょか
Pashige 様
お世話になっております。cybozu developer network 事務局です。
Pashige 様のご指摘の通り、
本記事のコードでジャンケンキングが絶対に勝利するのは、仕様となっております。
よろしくお願いいたします。
>任意のアプリで、アプリの設定画面を開くやフォームを設定するを参考に、好きな場所にドラッグ＆ドロップしてみてください。
「アプリの設定画面を開く」「フォームを設定する」の両リンクが切れてます。
takegawa 様
お世話になっております。cybozu developer network 事務局です。
ご指摘いただき誠にありがとうございました。
「アプリの設定画面を開く」「フォームを設定する」の両リンクを修正いたしました。
ご確認お願いします。
引き続きcybozu developer networkよろしくお願いします。
お世話になります。
デフォルトの保存ボタンではなく、スペースフィールドに設置したボタンを押すことによって、レコードを保存するような仕組みは可能なのでしょうか。
色々調べましたがそれらしい情報がなく、こちらで質問させていただきました。
お忙しい中恐縮ですが、よろしくお願いいたします。
Miyaguni 様
お世話になっております。cybozu developer network 運営でございます。
仕組みは可能ですが、kintone 標準のボタンに対してのカスタマイズの場合、
kintone のアップデートの影響を受けて、カスタマイズが動かなくなる可能性がありますので注意してください。
また、恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
今回のような記事から派生した技術的なご質問は、cybozu developer コミュニティをご活用ください。
今後ともcybozu developer networkよろしくお願いします。
cybozu developer network 運営 様
解答ありがとうございます。
質問場所の間違え、失礼いたしました。
今後とも参考にさせていただきます。
いつもお世話になっております。
スペースフィールドの真ん中にボタンを配置することが可能でしょうか。
スペースフィールドにボタンを配置するのを試しましが、以下の画像キャプチャーのようにボタンは上に配置されているので、真ん中の方が望ましいかと思いますが、実装できそうですか？
よろしくお願いします。
Nguyen Hang 様
お世話になっております。cybozu developer network 事務局です。
恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
記事から派生した技術的なご質問は、cybozu developer コミュニティをご活用ください。
今後ともcybozu developer networkよろしくお願いします。