第2回 レコード一覧画面にボタンを置いてみよう！

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

（著者：落合 雄一）

はじめに

さて、前回の「第1回kintone JavaScript APIのイジりかた」 でkintone JavaScript APIの基本の「き」をご理解いただけたかと思います。今回からは、実際にJavaScriptを使ったカスタマイズをやってみましょう(^^♪

それでは、「kintoneにボタンを設置して、アクションを起こしたい！」という最も一般的なカスタマイズについて第2回と第3回の2回に分けて紹介いたします。

kintoneのイベント処理

kintoneのイベント処理については、前回ちょっと触れましたね。今回は、「レコード一覧画面の表示後イベント」を使うのでこんな感じになります。

詳しくは、前回の「kintone javascript APIのイジりかた」やイベント処理の記述方法をご確認ください。

ボタンの設置

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

赤枠の部分の要素を取得するには、kintone.app.getHeaderMenuSpaceElement()を使います。
それでは、実際にJavaScriptを記述してみます。

それでは、このソースを任意のアプリに取り込みましょう(^^♪
保存するファイルは拡張子「.js」、文字コードはUTF-8(BOMなし)で作成することを忘れずに。

あら簡単♪あっさり出来ちゃいましたね(^^♪
凄いぞkintone JavaScript API!!

しかし、上記のようにinnerHTMLでタグごとまとめて突っ込んでしまう書き方は、バグが入りやすく、あまり良いとは言えません。今のうちに書き換えておきましょう(^^)

ボタン要素を作成し、赤枠の部分に設置しています。こちらの方がいいですね♪

増殖バグを防ぐ

(＠゜Д゜＠；)あら・・・？

上記のコードでは、下記の操作を行う度に一覧のボタンが次々生まれてきますね。。。。。

• ページめくりをしたとき
• カラムソートしたとき

俗にいう増殖バグってやつです。

冒頭に、ボタン要素'my_index_button'の有無を判定するif文を追加して対処しましょう。

ボタンクリック時の処理

それでは、このボタンがクリックされた時の処理を追加してみましょう(^^♪
今回は、ボタンがクリックされた時にアラート処理を行うJavaScriptを記述してみます。

先の例で追加したボタン要素にonclickイベントを普通に記述してあげれば良いだけですね♪

それでは、このソースを任意のアプリに取り込みましょう(^^♪
これまでと同じ「一覧のボタン」が表示されましたら、勇気を振り絞ってボタンをクリックしてみましょう(^^♪

これも簡単にできましたね♪

ちょっと応用

それでは、今までやったことを踏まえて少し応用してみましょう(^^♪ レコード一覧画面にはもうひとつ、メニューの下側の空白部分の要素も取得できるのでこれを利用してみます。

赤枠の部分は、 kintone.app.getHeaderSpaceElement()で取得出来ます。それでは、ボタンクリック時にメニューの下側の空白部分に文字列が表示されるJavaScriptを記述してみます。

先の例で利用したonclickイベントに、文字列要素の作成とメニューの下側の空白部分に文字列の表示を行っています。
この一行を外すとどうなるか・・・面白い事がおきますよ。(￣▽￣)
試してみてください。

それでは、このソースを任意のアプリに取り込みましょう(^^♪
いつボタンクリックするの！？今でしょ！！（古っ(￣□￣;)!!）

なんだかんだと遊んでしまいました(笑)

こんな感じで皆さんもkintone JavaScript APIを楽しみながらいじり倒して、業務用のkintoneアプリをどんどん良いものにしていって頂ければと思います(^^♪

最後に

最後に、ちょっとだけ堅い話をします。
今回、一覧画面でボタンや文字列を表示した場所（要素）はリファレンスに記載されている関数を利用して取得しました。kintone.app.getHeaderMenuSpaceElement()とkintone.app.getHeaderSpaceElement()ですね。しかし、「別にこんなもの利用しなかったとしても、普通にgetElementById()とかやれば同じ事出来るんちゃう？」と思われたのではないでしょうか？

・・・はい、その通りです。
ただし、kintone JavaScript コーディングガイドラインに以下のように記載がある事をお忘れなく。
-----
kintoneで使われているid/class属性について
各要素に付与されているid/class属性の値は、予告なく変更されることがあります。
また、DOM構造についても変更されることがあります。
-----

つまり、提供された関数以外を利用したコーディングをすると、バージョンアップなどでHTMLが更新されたときに動かなくなってしまうかもしれません。そのため、おススメの方法としてリファレンスに記載されている関数を利用したコードを紹介しました。もちろん、今回紹介した方法以外にも書き方は色々あると思います。しかし、裏ワザ的な用法でJavaScriptを書く場合は、バージョンアップすると動かなくなる可能性があるので注意してください。

今回はここまでです。それでは・・・

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

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

<<第1回 kintone javascript APIのイジりかた | 第3回 レコード詳細にもボタンを設置しよう！>>

デモ環境

こちらのデモ環境から実際に動作を確認できます。
https://dev-demo.cybozu.com/k/2/

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