cybozu developer network

カテゴリー内の他の記事

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

はじめて kintone をカスタマイズする人が kintone API の基礎知識を学べるよう、チュートリアルの内容を充実させてリニューアルしました。
   リニューアル後のチュートリアルは次のページを参照してください。
   はじめよう kintone API

(著者:落合 雄一

はじめに

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

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で何かおもしろいことができるイメージが湧いてきたのではないでしょうか?
ということで、次は今まで習ったことを応用して各自で自分のアイデアを実現してみましょう(^^)
条件は以下の2つの要素取得関数を利用することと、誰かをクスッと笑わせるようなもの!!ってことで気合い入れて行ってみよー!!(笑)

  • 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/

デモ環境の利用は、事前に cybozu developer network のメンバー登録が必要です。画面右上の「サインイン」ボタンよりご登録ください。
デモ環境アカウントとパスワードは、サインイン後にこちらのページでご確認ください。

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
千代田 賢史

表現の幅が広がっていきますね。

 

Avatar
佐藤

mobile.app.record.detail.show
を使うことでモバイルにも同様にボタンを表示させられると思ったのですが、できませんでした。

モバイルではボタンを追加することはできないのでしょうか?

佐藤により編集されました
Avatar
瀧ヶ平

佐藤さん
cstapの瀧ヶ平です。

モバイル版の場合はkintone.mobile.app.getHeaderSpaceElement()で要素を取得できるので、これを利用すれば同様にボタンを設置できるかと思います。

ヘッダーメニュー直下の空白要素以外はモバイル版では取得できないので注意が必要です。

Avatar
Shimpei

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) の通りに書いてあります。

 

初心者であまり、よくわかっていないですが、よろしくお願いします。

 

*この近くにボタンを設置したいです。(できれば右側)

Shimpeiにより編集されました
Avatar
Shimpei

無事解決しました。

全体の方にカスタマイズしていた(一部のアプリでも構わないのにも関わらず)jsファイルを消したら無事反映されました。

さらに消した方のjsファイルがうまく読み込めていなかったのにも問題があったと思います。

 

カスタマイズは難しいですが、できたら楽しいと思いますね‼️

Avatar
Shochi

29行目で、Don't make functions within a loopという警告がでてしまいます。

JSedit for kintoneを使っています。解決方法はありませんでしょうか。

Avatar
さざなみ

「スペースフィールドにもボタンを置く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);

Avatar
YK

本当に初心者ですみません。

提示されているコード記述で、

var myIndexButton = document.createElement('button');
myIndexButton.id = 'my_index_button';
myIndexButton.innerText = 'メニュー部ボタン';
myIndexButton.onclick = function() {
window.alert('メニュー部');

がどうして成立するのか、

はじめようJavaScriptの全ての回、そしてはじめようkintone APIのこれまでの回を観てもよくわかりません。

なんとなく、これらの記述で'メニュー部'という表記のボタンが配置されるというのが分かるレベルの理解でとどまっています。

これで講義の学習を進めていっていいのでしょうか?

もし支障があるのであれば、何をどう調べたらいいのか、できれば、上記構文の詳細な解説をお願いしたいと思います。

Avatar
cybozu Development team

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 コミュニティをぜひご活用ください。

Avatar
YK

やはりカスタマイズはコーディングですから、それなり準備をしなければなりませんね。他にもJavaScript一通りの知識はもちろん、HTML、CSS、各種APIといろいろ勉強して、実際コードをいくつも書いて、ある程度経験してからじゃないと、「はじめよう」の記事の内容を本当に理解したり、実際に使ったりすることは適わない、ということがわかりました。

写経もやってみます。修行あるのみ。

それが明確にわかっただけでもよかったです。

ありがとうございました。

Avatar
Pashige

var com = (you + 2) % jankenItems.length;

では、ジャンケンキングに永遠に勝てないと思います。

com変数には乱数で値を設定するとかしないとダメじゃないでしょか

Avatar
cybozu Development team

Pashige 様

お世話になっております。cybozu developer network 事務局です。

Pashige 様のご指摘の通り、
本記事のコードでジャンケンキングが絶対に勝利するのは、仕様となっております。

よろしくお願いいたします。

Avatar
takegawa

>任意のアプリで、アプリの設定画面を開くフォームを設定するを参考に、好きな場所にドラッグ&ドロップしてみてください。
「アプリの設定画面を開く」「フォームを設定する」の両リンクが切れてます。

Avatar
cybozu Development team

takegawa 様

お世話になっております。cybozu developer network 事務局です。

ご指摘いただき誠にありがとうございました。

「アプリの設定画面を開く」「フォームを設定する」の両リンクを修正いたしました。

ご確認お願いします。

引き続きcybozu developer networkよろしくお願いします。

Avatar
Miyaguni

お世話になります。

デフォルトの保存ボタンではなく、スペースフィールドに設置したボタンを押すことによって、レコードを保存するような仕組みは可能なのでしょうか。

色々調べましたがそれらしい情報がなく、こちらで質問させていただきました。

お忙しい中恐縮ですが、よろしくお願いいたします。

Miyaguniにより編集されました
Avatar
cybozu Development team

Miyaguni 様
お世話になっております。cybozu developer network 運営でございます。

仕組みは可能ですが、kintone 標準のボタンに対してのカスタマイズの場合、
kintone のアップデートの影響を受けて、カスタマイズが動かなくなる可能性がありますので注意してください。

また、恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
今回のような記事から派生した技術的なご質問は、cybozu developer コミュニティをご活用ください。

今後ともcybozu developer networkよろしくお願いします。

Avatar
Miyaguni

cybozu developer network 運営 様

解答ありがとうございます。

質問場所の間違え、失礼いたしました。

今後とも参考にさせていただきます。

Avatar
Nguyen Hang

いつもお世話になっております。

スペースフィールドの真ん中にボタンを配置することが可能でしょうか。

スペースフィールドにボタンを配置するのを試しましが、以下の画像キャプチャーのようにボタンは上に配置されているので、真ん中の方が望ましいかと思いますが、実装できそうですか?

よろしくお願いします。

Avatar
cybozu Development team

Nguyen Hang 様

お世話になっております。cybozu developer network 事務局です。

恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
記事から派生した技術的なご質問は、cybozu developer コミュニティをご活用ください。

今後ともcybozu developer networkよろしくお願いします。

サインインしてコメントを残してください。