MonacaクラウドIDEでは、Monacaプロジェクトのプレビュー機能を提供しています。

このプレビュー機能は、主に画面レイアウトを確認するための機能になります。MoacaプロジェクトのHTMLコンテンツ部分の画面遷移については、実際の端末にインストールされたアプリのように操作することができるため、画面の操作性を含めた画面レイアウトを確認することができます。

注意点として、MonacaクラウドIDEは、ブラウザー上で動作するため、Cordovaの機能や一部JavaScriptの機能を使用することができません。これらの機能を使用した画面遷移や画面レイアウトを行なっている場合は、Monacaデバッガーやビルドしたアプリで確認する必要があります。プレビュー機能の制限については、以下を参照していください。

今回は、MonacaクラウドIDEのプレビュー機能につて、説明していきたいと思います。

利用できる機能

プレビュー画面では、以下の機能を利用できます。

  • 機種（画面解像度）の選択
  • 画面のオリエンテーション
  • プレビュー画面の切り離しと組み込み
  • プレビューの更新

機種の選択

記事の投稿時点のプレビュー画面では、以下の機種の画面解像度を提供しています。プレビュー画面のプルダウンのリストから選択する事で、対象の機種でレイアウトを確認する事ができます。

プレビュー画面の + ボタンをクリックし、プレビュー をクリックすることで、複数のプレビュー画面を表示させることも可能です。

画面のオリエンテーション

オリエンテーション機能を使うことで、縦と横で画面レイアウトを確認する事ができます。


プレビュー画面の切り離しと組み込み

プレビュー画面は、MonacaクラウドIDEから切り離して、独立した画面として表示させる事ができます。ノートパソコンに外部ディスプレイを接続して画面を拡張させているような場合、プレビュー画面を外部ディスプレイ側に表示させ、ノートパソコン側のMonacaクラウドIDEのエディター部分を広く使うというような利用方法もできます。

注意点として、プレビュー画面の切り離しができるのは、1画面のみになります。複数のプレビュー画面を切り離すことはできません。MonacaクラウドIDEの利用環境にあわせて、プレビュー画面の切り離し機能を試してみてください。

プレビューの更新

プレビューの更新機能は、手動でプレビュー画面を更新させる機能になります。通常は、MonacaクラウドIDE上でソースファイルを保存したタイミングで自動的にプレビュー画面が更新されますが、ソースファイルを保存した際にプレビュー画面が更新されないような場合は、プレビューの更新機能を試してみてください。

クイックビューア

Monacaでは、MonacaクラウドIDEのプレビュー画面のように、実際の端末上で画面レイアウトを確認できる クイックビューア を提供しています。端末上で確認することで、より実際のアプリに近い形で画面レイアウトを確認する事ができます。

クイックビューアを利用する場合は、プレビュー画面の右下に表示されている QRコード アイコンをクリックし、表示されたQRコードを使用するモバイル端末で読み込む事で、利用する事ができます。クイックビューアの詳しい利用方法は、以下を参照してください。

注意点として、クイックビューアは、モバイル端末にインストールされているブラウザ上で動作します。そのため、MonacaクラウドIDEのプレビュー画面と同様に、Cordovaの機能や一部JavaScriptの機能を使用することができません。これらの機能を使用した画面遷移や画面レイアウトを行なっている場合は、Monacaデバッガーやビルドしたアプリで確認する必要があります。

おわりに

今回は、MonacaクラウドIDEで提供しているプレビュー機能について説明しました。プレビュー機能の特性を理解して、Monacaデバッガーと組み合わせることで、効率のよいアプリ開発を行う事ができます。一度、プレビュー画面で提供している機能を試してみてください。