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

**URL:** <https://community.cybozu.dev/t/topic/2897>\
**Category:** kintone 開発相談\
**Created:** [2018 年 2 月 26 日午前 9:53 UTC](https://community.cybozu.dev/t/topic/2897 "2018-02-26T09:53:20Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account2115](https://avatars.discourse-cdn.com/v4/letter/l/e9bcb4/32.png) [@Legacy\_Account2115](https://community.cybozu.dev/u/Legacy_Account2115)\
**Post date:** [2018 年 2 月 26 日午前 9:53 UTC](https://community.cybozu.dev/t/topic/2897/1 "2018-02-26T09:53:20Z")

</div>

## 諸注意

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

```