カテゴリー内の他の記事

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

はじめに

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

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

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

 

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

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

利用するツール

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

 仕組みについて 

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

kintone-vscode.png

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に関係なく利用することが可能です。

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

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

 

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

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

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

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

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

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

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

または、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 のページが開かれます。

liveserver.png

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

listing_directory__.png

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

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

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

  1. kintoneカスタマイズの開発に利用するファイルのURLをコピーしておきましょう。

  2. kintoneのカスタマイズの画面でコピーしておいたURLを登録します。

  3. kintoneに反映する。

JavaScript___CSS_________.png

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

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

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

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

Webpack ユーザー向けの設定

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

  1. webpackをwatchオプション付きでビルドする
  2. LiveServerでwebpackのAPIでビルド成果物のURLをコピーする
  3. 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で確認したものになります。

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
Haruka

上記設定完了しましたが、下記のエラーが出てしまい、接続できない状態です。

どのようにすれば解決できますでしょうか。

このサイトにアクセスできません

https://127.0.0.1:5500/ のウェブページは一時的に停止しているか、新しいウェブアドレスに移動した可能性があります。

ERR_SSL_KEY_USAGE_INCOMPATIBLE
Avatar
cybozu Development team

Haruka 様

お世話になっております。cybozu developer network 運営でございます。

> ERR_SSL_KEY_USAGE_INCOMPATIBLE

と出ておりますので、証明書の作成周辺で問題があるのかもしれません。
もう一度証明書作成からしなおすと改善されませんでしょうか。

また、恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
技術的なご質問等はcybozu developer コミュニティをご活用ください。

よろしくお願い致します。

Avatar
マル

Live Serverを利用して開発終了後はjsファイルをアップロードし反映させ、urlは削除しておりますが、修正や変更などを加えたい場合、アップロードのjsファイルはそのままで再度urlを登録しデバッグを行いたく混在の運用は可能なのでしょうか。

下記のように混在設定したのですが、デバッグでのLive Serverでの反映結果が微妙に違っているように思われます。

気持ち的にはjsファイルより上にurlを登録しているので、優先される気持ちでおりますが、そもそも間違った利用でしょうか。

よろしくお願い致します。

Avatar
cybozu Development team

マル 様

お世話になっております。cybozu developer network 事務局です。

Live Server Extension の URL と JavaScript ファイルを混在して適用すると、同じイベントが複数回実行されます。

そのためカスタマイズファイルを正常に適用するためには、
混在での運用や利用はお控えいただくようお願いいたします。

Avatar
マル

cybozu developer network 事務局様

お世話になります。

ご回答いただきましてありがとうございます。

>混在して適用すると、同じイベントが複数回実行されます。

との事ですが、上位が実行されると言うわけではなく、すべてのソースの内容が実行されるとの認識であってますでしょうか。

又、urlではなく、もし、scriptファイルを複数アップロード(テストa.jsとテストb.js)し、双方同じイベントを記述していた場合は双方のイベントが実行されるとの解釈で間違ってないでしょうか。

尚、デバッグの方法は様々あると思いますが、今回のようにLive Serverを利用した場合、運用環境に移行した後、メンテナンス時のデバッグ時、どのような運用方法が考えられますでしょうか。

デバッグが完了するまで、運用を止める(アップロードファイルを一旦削除)等は考えづらいため、もし、可能であれば助言いただければ幸甚です。

 

Avatar
cybozu Development team

マル 様

お世話になっております。cybozu developer network 運営でございます。

> 上位が実行されると言うわけではなく、すべてのソースの内容が実行されるとの認識であってますでしょうか。
> 又、urlではなく、もし、scriptファイルを複数アップロード(テストa.jsとテストb.js)し、双方同じイベントを記述していた場合は双方のイベントが実行されるとの解釈で間違ってないでしょうか。

はい、すべてのソースが実行されるようになっております。
複数ファイルに渡ってkintone.events.on()などをつかってイベントを登録するとそのイベントはすべて実行されることにはなります。(厳密には、上から順に登録はされます)

デバッグの方法についてですが、運用中のアプリを停止したくないのであれば、以下がよくある方法かと存じます。

  • 同じドメインにアプリをコピーしてそのアプリ上で試す
  • 開発者ライセンスなどで別ドメインに環境を用意し、その環境で試す

また、恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
上記試してみてわからないなど、記事から派生した技術的なご質問はcybozu developer コミュニティをご活用ください。

よろしくお願い致します。

サインインしてコメントを残してください。