レスポンシブオーサリングにおけるコンポーネントヴィジビリティの調整

さまざまなフォームファクターのレスポンシブオーサリングを使用してページを作成する際、モバイルサイズで画像を非表示にする手順を実行して、コンポーネントを表示または非表示にする方法を説明します。

始める前に

必要なロール：ui_builder_admin

このタスクについて

ページの使いやすさを向上させる方法は、ブレークポイント間でコンポーネントを非表示にしたり、別のコンポーネントを表示したりすることです。コンポーネントヴィジビリティを使用する方法は無数にありますが、いくつか例を挙げます。

• デスクトップとタブレットのサイズでは、ページの上部に水平方向に複数のボタンコンポーネントを使用しますが、モバイルサイズでは、ボタンを非表示にしてドロップダウンコンポーネントを表示します。
• モバイルサイズでは小さいボタンサイズを使用しますが、ユーザーが親指で押すのに十分な大きさのボタンであることを確認します。モバイル用のボタンの配置を変更することも検討します。
• デスクトップとタブレットのページでは画像を使用しますが、モバイルでは画像、特に大きな画像は非表示にします。

この手順では、デスクトップとタブレットのフォームファクターでは上部にボタンを表示しますが、モバイルではボタンを非表示にしてドロップダウンコンポーネントを使用します。

手順

1. 次のように移動する。 All (すべて) > Now Experience フレームワーク > UI ビルダー.
2. 作業するエクスペリエンスを開くか、または [作成] > [エクスペリエンス] を選択してエクスペリエンスを作成します。
   エクスペリエンスの作成の詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
3. レスポンシブオーサリングでページを最初から作成します。
   ページを作成する方法の詳細については、「UI ビルダーでのページの作成」を参照してください。
4. 上部にある [デスクトップフォームファクター (desktop form factor)] アイコンが選択されていることを確認します。
   
5. コンテンツツリーの [本文] の下にある [+ コンテンツを追加] を選択して、列レイアウトを追加します。
6. [レイアウト] タブで、[単一列] を選択します。
7. 最初のボタンコンポーネントを追加します。
   1. ステージの新しい列の中央にある [+] アイコンを選択します。
   2. [コンポーネント] タブで、[ボタン] コンポーネントを見つけて選択します。
   3. 構成パネルで、[なし - コンポーネントを手動構成します (None - Configure the component manually)] を選択します。
   4. 構成パネルの [構成] タブで、Tasks と入力して、[ラベル] フィールドのデフォルトテキストを置き換えます。
      
   5. [保存] を選択します。
8. 手順 7 を 2 回繰り返してさらに 2 つのボタンを追加し、7d で、ボタンに Incidents と Changes という名前を付けます。
   注:

   ボタンを追加するには、コンテンツツリーの [ボタン 1] をポイントして [メニュー] アイコンを選択し、[後に追加] を選択します。

   

9. コンテンツツリーとページが正確であることを確認します。
   
10. 各ボタンの周囲にスペースを追加します。
    1. コンテンツツリーで、[ボタン 1] を選択します。
    2. [構成] パネルで、[スタイル] タブを選択します。
    3. [間隔] で [余白] を選択します。
    4. メニューで [XS] (極小) を選択します。
       
    5. [保存] を選択します。
11. 手順 10 を繰り返し、他の 2 つのボタンの周囲にスペースを追加します。
12. ボタンを縦方向から横方向に変更します。
    1. コンテンツツリーで [列 1] を選択します。
    2. 構成パネルの [方向] で、[行] アイコンを選択します。

       

    3. [保存] を選択します。
    ページがデスクトップの幅に合わせて適切に表示されます。

    

13. [タブレットフォームファクター (tablet form factor)] アイコンを選択します。

    

    ボタンの間隔や位置も、タブレットの幅に合わせて適切に表示されます。

    

14. [モバイルレスポンシブオーサリング (mobile responsive authoring)] アイコンを選択します。

    

    ボタンは、小さいサイズで水平方向のスペースのほとんどすべてを使用します。

    

15. ドロップダウンコンポーネントを追加します。
    1. ステージの上部にある [デスクトップフォームファクター (desktop form factor)] を選択します。
    2. コンテンツツリーの [ボタン 3] をポイントして [メニュー] アイコンを選択し、[後に追加] を選択します。
    3. [コンポーネント] タブで、[ドロップダウン] コンポーネントを見つけて選択します。
    4. 構成パネルで、[なし - コンポーネントを手動構成します (None - Configure the component manually)] を選択します。
    5. 構成パネルの [構成] タブで、[プレースホルダーテキスト] のデフォルトのテキストを削除し、[アイコン] の [メニューアウトライン (menu-outline)] を選択します。
       
    6. [保存] を選択します。
16. デスクトップとタブレットのフォームファクターで、ドロップダウンコンポーネントを非表示にします。
    1. コンテンツツリーで、[ドロップダウン 1] を選択します。
    2. 構成パネルの [構成] タブで、[コンポーネントヴィジビリティ] を選択してオプションを表示します。
    3. [コンポーネントを非表示] を選択します。
    4. [保存] を選択します。
17. モバイルフォームファクターで、ボタンコンポーネントを非表示にします。
    1. ステージの上部にある [モバイルフォームファクター (mobile form factor)] アイコンを選択します。
    2. コンテンツツリーで、[ボタン 1] を選択します。
    3. 構成パネルの [構成] タブで、[コンポーネントを非表示] を選択します。
    4. [ボタン 2] と[ボタン 3] について、手順 b ～ c を繰り返します。
    5. [保存] を選択します。
    2 つの場所は、ボタンコンポーネントがモバイルサイズで非表示になっていることを示しています。まず、構成パネルの [コンポーネントを非表示] オプションの横にある [モバイル] アイコンを選択します。値 (選択されたコンポーネントを非表示) がモバイルサイズ用であることを確認するメッセージが表示されます。

    

    次に、コンテンツツリーで、3 つのボタンコンポーネントが [非表示] アイコンとともに表示されます。
18. モバイルフォームファクターで、ドロップダウンコンポーネントを表示します。
    1. コンテンツツリーで、[ドロップダウン 1] を選択します。
    2. 構成パネルの [構成] タブで、[コンポーネントを非表示] を選択してフィールドをクリアします。
    3. [保存] を選択します。
19. [プレビュー] を選択します。
    モバイルフォームファクターが [メニュー] アイコンとともに表示されます。矢印を選択すると、デフォルトのオプション (リストアイテム 1、リストアイテム 2 など) が表示されます。タブレットとデスクトップのフォームファクターで使用可能な水平ボタンのように、[タスク]、[インシデント]、および [変更] を表示するよう、ドロップダウンコンポーネントを構成します。

    

20. 上部にある [デスクトップフォームファクター (desktop form factor)] アイコンと [タブレットフォームファクター (tablet form factor)] アイコンを選択します。
    デスクトップフォームファクターとタブレットフォームファクターには水平ボタンのみが表示され、[メニュー] アイコンは表示されません。
21. [X] を選択してプレビューオーバーレイを閉じます。