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」と入力します。
④ 下記のように設定します。

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を本番のパスに変更しておきましょう！