kintone plugin pack tools を使ってプラグインを新しく作って、パックして、アップロードしてみる

kintoneにはAPIがあるので、それとJavaScriptを使ったカスタマイズができますが、汎用的なものはプラグインとして、どんな環境でもアドオンできるようにしたいものです。プラグインを作るのはハードルが高〜〜い！！なんて声も聞こえてきそうですが、便利なツールを使いこなせば意外と簡単でした。

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

create-plugin には、plugin-packer、plugin-uploaderのツールも入っているので、今回はこれだけで良さそうですが、せっかくなのですべてのツールもインストールしてみます。それぞれのツールの機能比較表はこちら。

Toolsフォルダ作成

予め、create-plugin, plugin-packer, plugin-uploaderのツール保管フォルダと、作業フォルダ（kintone-plugins）を作成しておきます。
※tools/kintone-plugins： 作成したプラグインの置き場

$ mkdir -p tools/{create-plugin,plugin-packer,plugin-uploader,kintone-plugins}

create-plugin（プラグインの雛形を作る）

create-pluginをインストール

$ cd tools/create-plugin
$ npm install -g @kintone/create-plugin

pluginをガイダンスに沿って作成

binフォルダにあるcreate-kintone-plugin.shのガイドに従って値を入れるだけです。プラグイン名を「sample」にしました。

$ bin/create-kintone-plugin ../kintone-plugins/sample

できた！！

このまま、プラグインをパッケージングしてもよいのですが、せっかくなのでプラグイン用に作ったプログラムをコピーしてパッケージングしたいと思います。

plugin-program（updatefieldbuttonを使う）

こちらのGitHubにある updatefieldbutton をフォルダごとコピーしておきます。

updatefieldbuttonの機能

kintoneのレコード詳細画面からボタンクリック1回で値を変更してくれるプラグインです。kintoneでドロップダウンの値を変更する際には、レコード詳細→編集ボタンをクリック→ドロップダウンをクリック→変更する値を選ぶ→保存するの手順が必要ですが、このプラグインがあればそれが1回のクリックですみます^^

リネーム

$ cd tools/kintone-plugins
$ mv sample updatefieldbutton

ファイルをコピー

srcフォルダ内に、updatefieldbutton を丸ごとコピーします。保存先はこちらです。

$ cd tools/kintone-plugins/updatefieldbutton/src

plugin-packer（プラグインをzipファイルにパッケージングする）

plugin-packerをインストール

$ cd tools/plugin-packer
$ npm install -g @kintone/plugin-packer

プログラムをガイダンスに沿ってpluginとしてパッケージする

$ bin/kintone-plugin-packer --out ../kintone-plugins/updatefieldbutton/updatefieldbutton.zip ../kintone-plugins/updatefieldbutton/src

プラグイン(~.zip) と キーファイル（~.ppk） の作成

plugin-uploader（プラグインをkintone環境にアップロードする）

plugin-uploaderをインストール

$ cd tools/plugin-uploader
$ npm install -g @kintone/plugin-uploader

プラグインをkintone環境にアップロード

kintoneの環境と、システム共通管理の権限のあるログイン名とパスワードを用意しておきましょう。

$ bin/kintone-plugin-uploader ../kintone-plugins/updatefieldbutton/updatefieldbutton.zip

# 対話形式で環境情報を入力
? kintoneのドメインを入力してください (example.cybozu.com): <ドメイン名>
? ログイン名を入力してください: <ログイン名>
? パスワードを入力してください: <パスワード>

> Open https://<サブドメイン>.cybozu.com/login?saml=off
> Try to logged-in...
> Navigate to https://<サブドメイン>.cybozu.com/k/admin/system/plugin/
> Try to upload updatefieldbutton.zip
> updatefieldbutton.zip をアップロードしました!

画面で確認

https://<サブドメイン名>.cybozu.com/k/admin/system/plugin/

補足

アプリに適用してみると

アプリの設定画面でプラグインの設定を行ったあとに、アプリに戻ります。
レコード詳細のメニューに表示され、ワンクリックで値を変更できます。