kintone plugin pack tools を使ってプラグインを新しく作って、パックして、アップロードしてみる

kintoneにはAPIがあるので、それとJavaScriptを使ったカスタマイズができますが、汎用的なものはプラグインとして、どんな環境でもアドオンできるようにしたいものです。プラグインを作るのはハードルが高〜〜い！！なんて声も聞こえてきそうですが、便利なツールを使いこなせば意外と簡単でした。

[プラグイン開発支援ツール群](https://developer.cybozu.io/hc/ja/articles/360000975763)


| ツール名                 | 概要              | 対象    |
|:-----------------------|:------------------|:------------------|
| **create-plugin**      | プラグインの雛形を作るツール |プラグイン開発未経験者、1から作りたい人向け|
| **plugin-packer**      | プラグインをzipファイルにパッケージングするツール|プラグイン開発経験者、既存のファイルがある人向け|
| **plugin-uploader**    | プラグインzipファイルを環境にアップロードするツール |kintoneへのアップロードを自動化したい人向け|


create-plugin には、plugin-packer、plugin-uploaderのツールも入っているので、今回はこれだけで良さそうですが、せっかくなのですべてのツールもインストールしてみます。それぞれの[ツールの機能比較表はこちら](https://developer.cybozu.io/hc/ja/articles/360000975763)。

## Toolsフォルダ作成
予め、create-plugin, plugin-packer, plugin-uploaderのツール保管フォルダと、作業フォルダ（kintone-plugins）を作成しておきます。
※tools/kintone-plugins： 作成したプラグインの置き場

```
$ mkdir -p tools/{create-plugin,plugin-packer,plugin-uploader,kintone-plugins}
```

## create-plugin（プラグインの雛形を作る）
### create-pluginをインストール
```
$ cd tools/create-plugin
$ npm install -g @kintone/create-plugin
```

### pluginをガイダンスに沿って作成
binフォルダにあるcreate-kintone-plugin.shのガイドに従って値を入れるだけです。プラグイン名を「sample」にしました。

```
$ bin/create-kintone-plugin ../kintone-plugins/sample
```

できた！！
<img width="391" alt="" src="https://qiita-image-store.s3.amazonaws.com/0/100494/34021709-cf35-42c6-25b4-fe648c65ffdb.png">

このまま、プラグインをパッケージングしてもよいのですが、せっかくなのでプラグイン用に作ったプログラムをコピーしてパッケージングしたいと思います。

## plugin-program（updatefieldbuttonを使う）

こちらのGitHubにある [updatefieldbutton]( 
https://github.com/ushiront/mykintone-plugin/tree/master/src/updatefieldbutton) をフォルダごとコピーしておきます。

### updatefieldbuttonの機能
kintoneのレコード詳細画面からボタンクリック1回で値を変更してくれるプラグインです。kintoneでドロップダウンの値を変更する際には、レコード詳細→編集ボタンをクリック→ドロップダウンをクリック→変更する値を選ぶ→保存するの手順が必要ですが、このプラグインがあればそれが1回のクリックですみます^^

### リネーム
```
$ cd tools/kintone-plugins
$ mv sample updatefieldbutton
```

### ファイルをコピー
srcフォルダ内に、[updatefieldbutton]( 
https://github.com/ushiront/mykintone-plugin/tree/master/src/updatefieldbutton) を丸ごとコピーします。保存先はこちらです。

```
$ cd tools/kintone-plugins/updatefieldbutton/src
```

## plugin-packer（プラグインをzipファイルにパッケージングする）
### plugin-packerをインストール
```
$ cd tools/plugin-packer
$ npm install -g @kintone/plugin-packer
```

### プログラムをガイダンスに沿ってpluginとしてパッケージする
```
$ bin/kintone-plugin-packer --out ../kintone-plugins/updatefieldbutton/updatefieldbutton.zip ../kintone-plugins/updatefieldbutton/src
```

プラグイン(~.zip) と キーファイル（~.ppk） の作成
<img width="396" alt="" src="https://qiita-image-store.s3.amazonaws.com/0/100494/a8f831ad-bcd6-c137-943d-7aae0e00161c.png">


## plugin-uploader（プラグインをkintone環境にアップロードする）
### plugin-uploaderをインストール
```
$ cd tools/plugin-uploader
$ npm install -g @kintone/plugin-uploader
```
### プラグインをkintone環境にアップロード
kintoneの環境と、システム共通管理の権限のあるログイン名とパスワードを用意しておきましょう。

```
$ bin/kintone-plugin-uploader ../kintone-plugins/updatefieldbutton/updatefieldbutton.zip

# 対話形式で環境情報を入力
? kintoneのドメインを入力してください (example.cybozu.com): <ドメイン名>
? ログイン名を入力してください: <ログイン名>
? パスワードを入力してください: <パスワード>

> Open https://<サブドメイン>.cybozu.com/login?saml=off
> Try to logged-in...
> Navigate to https://<サブドメイン>.cybozu.com/k/admin/system/plugin/
> Try to upload updatefieldbutton.zip
> updatefieldbutton.zip をアップロードしました!
```
### 画面で確認
https://<サブドメイン名>.cybozu.com/k/admin/system/plugin/
<img width="826" alt="" src="https://qiita-image-store.s3.amazonaws.com/0/100494/be53ceba-b550-365f-7b74-4d2ccac55df4.png">

## 補足
### アプリに適用してみると
アプリの設定画面でプラグインの設定を行ったあとに、アプリに戻ります。
レコード詳細のメニューに表示され、ワンクリックで値を変更できます。
<img width="590" alt="" src="https://qiita-image-store.s3.amazonaws.com/0/100494/6f0b1400-51ea-450a-c19a-a151bf0598db.png">