[OutSystems]モバイルアプリケーションをWebアプリケーションのようにブラウザに表示する

質問箱で質問もらった内容。質問箱だとスクリーンショットを貼れないのでQiitaにも残しておく。

質問内容

モバイルアプリケーションの開発中に、プレビュー画面で選択できる候補以外の解像度で、画面を表示する方法はないか。

プレビュー画面というのは、Service StudioでOpen in Browserを選択したときに出てくる画面。

環境

Personal Environment(Version 11.17.0 (Build 36291))
Service Studio(Version 11.53.21)

プレビュー画面とは

OutSystemsのシステムコンポーネントである、PreviewInDevicesの画面。モバイルアプリケーションのプレビュー（PCのブラウザに端末のプレビューを表示する）画面。

Service Studioでモバイルアプリケーションを開き、Open in Browserのボタンをクリックすると表示される（当然ながらCordovaは動いていないので、Cordova Pluginは使えない）。

画面上部のドロップダウンリストでプレビューする画面サイズをプリセットされたいくつかの候補（iPhone 12 Miniなど機種名）から選択できる。

Service CenterでSite Propertyを見ても候補を追加するUIはないし、システムモジュールなので、Service Studioで編集することもできない。

解決策

実はモバイルアプリケーションは、Webアプリケーションと同じURL形式でアクセスすると、Webページとしてブラウザに表示できる（プレビュー機能を使わずに表示できる）。
すると、ブラウザの開発者ツールが備えるDevice Emulateの機能を利用でき、解像度を任意に指定できる。

ページを開く方法1: URLを直接指定

https://ホスト/モジュール名のパス

（Webアプリケーションと同じ構造のURL）

ページを開く方法2: プレビュー画面のアイコンで開く

プレビュー画面上部の右側にあるアイコン（マウスオーバーすると「View in browser」と表示される）をクリックすると、この形式のURLでページを開き直してくれる。

ブラウザの開発者ツールで端末をエミュレート

Chromeの場合、ページを開いたあとで

1. F12キーで開発者ツールを起動
2. 端末エミュレータを起動（開発者ツール左上にあるスマートフォンとタブレットを重ねた形のアイコンから）
3. アプリケーションを表示するタブの上部にエミュレータの解像度を直接指定するUIが出てくる

端末エミュレータを起動するには以下画像の黄色に塗ったアイコンをクリック

端末エミュレータの解像度を指定