kintoneプラグインの設定画面を作る

前回は、webpack-plugin-kintone-pluginを使ってサンプルプラグインをビルドして使えるようにするまでのお話でした。

https://qiita.com/juri_don/private/567e8322eb080155bd23

今回は、kintoneプラグインの設定画面を `Vue.js` を使う方法と、`kintone UI Component` を使う方法の2通りのやり方で作ってみたいと思います。

# Vue.jsを使って設定画面を作る

まず、`manifest.json` ファイルの `config` の `js` に 
Vue の CDN `"https://unpkg.com/vue@next"` を追加します。

```json:manifest.json
"config": {
  "html": "html/config.html",
  "js": [
    "https://unpkg.com/vue@next",
    "js/dist/config.js"
  ],
  "css": ["css/config.css"],
  "required_params": ["message"]
},
```
## htmlファイルの編集

`config.html`を編集します。


```html:config.html
<div id="app">
  <label for="msg">表示したい文字列：</label>
  <input type="text" id="msg" v-model="myMessage">
  <button @click="register">登録</button>
</div>
```

## jsファイルの編集

`config.js` を編集します。

[kintone プラグイン開発手順](https://developer.cybozu.io/hc/ja/articles/203455680-kintone-%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E9%96%8B%E7%99%BA%E6%89%8B%E9%A0%86)によると、
↓こんな感じのお作法があるようです。

```js
((PLUGIN_ID) => {
  // 設定更新するプログラムをかく
})(kintone.$PLUGIN_ID);
```


APIはこんな感じで使います。

**プラグインの設定を読み込む**
`kintone.plugin.app.getConfig(PLUGIN_ID)`

**プラグインの設定を更新する**
`kintone.plugin.app.setConfig(param, callback)`


設定のsetConfigで送信する `param` の中身は
`manifest.json` で設定している 
`"required_params": ["message"]` です。

`const param = { message: this.myMessage };`
こんなふうに作成しましょう。

```js:config.js
((PLUGIN_ID) => {
  "use strict";

  // 設定を読み込む
  const config = kintone.plugin.app.getConfig(PLUGIN_ID);
  const app = Vue.createApp({
    data() {
      // 初期表示は設定内容通りに表示する。
      return { myMessage: config.message };
    },
    methods: {
      // 登録ボタン（htmlの方で作成）をクリックしたら設定を登録する
      register() {
        const param = { message: this.myMessage };
        // 設定を登録する
        kintone.plugin.app.setConfig(param, () => {
          alert("登録しました");
          // プラグイン一覧画面に移動する
          window.location.href = "../../" + kintone.app.getId() + "/plugin/#/";
        });
      },
    },
  });
  const vm = app.mount("#app");

})(kintone.$PLUGIN_ID);
```

## 結果

cssを適用していないこともあり質素な感じになりましたが、動作には問題ありません。
kintoneぽくしたい場合は↓こちらを忍ばせてください。

[kintoneライクなスタイルシートの利用](https://developer.cybozu.io/hc/ja/articles/203302214-kintone%E3%83%A9%E3%82%A4%E3%82%AF%E3%81%AA%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88%E3%81%AE%E5%88%A9%E7%94%A8)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/e04c1164-5adb-9b26-a399-2a399350a4e0.png)



# kintone UI Component を使って設定画面を作る

[npmでパッケージをインストールする方法](https://kintone-ui-component.netlify.app/docs/ja/1.1.0/getting-started/quick-start#npm-%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B) もありますが、今回はCDNを使ってみます。

`manifest.json` ファイルの `config` の `js` に 
kintone UI Component の CDN `"https://unpkg.com/kintone-ui-component/umd/kuc.min.js"` を追加します。

```json:manifest.json
"config": {
  "html": "html/config.html",
  "js": [
    "https://unpkg.com/kintone-ui-component/umd/kuc.min.js",
    "js/dist/config.js"
  ],
  "css": ["css/config.css"],
  "required_params": ["message"]
},
```

## htmlファイルの編集

htmlは次の一行だけです。

```html:config.html
<div id="sp"></div>
```

## jsファイルの編集

※テキストボックスだとサイズ変えられなかったのでテキストエリアにしました＾＾；

```js
((PLUGIN_ID) => {
  "use strict";

  // 設定内容取得
  const config = kintone.plugin.app.getConfig(PLUGIN_ID);

  // テキストエリア作成
  const text = new Kuc.TextArea({
    label: "表示したい文字列",
    value: config.message,  // 初期表示は設定内容
  });
  
  // ボタン作成
  const button = new Kuc.Button({
    text: "登録",
    type: "submit",
  });

  // divを取得
  const sp = document.getElementById("sp");
  // テキストエリア配置
  sp.appendChild(text);
  // 改行配置
  const br = document.createElement("br");
  sp.appendChild(br);
  // ボタン配置
  sp.appendChild(button);

  // ボタンクリックで設定登録
  button.addEventListener("click", (event) => {
    const param = { message: text.value };
    kintone.plugin.app.setConfig(param, function () {
      alert("登録しました");
      window.location.href = "../../" + kintone.app.getId() + "/plugin/#/";
    });
  });
})(kintone.$PLUGIN_ID);
```

## 結果

kintone UI Component だと CSS を気にせずに kintone ぽくできるので、個人的にはVue.jsよりもkintone UI Componentの方が好きだったりします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/ad7ad24e-e848-9e6b-42a1-a93dec10359f.png)