反応型レイアウトの作成

反応型のモバイル対応アプリケーションの場合、グリッドシステムを使用してレイアウトを作成します。

反応型設計により、アプリケーションページや Web サイトを画面サイズに合わせて適切に拡大縮小することができます。この設計では、流動的なグリッドとメディアクエリを使用してさまざまな画面に適したレイアウトを表示します。反応型設計は、アプリケーションの保守性と信頼性を向上させると同時に、さまざまなブラウザとプラットフォームに対応できる将来性を確保することができます。

反応型レイアウトを作成するための最初のステップは、流動的なグリッドを実装することです。SLDS グリッドユーティリティには、詳細な列制御が可能なモバイルファーストのレイアウトシステムが装備されています。グリッドシステムを Lightning Web コンポーネントに実装するには、lightning-layout と lightning-layout-item 基本コンポーネントを使用します。流動的なグリッドを実装すると、特定のブレークポイントでレイアウトが崩れ始めます。このレイアウトの問題を解決するために、メディアクエリは各ブレークポイントでのレイアウトの見え方を決定します。これらの反応型ブレークポイントは lightning-layout-item に組み込まれており、各列が画面サイズにどのように調整されるかを定義することができます。

では、1 列のグリッドから始めましょう。視覚的にはシンプルであるにもかかわらず、この例では次のような個別のレベルのコンテインメントが 3 つあります。lightning-card 基本コンポーネントは、コンテンツの四隅が丸いコンテナを定義します。lightning-layout 基本コンポーネントは、slds-grid クラスを使用してコンテンツを囲むラッパーを作成します。lightning-layout-item コンポーネントは、slds-col クラスを使用して列を作成します。

列数を増やすには、コンテンツのある別の lightning-layout-item を追加します。

読みやすいモバイルコンテンツになるように調整してみましょう。各列を全幅にするには、size="12" 追加します。12 列のグリッドは最も頻繁に使用される SLDS グリッドです。このグリッドでは、lightning-layout-item の size 属性は 1 ～ 12 の値を受け入れます。

lightning-layout の複数行属性は、列を新しい行にラップする slds-wrap クラスをコンテナに追加します。

タブレットやデスクトップでページを表示する場合、サイドバー列はメインコンテンツ列と横方向に揃える必要があります。small-device-size="9" を使用して、コンテナ幅の 75% を占めるようにメインコンテンツの幅を指定します。「lightning-layout-item」を参照してください。

単にマークアップを使用するだけで、デスクトップ/タブレットおよび電話/小型モバイル機器の両方にサイズの詳細を提供できます。これは比率ベースであり、デバイスが独自の画面サイズに合わせて効果的に適切なレイアウトを選べるようになっています。

ここまで、反応型レイアウトを使用した Lightning Web コンポーネントの作成について説明してきました。コンポーネントを Lightning Experience または Salesforce モバイルアプリケーションで使用できるようにするにはどうすればよいでしょうか? Lightning Web コンポーネントは Lightning ページやタブを介して表示することができます。

組織の Lightning ページは、デフォルトでデスクトップとモバイルのフォーム要素をサポートしています。そのため、コンポーネントを反応型設計に従って作成し、デバイス間でシームレスに動作するようにすることが重要です。

Lightning ページの作成には、Lightning アプリケーションビルダーを使用することをお勧めします。Lightning アプリケーションビルダーでは、必要なレイアウトが設定されているテンプレートを選択して、カスタムコンポーネントをページ上にドラッグできます。選択したテンプレートは、デバイスでのページの表示方法を制御します。Lightning ページの構造は、それを表示するデバイスに適合されます。Salesforce ヘルプの「Lightning ページ」を参照してください。

希望するテンプレートが見つからない場合は、Aura コンポーネントを使用してカスタムテンプレートを作成します。「カスタム Lightning ページテンプレートコンポーネントの作成」を参照してください。Lightning Web コンポーネントを使用したカスタムテンプレートの作成はサポートされていません。

Lightning ページの代わりにカスタムタブを使用して、Lightning Web コンポーネントを表示することもできます。カスタムタブを使用する場合、Lightning アプリケーションビルダーではタブのコンテンツとレイアウトを編集または設定できません。また、カスタムタブは自動的には異なるデバイスや画面サイズに適応しません。そのため、カスタムタブを使用可能にする前に、コンポーネントが反応型設計ガイドラインに従っていることを確認してください。「カスタムタブ」を参照してください。