Visualizer Version9でのLive Previewの使い方とホットリロードの説明

#目次
1. はじめに
2. 説明
3. まとめ
4. 参考

#はじめに
本記事では、VisualizerのVersion9で強化されたLive Preview機能と、ホットリロードという機能についてご紹介いたします。
Live Previewとは、Visualizer内でアプリのプレビューを行うことができる機能で、ビルドをするよりも早い時間でアプリの動きを確認することができます。またアプリを様々なデバイス(モバイル/Webなど)に表示させることも可能です。

それでは、Live Previewの使い方について説明していきます。 

#Live Previewの使い方（Web）

今回はデモとして、Label, Textbox, Button を配置した、以下のような画面を作成しました。

<img width="80%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/45d811bc-6207-9c22-f39b-fc4fd6797c83.png">

####**①Live Previewダイアログの設定**
最初にどのプラットフォームでLive Previewを実行するかを設定する必要があります。

設定には、以下を選択してください。
**メインメニュー > Build > Live Preview Settings**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/034c37a6-d888-7277-701d-9c8556d7e46b.png)

表示するプラットフォームを選択するためのダイアログが表示されます。
今回は**RESPONSIVE WEB**を選択します。
そのあと、**Run**をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/551e1f8c-da5b-3c0c-6e25-00b34ff68693.png)

####**②Live Preview実行方法について**
①で紹介した設定のポップアップで「Run」を押す以外にも、Live Previewの実行方法はいくつかあるので、紹介いたします。

**(1) メニューバーから実行する方法**
メインメニュー > Build > Run Live Preview
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/3141e596-892d-2d92-7191-64b9f6311db4.png)

**(2)ショートカットで実行する方法** 
キーボードで**Ctrl + R**(Windows)かまたは**commnad + R**を押す


**(3)Visualizerのサイドメニューから実行する方法**
左のメニューから「実行ボタン」をクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/cd10715f-34fb-4ec1-5e33-40f248a4e0eb.png)


####**③Live Preview実行結果**
実行が完了すると、Visualizer Previewが起動されて画面が表示されます。
![スクリーンショット 2021-06-14 17.41.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/68bb74c1-e774-be91-d748-cbd307563a63.png)

また、下の**Console**タブに表示されているリンクをクリックするとブラウザに画面を表示することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/fcb071e8-1a85-cc80-a71a-dae82daae787.png)

#Live Previewの使い方（モバイル）
Webに続けてモバイルの説明をします。
モバイルでも同じような画面を作成しました。
![スクリーンショット 2021-06-14 17.50.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/714ac0dd-2c1d-3127-bbb5-d22fcfaf525b.png)

####**①Live Previewの設定の変更方法**
先ほどLive Previewを実行したので、このままLive Previewを行うと次回からは前の設定でLive Previewが行われてしまいます。
今回はプラットフォームをモバイルに変更したいため、Live Previewの設定を変更する必要があります。

メインメニュー > Build > Live Preview Settings

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/034c37a6-d888-7277-701d-9c8556d7e46b.png)

Live Preview Settingダイアログが表示されますので、今回はプラットフォームをiOSにチェックして、Runをクリックします。

####**②Live Preview実行結果**
実行すると、以下のようなプレビューが表示されます。
<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/1efa6fa9-3ec6-a2da-95a3-5305da95e6dd.png">

#ホットリロードの説明
ホットリロードとは、Live PreviewでResponsive Webを表示させた後、そのままVisualizer上で画面を編集し、その編集した箇所をPreviewに瞬時に反映させる機能のことです。
遷移が必要なFromを修正した場合に、そのFromを選択しながら cmd+shift+R することで、Mark as StartUpを付けていないFormの変更も即座に確認することができます。

####**①ホットリロードを使用する条件**
・プロジェクトがアーキテクチャ（MVC）モードで作成されていること
・プロジェクト設定で**Enable Async Mode**にチェックが入っていること
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/357d144d-48de-7a15-a394-31e8c60d46a0.png)

####**②ホットリロードを使用する**

1) プラットフォームをResponsive Webに設定の上、Live Previewを行う

2) Visualizerに戻り、画面を修正 
※今回のサンプルではLabelを Title → Nameに変更)

3) 修正したFormを選択した状態で、**Ctrl + Shift + R**（Windows)または**command + Shift + R**(Mac)を押す

4) Live Preview上で変更が反映される

◆Mark as StartUpを付けているFormの変更
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/4ew5URo30C">pic.twitter.com/4ew5URo30C</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1404367726114598914?ref_src=twsrc%5Etfw">June 14, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

◆Mark as StartUpを付けていないFormの変更
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/4XL7vnspx3">pic.twitter.com/4XL7vnspx3</a></p>&mdash; Kony (@Kony12763790) <a href="https://twitter.com/Kony12763790/status/1408236131720699905?ref_src=twsrc%5Etfw">June 25, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#まとめ
今回はVersion9でのLive Previewの使い方（Web/モバイル）とホットリロードの説明について説明しました。
みなさんもぜひ活用してみてくださいね:wave:

#参考
Live Preview：
https://docs.kony.com/konylibrary/visualizer/visualizer_user_guide/Content/LivePreview.htm

Hot Reload：
https://basecamp.temenos.com/s/article-detail/a042K00001Jz7PSQAZ/hot-reload-a-quicker-way-to-live-preview-your-latest-changes