# アプリのプレビュー

*スキルレベル: 初心者*

## はじめに

* Adaloでアプリの構築を開始したか、テンプレートからアプリを作成していることをご確認ください。

Adalo 2.0 レスポンシブアプリはモバイル版とデスクトップ版の両方で動作するクロスプラットフォームアプリです。開発中、製作者はテストのためにアプリをWeb版またはモバイル版のどちらで表示するか選択できます。この設定は左パネルの"Publish"セクションから制御できます。

## ウォークスルー

1. 左パネルの"Publish"セクションに移動します。
2. ユーザーと**共有**する場合は、共有機能を使用してアプリを公開するために、**Publish**をオンに切り替えてアプリを公開します。

   <figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-156c8244226e757bd29a6b01186bc6ab7d61f92d%2FScreenshot%202023-08-30%20at%2011.20.01%20AM%20(1).png?alt=media" alt="" width="263"><figcaption></figcaption></figure>
3. **Web App** セクションに移動し、“Show Desktop Users…”までスクロールします。
4. アプリのプレビュー方法を選択します。

   * **Mobile App Preview:** これにより、モバイルデバイスでのアプリの外観と機能を表示するスキンがある新しい画面が読み込まれます。

   <figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-6be6ef30f3a3c9d991b0682fba08c2521c00ff27%2FScreenshot%202023-08-30%20at%2011.08.08%20AM.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

   * **Responsive App:** これにより、アプリのレスポンシブバージョンを表示する新しい画面が読み込まれます。デスクトップでは、デフォルトでデスクトップWeb版が表示されます。
     * アプリがさまざまな画面サイズでどのように反応するかを確認したい場合は、ブラウザのサイズを手動で調整するか、[DevTools Device Mode](https://developer.chrome.com/docs/devtools/device-mode/)を使用して異なるデバイスをシミュレーションできます。
     * また、[Mobile Simulator Chrome Extension](https://chrome.google.com/webstore/detail/mobile-simulator-responsi/ckejmhbmlajgoklhgbapkiccekfoccmk)使用も可能です。
5. 設定を**保存**します。
6. ビルダーの左上隅にあ&#x308B;***Preview***&#x30DC;タンを選択します。
7. ユーザーとアプリを共有する場合は、アプリの[Web版を公開](https://help.adalo.com/ja/testing-your-app/publishing-to-the-web)してから、アプリが設定されているドメインを使用するか、ビルダーの左上隅にあ&#x308B;***Share***&#x30DC;タンをクリックして共有する必要があります。