モバイルフレンドリーなアプリを構築する

概要

You can use Apps to build mobile-friendly apps. The same app can be used on devices with different screen sizes, such as mobile phones, tablets, or computers, without any issues.

この方法の実例を確認するには、「チュートリアル」セクションの手順を実行してください。

このページの最後にある、より多くの例が含まれるサンプル アプリ ファイルもご覧ください。

注:

[カスタム リスト] コントロールは現在、モバイル画面または小画面をサポートしていません。

チュートリアル

この例を使用して、3 つのフィールドと送信ボタンを含むアプリを構築します。このアプリの動作は、画面サイズによって異なります。

1. 新しいアプリを作成します。

2. [コンテナー] コントロールをアプリに追加します。

   1. コンテナーの [レイアウト] を [横方向] に変更します。
   2. コンテナーの [折り返しを許可] プロパティをオンにします。
   3. コンテナーの [幅] サイズを 100 % に設定します。

   

3. コンテナーに [テキストボックス] コントロールを追加します。

   1. [ラベル] プロパティに Name を追加します。
   2. [スタイル] タブで、[ラベル配置] を [上] に変更します。

4. 1 つ目の [テキストボックス] コントロールの後に、2 つ目の [テキストボックス] コントロールを追加します。

   1. [ラベル] プロパティに Age を追加します。
   2. [スタイル] タブで、[ラベル配置] を [上] に変更します。

5. 2 つ目の [テキストボックス] コントロールの後に、3 つ目の [テキストボックス] コントロールを追加します。

   1. [ラベル] プロパティに Address を追加します。
   2. [スタイル] タブで、[ラベル配置] を [上] に変更します。

6. 1 つ目のコンテナーの下に同じ [スタイル] プロパティを持つ 2 つ目のコンテナーを追加します。

7. 2 つ目のコンテナーに [ボタン] コントロールを追加します。

   

結果とテスト

アプリをプレビューおよびテストできるようになりました。

Google Chrome ブラウザーを使用してアプリをテストするには、以下の手順に従います。

1. ページの任意の場所を右クリックします。

2. メニューから [検証] を選択します。

3. 右側にあるメニューから、[デバイスのツールバーを切り替え] をクリックします。

4. ページ上部のドロップダウン リストから目的のサイズを選択して、アプリをテストします。

   

   注:

   コンテナー レイアウト コントロールの場合、内部のコンテナーは自動的にモバイルフレンドリーになります。コンテナー内のコントロールをリアクティブにする必要もある場合は、[折り返しを許可] プロパティを使用します。

詳細については、以下のサンプル アプリ ファイルをダウンロードできます。

サンプルをダウンロードする