kintoneプラグイン自習1日目「プラグイン開発支援ツール」

kintone開発支援ツールについて調査。

プラグイン開発支援ツール

下記参照

プラグイン開発支援ツール群の案内
https://developer.cybozu.io/hc/ja/articles/360000975763

create-plugin

プラグインの雛形を作るツールです。
プラグイン開発未経験者、1から作りたい人向けです。

プラグイン開発支援ツール群の案内

詳細は下記リンクを参照

https://developer.cybozu.io/hc/ja/articles/360000877946

js-sdk/packages/create-plugin at master · kintone/js-sdk

未経験者向けという説明ですが、プラグインに必要な雛形ファイル・ディレクトの自動生成とパッケージツール及びアップロードツールもインストール可能な全部入りのツールと思って良い。

インストール

Node.jsをインストールしている場合は、npxで実行すればOK。

$ npx @kintone/create-plugin sample01



kintoneプラグインのプロジェクトを作成するために、いくつかの質問に答えてください :)
では、はじめましょう！



? プラグインの英語名を入力してください [1-64文字] sample01
? プラグインの説明を入力してください [1-200文字] sample01
? 日本語をサポートしますか？ Yes
? プラグインの日本語名を入力してください [1-64文字] (省略可)
? プラグインの日本語の説明を入力してください [1-200文字] (省略可)
? 中国語をサポートしますか？ No
? プラグインの英語のWebサイトURLを入力してください (省略可)
? プラグインの日本語のWebサイトURLを入力してください (省略可)
? モバイルページをサポートしますか？ Yes
? @kintone/plugin-uploaderを使いますか？ Yes
依存ライブラリをインストールします

> puppeteer@13.5.1 install /Users/kazoo/local/kintone/plugins/sample01/node_modules/puppeteer
> node install.js

Downloading Chromium r970485 - 115.2 Mb [====================] 100% 0.0s

> core-js-pure@3.21.1 postinstall /Users/kazoo/local/kintone/plugins/sample01/node_modules/core-js-pure
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js:
> https://opencollective.com/core-js
> https://patreon.com/zloirock
> https://paypal.me/zloirock
> bitcoin: bc1qlea7544qtsmj2rayg0lthvza9fau63ux0fstcz

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN @cybozu/eslint-config@17.0.1 requires a peer of typescript@^3.3.3333 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-plugin-prettier@4.0.0 requires a peer of prettier@>=2.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN tsutils@3.21.0 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN sample01@0.1.0 No description
npm WARN sample01@0.1.0 No repository field.
npm WARN sample01@0.1.0 No license field.

added 433 packages from 282 contributors and audited 433 packages in 36.131s

93 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities



Success! Created sample01 at sample01

npm start

  ファイルの変更を監視してプラグインのzipを自動的に作成するプロセスを起動します
  その後、@kintone/plugin-uploaderにより、プラグインのzipは自動的にアップロードされます

npm run build

  プラグインのzipを作成します

npm run lint

  ESLintを使ってJavaScriptのソースコードをチェックします

まずは次のコマンドを実行してください
その後、あなたのkintone環境の情報を入力してください

  cd sample01
  npm start

kintoneプラグイン開発をはじめましょう！
開発に関する情報はcybozu developer network:

  https://developer.cybozu.io

雛形のコードの内容

config.js

jQuery.noConflict();

(function($, PLUGIN_ID) {
  'use strict';

  var $form = $('.js-submit-settings'); // プラグイン設定画面のフォーム要素取得
  var $cancelButton = $('.js-cancel-button'); // プラグイン設定画面のキャンセルボタン要素取得
  var $message = $('.js-text-message'); // プラグイン設定画面のメッセージ要素取得
  var config = kintone.plugin.app.getConfig(PLUGIN_ID); // プラグイン設定ファイル読み込み

  if (config.message) { // プラグインの読み込み値があれば
    $message.val(config.message); // 初期値としてセットする
  }
  $form.on('submit', function(e) { // フォームのsubmitイベント
    e.preventDefault(); // イベント停止
    kintone.plugin.app.setConfig({message: $message.val()}, function() { // プラグインの登録値をファイルに保存
      alert('The plug-in settings have been saved. Please update the app!');
      window.location.href = '../../flow?app=' + kintone.app.getId();
    });
  });
  $cancelButton.on('click', function() { // キャンセルされた時
    window.location.href = '../../' + kintone.app.getId() + '/plugin/'; // アプリ設定のプラグイン画面を表示
  });
})(jQuery, kintone.$PLUGIN_ID);

desktop.js

jQuery.noConflict();

(function($, PLUGIN_ID) {
  'use strict';

  kintone.events.on('app.record.index.show', function() {
    var config = kintone.plugin.app.getConfig(PLUGIN_ID); // プラグインファイル読み込み

    var spaceElement = kintone.app.getHeaderSpaceElement(); // kintoneの一覧のヘッダースペース要素取得
    var fragment = document.createDocumentFragment(); // フラグメント作成
    var headingEl = document.createElement('h3'); // h3要素作成
    var messageEl = document.createElement('p'); // p要素作成

    messageEl.classList.add('plugin-space-message'); // cssクラス追加
    messageEl.textContent = config.message; // p要素に、プラグインファイルからデータをセット
    headingEl.classList.add('plugin-space-heading'); // cssクラス追加
    headingEl.textContent = 'Hello kintone plugin!'; // h3要素にテキスト追加

    fragment.appendChild(headingEl); // フラグメントにh3要素追加
    fragment.appendChild(messageEl); // フラグメントにp要素追加
    spaceElement.appendChild(fragment); // ヘッダースペースにフラグメントを追加
  });

})(jQuery, kintone.$PLUGIN_ID);

解説を追加した。
雛形だけど、今時varはないと思うので実装する際は変更する。

webpack-plugin-kintone-plugin

プラグインファイルをwebpackでパッケージングするツール。
webpackはモジュールバンドラー

インストール方法などは下記リンク参照。

js-sdk/packages/webpack-plugin-kintone-plugin at master · kintone/js-sdk

プロジェクトディレクトリにcdして、
`npm install @kintone/webpack-plugin-kintone-plugin`

package.json

・・・
  },
  "dependencies": {
    "@kintone/webpack-plugin-kintone-plugin": "^5.0.36"
  }
}

manifest.json

雛形のまま変更無し。

webpack.config.js

新規に作成。

const path = require('path');
const KintonePlugin = require('@kintone/webpack-plugin-kintone-plugin');

module.exports = {
  entry: {
    desktop: './src/js/desktop.js',
    mobile: './src/js/mobile.js',
    config: './src/js/config.js'
  },
  output: {
    path: path.resolve(__dirname, 'plugin', 'js'),
    filename: '[name].js'
  },
  plugins: [
    new KintonePlugin({
      manifestJSONPath: './src/manifest.json',
      privateKeyPath: './private.ppk',
      pluginZipPath: './dist/sample01_plugin.zip'
    })
  ]
};

package.json

下記の通り修正

・・・
  "scripts": {
    "start": "node scripts/npm-start.js",
    "develop": "webpack --mode development --watch",
    "build": "webpack --mode production",
    "lint": "eslint src",
    "upload": "kintone-plugin-uploader dist/plugin.zip --watch --waiting-dialog-ms 3000"
  },
  "devDependencies": {
    "@cybozu/eslint-config": "^17.0.0",
    "@kintone/plugin-packer": "^5.0.35",
    "@kintone/plugin-uploader": "^6.0.13",
    "eslint": "^8.10.0",
    "npm-run-all": "^4.1.5",
    "@kintone/webpack-plugin-kintone-plugin": "^5.0.36",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2"
  }
・・・

ビルド

`npm run build` でビルドします。

$ npm run build

> sample01@0.1.0 build /kintone/plugins/sample01
> webpack --mode production

----------------------
Success to create a plugin zip!
Plugin ID: <plugin ID>
Path: ./dist/sample01_plugin.zip
----------------------
asset config.js 546 bytes [emitted] [minimized] (name: config)
asset mobile.js 512 bytes [emitted] [minimized] (name: mobile)
asset desktop.js 498 bytes [emitted] [minimized] (name: desktop)
./src/js/desktop.js 1.17 KiB [built] [code generated]
./src/js/mobile.js 767 bytes [built] [code generated]
./src/js/config.js 1.25 KiB [built] [code generated]
webpack 5.70.0 compiled successfully in 605 ms

生成されたdistフォルダにプラグインzipファイルが作成されます。
アップロードして動作確認します。

参考

js-sdk/packages/create-plugin at master · kintone/js-sdk

js-sdk/packages/webpack-plugin-kintone-plugin at master · kintone/js-sdk

https://developer.cybozu.io/hc/ja/articles/203455680#step1