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

概要

UiPath Apps を使用して、モバイルフレンドリーなアプリを構築できます。携帯電話、タブレット、コンピューターなど、画面サイズが異なるデバイスでも問題なく同じアプリを使用できます。

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

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

チュートリアル

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

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

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

   2.1 コンテナーの [レイアウト] を [横方向] に変更します。

   2.2 コンテナーの [折り返しを許可] プロパティをオンにします。

   2.3 コンテナーの [幅] サイズを 100 % に設定します。
   
   

   

   
   

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

   3.1 [ラベル] プロパティに Name を追加します。

   3.2 [スタイル] タブで、[ラベル配置] を [上] に変更します。

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

   4.1 [ラベル] プロパティに Age を追加します。

   4.2 [スタイル] タブで、[ラベル配置] を [上] に変更します。

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

   4.1 [ラベル] プロパティに Address を追加します。

   4.2 [スタイル] タブで、[ラベル配置] を [上] に変更します。

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

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

   
   

   

   
   

結果とテスト

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

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

1. ページの任意の場所を右クリックします。
2. メニューから [検証] を選択します。
3. 右側にあるメニューから、[デバイスのツールバーを切り替え] をクリックします。

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

   
   

   

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

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

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