Zenn
🥦

kintoneアプリの一覧画面をVue2＋Vuetify2を使って表示

2025/01/20に公開
JavaScript
Vuetify
kintone
Vue 2
vuetify2
tech

kintoneを触り始めて２年ほど、他業務に追われながら片手間に開発していましたが、ようやくカスタマイズも板についてきました。
頻繁に開発しているわけではないので備忘録も兼ねて本記事に落とし込んでいきたいと思います。

ところでVueに関する記事は多数あれどバージョンがない記事も少なくなく、自分の環境で使えるかどうか分からずかなりの時間を試行錯誤していましたので、利用環境にバージョンを記載しました。
ご自身の環境にあっているかを充分に確認のうえ、参考にしていただければと思います。

1. 利用環境

以下の環境で動作しています。

  • kintone … クラウド最新版（2025年1月時点）
  • Vue2 … バージョン2.7.15
  • Vuetify2 … バージョン2.7.2

2. 用意するもの

2-1. 一覧画面を作成

アプリ管理　→　一覧　→　「＋」マーク　から、新しい一覧をカスタマイズ形式で作成します。
本記事では以下のように設定します。

一覧名 レコード一覧の表示形式 一覧を表示する範囲 ページネーションを表示する
テスト一覧 カスタマイズ PC版のみで表示する チェックオフ

3. スクリプト全体

3-1. HTML

「テスト一覧」の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」という名称で以下の内容を保存します。

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);

以上２点がスクリプト全体像です！

4. 説明

4-1. スクリプトを動作させる一覧画面を指定する

part of customizeView.js
if (event.viewType!=='custom' || event.viewId!==5536075) {return event;};

アプリ内のいろんなページで動作してもらっては困るので、しょっぱなで一覧IDを指定しておきます。
この箇所にあるevent.viewIdは環境ごとにかわりますので、5536075の箇所を、前段階で作成した一覧画面に記載の一覧IDに書き換えてください！

4-2. Vueオブジェクト生成時のポイント

data() {}内に設定しているレコード一覧userListを空配列で設定

part of customizeView.js
      data() {
        return {
          userList: [],
          isLoading: true,
        }
      },

<v-data-table>のデータ本体としたいuserListは初期段階で空配列としています。
対象データが大量な場合は表示までにレスポンスがなく、ユーザビリティが低下するのを防ぐ狙いがあります。
BooleanのisLoadingを用意してロード中という事を伝えているのも同じ理由です。

なおuserListはHTML内の:items="userList"と、isLoadingはHTML内の:loading="isLoading"と、それぞれ関連付けています。

computed: {}内でタイトル行を設定

part of customizeView.js
      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はvuetify: new Vuetify({})で設定

part of customizeView.js
      vuetify: new Vuetify({
        icons: {
          iconfont: 'mdi',
        },
      }),

しています。 キー名はvuetifyと、全て小文字なので注意！ 表示されないエラーを解決するためだけに何時間とられたことか！！
ちなみにVuetify使用時にicons: {iconfont: 'mdi'}を設定することでmdiアイコンを使えるようにしています。

マウント

part of customizeView.js
.$mount('#kintone-vue2-app')

最後に$mount('#kintone-vue2-app')を使ってHTMLの指定idと紐づけることで、生成したVueオブジェクトとの紐づけ完了！

↑ここまでの処理が一通り終わったら…

part of customizeView.js
    getRecords(appId).then((resp) => {
      vObj.userList = resp
    });

    vObj.isLoading = false;

最後にレコード取得＆設定と、ローディングバー非表示して完了です。

5. アプリにライブラリ等を反映

アプリ管理　→　設定　→　カスタマイズ／サービス連携　→　JavaScript/CSSでカスタマイズ
の中に、上から順に以下内容を追加します。

全て指定できたら「保存」→「アプリを更新」します。

これだけで反映完了。さすがはUIフレームワーク！

ただでも…標準パーツの表示が崩れるのが気になるなあ…Quasarの方が若干影響を抑えられそうなので、そちらでも作ってみる予定。

6. さいごに

いかがでしょうか？私はここまでたどり着くのにかなり時間がかかってしまいましたが、ひとつテンプレートがあるだけで効率化につながったのではないでしょうか？

またVuetify2は日本語ドキュメントもかなり充実しているので、HTML部分のカスタマイズはもちろんの事、javascriptの変更も容易です！

ぜひ利用してみてください！では👋

Discussion