Monacaチームの小田川です。
前回までは、MonacaクラウドIDEのエディターに関して紹介をしてきましたが、Monacaで開発する際に、MonacaクラウドIDEのエディターではなく、普段使用しているエディターで開発を行いたいユーザも多いと思います。そのような場合は、Monaca LocalkitやMonaca CLIを使用することでローカルPC上で開発を行うことが出来るようになります。
Monaca Localkitでは、バージョン 4.1.0からプレビュー画面の仕様が変更されました。今回は、Monaca Localkit 4.1.0以降で変更された点や注意点について説明していきたいと思います。
プロトコルの変更
Monaca Localkit 4.1.0未満のプレビュー画面では、プロジェクトのリソースアクセスにfile://プロトコルが使用されていました。Vite等のJavaScriptモジュールを使ったプロジェクトは、HTTP(s)経由で使用する必要があるため、Monaca Localkit 4.1.0未満のプレビュー画面では使用することができませんでした。
Monaca Localkit 4.1.0以降のプレビュー画面では、プロジェクトのリソースアクセスにhttp://プロトコルが使用されています。この仕様変更により、Monaca Localkit 4.1.0以降のプレビュー画面では、JavaScriptモジュールを使ったプロジェクトも動作するようになりました。
現在、Monacaで提供している
- Onsen UI V2 + Vue3
- Onsen UI V2 + React（Vite）
用テンプレートプロジェクトは、Viteが使用されています。これらのテンプレートプロジェクトもMonaca Localkit 4.1.0以降から使用できるようになります。
プレビュー用ポート番号の追加
Monaca Localkit 4.1.0以降のプレビュー画面からプロジェクトのリソースアクセスに http://プロトコル が使用されるようになったため、リソースにアクセスする際にポート番号が追加されるようになりました。
デフォルトのプレビュー用ポート番号は、8002が設定されています。このポート番号は、Monaca Localkitの設定画面から変更することができます。デフォルトのポート番号がローカルPC上で競合する等の問題がある場合は、使用されていないポート番号に変更することができます。
プレビュー用ポート番号を変更する際の注意点
プレビュー用ポート番号は、ブラウザー側に保存される
- Local Storage
- Session Storage
- IndexDB
- Web SQL
- Cookies
の保存先に影響します。
ポート番号を変更した場合、変更する前に保存されていた上記のデータにはアクセスすることができなくなります。ポート番号を変更前のポート番号に戻した場合は、再度アクセスすることができるようになります。
Monaca Localkitに複数のプロジェクトを作成している場合、ポート番号を変更することで、各プロジェクト用のデータを保存できるようになりますが、管理も複雑になってきます。ポート番号を変更する際は、上記の特性に注意して使用してください。
プレビュー画面が更新されない場合
プレビュー画面のリソースアクセスに http://プロトコル が使用されることにより、ブラウザー側のキャッシュの影響で変更したソースコードがプレビュー画面に反映されない場合があります。変更したソースコードがプレビュー画面に反映されない場合は、Developer Toolsの
- Network - Disable cache
にチェックを付け、必要に応じて、プレビュー画面のメニュから更新をクリックすることで対応することができます。
おわりに
Monaca Localkitは、有料プランから利用できるツールになります。Freeプランの場合でも、Monaca Localkit初回利用時から30日間は、トライアルとして利用することができます。
これまでMonacaクラウドIDEで開発を行なっていた場合は、一度、Monaca Localkitを使用してローカルPC上での開発も試してみてください。新たな発見があるかもしれません。
現在、Monaca Localkitを使用している場合で、バージョン 4.1.0以降からプレビュー画面が更新されない問題が発生した場合は、一度、上記の対策を試してみてください。