検索
Close
カテゴリー内の他の記事

create-pluginを使ってプラグインの雛形を作成しよう！

作成日
更新日

Index

はじめに

kintoneのプラグイン開発をもっと簡単にできるようにしたプラグイン開発支援ツール群を公開しました。

今回はその中のcreate-pluginについて説明します。

※その他のツールについてはこちら。

create-pluginとは

対話形式でkintoneプラグインの雛形を作成することができるCLIツールです。

npmに対応しているため、Windows/macOS/Linuxどの環境でも簡単に実行することができます。

ソースコードはGitHubに公開しています。

※ こちらのツールの利用に必要な Node.js のバージョンは、リポジトリの package.json にある enginesプロパティをご参照ください。
例：次の記載の場合、Node.js のバージョンは 10 以上が必要です。

"engines": {
 "node": ">=10"
 },

インストール方法

create-pluginをインストールします。

※ ここでは、npmによるグローバルインストールを例にあげます。

こちらのコマンドを実行することで、create-pluginをインストールすることができます。

基本の使い方

dir_name に作成したいディレクトリ名を入力すると、自動でディレクトリが作成されます。

本記事では、sampleというディレクトリ名で雛形を作ります。

sampleディレクトリが生成され、
その中にプラグインの雛形となるsrcディレクトリ/ファイルが生成されています。

※ package-lock.jsonはnpm5以上で実行すると生成されるファイルです。

詳細

雛形の詳細

生成される雛形 (srcディレクトリ) は以下のような構成になっています。それぞれのファイルの詳細はこちらの記事をご覧ください。

image5.png

生成されたプラグインの内容

生成された雛形にはレコード一覧画面の上部に任意の文字を表示する処理が書かれています。
表示させる文字はプラグインの設定画面で入力できます。

image2.png

プラグイン設定画面
image3.png

オプション機能

このcreate-pluginには雛形を作成する以外にも便利な機能が搭載されています。

ESLintを利用したソースコードチェック

ESLintを使ってJavaScriptのソースコードをチェックすることができます。

自動パッケージング & 自動アップロード

作成したプラグインディレクトリに対して、下記のコマンドを実行することでプラグインzipファイルを作成します。

また、create-plugin実行時に「@kintone/plugin-uploaderを使う」を選んだ場合、
そのままplugin-uploaderが実行されます。

※plugin-uploaderを利用するためには kintoneの管理者権限を持ったユーザー で実行する必要があります。

その後監視モードになるため、そのまま実行した状態でソースコードを修正すると
パッケージングとアップロードが実行されてkintoneへ適用されるようになります。

※ 監視を中止する場合は、「ctrl + c」でコマンドをキャンセルしてください。

おわりに

このツール1つでプラグインの雛形作成からエラーチェック、パッケージング、アップロードを全てを行うことができます。

これからプラグイン開発を始めたいという方はぜひご活用ください。

注意事項

ソースコードの変更および再配布、商用利用等はライセンスに従ってご利用可能です。

 

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
あいうえお

「自動パッケージング & 自動アップロード」を行っておりますが、「npm start」を実行しても最後の「plugin.zip をアップロードしました!」メッセージが5分以上放置しても表示されません。また、Webのプラグインページ「https://xxxxx.cybozu.com/k/admin/system/plugin/」を見ても追加されていません。

どのような対応を行えば良いかご教授ください。

 

エラー情報

  1. URL/ID/PWは、開発ライセンス取得時のメールに記載の内容をコピペしています。
  2. 「dist/plugin.zip」ファイルは存在しております。
  3. パワーシェル/コマンドプロンプトのどちらも行われません。
  4. ソースを保存した場合「Succeeded: dist/plugin.zip」は追加表示されます。
  5. 作成された「plugin.zip」をWeb画面から「読み込む」で追加は出来ました。
  6. npm start実行時のログは下記になります。
> SamplePlugin@0.1.0 start D:\Private\SamplePlugin
> node scripts/npm-start.js
> SamplePlugin@0.1.0 develop D:\Private\SamplePlugin
> npm run build -- --watch
> SamplePlugin@0.1.0 upload D:\Private\SamplePlugin
> kintone-plugin-uploader dist/plugin.zip --watch --waiting-dialog-ms 3000
> SamplePlugin@0.1.0 build D:\Private\SamplePlugin
> kintone-plugin-packer --ppk private.ppk --out dist/plugin.zip src "--watch"
Succeeded: dist/plugin.zip
? kintoneのベースURLを入力してください (https://example.cybozu.com): https://xxxxx.cybozu.com
? ログイン名を入力してください: aaaaa@bbbbb.com
? パスワードを入力してください: [hidden]
Open https://xxxxx.cybozu.com/login?saml=off
Trying to log in...
Navigate to https://xxxxx.cybozu.com/k/admin/system/plugin/
Trying to upload dist/plugin.zip

 

再現条件

  • 問題が発生した箇所：自動パッケージング & 自動アップロードの「npm start」
  • 権限設定：アプリ管理者
  • デバイス（PC or モバイル）：PC
  • OS・ブラウザ：Windows10、VSCode、パワーシェル、コマンドプロンプト
  • IP制限などネットワークに特殊なことがあれば：特にないはず

よろしくお願いします。

Avatar
cybozu Development team

あいうえお 様
お世話になっております。cybozu developer network 運営でございます。

詳細な状況をご共有頂きありがとうございます！
プラグインのアップロードの実行は、kintone/plugin-uploader で行われています。
お手数ですが、ご利用の plugin-uploader のバージョンをご確認頂けないでしょうか。

plugin-uploader v5.0.2 で、プラグインのアップロードに失敗する問題の改修対応が行われたため、
ご利用のバージョンが最新版でない場合、アップデートをお願いできますでしょうか。

ご確認のほど、よろしくお願いいたします。

Avatar
あいうえお

御指摘頂いたplugin-uploader のバージョンを5.0.2 に更新した所、アップロードできました。

また、Webのプラグインにも追加されていることを確認できました。ありがとうございます。

 

実行コマンド：(バージョン指定なしの場合、アップデートできませんでした。なぜ？)

cd D:\Private\SamplePlugin
npm install @kintone/plugin-uploader@5.0.2

修正前の「SamplePlugin/package.json」

  "devDependencies": {
    "@cybozu/eslint-config": "^12.0.1",
    "@kintone/plugin-packer": "^4.0.3",
    "@kintone/plugin-uploader": "^4.3.0",
    "npm-run-all": "^4.1.5",
    "eslint": "^7.23.0"
  }

修正後の「SamplePlugin/package.json」

"devDependencies": {
    "@cybozu/eslint-config": "^12.0.1",
    "@kintone/plugin-packer": "^4.0.3",
    "@kintone/plugin-uploader": "^5.0.2",
    "eslint": "^7.23.0",
    "npm-run-all": "^4.1.5"
  }
サインインしてコメントを残してください。