--- title: "アプリ内でポップアップウィンドウを作成する方法" date: "2018-03-06" categories: - "app-development" - "development" - "mobile" - "mobile-development" tags: - "app-development" - "cross-platform-mobile-development" - "mobiletogether" description: MobileTogetherを使用して、モバイルアプリでポップアップウィンドウを作成および設定する方法を学びましょう。メッセージや入力のためのモーダルダイアログを活用し、ユーザーエクスペリエンスを向上させることができます。 --- Status: #blog Tags: #app-development #cross-platform-mobile-development #mobiletogether Categories: [mobile-development](/blog/ja/category/mobile-development.md) | [development](/blog/ja/category/development.md) | [mobile-development](/blog/ja/category/mobile-development.md) | [mobile-development](/blog/ja/category/mobile-development.md) # アプリ内でポップアップウィンドウを作成する方法 期間中 [モバイルアプリケーション開発](https://www.altova.com/ja/mobiletogether/) 開発者は、ユーザーに迅速に実行してほしい操作や、現在のアプリの画面の上に表示されるメッセージ（ポップアップウィンドウ）を表示したい場合があります。これらは、ユーザーがアプリの操作を中断することなく、特定の処理を完了させたり、メッセージを確認したりするのに役立ちます。 MobileTogetherを使用すると、あらゆるサイズのポップアップウィンドウを簡単に設定できます。その仕組みについて、詳しく見ていきましょう。 ![ユーザーがアプリケーションを操作している](/blog/images/shutterstock_160560011-1.jpg) ## ポップアップウィンドウとは何かを定義する アプリ内のポップアップウィンドウは、短いメッセージを表示したり、ユーザーが情報を入力したりするのに便利で、デバイスの画面全体を占有することなく利用できます。ポップアップの処理が完了すると、ユーザーは元の作業フローの同じ場所に戻り、アプリでの作業を継続できます。 ポップアップウィンドウは、アプリケーションのメイン画面との操作を一時的に遮断するため、モーダルウィンドウとも呼ばれます。例えば、通知メッセージを表示したり、アプリケーションの通常の動作を中断させる可能性のある情報を表示するのに適しています。 その中で、 [MobileTogether](https://www.altova.com/ja/mobiletogether), アプリケーション開発者は、特定のサブページをポップアップウィンドウとして定義することができます _サブページへ移動_ 「アクション」ダイアログ内の操作。 「_サブページをモーダルダイアログとして表示する_」のチェックボックスにチェックを入れ、ポップアップウィンドウの希望する高さと幅を入力します。ここでは、ポップアップウィンドウを画面幅の75%、高さ65%に設定しています。パーセント表示にすることで、iOS、Android、Windowsのどのデバイスでも、モーダルウィンドウが適切に表示されるようになります。   ![アプリのポップアップウィンドウとは](/blog/images/app-pop-up.png)   必要に応じて、縦向きと横向きでそれぞれ異なる値を設定することも可能です。 MobileTogether Designerには、組み込みのシミュレーターが搭載されており、これを使用することで、ポップアップ機能を様々なOSやデバイス構成で簡単にテストすることができます。   ![あらゆるデバイスでアプリの動作をシミュレーションできます](/blog/images/simulate-app.png)   ツールバーにある「_クライアントでのテスト実行_」ボタンをクリックすると、デザインツール上でご自身のデバイスで直接テストを実行できます。 私が上記で定義したポップアップウィンドウが、私のスマートフォンにどのように表示されるか、以下に示します   ![スマートフォンでのポップアップ表示](/blog/images/pop-up-phone.png)   ポップアップウィンドウやその他様々な機能を、どれほど簡単に設定できるかをご覧ください [高度なアプリケーション機能](https://www.altova.com/ja/mobiletogether/features) by [アプリケーションを開発する](https://www.altova.com/ja/mobiletogether/download) 無料のMobileTogether Designerを使用することで。