Magento2 エクステンションの作成その2

1. 概要

Magento2 エクステンションの作成その1の続き。

ここでは、管理画面にページを追加するため、以下の作業を行う。

管理画面のメニューに項目を追加
管理画面のルートを作成
管理画面のコントローラーを作成

2. 管理画面内のURL

今回管理画面に追加するページのURLは、/admin/topic/posts/indexとする。このページに後々、ニュースの一覧を表示する。

3. メニューのカスタマイズ

まずは、管理画面にメニューを追加する。

メニューのカスタマイズにはetc/adminhtml/menu.xmlを作成し、そこにメニューの項目を定義する。

etc/adminhtml/menu.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
    <menu>
        <add id="BitHive_Topic::topic" title="Topic" module="BitHive_Topic" sortOrder="51" resource="BitHive_Topic::topic"/>
        <add id="BitHive_Topic::posts" title="Posts" module="BitHive_Topic" sortOrder="10" action="topic/posts" resource="BitHive_Topic::list" parent="BitHive_T
opic::topic"/>
    </menu>
</config>

このmenu.xmlではトップ階層にTopicメニューを作成し、サブメニューとしてPosts項目を追加している。Postsのリンク先はaction属性で指定し(topic/posts)、/admin/topic/posts/indexにリンクしている。

ファイル作成後、./bin/magento cache:cleanでキャッシュをクリアすれば、管理画面のメニューに項目が追加されているはず。

図1 追加されたメニュー

4. ルート(route)の定義

3.ではメニューの項目を追加したが、ルートもまだないため、メニューの[Topic]-[Posts]をクリックしても404 Errorになる。ページを表示するにはルートとコントローラーの作成が必要になる。

ここでは、管理画面用のルートを作成する。管理画面のルートはetc/adminhtml/routes.xmlで定義する。

etc/adminhtml/routes.xml

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="admin">
        <route frontName="topic" id="topic">
            <module name="BitHive_Topic"/>
        </route>
    </router>
</config>

管理画面内のルートについては、routerタグのidにadminを指定する。また、routeタグのfrontNameでURLを指定することになる。

URLの形式は admin/<frontName>/<Controllerクラス> の形になる。このため、上のroutes.xmlではadmin/topic/****に関するルートを作成したことになる。****の部分の文字列に応じて同名のコントローラが呼び出される。

id属性はfrontName属性と同じでよい。

5. コントローラーの作成

今度は、作成したルートに合わせてコントローラーの作成を行う。コントローラーはControllerディレクトリを作成し、その中に配置する。

4.で作成したルートは admin/topic/**** で今回追加したいページのURLは/admin/topic/posts/index。コントローラ(****)部分の名前がposts/indexなので、今回作成するコントローラのファイルはController/Adminhtml/Posts/Index.phpとなる。

コントローラーはMagento\Backend\App\Actionクラスを継承して作成する。

Controller/Adminhtml/Posts/Index.php

<?php
namespace BitHive\Topic\Controller\Adminhtml\Posts;

class Index extends \Magento\Backend\App\Action
{
    public function execute()
    {
        print 'posts/index page';
        return;
    }
}

コントローラーの処理はexecute()メソッドに記述する。ここでは、View等の処理は全て省略してprintでメッセージを表示するだけとする。

ここまでファイルを作成し、./bin/magento cache:cleanでキャッシュをクリア後、追加したメニューからadmin/posts/indexにアクセスすると'posts/index page'のメッセージが表示されるのが確認できるはず。

6. ビューを使ったページの表示

5.ではprintで直接メッセージを表示していたが、ビューを使ってページを表示するように修正する。

まずはコントローラーを以下のように修正する。

Controller/Adminhtml/Posts/Index.php

<?php
namespace BitHive\Topic\Controller\Adminhtml\Posts;

class Index extends \Magento\Backend\App\Action
{
    protected $pageFactory;

    public function __construct(
        \Magento\Backend\App\Action\Context $context,
        \Magento\Framework\View\Result\PageFactory $pageFactory
    )
    {
        $this->pageFactory = $pageFactory;

        return parent::__construct($context);
    }

    public function execute()
    {
        $resultPage = $this->pageFactory->create();

        // <title>変更
        $resultPage->getConfig()->getTitle()->prepend((__('Posts')));

        return $resultPage;
    }
}

ビューの生成にはPageFactoryを使用する。作成したビューに必要に応じてパラメータを設定してコントローラーから返せばよい。上の例ではウィンドウのタイトル(<title>タグ)を変更している。

なお、Magento2ではクラスのオブジェクトを取得したい場合は、コンストラクタの引数で型を指定しておくと、Dependency Injectionによりオブジェクトが生成されて渡されるので、これをメンバー変数に保存しておく形をとる。

7. layoutファイルの作成

6.ではビューを使うようにコントローラーを修正したが、ビュー用のテンプレートファイルを作成していないためまだ表示はできない。Magento2のビューでは、まずlayoutファイルというものでページの表示内容を記述する。

コントローラーからPageFactoryで生成したビューは自動的に以下のlayoutファイルを読み込む。

./view/{area}/layout/{route_id}_{controller_name}_{action_name}.xml

※{area}は管理画面内なら'adminhtml'、フロント側なら'frontend'。

今回はrouteのidはtopicで、URLはadmin/posts/indexなので、対象のレイアウトファイルはview/adminhtml/layout/topic_posts_index.xmlになる。このlayoutファイルを以下のように作成する。

view/adminhtml/layout/topic_posts_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchem
aLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <title>
            Posts
        </title>
    </head>
    <body>
        <referenceContainer name="content">
            <!-- 外部のテンプレートファイルを読み込みview/adminhtml/templates/posts.htmlを参照 -->
            <block class="Magento\Backend\Block\Template" template="BitHive_Topic::posts.phtml"/>
        </referenceContainer>
    </body>
</page>

HTMLで表示内容を記述したい場合は、<block>タグでテンプレートファイルを指定する。上記ではposts.phtmlを指定し、これはview/adminhtml/templates/posts.phtmlファイルを参照している。

view/adminhtml/templates/posts.phtml

<p>posts/index page</p>

これでビューに関するファイルの作成は完了。

コントローラークラスの引数を変更したので./bin/magento setup:di:compile の実行と /bin/magento cache:clean でキャッシュをクリアすれば、以下のようにページが表示されるようになる。

図2 ビューを使って表示したページ

現時点でTopic配下は以下のようになっている。

./registration.php
./view/adminhtml/templates/posts.phtml
./view/adminhtml/layout/topic_posts_index.xml
./Setup/InstallSchema.php
./Controller/Adminhtml/Posts/Index.php
./etc/module.xml
./etc/adminhtml/menu.xml
./etc/adminhtml/routes.xml

今回はここまで。次回はModelクラスを作成し、CRUD処理を作成する準備を整る。Magento2 エクステンションの作成その3に続きます。

Magento2 エクステンションの作成 その2