kintone と Vue.js は相性がいい? Vue.js で独自のビューと検索フォームを作ってみよう

著者名: 村濱 一樹 (External link) (kintone エバンジェリスト)

目次

はじめに

Vue.js (External link) は非常にシンプルな JavaScript フレームワークで、kintone と相性がよく、私自身 kintone のカスタマイズでは Vue.js を使うことも多いです。
先日、 Cybozu CDN に Vue.js が公開されましたので、kintone と Vue.js について少しまとめます。

他のフレームワークとの比較

まず、同じく Cybozu CDN で公開されている Angular などのフレームワークと何が違うのかということですが、公式サイトにまとめられています。
他のフレームワークとの比較 (External link)

たとえば、AngularJS はフルスタックなフレームワークで何でもできますが、そのぶん学習コストが高いです。
Vue.js は双方向データバインディングに特化しており、単体での機能は AngularJS や Knockout.js などのフレームワークよりは少ないです。
しかし、そのぶんシンプルで学習コストは低く、簡単なものなら Vue.js の方が書きやすいと思います。

双方向データバインディングとは、わかりやすくいえば、データの変更があったら UI の変更を更新し、UI の変更があったらデータの更新をする処理を自動的に行う機能を指します。
たとえば、普通の JavaScript 開発だとテキストボックスが変更されたイベントを検知して関数を実行させなければいけませんが、Vue.js 内で管理するデータについてはそれが自動的に行われることになります。

サンプル(データ表示、検索)

実際にいくつかサンプルを作ってみます。
今回は、顧客名簿を Vue.js を使って表示するのと、検索まで実装してみたいと思います。

下準備

次のアプリを作って、サンプルデータを入れておいてください。

フィールド名 フィールドコード
顧客名 campanyName
顧客電話番号 tel

Cybozu CDN

Cybozu CDN から vue.js の URL をコピーします。

https://js.cybozu.com/vuejs/v2.6.10/vue.min.js
今回はバージョン 2.6.10 を使用します。

Vue.js の簡単な使い方

まず、kintone のデータは使わず、とりあえず kintone 上で Vue.js を使ってみましょう。

カスタマイズビューの作成

顧客企業名と、電話番号を表示するカスタマイズビューを作成してみます。
カスタマイズビューの作り方は次の記事を確認ください。
第 7 回 カスタマイズビューを利用してみよう

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div id="app">
  <table border="1px">
    <tr>
      <th>顧客名</th><th>顧客電話番号</th>
    </tr>
    <tr v-for="customer in customers">
      <td>{{customer.companyName}}</td><td>{{customer.tel}}</td>
    </tr> 
  </table>
</div>

v-for と記述されたところと、二重の波括弧 {{}} でくくられた部分が Vue.js で利用される部分です。

JavaScript カスタマイズ

次の JavaScript ファイルを作成し、kintone にアップロードしましょう。

 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
/*
 * kintone x Vuejs
 * Copyright (c) 2016 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */
(function($) {
  'use strict';
  // Vueのインスタンスを作成
  const vm = new Vue({
    data: {
      customers: []
    },
  });

  kintone.events.on('app.record.index.show', (event) => {
    if (event.viewId !== 5118521) return event; // 作成したカスタマイズビューのIDを指定
    const customers = [
      {companyName: '株式会社A', tel: '0123-45-6789'},
      {companyName: '株式会社B', tel: '1123-45-6789'},
      {companyName: '株式会社C', tel: '2123-45-6789'},
      {companyName: '株式会社D', tel: '3123-45-6789'}
    ];
    // 作成されたVueインスタンスをカスタマイズビューで用意した #app にマウント
    vm.$mount('#app');

    // データをセット
    Vue.set(vm, 'customers', customers);
    return event;
  });
})();

次のように表示されます。

kintone のデータを読み込ませる

上記のカスタマイズビューと JavaScript を再度編集して、今度は kintone のレコードを表示させてみましょう。

カスタマイズビュー
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div id="app">
  <table border="1px">
   <tr>
     <th>顧客名</th><th>顧客電話番号</th>
   </tr>
   <tr v-for="record in records">
     <td>{{record.campanyName.value}}</td><td>{{record.tel.value}}</td>
   </tr> 
  </table>
</div>
JavaScript カスタマイズ
 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
/*
 * kintone x Vuejs
 * Copyright (c) 2016 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */
(function() {
  'use strict';
  const vm = new Vue({
    data: {
      records: []
    },
  });

  kintone.events.on('app.record.index.show', (event) => {
    if (event.viewId !== 5118521) return event; // 作成したカスタマイズビューのIDを指定
    const records = event.records;

    // 作成されたVueインスタンスをカスタマイズビューで用意した #app にマウント
    vm.$mount('#app');

    // データをセット
    Vue.set(vm, 'records', records); // kintoneのrecords配列をそのまま利用
    return event;
  });
})();

event.records の配列をそのまま Vue の data に利用することで、for も使わずに一覧を出すことができました。
すごくシンプルにかけますね。

独自の検索フォームをつけてみましょう。
簡単にインクリメンタルサーチが実装できます。
カスタマイズビュー側に検索用の input 要素を追加し、JavaScript 側にフィルターするための関数を定義します。

カスタマイズビュー
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div id="app">
  検索 <input type="text" v-model="searchText" placeholder="検索する">
  <table border="1px">
    <tr>
      <th>顧客名</th>
      <th>顧客電話番号</th>
    </tr>
    <tr v-for="record in filteredRecords">
      <td>{{record.campanyName.value}}</td>
      <td>{{record.tel.value}}</td>
    </tr> 
  </table>
</div>
JavaScript カスタマイズ
 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
/*
 * kintone x Vuejs
 * Copyright (c) 2016 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */
(function() {
  'use strict';
  const vm = new Vue({
    data: {
      searchText: '', // 検索用のデータ追加
      records: [],
    },
    computed: {
      // フィルターするための関数作成
      filteredRecords: function() {
        return this.records.filter((record) => {
          return record.campanyName.value.indexOf(this.searchText) !== -1;
        });
      }
    },
  });

  kintone.events.on('app.record.index.show', (event) => {
    if (event.viewId !== 5520283) return event; // 作成したカスタマイズビューのIDを指定
    const records = event.records;

    // 作成されたVueインスタンスをカスタマイズビューで用意した #app にマウント
    vm.$mount('#app');

    // データをセット
    Vue.set(vm, 'records', records);
    return event;
  });
})();

JavaScript カスタマイズで、computed の中に filteredRecord という関数を定義し、カスタマイズビュー側でも filteredRecord によってフィルターされた結果を表示する、というようになっています。
詳しくは 算出プロパティ (External link) を確認ください。

kintone の検索 (External link) の弱点として、一文字での検索ができません。
また、英数字は単語単位でしか検索できないなどの制限がありますが、このインクリメンタルサーチを応用すれば、それらの弱点も克服できます。

おわりに

これだけ簡単に、独自のカスタマイズビューを作ることができるのは魅力的ですよね。
他にも、独自のフォームを作ったり、レコード詳細画面でスペースフォームと活用して表示をカスタマイズしたりできます。
フルスクラッチで書いたり、jQuery 単体でやるよりは楽にできると思います。

さらに 算出プロパティ (External link) コンポーネント (External link) などの機能も使いこなすと kintone でやりにくい、かゆいところまで手が届きます。
学習コストも比較的低いので、ぜひためしてみてください。