第 2 回 レコード一覧画面にボタンを置いてみよう!
初めてkintoneをカスタマイズする人がkintone APIの基礎知識を学べるよう、チュートリアルの内容を充実させてリニューアルしました。
リニューアル後のチュートリアルは次のページを参照してください。
はじめよう kintone API
はじめに
さて、前回の
第 1 回 kintone JavaScript API のイジりかたでkintone JavaScript APIの基本の「き」をご理解いただけたかと思います。
今回からは、実際にJavaScriptを使ったカスタマイズをやってみましょう。
それでは、「kintoneにボタンを設置して、アクションを起こしたい!」という最も一般的なカスタマイズについて第2回と第3回の2回に分けて紹介します。
kintone のイベント処理
kintoneのイベント処理については、前回ちょっと触れましたね。
今回は、
レコード一覧画面を表示した後のイベントを使うのでこんな感じになります。
|
|
詳しくは、前回の 第 1 回 kintone JavaScript API のイジりかたや イベント処理の記述方法を確認してください。
ボタンの設置
それでは、実際にレコード一覧にボタンを設置してみましょう。
設置場所はやはり、レコード一覧画面のメニュー右側の空白部分が一般的ですね。
赤枠の部分の要素を取得するには、
kintone.app.getHeaderMenuSpaceElement()を使います。
それでは、実際にJavaScriptを記述してみます。
|
|
それでは、このソースを任意のアプリに取り込みましょう。
保存するファイルは拡張子「.js」、文字コードはUTF-8(BOMなし)で作成することを忘れずに。
あっさり出来ちゃいましたね。
しかし、上記のようにinnerHTML
でタグごとまとめて突っ込んでしまう書き方は、バグが入りやすく、あまりよいとはいえません。
今のうちに書き換えておきましょう。
|
|
ボタン要素を作成し、赤枠の部分に設置しています。
こちらの方がいいですね。
増殖バグを防ぐ
上記のコードでは、次の操作をする度に一覧のボタンが次々生まれてきますね。
- ページめくりをしたとき
- カラムソートしたとき
俗にいう増殖バグってやつです。
冒頭に、ボタン要素my_index_button
の有無を判定するif文を追加して対処しましょう。
|
|
ボタンクリック時の処理
それでは、このボタンがクリックされた時の処理を追加してみましょう。
今回は、ボタンがクリックされた時にアラート処理を行うJavaScriptを記述してみます。
|
|
先の例で追加したボタン要素にonclick
イベントを普通に記述してあげればよいだけですね。
それでは、このソースを任意のアプリに取り込みましょう。
これまでと同じ「一覧のボタン」が表示されましたら、勇気を振り絞ってボタンをクリックしてみましょう。
これも簡単にできましたね。
ちょっと応用
それでは、今までやったことを踏まえて少し応用してみましょう。
レコード一覧画面にはもうひとつ、メニューの下側の空白部分の要素も取得できるのでこれを利用してみます。
赤枠の部分は、
kintone.app.getHeaderSpaceElement()で取得できます。
それでは、ボタンクリック時にメニューの下側の空白部分に文字列が表示されるJavaScriptを記述してみます。
|
|
先の例で利用したonclick
イベントを使って、文字列要素の作成とメニューの下側の空白部分へ文字列を表示しています。
この一行を外すとどうなるか、おもしろいことがおきますよ。
試してみてください。
それでは、このソースを任意のアプリに取り込みましょう。
こんな感じで皆さんもkintone JavaScript APIを楽しみながらいじり倒して、業務用のkintoneアプリをどんどんよいものにしていっていただければと思います。
最後に
最後に、ちょっとだけ堅い話をします。
今回、一覧画面でボタンや文字列を表示した場所(要素)はリファレンスに記載されている関数を利用して取得しました。
kintone.app.getHeaderMenuSpaceElement()と
kintone.app.getHeaderSpaceElement()ですね。
しかし、「別にこんなもの利用しなかったとしても、普通にdocument.getElementById()
で取得すれば同じことできるんちゃう?」と思われたのではないでしょうか?
はい、そのとおりです。
ただし、
kintone JavaScript コーディングガイドラインに以下のように記載があることをお忘れなく。
kintone で使われている id/class 属性について 各要素に付与されている id や class 属性の値は、予告なく変更されます。 DOM 構造についても変更されることがあります。
カスタマイズするときは、id や class 属性の値、および DOM 構造を変更するカスタマイズを加えないでください。
つまり、提供された関数以外を利用したコーディングをすると、バージョンアップなどでHTMLが更新されたときに動かなくなってしまうかもしれません。
そのため、おススメの方法としてリファレンスに記載されている関数を利用したコードを紹介しました。
もちろん、今回紹介した方法以外にも書き方はいろいろあると思います。
しかし、裏ワザ的な用法でJavaScriptを書く場合は、バージョンアップすると動かなくなる可能性があるので注意してください。
今回はここまでです。
このTipsは、2022年6月版kintoneで動作を確認しています。
デモ環境
デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/2/
ログイン情報は cybozu developer network デモ環境で確認してください。