kintoneプラグインの設定を手作業でエクスポート/インポートする

※9/1 ブックマークレット化について追記しました
※5/20 [Chrome拡張](https://chromewebstore.google.com/detail/kintonepluginmigrator/pndmdhhanlckeimjahjfijelpkbgoeac)について追記しました

# 追記：Chrome拡張の紹介

ここで書いているプラグイン設定のエクスポート/インポート手順をChrome拡張としてパッケージ化したものを公開しています。

https://chromewebstore.google.com/detail/kintonepluginmigrator/pndmdhhanlckeimjahjfijelpkbgoeac

https://note.com/motohasystem/n/nfc3048198ca2

よろしければご利用ください。

# 本文

こんにちは、キン担ラボの本橋です。

前回はkintoneプラグインの設定情報をエクスポート/インポートするライブラリを紹介しました。

https://qiita.com/motohasystem/items/db21e10819649e40b220

しかし、現在使っているプラグインがインポートもエクスポートもそもそも未対応の場合は手のつけようがありません。オープンソースになっていて自分で手を加えられるプラグインならまだしも、購入したり依頼して作ってもらったプラグインではそうも行きません。

ところで、プログラムというのは『人間の作業をコンピューターに肩代わりさせる』ものですね。

であれば、その逆もまた真であるわけです。

この記事では、プラグインの仕事であるエクスポート/インポート機能を人手で肩代わりして実行してしまう手順を紹介します。


# 準備１：プラグインのインストール

今回はこちらの無料採番プラグインをサンプルに使ってみます。すでにお使いのプラグインでそのまま試してみても良いです。

https://cybozu.dev/ja/kintone/tips/development/plugins/sample-plugin/autonum-plugin/

適当なアプリに自動採番プラグインをインストールします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13915/4a1dde7f-b4d7-c6dd-2ae8-b49749127966.png)


# 準備２：設定してプラグインIDを控える

適当に設定を追加しつつ、プラグイン設定画面のURLから、pluginidを控えておきます。URLに含まれるGETパラメータ、pluginId=xxxxxxxxxxxxxxxxxxxxxxx、の部分がプラグインIDです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13915/14eb91cd-e31e-369c-9273-2968ff0b86ea.png)


> プラグインID: noaekdhemoaagialmfhefckdebaddbpe

このプラグインIDは、別のkintone環境であっても同じプラグインのZIPをインストールしている場合はすべて共通となります。

プラグイン設定を保存して、アプリの設定画面からアプリを更新します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13915/9839686c-3425-2b3f-15f9-2569dc9f420f.png)

これで準備完了です。

# エクスポート：設定情報の取得(kintone.plugin.app.getConfig())

メニューやCTRL+Shift+Iとかで開発者ツールを呼び出しましょう。（呼び出し方や呼び名はブラウザによって異なります）

開発者ツールのコンソールを呼び出して、kintone.plugin.app.getConfig()を実行します。

> kintone.plugin.app.getConfig('noaekdhemoaagialmfhefckdebaddbpe')

引数には先程のプラグインIDを与えます。同じ自動採番プラグインをお使いの場合はプラグインIDもこのままで実行できるかと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13915/831136d3-0fb3-8e3e-a1e5-ccb03ea9e182.png)

マウスカーソルをあわせて右クリックメニューからJSONをコピーします。Firefoxの場合は「オブジェクトをコピー」を選んでください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13915/639a09bf-0ece-dee2-c855-aae6d6311f48.png)

```
{
  "autoNumberingFieldcode": "文字列__1行_",
  "connective": "-",
  "dateFormat": "YYYYMMDD",
  "format": "textDateNumbering",
  "format1": "text",
  "format2": "date",
  "format3": "number",
  "numOfDigit": "7",
  "preview": "getsetconfigsample-20230829-0000001",
  "text": "getsetconfigsample",
  "timing": "none",
  "useProxy": "0"
}
```

設定情報が取得できました。このJSONをテキストエディタか何かに控えておいてください。


# インポート：設定情報の読み込み(kintone.plugin.app.setConfig())

まず設定が白紙状態のプラグインを用意します。別のアプリに新しく自動採番プラグインをインストールするか、一度プラグインを削除するとかしてクリアしてください。

右端の❎ボタンからプラグインの利用を削除して、すぐに「＋追加する」のクリックで追加すればOKです。いちいちアプリ更新とかしないでも大丈夫です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13915/aee4d8e3-1e24-fed8-b034-cf8f2f3467b5.png)

未設定のプラグイン設定画面になりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13915/fe6749ea-ccd5-b278-a83d-b9e57edb8057.png)

ここで開発者ツールを開いて、さきほど保存した設定情報を変数にセットします。コンソールから下記のコードを実行してください。

```
const settings = {
  "autoNumberingFieldcode": "文字列__1行_",
  "connective": "-",
  "dateFormat": "YYYYMMDD",
  "format": "textDateNumbering",
  "format1": "text",
  "format2": "date",
  "format3": "number",
  "numOfDigit": "7",
  "preview": "getsetconfigsample-20230829-0000001",
  "text": "getsetconfigsample",
  "timing": "none",
  "useProxy": "0"
}
```

続いてkintone.plugin.app.setConfig()の引数にsettingsを与えて実行します。

```
kintone.plugin.app.setConfig(settings)

```

画面が遷移して「プラグインの設定が保存されました。」と表示されれば成功です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13915/58aea198-3234-daee-e84e-c492482a249d.png)

もう一度、プラグインの設定画面を開いてみましょう。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13915/d0e03db6-30ec-732e-9995-9890c385a8dc.png)

無事に同じ設定が格納されてますね。アプリ設定に戻ってアプリを更新すれば作業完了です。


# 同じ手順でどのプラグインでも設定移行できる...はず

今回は無料のサンプルプラグインで試してみました。お使いのプラグインでも、特殊なことをしていなければ同じ手順でプラグイン設定を移行できるかと思います。

例えばkintone.plugin.app.setProxyConfig()を使って保存している設定値はこの方法ではコピーできません。そのあたりも必要な場合は個別にコピペしてください。

あとはCLIとかでプラグイン設定のエクスポート/インポートができるようにしたいところなんですが、どうやったら良いかなぁ...

# 2023/9/1追記：ブックマークレット化できました

立ち上がったばかりのkintone開発者向けコミュニティ『devkin meetup』でこのお話をしたところ、[田村さん](https://twitter.com/Tam4641)がブックマークレットにカスタムしてくれました。

## プラグイン設定エクスポートブックマークレット

```
javascript:(function() { const pluginId = window.location.href.match(/pluginId=([a-zA-Z0-9]+)/)[1]; const config = kintone.plugin.app.getConfig(pluginId); const blob = new Blob([JSON.stringify(config, null, 2)], {type: 'application/json'}); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = pluginId + '.json'; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); })()
```

ブックマークとしてブラウザに登録しておいてプラグイン設定画面で実行すればすぐにファイルがダウンロードできます。


## プラグイン設定インポートブックマークレット

インポートもできるんじゃない？と思ってChatGPT先生にインポート機能もコーディングしていただきました。

```
javascript:(function(){var e=document.querySelector('input[type="file"]');if(e)return void e.click();var t=document.createElement('input');t.type='file',t.accept='.json',t.onchange=function(e){var n=e.target.files[0],o=new FileReader;o.onload=function(e){try{var n=JSON.parse(e.target.result);n?kintone.plugin.app.setConfig(n):console.error('Invalid settings format.')}catch(e){console.error('Error parsing JSON: '+e.message)}};o.readAsText(n)},document.body.appendChild(t)})();
```

同じくプラグイン設定画面でこのブックマークレットを「2回」実行すると、ファイル選択ダイアログが開きます。

そこからエクスポートしたJSONファイルを読み込むことでプラグイン設定のインポートもできました。

仕組みとしては、1回目の実行で画面の端っこに<input type="file"/>ノードを追加して、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13915/7fecbdfd-8c52-8495-4b05-e2ce254d6cd9.png)

参照ボタンを押すか、あるいは2回目の実行でクリックイベントを発火させてファイルダイアログを開いています。

エクスポートとインポート、2つのブックマークレットを登録しておけばプラグインの環境移行をスイスイ進められそうですね。


# devkin meetup! 始まります

こんなkintone開発のお話で盛り上がれるdevkin meetup!コミュニティがまもなく立ち上がろうとしています。

https://devkin.connpass.com/event/292383/

この立ち上げ会のなかで相談して、第1回のオンラインイベントが11月に予定されています。

お楽しみに！


# [PR] キン担ラボ（お約束）

あなたのアイディアを形にします。特別なプラグインやシステムを実現して、キン担ラボと共に一歩先の可能性を広げましょう。

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