レイアウトの作成 (1/6)
作成:2015-11-28 08:39
更新:2015-11-28 08:39
更新:2015-11-28 08:39
■レイアウト用テンプレートの仕組み
ここまで作成したCakePHP3のページでは、すべて統一されたページレイアウトで表示されていました。右上には「Documentation」「API」といったリンクが表示されていましたし、右下にはCakePHPのアイコンが表示されていましたね。また表示されるテキストやタイトル、フォームなどもすべて同じデザインになっていました。
これらは、すべて同じ「レイアウト」を使っていたため、同一されたデザインで表示されていたのです。CakePHP3では、「src」内の「Template」フォルダ内に、各アクションのテンプレートファイルを用意していました。が、これらのテンプレートファイルでは、表示されるWebページの全ソースコードではなく、<body>内にはめ込んで表示されるコンテンツ部分だけが作成されていました。それ以外の、ページ全体の枠組みは、実はレイアウト用のテンプレートによって用意されていたのです。
このレイアウト用連プレートは、「Template」内にある「Layout」フォルダの中にまとめられています。ここには、以下のようなテンプレートファイルが用意されています。
ajax.ctp――Ajax通信を使ってアクセスされた際に用いられます。Ajaxでは、ページのレイアウト等は必要なく、ただコンテンツだけがテキストとして得られればいいので、余計なものを全て排除したレイアウトが用意されます。
default.ctp――これが、通常のWebページ用に用意されているものです。これまで作成したWebページは、すべてこのレイアウトを使っていました。
error.ctp――エラー発生時に表示されるエラーページ用のレイアウトです。
rss/default.ctp――RSS情報などをXMLコードとして出力するような場合に用いるものです。
Email内のdefault.ctp――メールの内容を成済する際のもので、テキスト用とHTML用が用意されています。
ここに、自分で作成したレイアウトファイルを配置し、コントローラー側で使用するレウアウトを設定することで、オリジナルのレイアウトを使ったページの表示が行えるようになります。
これらは、すべて同じ「レイアウト」を使っていたため、同一されたデザインで表示されていたのです。CakePHP3では、「src」内の「Template」フォルダ内に、各アクションのテンプレートファイルを用意していました。が、これらのテンプレートファイルでは、表示されるWebページの全ソースコードではなく、<body>内にはめ込んで表示されるコンテンツ部分だけが作成されていました。それ以外の、ページ全体の枠組みは、実はレイアウト用のテンプレートによって用意されていたのです。
このレイアウト用連プレートは、「Template」内にある「Layout」フォルダの中にまとめられています。ここには、以下のようなテンプレートファイルが用意されています。
ajax.ctp――Ajax通信を使ってアクセスされた際に用いられます。Ajaxでは、ページのレイアウト等は必要なく、ただコンテンツだけがテキストとして得られればいいので、余計なものを全て排除したレイアウトが用意されます。
default.ctp――これが、通常のWebページ用に用意されているものです。これまで作成したWebページは、すべてこのレイアウトを使っていました。
error.ctp――エラー発生時に表示されるエラーページ用のレイアウトです。
rss/default.ctp――RSS情報などをXMLコードとして出力するような場合に用いるものです。
Email内のdefault.ctp――メールの内容を成済する際のもので、テキスト用とHTML用が用意されています。
ここに、自分で作成したレイアウトファイルを配置し、コントローラー側で使用するレウアウトを設定することで、オリジナルのレイアウトを使ったページの表示が行えるようになります。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※下図は、今回作成するレイアウトを使ったサンプルページ。
※関連コンテンツ
「初心者のためのCakePHP3 プログラミング入門」に戻る