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

著者名: 落合 雄一 (External link)

目次

information

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

はじめに

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

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

Cybozu CDN を利用する

jQuery の利用にあたって、 公式サイト (External link) からご自身でダウンロードしたファイルを、これまでのようにアップロードする方法があります。
しかし、今回はそれよりもいろいろなメリットが得られる 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) (External link) などを確認してください。

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 (External link) をはじめとする非常に強力で豊富なプラグイン/ライブラリ群の存在が挙げられます。
これらを利用することで、見た目や操作感がリッチな UI を簡単に実現できます。
そういった使い方の一例を Sortable を利用したレコードの並び替え に書いておきましたので、そちらもぜひ確認してください。

information

この Tips は、2022 年 7 月版 kintone で動作を確認しています。

デモ環境

デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/19/ (External link)

ログイン情報は cybozu developer network デモ環境 で確認してください。