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

はじめに

kintoneカスタマイズを開発しているとカスタマイズを行うアプリに開発したプログラムをアップロードする作業が必要になってきます。

開発中に何度もアップロードするのは面倒だけでなく、時間もかかってしまう作業ですよね？

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

※ 本記事は開発時のみに利用できるTipsです。自分の端末からのみ確認できますのでご注意ください。

※ 「他ユーザーも同時に動作確認できるようにしたい」という場合は、customize-uploader の利用をご検討ください。

利用するツール

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

仕組みについて

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

kintoneカスタマイズはURLでのJavaScriptファイルの登録を行うことができます。

この設定を使って自分の開発環境のURL(localhost)を登録します。

localhostからJavaScript/CSSファイルを配信するのにLiveServerの機能を使います。

おおまかな仕組みは説明は以上です。

ですが、kintoneカスタマイズのURLにはhttpsしか登録することができません。

この制限のためにLiveServerをhttpsモードで動かす必要があります。

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

やること

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

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

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

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

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

この作業を簡略化してくれるツールがmkcertです。OSに関係なく利用することが可能です。

次のツールをダウンロードして(1), (2)の作業を行いましょう。

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

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

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

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

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

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

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

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

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

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

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ファイルが表示されます。

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

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

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

kintoneカスタマイズのファイルを修正してkintoneをリロードしてみましょう。

実装中のプログラムがすぐに反映されているのがわかると思います。

Webpack ユーザー向けの設定

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

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

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

https://localhost:5500 にアクセスし、webpack.config.jsで設定した成果物のプログラムのURLをコピーしましょう。

このURLをkintoneのカスタマイズのURLに登録すれば準備は完了です。

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

このTipsは、2019年4月版 kintoneで確認したものになります。