第 12 回 jQueryを利用してみよう
初めてkintoneをカスタマイズする人がkintone APIの基礎知識を学べるよう、チュートリアルの内容を充実させてリニューアルしました。
リニューアル後のチュートリアルは次のページを参照してください。
はじめよう kintone API
はじめに
ここまで、ライブラリを利用しないカスタマイズを紹介してきました。
しかし、JavaScriptのライブラリは非常に多く便利なものが多いです。
その中で最も有名なライブラリが
jQuery
です。
jQueryは、JavaScriptのコードをより容易に記述できるライブラリです。
どう容易に記述できるのか、今まで紹介してきたコードをいくつか掻い摘んで、jQueryを使う方法に書き換えてみながら違いを体験してみましょう。
Cybozu CDN を利用する
jQueryの利用にあたって、
公式サイト
からご自身でダウンロードしたファイルを、これまでのようにアップロードする方法があります。
しかし、今回はそれよりもいろいろなメリットが得られる
Cybozu CDNを活用してみましょう。
先のページの
ライブラリに記載されている任意のjQueryバージョンのURLをコピーし、いつもの「JavaScript / CSSでカスタマイズ」ページの[URL指定で追加]にペーストして保存してください。
以下は、jQuery 3.6.0のURLを入力したときの例です。
利用するアプリに対してjQueryライブラリの準備をする手順はたったこれだけです。
jQuery を呼び出してみる
はじめに、
第 1 回でやった簡単なことから試してみましょう。
まずは、レコード一覧イベントでアラートを出す簡単なスクリプトです。
ここまで進んだ皆さんにとってはもうお馴染みの書き方ですが、生のJavaScriptで書くとこんな感じですね。
|
|
これを、以下のように書き換えます。
|
|
今の時点の違いは先頭行と最終行だけです。
jQueryを使うといっても、単にそれによって得られる拡張構文をライブラリとして利用できるようになるだけのことなので、今まで書いたJavaScriptをすべて書き直す必要はありません。
冒頭部分についてはいろんな書き方がありますが、とりあえずは「こう書くものだ」くらいのおまじないと思ってください。
もし詳しく知りたい方は
jQuery(callback)
などを確認してください。
jQuery を使ってみる: DOM 操作の初歩
続いて、
第 2 回の最後に書いたサンプルを利用してみましょう。
以下は、元の形をなるべく残して直訳っぽくjQuery向けに書き直してみました。
ぜひ、以前のコードと比較して違いを確かめてみてください。
|
|
比べてみた感想はいかがでしょう?
$myListHeaderDiv
などへの記述でお分かりのとおり、出力するHTMLタグの各属性を配列形式でまとめて指定できるところや、width
などCSSのプロパティ名をそのまま使えるところが一番の違いですね!
ついでにちょっと遊び心を加えてみます。
上記コードの23行目あたりを以下のように書き換えて実行してみてください。
|
|
これは、jQueryが標準でもつエフェクト機能を利用したほんの一例です。
jQueryを使えばこのようなことも簡単にできます!
jQueryを使ってみる: 制御文
最後に、 第 5 回の最後にやった信号機の色を変えるスクリプトを書き換えてみます。
こちらも上記同様になるべく直訳的な書き換えを心掛けつつ、ループや条件分岐を変えてみましたので以前のコードと比較してみてください。
|
|
もともとfor文で書いたところをjQuery.each()
に、if文のところはswitch()
に置き換えてみました。
たったこれだけですが、無駄な変数を減らしたおかげでコード全体が見やすくなったと思いませんか。
ついでに、これにもちょっと遊びを入れてみましょう。
違いはほんの一行ですので、これも試しに動かしてみてください。
|
|
標準JavaScriptのsetInterval
とjQueryのエフェクト機能を利用して、本物の信号みたいに黄色を点滅させてみました。
jQueryを利用するとこういった変更も簡単にできることがさらにお分かりいただけたのではないでしょうか。
jQuery を使って kintone.events.on() でイベントハンドラーを登録する際の注意点
jQueryを使ってkintone.event.on()
を使ってイベントハンドラーを登録する際、書き方によっては、イベントが発生しません。
良くない例と、適切な書き方については、
イベントハンドラー登録の適切なタイミングについてを確認してください。
最後に
いつものことながらここではJavaScriptやjQuery自体についての詳しい説明は省略しながら、書き方やいじり方についてさわりだけ紹介しました。
ここに挙げた例だけでは、もしかすると「最初にコードが短くなるようなこと書いていたけど、あんまり変わっていない」と思う方もいるかもしれませんね。
ですが、実際に業務で利用するような複雑で長いコードを書こうとしたときほど、生のJavaScriptとの違いやjQueryのありがたみを実感できるかと思います。
ここではほんの数個のサンプルコードを書き換えたのみですが、そんな日のためにこれまで扱った他のサンプルもjQueryに書き換えて練習してみてください。
また、jQueryを利用する上での大きなメリットとして、
jQuery UI
をはじめとする非常に強力で豊富なプラグイン/ライブラリ群の存在が挙げられます。
これらを利用することで、見た目や操作感がリッチなUIを簡単に実現できます。
そういった使い方の一例を
Sortable を利用したレコードの並び替えに書いておきましたので、そちらもぜひ確認してください。
このTipsは、2022年7月版kintoneで動作を確認しています。
デモ環境
デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/19/
ログイン情報は cybozu developer network デモ環境で確認してください。