レスポンシブオーサリング
レスポンシブオーサリングを使用して、デスクトップ、タブレット、モバイルなどのさまざまなフォームファクター (サイズ) に合わせてスムーズに調整される UI ビルダー ページを作成します。
UI ビルダー のレスポンシブオーサリング
レスポンシブオーサリングを使用すると、どのフォームファクターでも外観と機能に優れたページを作成でき、ユーザーがコンテンツを簡単に操作できるようになります。たとえば、ラップトップで表示するときには 3 列のページを、小さな画面では 1 列に調整できます。
UI ビルダー は現在、次の 3 つのデフォルトフォームファクターを提供しています。
- デスクトップ (1281 ピクセルから無限大)
- タブレット (1280 ピクセル以下)
- モバイル (500 ピクセルからゼロ)
これらのフォームファクターに加えて、最大 3 つの追加カスタムブレークポイント (幅) を作成できます。詳細については、「レスポンシブオーサリングのブレークポイントの作成」を参照してください。
レスポンシブオーサリングとリフロー
Xanadu Store Release 1 では、UI ビルダー ページを最初から作成する場合にのみレスポンシブオーサリングを使用できます。レスポンシブオーサリングは、既存のページまたはテンプレートを使用して作成されたページでは使用できません。これらのタイプのページでは、既存のデフォルトのリフローモデルが引き続き使用され、さまざまな画面幅に合わせてページが調整されます。
リフローは、ユーザーがブラウザーのズームを 400% に拡大したときに、コンテンツや機能を失うことなく、ページレイアウトを縦長のスタックビューに自動的に変換します。この調整は、弱視のユーザーや、モニターのサイズ、デバイスの種類、照明が十分ではないなどの理由でブラウザ上の Web コンテンツが見づらいユーザーにとって便利です。
テンプレートを使用して作成された、または最初から作成されたすべての既存のページは、自動的にリフローを使用します。これで、UI ビルダー でページを最初から作成すると、追加の手順に、レスポンシブオーサリングがデフォルトで選択されていることが表示されます。「レスポンシブなしでビルド」を選択して、代わりにリフローを使用することもできますが、レスポンシブオーサリングオプションを使用すると、ページの動作方法や様々なフォームファクターの表示をより詳細に制御できます。UI ビルダー におけるページの作成の詳細については、「UI ビルダーでのページの作成」を参照してください。
リフローの詳細については、「Reflow for Configurable Workspace」を参照してください。
リフローをサポートする UI ビルダー コンポーネントのリストについては、『Next Experience コンポーネントリリースノート』の「リフローのサポート」セクションを参照してください。
変更の適用とカスケード
フォームファクターに加えられたすべての変更は、より小さいすべてのフォームファクターに自動的に適用されます。たとえば、タブレットに加えられた変更は、タブレットとモバイルの両方に適用されます。ただし、その後にモバイルフォームファクターに変更を加えると、タブレットフォームファクターからのカスケード設定が上書きされます。このカスケード機能により、より小さいフォームファクターごとに特定の変更を加えることができるため、ページの外観と機能を適切に保つことができます。
レスポンシブオーサリングとコントローラー
コントローラーをページに追加する場合、コントローラーのプロパティはグローバルであり、フォームファクターごとに設定することはできません。コントローラーの詳細については、「コントローラーを使用した UI ビルダー ページへのデータのバインド (高度な機能)」を参照してください。
ページ作成時のレスポンシブオーサリングの使用
ページをビルドする際、さまざまなフォームファクターのルックアンドフィールを制御するため、カスタマイズされたデザインを作成します。
デフォルトでは、ステージで、デスクトップ用のページ (1281 ピクセルから無限大) をビルドします。別のアイコンを選択して、タブレットやモバイルなどの別のフォームファクターで、いつでもステージ上のページを表示できます。必要に応じて、新しいフォームファクターで適切に表示されるようにページを編集します。
デスクトップフォームファクターでのサンプルページの外観を次に示します。
これは、タブレットのフォームファクター用にカスタマイズされた同じページです。
タブレットでは、見出しと画像のコンポーネントサイズが縮小されています。簡易リストコンポーネントの構成は、6 列ではなく 4 列表示に編集され、行の最大数は 5 に設定されています。フォームファクターのコンポーネントを編集すると、変更されたフィールドには、そのフォームファクター (この場合はタブレット) のカスケードアイコンが表示されます。このアイコンにより、特定のページのフォームファクター間の違いを簡単に判断できます。
これは、モバイルフォームファクター用にカスタマイズされた同じページです。
見出しの単語数が減り、画像コンポーネントが非表示になっています。簡易リストコンポーネント構成は、4 列ではなく 2 列表示に編集され、[すべて表示] フッターオプションを非表示にするオプションが選択されています。モバイル専用にカスタマイズされた 2 つのフィールドの横には、[モバイルカスケード (mobile cascading)] アイコンがあります。[最大行数] フィールドはタブレットの設定を継承しており、モバイル用にカスタマイズされていないため、[タブレットカスケード (tablet cascading)] アイコンが保持されます。
エディタービューのデフォルトのフォームファクターに加えて、[ピクセル] フィールドにはいつでも手動で数値を入力できます。ステージは、範囲に基づいて最も近いフォームファクターに調整されます。例えば、850 ピクセルと入力すると、タブレットの範囲が 1280 〜 501 ピクセルとして定義されているため、ステージはタブレットのフォームファクターに合わせて調整されます。
