1. 概要
kintoneの開発環境作成のやり方をまとめました。
- ソースのカスタマイズ時
- プラグイン開発時
のどちらにも対応しています。
開発中に何度もアップロードしなくて済むので作業が捗ります！
2. 方針
kintoneのファイル参照先を、kintoneにアップロードされているファイルではなくローカルPC上にあるファイルにすることで、修正したファイルを確認するためにいちいちアップロードしなくてもいいようになります。
ローカルPC上にあるファイルを参照させるには、ローカルPCにWebサーバを立て、ファイルをURLで指定することができるようにします。
※デバッグが終わったら参照先を正式なものに直す必要があります。
今回はコードエディタに「Visual Studio Code」を使用し、拡張機能の「Live Server」を使うことでローカルPCにWebサーバを立てます。
3. 使用ツール
- Visual Studio Code（VSCode）
- Live Server （VSCodeの拡張機能）
- mkcert
- plugin-packer（プラグイン開発の場合）
4. 開発環境の準備
4-1. Visual Studio Codeをインストールする
下記のサイトからVisual Studio Codeをダウンロードしてインストールします。
4-2. Live Serverをインストールする
① Visual Studio CodeでExtensionsアイコンをクリックして、Extensionsビューを表示します。
② 検索窓に「Live Server」と入力し検索します。
③ Live Serverをインストールします。
4-3. mkcertを使って証明書と秘密鍵を作成する
kintoneでは「http://～」のURLは指定できません。「https://～」である必要があります。
下記のページからmkcertをダウンロードし、証明書と秘密鍵を作成します。
Windowsの場合の手順を以下に書きます。
① Windowsの場合、mkcert-v1.4.3-windows-amd64.exeをダウンロードします。
（1.4.3は記事作成時の最新です。バージョン部分は適宜読み替えてください。）
② コマンドプロンプトで下記のコマンドを実行します。
(mkcertをダウンロードしたフォルダ) > mkcert-v1.4.3-windows-amd64.exe -install
※PCにJavaが入っている（環境変数に「JAVA_HOME」がある）場合、Javaのルートストアにもインポートしようとしてエラーメッセージが表示されます。
エラーが出ても以降の操作に問題はないですが、コマンドプロンプトを「管理者として実行」で立ち上げるとエラーは出なくなります。
セキュリティの警告が表示されたら「はい」をクリックする
(mkcertをダウンロードしたフォルダ) > mkcert-v1.4.3-windows-amd64.exe localhost 127.0.0.1 ::1
以上を実行すると、mkcert-v1.4.3-windows-amd64.exeと同じフォルダ内に秘密鍵と証明書ができています。
- localhost+2.pem （証明書）
- localhost+2-key.pem（秘密鍵）
4-4. LiveServerの設定を行う
① Visual Studio Codeの[File]>[Open Folder]で開発するソースフォルダを選択しておきます。
② Visual Studio Codeの画面左下にある歯車マーク > [Settings]をクリックします。
③ [Workspace]を選択し、検索窓に「Live Server http」と入力します。
④ 下記のように設定します。
| 項目 | 値 |
|---|---|
| enable | true |
| cert | 4-3で生成された証明書のパス |
| key | 4-3で生成された秘密鍵のパス |
| passphrase | 空 |
4-5. LiveServerを起動する
Visual Studio Codeの[File]>[Open Folder]でソースフォルダを選択しておき、
画面下の「Go Live」をクリックするとWebサーバが起動します。
ブラウザが立ち上がり、各ソースファイルを「https://127.0.0.1:5500/～」
で参照することができるようになります。
この章の内容は下記のサイトに詳しく書かれています。
Visual Studio Code Live Server Extensionを使ってkintoneカスタマイズ開発効率をあげよう！
https://developer.cybozu.io/hc/ja/articles/360026502091
5. カスタマイズファイルの場合
kintoneの[アプリの設定] > [JavaScript / CSSでカスタマイズ]で、ローカル環境のファイルのURLを指定します。
一度指定すれば、その後ソースを修正した後にいちいちアップロードしなくても「アプリを更新」するだけで修正した内容が反映されます。
6. プラグイン開発の場合
6-1. マニフェストファイルを編集する
プラグインのファイル群の中にあるmanifest.jsonの中で、編集したいファイルのパスをローカル環境のURLに変更します。
例）
css/addin-style.css
↓
https://127.0.0.1:5500/css/addin-style.css
6-2. 作成したプラグインのアップロード
① Node.jsをインストールする
既にNode.jsが入っている場合は、バージョンを確認します。
> node -V
この後インストールするplugin-packerに必要なNode.jsのバージョンは以下のサイトのengines プロパティに書かれているので確認します。
https://github.com/kintone/js-sdk/blob/master/packages/plugin-packer/package.json
"engines": {
"node": ">=12"
}
上記の場合、Node.jsのバージョンは12以上が必要です。
② plugin-packerをインストールする
plugin-packerをインストールします。
> npm install -g @kintone/plugin-packer
この時に、Node.jsをインストールしてすぐだと
'npm' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
というメッセージが表示されるかもしれません。
コマンドプロンプト画面を新規に開いて再度やってみてください。
また、社内のネットワークだとプロキシでエラーになることがあります。
下記の記事を参考にプロキシの設定をしてみてください。
③ プラグインをパッケージングする
下記のページの「基本の使い方」を参考に、プラグインをパッケージングします。
plugin-packerを使ってプラグインファイルをパッケージングしよう！
https://developer.cybozu.io/hc/ja/articles/360000910783
＜参考＞
プラグイン開発支援ツール群の案内
https://developer.cybozu.io/hc/ja/articles/360000975763
④ アップロード
プラグインを追加する場合は、まずシステム管理でプラグインを読み込み、アプリの設定で追加します。
1) [kintoneシステム管理] > [プラグイン]ページで「読み込む」をクリックし、①で作成したzipファイルを読み込む。
2) [アプリの設定] > [プラグイン]で「プラグインの追加」をクリックし、プラグインを追加する。
一度アップロードすれば、その後ソースを修正した後にいちいちアップロードしなくても「アプリを更新」するだけで修正した内容が反映されます。
7. デバッグが終わったら
本番環境では、ローカル環境のURLを本番のパスに変更しておきましょう！