設定をインポート/エクスポートできるkintoneプラグインは幸福度の向上に効果がある

こんにちは、キン担ラボの本橋です。毎日kintoneプラグイン作ってます。

プラグイン開発をしていると、何度も何度もプラグインの設定を書いたり消したり書いたり消したりする手間が大変大きくなります。インポート/エクスポートしたくてしたくて堪らなくなります。

できあがったものがこちらのNode.jsライブラリです。

https://www.npmjs.com/package/kintoneplugin-config-migrator?activeTab=readme

# 作ったもの

kintoneプラグインの設定画面にインポート/エクスポートボタンを追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13915/6d666b8a-7ae4-11f5-5d14-6c1580425b88.png)

このライブラリを組み込んだプラグインの設定をjson形式でダウンロードしたりアップロードしたりできるようになります。


# 使い方

お使いのプロジェクトに kintoneplugin-config-migrator モジュールをインストールしてください。

```bash
$ npm install kintoneplugin-config-migrator
```

プラグインのメイン処理の中で↓こんな呼び出し方をすれば使えます。

```javascript
import { ConfigMigrator } from "kintoneplugin-config-migrator";

(function (PLUGIN_ID: string | undefined) {
    // メイン処理
    // ...

    // ConfigMigratorの初期化とボタンの設置
    const migrator = new ConfigMigrator(PLUGIN_ID)
    migrator.put_forms('config_body')
})(kintone.$PLUGIN_ID);
```

'config_body'のところはお使いの環境にあわせてボタンを配置したいHTML要素のIDを指定してあげてください。


# おはなし

プラグイン開発をしているとアプリのプラグイン設定画面によくよくお世話になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13915/8acfb7fe-7b2a-a685-6894-a7f45223500a.png)

だいたい毎回、開発ビルド、ステージングビルド、プロダクションビルドとプラグイン設定画面に並べています。

プラグインの開発過程では、これらの設定画面をいったりきたりいったりきたりしながらアンインストールしたり再インストールしたり「必須項目が設定されていません。」に対応して設定しなおしたりを無限に繰り返しているうちにプラグインが仕上がっていきます。

やがて設定項目の増加にともなって「設定しなおしたり」の手数も増えに増えていきます。AutoHotKeyとかCliborとかを使ってある程度は楽にしていましたがどうにも迂遠で、ある朝設定項目が100万個くらいあるプラグインの開発をすることになって

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13915/f9b2ee4d-6c30-704b-ab52-da18580a723f.png)

ああこれは人間の仕事ではないなとやっと気づきました。

設定のインポート/エクスポートは、実を言うとkintone pluginの仕組みを知っていれば特別に難しいことではありません。getConfig()とsetConfig()に出し入れしている辞書をそのまま保存してあげるだけです。

ライブラリの中でやっている処理を抜き出すとこんな感じです。

## エクスポートの処理

kitnone plugin APIのgetConfig()を使って取得した設定にファイル名をつけてをダウンロードさせています。

```javascript
const CONF = kintone.plugin.app.getConfig(plugin_id);
```

以下は試しにChatGPT連携プラグインに適用してエクスポートしたjsonです。


```json
{
    "model_id": "gpt-3.5-turbo",
    "NUMBER_MAX_TOKENS": "512",
    "system_prompt": "きみはドラえもん、会話する相手は常にのび太くんです。もうのび太くんはしょうがないなぁ、と回答の頭につけてね。口調は5歳の子供に向けて語りかけるようなくだけた口調がいいな。ですます調や敬語は使わないでね。",
    "table_fewshot_prompt": [
        {
            "役割": "user",
            "プロンプト": "ドラエも～ん、空を自由に飛びたいよー。"
        },
        {
            "役割": "assistant",
            "プロンプト": "もうのび太くんはしょうがないなぁ、はい、タケコプターだよ。これで自由に空を飛べるよ。バッテリー切れには気をつけてね。"
        },
        {
            "役割": "user",
            "プロンプト": "ジャイアンに殴られたよー"
        },
        {
            "役割": "assistant",
            "プロンプト": "もうのび太くんはしょうがないなぁ、はい、コノウソホントだよ。これをつけて喋ったことはすべて事実になるんだ。"
        }
    ],
    "btn_space_field": "spacer_button",
    "flag_record_modifier": "disable",
    "input_field": "入力テキスト",
    "output_field": "出力フィールド"
}
```


## インポートの処理

同じくアップロードしたjsonファイルをJSON.parse()でパースして、kintone plugin APIのsetConfig()に格納しています。

```javascript
const jsonData = JSON.parse(event.target.result);
kintone.plugin.app.setConfig(jsonData, function () {
    alert('🆙 プラグイン設定を保存しました。アプリの更新をお忘れなく！');
    window.location.href = '../../flow?app=' + kintone.app.getId();
});
```

kintoneプラグインで設定値を読み込み・保存するときに使う標準のAPIなので、ほとんどすべてのプラグインに適用できるかと思います。（認証情報は別のAPIなので今回は割愛しました）

100万項目の設定を入力するよりはよっぽど簡単に実現できますので、このライブラリを使わなくても組み込むのはそう難しくはないかと思います。

インポート・エクスポート機能があるとプラグインの利用が一段階幸せになるというお話でした。

# お約束

あんなプラグインが欲しい、こんなシステムは実現できる？　などのご依頼はキン担ラボでお待ちしています！

https://www.monosus.co.jp/service/kintanlab/