Vue.js+Vuetify.jsを使って、レコードの一覧と詳細をシングルページで作成しよう！ – cybozu developer network

（Author: Fuji Business International Mamoru Fujinoki）

はじめに

Cybozu CDNにも公開されているようにVue.jsのJavaScriptライブラリーが近年シングルページアプリケーション(SPA)の開発環境として人気を博しているようです。
AngularJSやReactよりも比較的に覚えやすく、フロントエンド初心者でもとっつき易いプラットフォームだと思います。

今回は、このVue.jsのライブラリーとVue.js用のUIライブラリーであるVuetify.jsを使って、カスタマイズビュー上でレコード一覧と詳細をシングルページ上で実現します。リアクティブな検索機能も作成します。

2. kintoneアプリの設定・変更

kintoneアプリストアにて、検索テキストボックスに「顧客リスト」と入力し検索します。
そして、検索結果の「顧客リスト」アプリを追加します。

「顧客リスト」アプリを開き、「アプリの設定」画面の「フォーム」タブで下記のテーブルを参考にフィールドの設定を確認・変更します。

フィールドの種類	フィールド名	フィールドコード
文字列（１行）	会社名	Company_name
文字列（１行）	部署名	Department
文字列（１行）	担当者名	Representative
文字列（１行）	郵便番号(数字のみ)	Zip_code
文字列（１行）	TEL(数字のみ)	Phone
文字列（１行）	FAX(数字のみ)	Fax
文字列（１行）	住所	Address
ドロップダウン	顧客ランク	Rank
文字列（１行）	メールアドレス	Mail
文字列（複数行）	備考	Note
レコード番号	レコード番号	record_no
数値	緯度	lat
数値	経度	lng

次に「設定」タブを開き、「JavaScript / CSSでカスタマイズ」をクリックして、以下のJavaScriptファイル、CSSファイルのURLを指定し、設定を保存します。

JavaScriptファイル：

https://js.kintone.com/vuejs/v2.6.9/vue.min.js
https://cdn.jsdelivr.net/npm/vuetify@1.5.12/dist/vuetify.min.js

CSSファイル：

https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons
https://cdn.jsdelivr.net/npm/vuetify@1.5.12/dist/vuetify.min.css

3. カスタムビュー上でVue.jsのテンプレート開発

今度は、「一覧」タブで、「+」サインをクリックして、一覧を追加します。

一覧設定画面で、以下を設定します。

一覧名を入力
表示形式に「カスタマイズ」を選択
一覧IDをメモしておく
「ページネーションを表示する」を外す
下記を参考にHTMLコードを入力する

以下のようにVuetify.jsでテンプレートを作成します。

以上の設定後、変更を保存します。

また、以下のようにcssをカスタマイズすることで、一覧の行表示の色分けが可能です。「vuetify_sample.css」のように適当にファイル名をつけて保存し、「JavaScript / CSSでカスタマイズ」の設定画面で、アップロードします。

解説

一覧表示と詳細表示を[detailView]のフラグで切り替えています。

ページのタイトルと検索フィールドを表示します。[search]プロパティーでテーブルのフィルター機能と連携しています。[v-model]で指定することにより、双方向のデータバインディングを実現しています。

一覧テーブルを表示します。フッター部分にページ切り替え表示を加えます。[headers], [items], [search]のデータをバインディングしています。
[hide-actions]ではデフォルトのページ切り替え表示を無効にして、カスタムのページ切り替えを表示します。

詳細表示のトップにボタンを配置します。今回は、「一覧に戻る」と「変更を保存」のボタンを作成しました。

顧客の詳細情報を表示します。ここで変更したフィールドのデータは即座に一覧のデータにも反映されていますが、「変更を保存」しない限り、kintoneのデータベースへは変更が反映されていません。

4. Vue.jsによるプログラムの開発

以下のサンプルコードを参考にVue.jsのプログラムを作成します。

プログラム作成後、「sample_vue.js」等のファイル名を指定して、保存し、kintoneの「JavaScript / CSSでカスタマイズ」の設定画面にて、アップロードします。

解説

一覧表示のイベントで、上記でメモしておいた、一覧ID が一致した場合のみ、処理を続行します。
また、「ページネーションを表示する」を外したため、イベントの発生時にレコードが取得されていません。よって、kintone APIより、レコードの一括取得を行います。(最大取得数は５００件ですが、何も指定しない場合、初期値は１００件までです。)

Vue.jsのインスタンスを生成します。[el]プロパティには、テンプレートの最上部のdivのid名を指定しています。

[data]プロパティには、[headers]で一覧のヘッダーのデータオブジェクト、[customers]にkintoneから取得した顧客レコード一覧情報、[detailsView]に画面切り替えフラグ、[customer]に一覧から選択した顧客の詳細情報、[search]には、検索フィールドで入力した文字列、[rankList]には、顧客ランクのドロップダウンの値、[pagenation]には一覧に表示されるレコード数を設定しています。

[method]プロパティには、ボタンがクリックされた時に実行される関数が定義されています。
[showDetail]メソッドは、顧客一覧で詳細表示のアイコンがクリックされると実行され、[back] メソッドは、「一覧に戻る」ボタンをクリックすると実行、また、[save]メソッドは、「変更を保存」ボタンをクリックすると実行されます。

最後に、[computed]プロパティでは、[pages]でページ切り替えの情報を返します。

5. 動作確認

一覧表示選択ドロップダウンより、作成したカスタマイズビューを選択します。

「検索」フィールドに検索したい文字列を入力すると、一覧の絞り込みが即座に行われます。

次に詳細表示のアイコンをクリックします。

詳細画面が表示されるので、「会社名」を適当に変更し、「変更を保存」します。
保存が成功した後「一覧に戻る」をクリックします。

一覧で「会社名」の変更が即座に反映されています。

注意事項

このサンプルでは、取得した１００件までのレコードに対するレコードの検索絞り込みやページネーションのみ有効になります。

また、検索フィールドによるレコードの絞り込みは、テーブルに取得したフィールドにのみ有効になります。

IE11およびSafari 9以前のブラウザでは、動作しません。参照：Veutify.js Quick Start

まとめ

カスタマイズビューを Vue.js と Vuetify.js を使って作成すると一覧と詳細ページがシングルページで比較的簡単に作成できます。
一覧の検索も入力に応じて、即座に絞り込みが行えたり、デバイスの画面の大きさに応じてリアクティブに表示コントロールする機能がVue.jsでは使えます。
Vue.jsは、シングルページアプリケーションや携帯端末のアプリケーションの開発に適していますので、是非、試してみてはいかがでしょうか？

参考サイト

このTipsは、2019年７月版 kintoneで確認したものになります。