kintoneでVue.jsを使ってみる

今回はkintone + Vue.js で「Hello Vue!」してみたいと思います。

アプリの準備

公式ドキュメントを参考に
一覧と各レコードの詳細・追加・編集画面にHello Vue!を表示させます。

CDNはこちらから探してね！

フォームの設定

スペースフィールドを一つ貼り付けます。
要素IDはspVueとしておきます。

一覧の設定

カスタマイズビュー、PC版とモバイル版で表示する　を選択して、htmlは下記の様にします。

<div id="app">
  {{ message }}
</div>

JavaScript

詳細・追加・編集画面表示イベントでは、スペースフィールドに先程のhtmlを追加します。

PC版とモバイル版でAPIがちょっとだけ違います。要注意！

PC版

// 一覧画面表示
kintone.events.on(["app.record.index.show"], async (event) => {
  const app = new Vue({
    el: "#app",
    data: {
      message: "Hello Vue!",
    },
  });
  return event;
});

// 詳細・追加・編集画面表示
kintone.events.on(
  [
    "app.record.detail.show",
    "app.record.create.show",
    "app.record.edit.show",
  ],
  async (event) => {
    const sp = kintone.app.record.getSpaceElement("spVue");
    const div = document.createElement("div");
    div.id = "app";
    div.textContent = "{{message}}";
    sp?.appendChild(div);

    const app = new Vue({
      el: "#app",
      data: {
        message: "Hello Vue!",
      },
    });

    return event;
  }
);

モバイル版

APIのappの前にmobileが必要です。

// 一覧画面表示
kintone.events.on(["mobile.app.record.index.show"], async (event) => {
  const app = new Vue({
    el: "#app",
    data: {
      message: "Hello Vue!",
    },
  });
  return event;
});

// 詳細・追加・編集画面表示
kintone.events.on(
  [
    "mobile.app.record.detail.show",
    "mobile.app.record.create.show",
    "mobile.app.record.edit.show",
  ],
  async (event) => {
    const sp = kintone.mobile.app.record.getSpaceElement("spVue");
    const div = document.createElement("div");
    div.id = "app";
    div.textContent = "{{message}}";
    sp?.appendChild(div);

    const app = new Vue({
      el: "#app",
      data: {
        message: "Hello Vue!",
      },
    });

    return event;
  }
);

JavaScriptファイル追加時の注意！

kintone Tech Channel キンテク　チャンネルを参考に開発環境を構築しました。
ローカルのjsファイルをいちいちアップロードすることなく、楽にkintoneアプリに適用することができる素敵な開発環境が出来上がります。

しかし、要注意！

このようにローカルのjsファイルのままでは、
開発PC内のローカルファイルを見ている状態なので、開発PC以外からはファイルにアクセスできません。

ですので、他のPCやモバイル端末等で試す場合は、
ファイル自体をアップロードするか、モバイルからもアクセスできる場所のURLを設定するかにしましょう。

(2時間ほど気づけなくてアワアワしていました）

動作確認＆まとめ

というわけで、無事にVue.jsでHello Vue!することができました。
kintone開発環境でVue.jsの勉強をお手軽にできる環境も手に入れることができたような気がします。

PC 一覧	PC 詳細	PC 追加・編集
モバイル 一覧	モバイル 詳細	モバイル 追加・編集