前置き

勉強会いってきた。

先日、サイボウズさん主催のdevCampプラグイン基礎編に行ってきました。
とても為になるお話が聞けたり、他のエンジニアさん達と意見交換できたり、とても素敵な時間を過ごさせていただきました！！😁
特に、APIトークンを使用した安全なREST APIの使い方については、ちょうど実務で困っていた箇所だったのでめちゃめちゃ助かりました……！！

モチベのあるうちに触っとこう。

と思い、復習ついでに、勉強会内ではさらっと流されたplugin-packerにも触れていくことにしました。
そこで、お手本を見ながら進ていたですが、うまくいかないところが多々あったので備忘録として残します。

【本題】plugin-uploaderでハマった

前提：お手本のcreate-pluginのStep2まで素直に従って、補足に記載のnpm startでパッケージングする。

plugin-uploadeのインストール

plugin-uploadeのお手本通りインストールする。
npm install -g @kintone/plugin-uploader

plugin-uploadeの実行

次にkintoneにアップロードしようと思い、
kintone-plugin-uploader --base-url https://examle.cybozu.com --username ログイン名 plugin.zip
を実行すると……

見たことあるエラー
PowerShell のスクリプトファイル実行させないぞってやつが出てきました。

「単純にps1がダメならcmdに書き換えようかなぁ……」とファイルを探すと、

cmdファイルあるじゃん

plugin-uploade.cmdの実行

デフォルトでps1ファイルが優先されるなら、cmdを指定したら通るのでは？
と考え、以下を実行
kintone-plugin-uploader.cmd --base-url https://examle.cybozu.com --username ログイン名 plugin.zip

通った！！やった！！

と思ったらログインエラー

なんやて。
ユーザー名はコピペしたから間違いないし、そもそもパスワード聞かれてないのになんで？？
ここで数時間悩む。

そうだ、パスワードも一緒に書いちゃえ

kintone-plugin-uploader.cmd --base-url https://examle.cybozu.com --username ログイン名 --password パスワード plugin.zip

あ、通った。ラッキー。
（あの数時間はなんだったんだ……）
追記：npmのサイトにちゃんと使い方書いてた😢

喜びも束の間

なんか凄そうなエラーが出た。

こんな時こそ冷静になってエラーメッセージを検索しよう！

プラグインzipファイルのパスが違った

npm startでパッケージングすると、plugin.zipはdistフォルダの中に生成されます。

なので、plugin.zipを指定するパスを正しくすれば通るはず……

plugin.zipのパスを修正

以下を実行
kintone-plugin-uploader.cmd --base-url https://examle.cybozu.com --username ログイン名 --password パスワード dist\plugin.zip

キターーーーーーーーー！！！！脳汁ブシャーーーー！！！！

kintoneからも確認する

kintoneシステム管理>プラグインから確認します。
ちゃんと入ってますね。

【おまけ】"npm run upload" was failed

事件はまだ終わってない

本編は円満に解決したと思ったのにfailedとはどういう事だ？？

そもそも`npm start`ってなんだろう？

虎の巻さん曰く、

npm startは、package.jsonのstartに定義されたコマンドを実行するコマンドです。

とのことです。

package.jsonを調べてみよう

sample_plugin_project\package.json

{
  "name": "watchYoutubeOnKintone",
  "version": "0.1.0",
  "scripts": {
    "start": "node scripts/npm-start.js", 
    "develop": "npm run build -- --watch",
    "build": "kintone-plugin-packer --ppk private.ppk --out dist/plugin.zip src",
    "lint": "eslint src",
    "upload": "kintone-plugin-uploader dist/plugin.zip --watch --waiting-dialog-ms 3000"
  },
  "devDependencies": {
    "@cybozu/eslint-config": "^23.0.0",
    "@kintone/plugin-packer": "^8.1.3",
    "@kintone/plugin-uploader": "^9.1.2",
    "eslint": "^8.57.0",
    "npm-run-all": "^4.1.5"
  }
}

おそらく、我々は5行目のstartを呼び出している。（きっと、たぶん）
npm startはnode scripts/npm-start.jsを実行させているっぽい。

npm-start.jsの中身を見る。

いかにも一番初めに実行されるぜって名前のファイルだ。

sample_plugin_project\scripts\npm-start.js

"use strict";
const runAll = require("npm-run-all");

runAll(["develop", "upload"], {
  parallel: true,
  stdout: process.stdout,
  stdin: process.stdin
}).catch(({results}) => {
  results
    .filter(({code}) => code)
    .forEach(({name}) => {
      console.log(`"npm run ${name}" was failed`); //ここが呼び出されている
    })
  ;
});

このコードは、package.jsonに定義されたdevelopとuploadを平行実行させる処理だと推測できる（多分、おそらく）
という事は、"npm run upload" was failedは、

uploadコマンドが通っていない。

つまり、sample_plugin_project\package.jsonファイルの9行目
"kintone-plugin-uploader dist/plugin.zip --watch --waiting-dialog-ms 3000"
が犯人！！！！

手動でアップロードした時のコマンドを参考に修正する

sample_plugin_project\package.json

{
  "name": "watchYoutubeOnKintone",
  "version": "0.1.0",
  "scripts": {
    "start": "node scripts/npm-start.js", 
    "develop": "npm run build -- --watch",
    "build": "kintone-plugin-packer --ppk private.ppk --out dist/plugin.zip src",
    "lint": "eslint src",
    "upload": "kintone-plugin-uploader --base-url https://examle.cybozu.com --username ログイン名 --password パスワード dist/plugin.zip --watch --waiting-dialog-ms 3000"
  },
  "devDependencies": {
    "@cybozu/eslint-config": "^23.0.0",
    "@kintone/plugin-packer": "^8.1.3",
    "@kintone/plugin-uploader": "^9.1.2",
    "eslint": "^8.57.0",
    "npm-run-all": "^4.1.5"
  }
}

動作確認

1.コマンドプロンプトに`npm start`を入力する

ちゃんと動いてる……！！

2.カスタマイズファイル本体にコメントを追記し、保存する。

例）sample_plugin_project\src\js\desktop.js

//省略

    if (spaceEl === null) {
      throw new Error('The header element is unavailable on this page.');
    }
    console.log('hello cyboz');  //コメントを追記

    const fragment = document.createDocumentFragment();
    const headingEl = document.createElement('h3');


//省略

動いた！！！！

3.kintone環境で確認

サンプルプラグインの設定を入力、保存する。

アプリを開き、コメントが表示されていることを確認する

4.監視の停止

Ctrl+cで監視を終了することができる
パッチジョブを終了するか聞かれたらyと入力

まとめ

sample_plugin_project\package.jsonファイルの9行目を
"upload": "kintone-plugin-uploader --base-url https://examle.cybozu.com --username ログイン名 --password パスワード dist/plugin.zip --watch"
に変えたら、保存するごとに変更を検知してプラグインをアップロードできる！！楽！！

※注意

今回はsample_plugin_project\package.jsonに直接パスワード書いちゃってるので、取り扱いには十分にご注意ください。

最後に

kintoneってすごいなぁというのを改めて感じました……
これを機に、気が向いたらまた投稿しようかなと思います。
ご質問やご指摘等ございましたらお気軽にコメントください。

閲覧ありがとうございました！

追記

2024/10/04

npmのサイトにちゃんと使い方書いてた😢

参考資料