SPAM MAIL

前回の投稿に引き続き、Vue.jsを用いたプラグイン開発について書いていきます。

前回は設定画面UIの構築まで終わりましたので、ここからは設定の保存とアプリ側の処理の実装をしていきます。

適宜実装を進めるごとに以下を実行しパッケージングを行い、プラグインを読み込み直して挙動を確認するようにしてください。

$ npm run build && ./package.sh ./plugin ./vault/keys/plugin.<plugin_id>.ppk

設定の保存の実装

<template>
  <div>
    <table>
      <thead>
        <th> フィールド名 </th>
        <th> フィールドコード </th>
        <th> 編集を制限するユーザー </th>
      </thead>
      <tbody>
        <tr v-for="field in fields" :key="field.code">
          <td>{{field.label}}</td>
          <td>{{field.code}}</td>
          <td><textarea v-model="field.restrictedUsers"></textarea></td>
        </tr>
      </tbody>
    </table>
    <button v-on:click="save">保存</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    save: function() {
    }
  },
  props: ['fields'] }
</script>

前回はこのような設定画面UI用のコンポーネントを作成しました。

今回は設定の保存をv-on:clickに設定されているsave関数に実装します。

プラグイン設定の保存はkintone.plugin.app.setConfig(<config_object>)で行います。

<config_object>にはオブジェクトを渡すのですが、ここで渡すオブジェクトは必ず

{
  "key1": "value1",
  "key2": "value2"
}

という形式でなければなりません。また、各プロパティに対して文字列以外は格納できないので注意が必要です。

プラグイン設定のkeyには非ASCIIの文字列を利用できないため、save関数は以下のように実装します。

  methods: {
    save: function() {
      kintone.plugin.app.setConfig({config: JSON.stringify(this.fields)})
    }
  }

JSON.stringify関数は与えたオブジェクトをJSON形式の文字列に変換する関数です。

ネストした構造のオブジェクトをプラグイン設定に使いたい場合にはこの方法が便利です。

設定の読み込みの実装

設定の読み込みはkintone.plugin.app.getConfig(plugin_id)で行います。

WebPack.DefinePluginを設定しているため、plugin_idはJSのトランスパイル後にはプラグインIDの文字列になります。

フィールドのリストと設定を同期させたいのでsrc/config/main.jsを以下のように変更します

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import fetchFields from './fetchFields'

Vue.config.productionTip = false

const configStore = kintone.plugin.app.getConfig(plugin_id)
const config = configStore.config || "{}";

fetchFields().then(props =>
/* eslint-disable no-new */
  new Vue({
    el: '#app',
    data: {
      fields: Object.assign(props, JSON.parse(config))
    },
    components: { App },
    template: '<App :fields="fields"/>'
  })
)

ここまでで設定画面の実装は完了です。

アプリ側処理の実装

プラグインの設定を取得し、これを元に編集制限の処理を実行します。

src/desktop/main.jsに以下のようなコードを用意します。

const user = kintone.getLoginUser();
const configStore = kintone.plugin.app.getConfig(plugin_id);
const config = JSON.parse(configStore.config || "{}");

kintone.events.on(["app.record.edit.show", "app.record.create.show"], function(event) {
  let record = event.record;
  Object.keys(record).forEach(fieldCode => {
    let fieldConfig = config[fieldCode];
    if(fieldConfig && fieldConfig.restrictedUsers.indexOf(user.code) > -1) {
      record[fieldCode].disabled = true;
    }
  });
  return event;
});

これでVue.jsを用いたフィールドの編集制限プラグインの実装は全て終わりです。

今回簡略化した部分を作り込んだり、ユーザーの一覧を取得して設定をもっとわかりやすいUIにするなど、挑戦してみていただければ幸いです。

SPAM MAIL

設定の保存の実装

設定の読み込みの実装

アプリ側処理の実装

コメント

お探しのものを見つけられませんでしたか？