Kintoneプラグインの作り方

Kintoneプラグインの作り方

こんにちは、株式会社Bizlinkの開発エンジニアZihanです。今回Kintoneで一つの看板プラグインを作ったので、Kintoneプラグインの作り方を共有します。

1. プラグインの設定画面を作る(React)

• 設定画面のHTML(config.html), React用の入り口

  <section>
    <div id="react-root"></div>
  </section>
  

• 設定画面のjs (plugin_config.js, PluginConfigApp.jsx)

  const rootElement = document.getElementById('react-root')
  ReactDOM.render(
    <React.StrictMode>
      <PluginConfig />
    </React.StrictMode>,
    rootElement,
  );
  

  以下のkintone APIを使って、設定情報の保存・取得ができる

  • 設定画面のjsでプラグインの設定情報を保存する
    
    https://cybozu.dev/ja/kintone/docs/js-api/plugins/set-config/
    
    kintone.plugin.app.setConfig(config, successCallback)

  • プラグインのjsでプラグインの設定情報を取得する
    
    https://cybozu.dev/ja/kintone/docs/js-api/plugins/get-config/
    
    kintone.plugin.app.getConfig(pluginId)

    • pluginIdは「2. プラグインをbuildする」で作ったファイルPLUGIN_ID.ppkの名前PLUGIN_IDである

• 設定画面をbundle jsにbuildするため、Viteのconfigファイル(vite.plugin.config.js)を作る
  
  (そもそもの看板アプリのvite.config.js区別する)

  import react from '@vitejs/plugin-react';
  
  export default {
    build: {
      rollupOptions: {
        input: {
          '212_task_request_management_plugin_config': 'js/plugin_config.js',
        },
        output: {
          dir: 'plugin_config/dist_plugin_config',
          format: 'iife',
          inlineDynamicImports: false,
          entryFileNames: '[name].js',
          manualChunks: {},
        },
      },
    },
    plugins: [react()],
  };
  

• 看板アプリとプラグイン設定画面をbuildして、bundle jsを作る

  npx vite build
    ->  plugin_config/dist/212_task_request_management.js
  
  npx vite build --config vite.plugin.config.js
    ->  plugin_config/dist_plugin_config/212_task_request_management_plugin_config.js
  

2. プラグインをbuildする

• plugin_configのフォルダでプラグインのbuildの設定ファイルplugin_config/manifest.jsonを作る

  {
    "manifest_version": 1,
    "version": "0.1",
    "type": "APP",
    "name": {
      "ja": "看板プラグイン",
      "en": "Kanban Plugin"
    },
    "description": {
      "ja": "看板プラグイン",
      "en": "Kanban Plugin"
    },
    "icon": "image/app.jpg",
    "homepage_url": {
      "ja": "https://example.com/ja/",
      "en": "https://example.com/en/"
    },
    "desktop": {
      "js": ["dist/212_task_request_management.js"],
      "css": []
    },
    "config": {
      "html": "html/config.html",
      "js": ["dist_plugin_config/212_task_request_management_plugin_config.js"],
      "css": [],
      "required_params": []
    }
  }
  

• 以下のコマンドでPluginをbuildする

  sudo npm install -g @kintone/plugin-packer
  

  • 初回のbuildでplugin.zipとPLUGIN_ID.ppkのファイルを作られる
    
    • 上記のmanifest.jsonファイルがplugin_configのフォルダーに保存される)
    • 作った212_task_request_management.js、212_task_request_management_plugin_config.js
      などを取って、plugin.zipを作る

      kintone-plugin-packer plugin_config
      

  • プラグインを更新して、２回目以降のbuildで、初回のbuildで作ったPLUGIN_ID.ppkを使う

    kintone-plugin-packer --ppk PLUGIN_ID.ppk plugin_config
    

3. プラグインをKintoneにアプロードする

以下の説明を参照して、アプロードができる

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