GitHub Codespaces で kintone JavaScript カスタマイズの効率アップ（Live Server 利用）

手順

1. mkcert のインストール

クライアントPCに mkcert をインストールする。

2. 自己証明書の作成

ローカルCAを作成し、自己証明書を作成する。

mkcert -install
mkcert localhost 127.0.0.1 ::1

次のファイルが作成される。

• localhost+2.pem
• localhost+2-key.pem

dotfiles の対象とするためにファイル名を変更する。

mv localhost+2.pem .localhost+2.pem
mv localhost+2-key.pem .localhost+2-key.pem

3. dotfiles 用リポジトリの作成

GitHubにdotfilesリポジトリ（名前は任意）を作成する。リポジトリに次の自己証明書を登録する。

• .localhost+2.pem
• .localhost+2-key.pem

4. dotfiles 設定の有効化

GitHub Codespaces Settings のDotfilesでAutomatically install dotfilesにチェックし、先ほど作成したリポジトリを選択する。

5. GitHub Codespaces に Live Server インストール

GitHub Codespacesを作成して開く。既に存在する場合は次のコマンドで再構築する。

gh cs rebuild

拡張機能メニューから Live Server をインストールする。

6. Live Server の設定

.vscode/settings.json に下記を設定する。

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

7. Port Forwading の確認

Live Serverを起動し、転送されたアドレスが127.0.0.1、表示範囲がPrivateになっていることを確認する。

注意点

転送されたアドレスが127.0.0.1ではない、表示範囲がPublicの場合はインターネット公開されるので注意する。

クライアントPCからのみ利用できるようにするにはポートの表示範囲をPrivateに変更し、ポート プロトコルをHTTPに変更する。

8. kintone JavaScript カスタマイズの設定

kintoneの「アプリの設定」>「JavaScript / CSSでカスタマイズ」にURLを設定する。

設定する内容の例は次のとおり。 https://127.0.0.1:5500/dist/index.js