VSCode Live Server Extention を kintone で使ってみました

数年ぶりに kintone での開発をすることになりました。

で、久しぶりに思い出しながら、あれこれ触ってると、 Javascript カスタマイズを VSCode で効率的に開発できるということに気づきました。以前、触ってた時はこんなのあったかな？と思いつつも、せっかくなので利用してみることにしました。

ちなみに、 kintone の利用開始日を確認したら、 2019/4/18 で、この記事が 2019/4/8 に書かれているようです。 VSCode 使うようになってきたの結構最近なので、当時は、記事はあったけど気が付いていなかったというオチのようです。

VSCode に Live Server の拡張機能をインストール
- テスト
https での接続
まとめ

なお、下記の記事を参考にしました。

Visual Studio Code Live Server Extensionを使ってkintoneカスタマイズ開発効率をあげよう！

VSCode に Live Server の拡張機能をインストール

Live Server のインストールもググればたくさん情報が出てきます。今回は下記を参考にしました。

VS Code の Live Server – ブラウザを自動的に再読込する拡張機能について

VSCode を立ち上げて、拡張機能を開いて、 Live Server を検索すると出てくるので、

『インストール』を押します。

一度、VSCode を再起動します。

テスト

適当なフォルダを開いて、適当なサンプルファイルを作成します。

<html>
    <body>
        <h1>テスト</h1>
        <p>VSCode Live Server のテストです。</p>
    </body>
</html>

で、画面右下にある『Go Live』ボタンを押すと、

デフォルトブラウザ（今の環境だと Chrome）が起動して、このサンプルページを表示してくれます。

VSCode 側のファイルに変更を加えて保存すると、それだけでブラウザ側がリロードして表示を更新してくれます。

なるほどね。これは便利だ。

https での接続

Live Server を使うことで、ローカルサーバーを立ち上げて、ブラウザで表示することができるようになりました。

VSCode 上で Javascript カスタマイズ用のファイルを編集して、これを kintone の Javascript カスタマイズファイルとして設定するという形になります。が、 kintone 側が URL で指定する場合は、 https しか受け付けないとのことです。

なので、証明書（オレオレ証明書になります）周りとかを設定して、 https で読めるようにする必要があるという流れになるそうです。

mkcert

mkcert というツールを使うと、ローカルで証明書を作成してくれるそうです。早速やってみます。

なお mkcert 自体については、下記などをご参考にしてください。

ルート証明書のインストール

こちらから、最新版をダウンロードします（作業時点での最新版は v1.4.4 でした）。 VSCode を WIndows で動かしているので、 mkcert-v1.4.4-windows-amd64.exe になります。

ダウンロードしたファイルを適当なディレクトリ（この場合だと、 C:\Users\mor\bin\mkcert ）に保存して、下記コマンドによりルート証明書をインストールします。

C:\Users\mor>cd bin\mkcert
C:\Users\mor\bin\mkcert>mkcert-v1.4.4-windows-amd64.exe -install

セキュリティ警告が表示されるので、

内容を確認して、この証明書をインストールするので問題が無ければ『はい』を選択します。

無事証明書がインストールされると、こんな感じに表示されます。ちなみに、 PC 自体に証明書がインストールされているので、『コントロールパネル』->『インターネットオプション』->『コンテンツ』タブ->『証明書』->『信頼されたルート証明書』を選択すると、

のように、 mkcert が作成した証明書がインストールされているのがわかります。

サーバー証明書の発行

次に、このルート証明書が発行元になるサーバー証明書を作成します。

C:\Users\mor\bin\mkcert>mkcert-v1.4.4-windows-amd64.exe localhost 127.0.0.1 ::1
Created a new certificate valid for the following names 📜
 - "localhost"
 - "127.0.0.1"
 - "::1"

The certificate is at "./localhost+2.pem" and the key at "./localhost+2-key.pem" ✅

It will expire on 2 March 2026 🗓

C:\Users\mor\bin\mkcert>

このコマンド実行後、証明書ファイルが mkcert-*.exe と同じフォルダに作られています。

C:\Users\mor\bin\mkcert>dir
 ドライブ C のボリューム ラベルがありません。
 ボリューム シリアル番号は 9407-496E です

 C:\Users\mor\bin\mkcert のディレクトリ

2023/11/30  16:08    <DIR>          .
2023/11/30  15:23    <DIR>          ..
2023/11/30  16:08             1,704 localhost+2-key.pem
2023/11/30  16:08             1,570 localhost+2.pem
2023/11/30  15:16         4,896,256 mkcert-v1.4.4-windows-amd64.exe
               3 個のファイル           4,899,530 バイト
               2 個のディレクトリ  273,486,532,608 バイトの空き領域

C:\Users\mor\bin\mkcert>