Vue.js＋Vuetify.jsで作るkintoneカスタマイズビュー

最近

お仕事でkintoneのJavaScriptカスタマイズをよくやっています。

よくある要望なのが、【一覧画面で、チェックボックスを並べて選択レコードに対して一括して〇〇を更新・処理したい。】というもの。

以前は、カスタマイズビューでHTML・CSSを手書きしてたんですが、もっと効率良く開発できないかと模索してた先に行き着いたのが Vue.js＋Vuetify.jsの組み合わせです。

Vue.jsはjQueryに変わるフロントエンドライブラリ、Vuetify.jsはVue.jsと組み合わせて使うデザイン化されたUIパーツみたいなものです。（ちょっと乱暴な言い方かも。）

何しろ、今時のデザインで高機能なUIを簡単なコードで作れるので、凄いお勧めです。

以下、今回作ったカスタマイズビューです。
チェックボックス付きで選択レコードに対して一括処理を行うVuetify.jsのデータテーブルを使っています。
ソート機能とフィルタリング機能も付いています。

Vue.jsやVuetify.jsに関する情報はネット上にいくらでも転がっているので、そちらをどうぞ。この記事では、kintone関連の事を中心に記事にしたいと思います。

なお、公式サイトは以下。

jp.vuejs.org

Vue.js

https://jp.vuejs.org/index.html

Vue.js - The Progressive JavaScript Framework

vuetifyjs.com

マテリアルデザインコンポーネントフレームワーク — Vuetify.js

https://vuetifyjs.com/ja/

VuetifyはVue.jsのマテリアルデザインコンポーネントフレームワークです。美しいコンテンツを持つリッチアプリケーションを作成するのに必要不可欠なツールを提供することを目的としています。

また、Cybozu Developper Networkの以下の記事がkintoneで使うための参考になります。

cybozu developer network

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

https://developer.cybozu.io/hc/ja/articles/360027347212-Vue-js-Vuetify-jsを使って-レコードの一覧と詳細をシングルページで作成しよう-

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

カスタマイズビューの作り方

基本的な所は以下を参考にしてください。

cybozu developer network

第7回カスタマイズビューを利用してみよう

https://developer.cybozu.io/hc/ja/articles/202905604?_ga=2.100291486.1097009223.1582397583-914875915.1577848635

（著者：落合雄一）はじめにまずは、cybozu developers networkに頂いた質問からご紹介します。～～～～～～～～～～～～～～こんにちは。どのカテゴリにすればよいか迷ったのですが、「一覧」で「カスタマイズ」を使った簡単なサンプルをもっと希望します。今は、「予算アプリと実績アプリの集計表をカスタマイズビューに表示する」だけだと思うのですが、 JavaScrip...

カスタマイズビューの設定

ポイントの一つは、「ページング」の設定です。
Vuetify.jsでは色々なUIコンポーネントが予めデザイン化されて、少量のテンプレート構文ですぐ使えます。

一覧画面を作るにはデータテーブルというやつを使うのですが、そいつはデフォルトでページング機能を持っています。
作り方にもよりますが、今回はデータテーブルの方のページング機能を使うため、kintoneのページングはOFFにしておきます。

それにより一覧画面表示イベント時に取得できるeventオブジェクトのrecords内には通常はレコードデータが入っていますが、ページネーションをOFFすると空になるので、自分で取得する必要があります。

自分でレコードを取得するのでカスタマイズビューの設定画面で設定した「絞り込み条件」と「ソート条件」もkintone APIで取得します。

// ソート条件用に取得
var orderBy = kintone.app.getQuery();
// 抽出条件
var filterStr = kintone.app.getQueryCondition();
// ソート条件の解析
var orderMatches = orderBy.match(/order by (.*)$/);
var sorts = orderMatches[1].split(',');

取得条件に応じてクエリを変更できるようにしておけば、変更に強いスクリプトになります。

抽出条件を一覧設定画面で設定済みの場合、「kintone.app.getQuery()」で取得できるのは、「抽出条件＋ソート条件」なので「order by」でマッチングして必要なソート条件を部分的に抜き出すという事をやります。

なお、ページネーションをOFFにしてるので、「limit」「offset」は付いてきません。

HTML設定

HTMLはVuetify.jsのデータテーブル v-data-table を使います。
以下のようにカスタマイズビューのHTMLに設定。

<v-data-table
    v-model="selected"
    :headers="viewHeaders"
    :items="custommers"
    show-select
    item-key="レコード番号.value"
    class="elevation-1"
>
</v-data-table>

それぞれのプロパティは以下のような感じ。

プロパティ	説明
v-model	チェックボックスの選択済みデータを格納するVueデータの配列。
:headers	データテーブルのヘッダー行の設定を決めるVueデータのオブジェクト。
:items	kintoneレコードデータ格納用のVueデータの配列。
sho-select	チェックボックスを表示するフラグ。
item-key	各行を一意に判別するためのデータ。取得したレコードのレコード番号が適切。