前回は管理画面で設定した文字列をフッターに表示するエクステンションを作成しました。今回は前回作ったエクステンションを拡張して、エクステンション独自のページを表示する機能を追加してみましょう。今回の目的は以下のとおりです。Controllerの作成方法を理解するURLとControllerのマッピング方法を理解する画面レイアウトの定義方法を理解するLESSファイルの作成方法Controllerの定義方法がわかってくると、標準では存在しない構成のページを作成できるようになり、カスタマイズの幅が広がります。今回作成するもの今回作成するものは以下のとおりです。routes.xmlControllerが表示する画面レイアウトを定義したレイアウトXMLLESSファイル前回のものを土台に拡張するので、作成するファイル数は少ないですが、理解することは増えますので、じっくり理解しながら進めましょう。Controllerクラスを作成しようControllerとはControllerは、ブラウザやHTTPクライアントからのリクエストを受け付け、リクエストされた内容に基づいた結果を返す役割を担っています。Magento2系では、1つのControllerは1つの役割しか担えない構造になっているため、処理ごとにControllerクラスを定義する必要があります。Controllerの作成Controllerを作成するには、エクステンションのディレクトリの中で、以下の手順を行います。Controllerディレクトリを作成するControllerディレクトリの中に、ディレクトリを作成する(ここではIndexを作成します)Indexディレクトリの中に、Controllerクラスを記述するファイルを作成する(ここではIndex.phpを作成します)3までできたら、Index.phpを開いて、次のように記述します。}}記述できたら保存しておいてください。Controllerクラスの仕組みMagento2系におけるControllerクラスは、以下のルールに沿って作成することになっています。あることexecuteメソッドにそのControllerに担わせたい処理を記述するため、Magento2系のControllerは、原則1クラス1機能となっています。executeメソッドのなかでいろいろな分岐を書いても構いませんが、プログラムの簡潔さが損なわれ、テストもしにくくなりますので、やめておいたほうがよいでしょう。routes.xmlの作成routes.xmlは、Controllerクラス群に対し、エクステンション固有のURLを割り当てるために使用します。今回はフロントエンド用のroutes.xmlを作成するので、エクステンションのディレクトリの中で、以下の手順を行います。etc/frontendディレクトリを作成するetc/frontendディレクトリの中にroutes.xmlという名前のファイルを作成する2までできたら、routes.xmlを開いて、次のように記述します。</router></config>routes.xmlの仕組みroutes.xmlはかなりシンプルなXMLファイルです。基本的にはXSDファイル(XMLスキーマ定義ファイル)の定義どおり記述することになりますが、各タグの属性は以下の意味を持ちます。使用するルーターを指定する。フロントエンド用はstandard。管理画面用はadmin。この経路を使用するモジュールを指定する。エクステンション名を正しく指定すること。Magento2はXSDの定義に沿ってXMLファイルを評価するので、未定義のタグや属性は使用できません。レイアウトXMLを定義するさて、ここまできたらいよいよControllerに対応するレイアウトXMLの定義です。Magento2系では、1つのControllerに対して1つのレイアウトXMLを定義します。Magento1系のときは、1つのレイアウトXMLの中に複数の画面定義が記述できていたため、ファイルの内容が肥大化しがちで見通しがあまり良くありませんでした。Magento2系では基本的には1つの画面定義は1つのファイルにまとまるようになっているので、見通しは良くなっています。レイアウトXMLの作成では、レイアウトXMLを作成しましょう。前回はdefault.xmlを作成しましたが、今回は新しいファイルを作成します。Controllerと紐付けるレイアウトXMLを作成する場合、以下のルールに沿ってファイル名が定まるようになっています。<Controllerのフロント名>_<アクションのグループ名>_<アクション名>.xmlControllerのフロント名は、routes.xmlのrouteタグで定義したid属性の値。アクションのグループ名は、Controllerクラスを作成するときに作成したディレクトリ名を小文字にしたもの。アクション名はControllerクラスのファイル名を小文字にしたもの。ルールがきちんと決まっているので、うまく動かない場合はここまでの定義をよく見直してみてください。今回はroutes.xmlでフロント名をexampleと定義しているので、ファイル名はexample_index_index.xmlとなります。レイアウト定義の記述example_index_index.xmlを作成したら、ファイルを開いて、次のように記述します。</body></page>とりあえずここまでで前回フッターに表示したものと同じ内容が表示できるはずです。ファイルを保存し、Magentoのキャッシュをクリアしたあと、http(s)://<ホスト名>/example/index/indexにブラウザでアクセスして、次のような画面が表示されればOKです。LESSファイルを作成して、デザインをカスタマイズしようMagento2のCSSは現時点ではLESSを用いて定義する仕組みになっています。(もちろん普通のCSSも使えます)当然ながら、エクステンションで独自の定義を追加して、デザインをカスタマイズすることができます。LESSファイルを追加してみようLESSファイルの追加は、エクステンションのディレクトリ下で以下の手順で行います。ファイルを作成あとはこのファイルに必要な定義を書いていきます。今回は今表示されているメッセージの文字サイズを大きくしてみます。_module.lessを開いて、以下の定義を書き込んでください。}}保存したら、以下の操作を実行します。定義ができていれば、先程よりも文字が次のように大きく表示されると思います。あとはテンプレートにいろいろ追記したり、LESSファイルを調整したりしていくことで、いろいろと見た目を調整できます。終わりに今回はControllerと独自レイアウトのページ定義、LESSファイルの書き方を紹介しました。次回はデータベースを使った処理をご紹介したいと思います。