#初めに
kintone プラグイン開発が初めての後輩に、私なりのベストプラクティスを伝えたくてこの記事を書いています。
1記事ではおさまらなかったのでシリーズ化します！
この記事のターゲット
こんな人向けです。
- kintone カスタマイズしたことあるけどプラグイン作ったことがない
- 最近のプラグインのツールよくわからん
- 最新（2021/12時点）のツールをちゃんと使ってプラグイン開発できるようになりたい
この記事のゴール
- kintone プラグインをどう作り始めればいいかわかる
- プラグイン開発の流れがわかる
- create-plugin の基本的な使い方がわかる
kintone プラグインとは
kintone ヘルプ > 管理者ヘルプ > プラグインの管理 より
プラグインとは、設定画面用のHTML・JavaScript・CSSファイルがパッケージングされたものです。
うーん、ヘルプは説明が簡単すぎる…。
私の思う特徴は以下の通り。
- スタンダードコースで利用可能
- カスタマイズ用のJavaScript、CSSや設定画面用のHTMLなどのファイルを、専用ツール でパッケージングしたもの
- ファイル形式はZip
- 解凍せずそのままkintoneにアップする
- kintone の環境にインストールすると、複数アプリに簡単に適用できる
- 設定画面が用意されているので、アプリごとに設定変更が可能
プラグインを作るメリット
この記事読んでくれ。
使うツール
プラグイン作成の初心者は、create-plugin を使うのがおすすめ。
これ一つで、
- プラグインの雛形（必要なファイル１セット）が作成できる！
- プラグインのパッケージング、アップロード、JS構文チェックができる！
他のツール気になる人は、
プラグイン開発支援ツール群の案内 の機能比較表を見ると各ツールの特徴がわかります。
ちなみにプラグイン開発に慣れてきたら plugin-packer と plugin-uploader を個別で使いたくなるけど、それは次のステップです。
「複数プラグインをガンガン開発する」という段階になるまでは create-plugin 使えればOK。
実際にやってみよう
create-plugin には超簡単なサンプルプラグインが雛形として用意されています。
プラグイン開発に必要なファイル全てを自力で用意するのは面倒なので、
サンプルプラグイン（テンプレート）を書き換えていくのがおすすめです。
テンプレートはサイボウズがおすすめする理想のお作法で書かれています。たぶん。
サンプルプラグインを触ってみる
まずはサンプルプラグインを手に入れて、自分の開発環境に適用してみましょう！
create-plugin でサンプルプラグインをインストール
以下のコマンドを実行してください。
$ npx @kintone/create-plugin hello-kintone-plugin
「@kintone/plugin-uploaderを使いますか？」という質問には「Yes」と答えてください
- コマンド最後の
hello-kintone-pluginはプラグイン名- この名前でフォルダが新しく作成され、必要なファイルが入ってきます。
- 詳細は、GitHubのREADME や 解説記事 を参照
プラグインをパッケージング ＆ kintone 環境にインストールする
プラグインをパッケージングして、kintone 環境にインストールしましょう！
ドメイン全体でそのプラグインが使えるようになります。
$ cd hello-kintone-plugin
$ npm start
コマンドライン上で kintone の環境情報を聞かれるので答えてください。
「dist/plugin.zip をアップロードしました!」と表示されたら、ターミナルは閉じたりせずそのままにしておいてください。
npm startコマンド は次の２つが行われます。
- プラグインファイルがパッケージングされる（Zipファイルができる）
distフォルダ内に「plugin.zip」というファイルができます。これがプラグインです。
- 出来上がったZipファイルが、kintone のシステム管理にアップロードされる
kintoneシステム管理 ＞ プラグイン の「読み込んだプラグイン」に追加されます。
参考：kintoneヘルプ：プラグインを追加／削除する
アプリに適用する
kintone 環境にプラグインを入れたら、使いたいアプリに適用します。
- プラグインを適用したいアプリ（今回はなんでもいいです）の設定画面で、プラグインを追加する
kintoneヘルプ：アプリにプラグインを追加する
- プラグインの設定画面で表示したいメッセージを入力して保存する
- アプリの設定を保存（アプリを更新）
- 一覧画面の上部に、プラグインで設定したメッセージが表示されることを確認
プラグインの設定画面と使い方がイメージできたら、次へ進んでください！
##サンプルプラグインを書き換える
プラグイン開発のイメージを掴むために、サンプルプラグインの中身を一部書き換えてみましょう。
プラグイン開発の第一歩！
プラグインのファイルを確認する
- distフォルダ： パッケージングされたプラグインファイル（plugin.zip）
- srcフォルダ：プラグインのパッケージング前のファイル
- それぞれのファイルの説明は、kintoneプラグイン開発手順「プラグイン作成に必要なファイルの準備」 参照
- manifest.json については「マニフェストファイルの作成」参照
- 51-modern-default.css は、kintone ライクな見た目にするためのスタイルシート
- private.ppk：プラグインの秘密鍵ファイル。なくすとプラグインのアップデートができなくなる。超重要なファイル。
設定画面のHTMLを書き換えてみる
src/html/config.html を開いて、内容を書き換えて保存してみてください。
例：Save ボタン、Cancel ボタンを「保存」「キャンセル」に書き換えてみる
プラグインの自動パッケージング ＆ 自動アップロード
先程実行したコマンドnpm startは、プラグインの自動パッケージングとアップロードを行うコマンドです。
このため、プラグインのファイルの中身を書き換えて保存すると、
自動で プラグイン（zip）ファイルが作り直され、kintoneの環境にアップされます！
ということで、プラグインの設定画面をリロードしてみましょう。
書き換えた内容が反映されているはずです。
自動パッケージング＆アップロードは、「Ctrl + C」キーで止められます。
プラグイン開発の流れが把握できたでしょうか？
この流れが把握できれば、あとはファイルを書き換えていくだけで好きなプラグイン作れちゃいますね！！
次回（以降）予告
- kintoneカスタマイズをプラグインに作り替えるポイントは？
- kintoneカスタマイズとプラグインの書き方ってどこが違うの？
- プラグインの設定画面ってどんな機能を作る必要があるの？
- 設定項目を入力必須にするには？
- 保存ボタンってデフォルトで用意されてないの？
- 設定画面を開くと設定したはずの内容が消えてる？
- アプリの設計情報を簡単に取得する方法ってある？
- 設定画面の見た目を kintone っぽくするには？
- プラグインの秘密鍵ってなに？なくすとどうなるの？
- プラグインのファイル名変えたら自動パッケージング＆アップロードできない？
- プラグインたくさん作りはじめたらディスク容量ひっ迫されてきた…
- node_modules フォルダの容量が大きすぎて辛い。どうしたら？
盛りだくさんだ〜
お楽しみに！