kintoneアプリの一覧画面をVue2+Vuetify2を使って表示
kintoneを触り始めて2年ほど、他業務に追われながら片手間に開発していましたが、ようやくカスタマイズも板についてきました。
頻繁に開発しているわけではないので備忘録も兼ねて本記事に落とし込んでいきたいと思います。
ところでVueに関する記事は多数あれどバージョンがない記事も少なくなく、自分の環境で使えるかどうか分からずかなりの時間を試行錯誤していましたので、利用環境にバージョンを記載しました。
ご自身の環境にあっているかを充分に確認のうえ、参考にしていただければと思います。
1. 利用環境
以下の環境で動作しています。
- kintone … クラウド最新版(2025年1月時点)
- Vue2 … バージョン2.7.15
- Vuetify2 … バージョン2.7.2
2. 用意するもの
2-1. 一覧画面を作成
アプリ管理 → 一覧 → 「+」マーク から、新しい一覧をカスタマイズ形式で作成します。
本記事では以下のように設定します。
一覧名 | レコード一覧の表示形式 | 一覧を表示する範囲 | ページネーションを表示する |
---|---|---|---|
テスト一覧 | カスタマイズ | PC版のみで表示する | チェックオフ |
3. スクリプト全体
3-1. HTML
<div id="kintone-vue2-app">
<v-app>
<v-main>
<v-conatainer fluid>
<v-row class="deep-purple lighten-5">
<v-col class="ma-2" cols="12">
<v-data-table
:headers="headers"
:items="userList"
:loading="isLoading"
></v-data-table>
</v-col>
</v-row>
</v-conatainer>
</v-main>
</v-app>
</div>
さきほど作成した「テスト一覧」のHTMLフィールドに本内容をコピペ。
コンポーネントを識別しやすいように、
-
v-row
の属性にclass="deep-purple lighten-5"
を追加して背景色を薄紫色に -
v-col
の属性にclass="ma-2"
を追加してマージンを設定
しています。
3-2. JavaScript
次に「customizeView.js」という名称で以下の内容を保存します。
((Vue,Vuetify) => {
const events = {
show: [
'app.record.detail.show',
'mobile.app.record.detail.show',
],
index: [
'app.record.index.show',
'mobile.app.record.index.show',
]
}
async function getRecords(appId) {
const client = new KintoneRestAPIClient();
const params = {
app: appId,
}
return await client.record.getAllRecords(params).then((resp) => {
return resp.map((row) => {
row.hogehoge = 'テストデータですよー!'
return row
});
})
}
kintone.events.on(events.index, async function(event) {
if (event.viewType!=='custom' || event.viewId!==5536075) {return event;};
const appId = event.appId
const vObj = await new Vue({
data() {
return {
userList: [],
isLoading: true,
}
},
computed: {
headers() {
return [
{
text: 'ユーザー名', //表示名
value: 'userName.value', //kintoneアプリのどの項目を表示するか
sortable: true, //列タイトルクリックしたときにソートできるかどうか
},
{text: 'ユーザーID', value: 'userID.value'},
{text: 'メールアドレス', value: 'mailAddress.value'},
{text: '生年月日', value: 'birthday.value'},
{text: 'ふがふが', value: 'hogehoge'},
]
}
},
vuetify: new Vuetify({
icons: {
iconfont: 'mdi',
},
}),
}).$mount('#kintone-vue2-app')
getRecords(appId).then((resp) => {
vObj.userList = resp
});
vObj.isLoading = false;
return event;
});
})(Vue,Vuetify);
以上2点がスクリプト全体像です!
4. 説明
4-1. スクリプトを動作させる一覧画面を指定する
if (event.viewType!=='custom' || event.viewId!==5536075) {return event;};
アプリ内のいろんなページで動作してもらっては困るので、しょっぱなで一覧IDを指定しておきます。
この箇所にあるevent.viewId
は環境ごとにかわりますので、5536075
の箇所を、前段階で作成した一覧画面に記載の一覧IDに書き換えてください!
4-2. Vueオブジェクト生成時のポイント
data() {}
内に設定しているレコード一覧userList
を空配列で設定
data() {
return {
userList: [],
isLoading: true,
}
},
<v-data-table>
のデータ本体としたいuserList
は初期段階で空配列としています。
対象データが大量な場合は表示までにレスポンスがなく、ユーザビリティが低下するのを防ぐ狙いがあります。
BooleanのisLoading
を用意してロード中という事を伝えているのも同じ理由です。
なおuserList
はHTML内の:items="userList"
と、isLoading
はHTML内の:loading="isLoading"
と、それぞれ関連付けています。
computed: {}
内でタイトル行を設定
computed: {
headers() {
return [
{
text: 'ユーザー名', //表示名
value: 'userName.value', //kintoneアプリのどの項目を表示するか
sortable: true, //列タイトルクリックしたときにソートできるかどうか
},
{text: 'ユーザーID', value: 'userID.value'},
{text: 'メールアドレス', value: 'mailAddress.value'},
{text: '生年月日', value: 'birthday.value'},
{text: 'ふがふが', value: 'hogehoge'},
]
}
},
headers
を用意し、<v-data-table>
のタイトル行として設定します。
HTML内の:headers="headers"
でこのオブジェクトと関連付けています。
value
に記述する内容は、kintoneのフィールドコード+「.value」といつも使っている形式です!
getRecords()
した内容をそのまま使うわけではない場合は、最後の「ふがふが」列のようになります。
vuetify: new Vuetify({})
で設定
肝心なVuetifyは vuetify: new Vuetify({
icons: {
iconfont: 'mdi',
},
}),
しています。 キー名はvuetify
と、全て小文字なので注意! 表示されないエラーを解決するためだけに何時間とられたことか!!
ちなみにVuetify使用時にicons: {iconfont: 'mdi'}
を設定することでmdiアイコンを使えるようにしています。
マウント
.$mount('#kintone-vue2-app')
最後に$mount('#kintone-vue2-app')
を使ってHTMLの指定idと紐づけることで、生成したVueオブジェクトとの紐づけ完了!
↑ここまでの処理が一通り終わったら…
getRecords(appId).then((resp) => {
vObj.userList = resp
});
vObj.isLoading = false;
最後にレコード取得&設定と、ローディングバー非表示して完了です。
5. アプリにライブラリ等を反映
アプリ管理 → 設定 → カスタマイズ/サービス連携 → JavaScript/CSSでカスタマイズ
の中に、上から順に以下内容を追加します。
- PC用のJavaScriptファイル
- (URL指定) https://js.cybozu.com/vuejs/v2.7.15/vue.min.js
- (URL指定) https://cdn.jsdelivr.net/npm/vuetify@2.7.1/dist/vuetify.min.js
- (URL指定) https://js.cybozu.com/kintone-rest-api-client/5.6.0/KintoneRestAPIClient.min.js
- (ファイル指定) 先ほど保存した「customizeView.js」
- PC用のCSSファイル
全て指定できたら「保存」→「アプリを更新」します。
これだけで反映完了。さすがはUIフレームワーク!
ただでも…標準パーツの表示が崩れるのが気になるなあ…Quasarの方が若干影響を抑えられそうなので、そちらでも作ってみる予定。
6. さいごに
いかがでしょうか?私はここまでたどり着くのにかなり時間がかかってしまいましたが、ひとつテンプレートがあるだけで効率化につながったのではないでしょうか?
またVuetify2は日本語ドキュメントもかなり充実しているので、HTML部分のカスタマイズはもちろんの事、javascriptの変更も容易です!
ぜひ利用してみてください!では👋
Discussion