Zenn
🐣

kintoneプラグイン開発手順①~パッケージング~

2022/05/28に公開
kintone
#
コマンド
tech

kintoneのカスタマイズが必要なシーンが結構あり、複数のアプリで似たようなjavascriptを書くことがとっても多いです。
外部システムとの連携でAPIトークンを使うようなこともたまにあるので、セキュリティのことを考えてもプラグインにしなければならない！ということで、少し前にプラグイン開発をはじめました。
非エンジニアにはハードル高かったですが、なんとか作れるようになってきたので、備忘録(しばらくやらないとすぐに忘れるのです・・)がてらまとめます。

公式サイトはまず読みました。

必要なファイル

下記、newpluginディレクトリ内

iconディレクトリ

  • icon.png(プラグインのアイコンになるファイル)

JavaScriptディレクトリ

  • customize.js(PC用　JavaScriptファイル)
  • mobile-customize.jp(スマホ用　JavaScriptファイル)
  • config.js(プラグイン設定画面用　JavaScriptファイル)

CSSディレクトリ

  • customize.css(PC用　CSSファイル)
  • mobile-customize.css(スマホ用　JavaScriptファイル)
  • config.css(設定画面用　CSSファイル)

HTMLディレクトリ

  • config.html(設定画面用　HTMLファイル)

newplugin直下

  • manifest.json(プラグイン作成に必要なファイル情報まとめ)

必要なファイルは以上です。
CSSファイルは私の場合、設定用のCSSファイル(config.css)以外は作成しないことが多いです。
その唯一のCSSファイルもkintoneのデザインに馴染むように「51-modern-default.css」を添付するだけということが多いです。

単にCSS苦手で調べながら作りこむ時間を惜しんでなのですが・・(勉強不足です💦)
HTMLでclassを指定したらいいだけなので本当にありがたい存在です。

manifest.json以外は拡張子別にディレクトリは分けて、全てを格納したディレクトリをパッケージングします。
manifest.jsonについては公式サイトにしっかり記載があるので必要に応じて変更します。

ディレクトリはこんな感じ

パッケージングのやり方

ここからが本題です。
Node.jsがインストールされていることが前提になります。
コマンドプロンプトを起動して、下記コマンドを実行します。

npm install -g @kintone/plugin-packer

そして用意した全てのファイルが入っているディレクトリの一つ上のディレクトリ(画像でいうとplugin)に移動します。

cd plugin

移動できたら準備は完了！先ほどインストールしたplugin-packerを使用してパッケージングするコマンドを実行するだけです。

kintone-plugin-packer newplugin

これでSucceede:なんたらとでたらプラグインの完成、newpluginディレクトリと並列でzipファイル(これがプラグインです)とppkファイルが生成されているはずです。

こうなれば成功です

ppkファイルはプラグインの機能等を更新する際に使用するので大切にしておきましょう。

プラグインの更新作業

一度目にパッケージングした際に生成されたppkファイルのファイル名をそのまま使用して下記コマンド実行です。

 kintone-plugin-packer --ppk XXXXXXXXXXXXXXXXXXXX.ppk newplugin

これでzipファイルをkintoneで読み込めば、使用中のアプリも全部自動的に更新されます！！

このやり方ではなく一からパッケージングすると、すでに使用しているアプリへ添付＆設定のやり直すことが必要になるのでご注意を・・！！（絶対めんどいですよ）

私は最初コマンドに慣れず、毎回ppkファイルとzipファイルを削除してから、再度１回目のやり方でパッケージングしてアプリまで添付しなおすという謎の行為をしていました。(なぜ)

まとめ

一度plugin-packerをインストールさえしてしまえば、使うコマンドは２つだけですね。

  • 1度目のパッケージング
    kintone-plugin-packer {ファイル群をまとめたディレクトリ名}

  • 2度目以降のパッケージング
    kintone-plugin-packer --ppk {一回目で生成されたppkファイル名} {ファイル群をまとめたディレクトリ名}

作ったファイルの中身の詳細についてはまた別途記事にします♪

Discussion