第 12 回 jQueryを利用してみよう

固定リンクがコピーされました

著者名：落合雄一

はじめに

固定リンクがコピーされました

ここまで、ライブラリを利用しないカスタマイズを紹介してきました。
しかし、JavaScriptのライブラリは非常に多く便利なものが多いです。
その中で最も有名なライブラリが jQuery です。

jQueryは、JavaScriptのコードをより容易に記述できるライブラリです。
どう容易に記述できるのか、今まで紹介してきたコードをいくつか掻い摘んで、jQueryを使う方法に書き換えてみながら違いを体験してみましょう。

Cybozu CDN を利用する

固定リンクがコピーされました

jQueryの利用にあたって、公式サイトからご自身でダウンロードしたファイルを、これまでのようにアップロードする方法があります。
しかし、今回はそれよりもいろいろなメリットが得られる Cybozu CDNを活用してみましょう。

先のページのライブラリに記載されている任意のjQueryバージョンのURLをコピーし、いつもの「JavaScript / CSSでカスタマイズ」ページの[URL指定で追加]にペーストして保存してください。
以下は、jQuery 3.6.0のURLを入力したときの例です。

利用するアプリに対してjQueryライブラリの準備をする手順はたったこれだけです。

jQuery を呼び出してみる

固定リンクがコピーされました

はじめに、第 1 回でやった簡単なことから試してみましょう。
まずは、レコード一覧イベントでアラートを出す簡単なスクリプトです。
ここまで進んだ皆さんにとってはもうお馴染みの書き方ですが、生のJavaScriptで書くとこんな感じですね。

1
2
3
4
5
6
7


(() => {
  'use strict';

  kintone.events.on('app.record.index.show', (event) => {
    window.alert('レコード一覧イベント');
  });
})();

これを、以下のように書き換えます。

1
2
3
4
5
6


(($) => {
  'use strict';
  kintone.events.on('app.record.index.show', (event) => {
    window.alert('レコード一覧イベントでjQuery!');
  });
})(jQuery);

今の時点の違いは先頭行と最終行だけです。
jQueryを使うといっても、単にそれによって得られる拡張構文をライブラリとして利用できるようになるだけのことなので、今まで書いたJavaScriptをすべて書き直す必要はありません。

冒頭部分についてはいろんな書き方がありますが、とりあえずは「こう書くものだ」くらいのおまじないと思ってください。
もし詳しく知りたい方は jQuery（callback）などを確認してください。

jQuery を使ってみる: DOM 操作の初歩

固定リンクがコピーされました

続いて、第 2 回の最後に書いたサンプルを利用してみましょう。
以下は、元の形をなるべく残して直訳っぽくjQuery向けに書き直してみました。
ぜひ、以前のコードと比較して違いを確かめてみてください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


(($) => {
  'use strict';
  kintone.events.on('app.record.index.show', (event) => {
    if ($('#my_index_button')[0]) {
      return;
    }
    const $myIndexButton = $('<button>', {
      id: 'my_index_button',
      text: '一覧のボタン'
    }).click(() => {
      const myHeaderSpace = kintone.app.getHeaderSpaceElement();
      // 文字列要素
      const $myListHeaderDiv = $('<div>', {text: '押されて飛び出てじゃじゃじゃじゃーん'}).css({
        width: '100%',
        height: '35px',
        'text-align': 'center',
        'font-size': '30px',
        'font-weight': 'bold',
        'background-color': '#ffd78c'
      });

      // メニューの下側の空白部分に文字列を表示
      $(myHeaderSpace).html($myListHeaderDiv);
    });

    $(kintone.app.getHeaderMenuSpaceElement()).append($myIndexButton);
  });
})(jQuery);

比べてみた感想はいかがでしょう？

$myListHeaderDivなどへの記述でお分かりのとおり、出力するHTMLタグの各属性を配列形式でまとめて指定できるところや、widthなどCSSのプロパティ名をそのまま使えるところが一番の違いですね！

ついでにちょっと遊び心を加えてみます。
上記コードの23行目あたりを以下のように書き換えて実行してみてください。

1
2


// メニューの下側の空白部分に文字列を表示
$(myHeaderSpace).hide().html($myListHeaderDiv).slideDown('slow');

これは、jQueryが標準でもつエフェクト機能を利用したほんの一例です。
jQueryを使えばこのようなことも簡単にできます！

jQueryを使ってみる: 制御文

固定リンクがコピーされました

最後に、第 5 回の最後にやった信号機の色を変えるスクリプトを書き換えてみます。

こちらも上記同様になるべく直訳的な書き換えを心掛けつつ、ループや条件分岐を変えてみましたので以前のコードと比較してみてください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40


(($) => {
  'use strict';

  kintone.events.on('app.record.index.show', (event) => {
    if (!event.size) {
      return;
    }

    const signalColorParts = kintone.app.getFieldElements('信号の色');
    $.each(event.records, (i, record) => {
      // DOM要素の取得
      const $part = $(signalColorParts[i]);

      // 値ごとに表示分け
      switch (record.信号の色.value) {
        case '赤':
          $part.css({
            'font-weight': 'bold',
            color: '#ffffff',
            'background-color': '#ff0000'
          });
          break;
        case '青':
          $part.css({
            'font-weight': 'bold',
            color: '#ffffff',
            'background-color': '#0000ff'
          });
          break;
        case '黄':
          $part.css({
            'font-weight': 'bold',
            color: '#ffffff',
            'background-color': '#ffd700'
          });
          break;
      }
    });
  });
})(jQuery);

もともとfor文で書いたところをjQuery.each()に、if文のところはswitch()に置き換えてみました。
たったこれだけですが、無駄な変数を減らしたおかげでコード全体が見やすくなったと思いませんか。

ついでに、これにもちょっと遊びを入れてみましょう。
違いはほんの一行ですので、これも試しに動かしてみてください。

1
2
3
4
5
6
7
8
9


        case '黄':
          $part.css({
            'font-weight': 'bold',
            color: '#ffffff',
            'background-color': '#ffd700'
          });
          setInterval(function(){$part.fadeToggle(500)}, 500); // ← この行を追加
          break;
      }

標準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 デモ環境で確認してください。

旧：はじめよう kintone JavaScript API