kintoneカスタマイズを開発しているとカスタマイズを行うアプリに開発したプログラムをアップロードする作業が必要になってきます。
開発中に何度もアップロードするのは面倒だけでなく、時間もかかってしまう作業ですよね？

この記事では開発中に限りアップロードを省略して、修正したコードがカスタマイズ環境に即時反映される開発Tipsを紹介したいと思います。

本記事は開発時のみに利用できるTipsです。
自分の端末からのみ確認できますのでご注意ください。
「他ユーザーも同時に動作確認できるようにしたい」という場合は、 customize-uploaderの利用をご検討ください。

• Visual Studio Code （以後VSCode）
• Live Server Extension （以後LiveServer）
• mkcert

なお、VSCode, LiveServerのインストールはすでに完了しているものとします。

このTipsを紹介するにあたって、しくみを簡単に説明します。

kintoneカスタマイズはURLでのJavaScriptファイルの登録ができます。
この設定を使って自分の開発環境のURL（localhost）を登録します。
localhostからJavaScript/CSSファイルを配信するのにLiveServerの機能を使います。

大まかなしくみの説明は以上です。
ですが、kintoneカスタマイズのURLにはhttpsしか登録できません。
この制限のためにLiveServerをhttpsモードで動かす必要があります。

ここからは、LiveServerをhttpsモードで動かすための設定をしていきましょう。

1. mkcertを使ってブラウザーにhttps://localhostのアクセスに対する有効な証明書と秘密鍵を作成する。
2. Live Server Extensionを使って、編集ファイルをhttpsで配信できるようにする。
3. LiveServerを起動する。
4. kintoneのカスタマイズURLでLive Server ExtensionのURLを登録する。
5. 実装する。

webpackをご利用の方はさらに数ステップ必要ですので後述します。

https://localhostへのアクセスをブラウザーが安全と判断するためには次が必要です。

1. OSに証明書をインストールする。
2. 1でインストールした証明書と秘密鍵を使ってhttpsサーバーを動作させる。

この作業を簡略化してくれるツールがmkcertです。
OSに関係なく利用できます。
mkcert v1.4.4 をダウンロードして作業をしましょう。

• Mac向け：mkcert-v1.4.4-darwin-amd64
• Windows向け：mkcert-v1.4.4-windows-amd64.exe
• パッケージシステムを利用している方向け https://github.com/FiloSottile/mkcert#installation

2024年6月では、最新バージョンは1.4.4になっています。
ご利用時の最新版を github からダウンロードしてください。

mkcertがダウンロードできたら次のコマンドを実行します（Mac向け）。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

# $ tree .
# .
# └── mkcert-v1.4.4-darwin-amd64
# 

chmod +x mkcert-v1.4.4-darwin-amd64
./mkcert-v1.4.4-darwin-amd64 -install
# Passwordを求められるので入力

./mkcert-v1.4.4-darwin-amd64 localhost 127.0.0.1 ::1

# 実行後は証明書が作られている
# $ tree .
# .
# ├── localhost+2-key.pem   # 秘密鍵
# ├── localhost+2.pem       # 証明書
# └── mkcert-v1.4.4-darwin-amd64

Windowsの場合は、次の点を除いて同じように実行できます。

• 実行ファイルがmkcert-v1.4.4-windows-amd64.exeになる。
• chmodコマンドが不要になる。
• パスワードの代わりにセキュリティの警告が表示されるので「はい」をクリックする。

警告

この証明書や秘密鍵は開発用途のみ利用するものとし、他人とは共有しないでください。

次にmkcertが作った証明書と秘密鍵を使ってLiveServerをhttpsで動作するようにしてみましょう。

1. 画面左下の歯車マーク > 設定をクリック
2. 設定タブが表示されるので、ワークスペースの設定をクリック
3. 「設定の検索」に「live https」を入力して検索
4. Live Server > Settings: Https項目の内容を編集
   編集する内容は、次の「liveServer.settings.https以下の設定項目」を参考にしてください。
   

   

または、 Creating User and Workspace Settings の手順で開いたsetting.jsonに追記します。
settings.jsonの例は次のとおりです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{
   "settings": {
  "liveServer.settings.https": {
   "enable": true,
   "cert": "/home/cybozu/cert/localhost+2.pem",
   "key": "/home/cybozu/cert/localhost+2-key.pem",
   "passphrase": ""
  }
 }
}

liveServer.settings.https以下の設定項目は次のとおりです。

• enable : trueを設定するとhttpsで動作します。
• cert : mkcertで生成された証明書へのパスを設定します。
• key : mkcertで生成された秘密鍵のパスを設定します。
• passphrase : パスフレーズですが空文字を設定します。

settings.jsonには他の拡張の設定も入っている可能性があるので、コピーするときは気を付けてください。

VSCodeの一部ですが、画像の部分を起動するとLiveServerが起動してブラウザーでhttps://localhost:5500のページが開かれます。

ブラウザーでアクセスするとプロジェクトの構成と同じファイルが配置されていると思います。

フォルダーをクリックするとフォルダー内をたどれます。

開発に使うファイルを選択するとブラウザー上でJavaScriptファイルが表示されます。

1. kintoneカスタマイズの開発に利用するファイルのURLをコピーしておきます。
2. kintoneのカスタマイズの画面でコピーしておいたURLを登録します。
3. kintoneに反映します。

準備は完了です。お疲れさまでした。

kintoneカスタマイズのファイルを修正してkintoneをリロードしてみましょう。
実装中のプログラムがすぐに反映されているのがわかると思います。

webpackを利用して開発している場合webpackにwatchオプションがあるのでこちらを使います。

1. webpackをwatchオプション付きでビルドする。
2. LiveServerで、webpackのAPIを使ってビルド成果物のURLをコピーする。
3. kintoneのJavaScriptカスタマイズにURLを登録する。

webpackをwatchオプション付きでビルドする。

1

npx webpack --mode development --colors --watch

https://localhost:5500にアクセスし、webpack.config.jsで設定した成果物のプログラムのURLをコピーしましょう。
このURLをkintoneのカスタマイズのURLに登録すれば準備は完了です。

webpack-dev-serverというツールでもhttpsモードが搭載されておりこちらを利用できます。
本記事では扱いませんが、トライしたい場合は次の記事を参考にしてみてください。
webpack-dev-server + mkcertで有効なhttpsリクエストでビルド済みのファイルを配信する

このTipsは、2024年6月版kintoneで動作を確認しています。