目的
Fioriらしいアプリを作るためには、Fioriのスタンダードな画面構造（レイアウト）を採用する必要があります。スタンダードなレイアウトにはどのようなものがあるのか、Fiori Design Guidelinesを参考にまとめました。
参考
Overview – Layouts, Floorplans, and Frameworks（Fiori Design Guidelines）より
関連記事
- 【Fiori】Dynamic Page, Semantic Page, Object Pageを比較する
- 【Fiori】Flexible Column Layoutを一から実装する（前編）
- 【Fiori】Flexible Column Layoutを一から実装する（後編）
2つの基本的なレイアウト
多くのFioriアプリのレイアウトは、以下の2つに大別されます。
- Dynamic page layout
- Flexible column layout
レイアウトはページの骨組みで、その中にfloorplanと呼ばれる画面の構造が入ります。
図：Overview – Layouts, Floorplans, and Frameworks（Fiori Design Guidelines）より引用
Floorplanとは
FloorplanについてはFiori Design Guidelinesに説明があります。
Floorplanは異なるレイアウトタイプ、使用されるコントロールの構造、異なるユースケースをどのように扱うか、などをカバーする包括的な用語です。ひとつのアプリケーションは通常、複数のページを持ち、各ページがひとつのFloorplanを表示します。
実際の例でいうと、WebIDEでテンプレートからアプリを登録するときにListReportやWorklistなどを選択できますが、それらをFloorplanと考えて差し支えないと思います。
以下では、2つの基本的なレイアウトについて説明します。
Dynamic page layout
Dynamic page layoutはヘッダ、コンテンツ、フッタからなる1ページのレイアウトです。ヘッダ部分は開いたり閉じたりすることができます。これがDynamic page layoutの最大の特徴で、開いたり閉じたりしなくてよい場合はシンプルにsap.m.Pageレイアウトを使ったほうがよいということです（API Referenceより）。
図：Dynamic Page Layout（Fiori Design Guidelines）より引用
Dynamic page layoutの実装方法
Fiori Design Guidelinesでは以下の方法が紹介されています。
- 自動的に：SAP Fiori element floorplanを使った場合
- SemanticPageを使って：フリースタイルのアプリを作る場合は、この方法を推奨。SemanticPageにもとからDynamicPageが埋め込まれているので、開発者はDynamicPageを意識する必要がない。
- マニュアルで（DynanicPageを使って）：技術的には可能だが、大変なのでお勧めしない
フリースタイルの場合は2, 3のいずれかになります。3は大変といわれていますが、SAPUI5サンプルにはDynanicPageを使ったサンプルも載っており、SmemanticPageと比べてもさほど大変そうには見えませんでした。
＜参考＞
Dynamic Pageに似ているObject page layout
少し横道にそれますが、1ページの画面を作るためのレイアウトにObject page layoutというものがあります。Dynamic Pageと同様にヘッダ、コンテンツ、フッタから構成されます。
コンテンツをセクションと呼ばれるグループに分けると、セクションごとにアンカーバー（タブのようなもの）が作られます。アンカーバーをクリックすることでセクションに飛ぶことができます。
Flexible column layout
Flexible column layoutは、複数（最大3つまで）のFloorplanをひとつのページに表示します。たとえば最初に一覧画面を表示し、明細の行をクリックすると詳細画面が右側に開くようなアプリで使われます。
図：Flexible Column Layout (Layout + SAP Fiori Elements)（Fiori Design Guidelines）より引用
Flexible column layoutの実装方法
フリースタイルのアプリの場合の代表的な実装方法は、ナビゲーションによる方法です。ルートとなるビューにsap.f.FlexibleColumnLayoutのインスタンスを登録しておき、ユーザの操作に応じて表示する画面を変更します。
＜参考＞
上記リンク先のサンプルで、3つに分かれたパーツのそれぞれの中ではDynamic Pageが使われていました。Flexible column layoutの中にDynamic Pageを入れ込むことができるということです。
このあと
Dynamic page、Semantic page、Object Pageはよく似ていますが、コンテンツの表示のされ方が微妙に変わります。同じコンテンツを配置したときにどのように見えるのか、サンプルを作ってみたいと思います。