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

目次

はじめに

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

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

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

利用するツール

なお、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 をご利用の方はさらに数ステップ必要ですので後述します。

mkcert を使って https://localhost へのアクセスに対する有効な証明書と秘密鍵を作成する

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

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

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

2019 年 4 月では、最新バージョンは 1.3.0 になっています。
ご利用時の最新版を github (External link) からダウンロードしてください。

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
# $ tree .
# .
# └── mkcert-v1.3.0-darwin-amd64
# 

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

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

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

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

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

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

Live Server Extension で編集ファイルを https で配信できるようにする

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

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

または、 Creating User and Workspace Settings (External link) の手順で開いた 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 には他の拡張の設定も入っている可能性があるので、コピーするときは気を付けてください。

LiveServer を起動する

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

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

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

kintone のカスタマイズ URL で Live Server Extension の URL を登録する

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

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

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

kintone カスタマイズを実装する

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

webpack ユーザー向けの設定

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リクエストでビルド済みのファイルを配信する (External link)

information

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