Vue.jsを使ったkintoneプラグイン開発環境構築

kintone カスタマイズ
1

諸注意

Node.js及び基本的なGNU/Linuxコマンド群がインストールされた環境を想定しています。

Windows環境ではWindows Subsystem for Linuxを使うなどしてください。その他コマンドのインストールについては各自調べてください。

vue-cliのインストール

Vue.jsのアプリケーションはvue-cliを使うことで簡単にテンプレートから作成出来ます。

これを使ってkintoneプラグインの開発環境の構築をしていきます。

npmを使ってvue-cliをインストールします。

$ npm i -g vue-cli

以下のコマンドでWebPackを使った開発環境を構築します。

$ vue init webpack-simple plugin-name

インストールが完了したら$ cd plugin-nameでプラグインのディレクトリに移り、ビルド設定を変更していきます。

ビルド設定の変更

プラグイン作成向けにビルド設定を変更します。

entryの変更

webpack.config.jsのentryの項目を

entry: {
    config: './src/config/main.js',
    desktop: './src/desktop/main.js'
  }

に変更します。

JS/CSSの出力先の変更

webpack.config.jsの

output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },

の部分を以下のように変更します。

output: {
    path: path.resolve(__dirname, './plugin/js'),
    publicPath: '/plugin/',
    filename: '[name].js'
  },

本番環境でのソースマップを無効化

webpack.config.jsのwebpack.optimize.UglifyJsPluginの設定を以下に書き換えます。

new webpack.optimize.UglifyJsPlugin({
      sourceMap: false,
      compress: {
        warnings: false
      }
    }),

ソースのJSファイルの準備

このままではビルドが出来ないのでsrc/configを作成し、src/以下のファイルを全てそちらに移し、

desktop/main.jsも必要なので、こちらもディレクトリとともに作成します

$ mkdir ./src/config
$ mv -r ./src/* ./src/config
$ mkdir ./src/desktop
$ touch ./src/desktop/main.js # これで空の src/desktop/main.jsが作成される。

さらに設定画面用のHTMLファイルも必要なので、こちらもひとまず空のファイルで用意します。

$ mkdir ./plugin/html/
$ touch ./plugin/html/conig.html

マニフェストファイルの作成

以下のようなプラグインのマニフェストファイルを書きます。

{
  "manifest_version": 1,
  "version": 1,
  "type": "APP",
  "name": {
    "ja": "Sample Plugin",
    "en": "Sample Plugin",
    "zh": "Sample Plugin"
  },
  "description": {
    "ja": "Sample Plugin",
    "en": "Sample Plugin",
    "zh": "Sample Plugin"
  },
  "icon": "images/icon.png",
  "homepage_url": {
    "ja": "https://example.com/",
    "en": "https://example.com/",
    "zh": "https://example.com/"
  },
  "desktop": {
    "js": [
      "js/desktop.js"
    ]
  },
  "config": {
    "html": "html/config.html",
    "js": [
      "js/config.js"
    ]
  }
}

これでビルド設定は終了です。

プラグインの設定画面のスクリプトは./src/config/以下のファイル、アプリ側のスクリプトは./src/desktop/以下のファイルで作成します。

パッケージングスクリプトの追加

以下を実行します

$ wget -O ./package.sh https://raw.githubusercontent.com/kintone/plugin-sdk/master/package.sh
$ chmod +x ./package.sh

プラグインIDの取得とグローバル変数への代入

プラグインIDを取得するために、この状態でパッケージングを一度行っておきます。

$ ./plugin.sh ./plugin

パッケージングスクリプトの出力のPlugin Id: <plugin_id>の<pugin_id>の部分をメモしておきます。

そして、build/webpack.base.conf.jsの行頭に

const webpack = require("webpack");

を追加し、module.exportsに代入されているオブジェクトに

plugins: [
    new webpack.DefinePlugin({
      plugin_id: '"<plugin_id>>"'
    })
  ]

という項目を増やします。

こうすることで、JSのソースからplugin_idという変数でプラグインIDにアクセス出来ます。

ソースを編集し、次回以降同じプラグインIDでプラグインをパッケージングする場合は以下のコマンドを実行してください。

$ npm run build
$ ./package.sh ./plugin ./vault/keys/plugin.<plugin_id>.ppk