はじめに
Vue.js
は非常にシンプルな JavaScript フレームワークで、kintone と相性がよく、私自身 kintone のカスタマイズでは Vue.js を使うことも多いです。
先日、
Cybozu CDN に Vue.js が公開されましたので、kintone と Vue.js について少しまとめます。
他のフレームワークとの比較
まず、同じく Cybozu CDN で公開されている Angular などのフレームワークと何が違うのかということですが、公式サイトにまとめられています。
他のフレームワークとの比較
たとえば、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
によってフィルターされた結果を表示する、というようになっています。
詳しくは
算出プロパティ
を確認ください。
kintone の検索
の弱点として、一文字での検索ができません。
また、英数字は単語単位でしか検索できないなどの制限がありますが、このインクリメンタルサーチを応用すれば、それらの弱点も克服できます。
おわりに
これだけ簡単に、独自のカスタマイズビューを作ることができるのは魅力的ですよね。
他にも、独自のフォームを作ったり、レコード詳細画面でスペースフォームと活用して表示をカスタマイズしたりできます。
フルスクラッチで書いたり、jQuery 単体でやるよりは楽にできると思います。
さらに
算出プロパティ
や
コンポーネント
などの機能も使いこなすと kintone でやりにくい、かゆいところまで手が届きます。
学習コストも比較的低いので、ぜひためしてみてください。