カテゴリー内の他の記事

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

フォローする

(Author: Fuji Business International Mamoru Fujinoki)

はじめに

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

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

1.  開発の流れ

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

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

 

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

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

 

___________.png 

 

次に「設定」タブを開き、「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

URL__.png

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

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

 

 

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

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

 

___________.png

 

以下のように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より、レコードの一括取得を行います。(最大取得数は500件ですが、何も指定しない場合、初期値は100件までです。)

 

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

 

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

 

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

 

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

 

5. 動作確認

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

 

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

 

 

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

 

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

 

 

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

 

注意事項

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

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

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

まとめ

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

 

参考サイト

 

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

 

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。