
この記事では、Magento 2 のバックエンドにアドミングリッドを作成する方法を紹介します。ご存知のように、Magento 2 のグリッドは、データベーステーブルのアイテムを一覧表示するテーブルの一種であり、ソート、フィルタ、削除、アイテムの更新などの機能を提供します。このためのHelloWorldは、製品のグリッド、顧客のグリッドです。
Magento 2 では、アドミングリッドを作るのに、レイアウトを使う方法と、コンポーネントを使う方法があります。ここではその詳細を説明します。続ける前に、グリッドについて学ぶために使用する管理メニュー、ルータを備えたシンプルなモジュールを作成するために、この記事に従ってください。この記事では、SmartOSC_HelloWorldというサンプルモジュールといくつかのデモデータを使用します。
目次
1:データベーススキーマの作成
app/code/SmartOSC/HelloWorld/Setup/InstallSchema.php
このファイルは、モジュールのインストール時に一度だけ実行されます。このファイルに内容を記述して、以下の表を作成します
<?php
namespace SmartOSC\HelloWorld\Setup;
class InstallSchema implements \Magento\Framework\Setup\InstallSchemaInterface
{
public function install(\Magento\Framework\Setup\SchemaSetupInterface $setup, \Magento\Framework\Setup\ModuleContextInterface $context)
{
$installer = $setup;
$installer->startSetup();
if (!$installer->tableExists('SmartOSC_helloworld_post')) {
$table = $installer->getConnection()->newTable(
$installer->getTable('SmartOSC_helloworld_post')
)
->addColumn(
'post_id',
\Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
null,
[
'identity' => true,
'nullable' => false,
'primary' => true,
'unsigned' => true,
],
'Post ID'
)
->addColumn(
'name',
\Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
255,
['nullable => false'],
'Post Name'
)
->addColumn(
'url_key',
\Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
255,
[],
'Post URL Key'
)
->addColumn(
'post_content',
\Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
'64k',
[],
'Post Post Content'
)
->addColumn(
'tags',
\Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
255,
[],
'Post Tags'
)
->addColumn(
'status',
\Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
1,
[],
'Post Status'
)
->addColumn(
'featured_image',
\Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
255,
[],
'Post Featured Image'
)
->addColumn(
'created_at',
\Magento\Framework\DB\Ddl\Table::TYPE_TIMESTAMP,
null,
['nullable' => false, 'default' => \Magento\Framework\DB\Ddl\Table::TIMESTAMP_INIT],
'Created At'
)->addColumn(
'updated_at',
\Magento\Framework\DB\Ddl\Table::TYPE_TIMESTAMP,
null,
['nullable' => false, 'default' => \Magento\Framework\DB\Ddl\Table::TIMESTAMP_INIT_UPDATE],
'Updated At')
->setComment('Post Table');
$installer->getConnection()->createTable($table);
$installer->getConnection()->addIndex(
$installer->getTable('SmartOSC_helloworld_post'),
$setup->getIdxName(
$installer->getTable('SmartOSC_helloworld_post'),
['name', 'url_key', 'post_content', 'tags', 'featured_image'],
\Magento\Framework\DB\Adapter\AdapterInterface::INDEX_TYPE_FULLTEXT
),
['name', 'url_key', 'post_content', 'tags', 'featured_image'],
\Magento\Framework\DB\Adapter\AdapterInterface::INDEX_TYPE_FULLTEXT
);
}
$installer->endSetup();
}
}
2:ルートの作成 管理者
ファイル:app/code/SmartOSC/HelloWorld/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 id="SmartOSC_helloworld" frontName="SmartOSC_helloworld">
<module name="SmartOSC_HelloWorld"/>
</route>
</router>
</config>
3:管理メニューの作成
管理メニュー/ルート:管理ページとメニューのリンク先には、SmartOSC_helloworldというルートを使用します。
SmartOSC_helloworld/post/index
4:コントローラーの作成
index.phpというコントローラファイルの作成
app/code/SmartOSC/HelloWorld/Controller/Adminhtml/Post/Index.php
以下の内容:
<?php
namespace SmartOSC\HelloWorld\Controller\Adminhtml\Post;
class Index extends \Magento\Backend\App\Action
{
protected $resultPageFactory = false;
public function __construct(
\Magento\Backend\App\Action\Context $context,
\Magento\Framework\View\Result\PageFactory $resultPageFactory
)
{
parent::__construct($context);
$this->resultPageFactory = $resultPageFactory;
}
public function execute()
{
$resultPage = $this->resultPageFactory->create();
$resultPage->getConfig()->getTitle()->prepend((__('Posts')));
return $resultPage;
}
}
5: 方法1 – コンポーネントを使ってAdmin Gridを作成する
5.1: リソースを宣言する
依存性注入ファイルでリソースを宣言する さて、グリッドのデータを取得するためにModelに接続するdi.xmlファイルを作成します。
ファイル:app/code/SmartOSC/HelloWorld/etc/di.xml
以下の内容で
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd">
<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
<arguments>
<argument name="collections" xsi:type="array">
<item name="SmartOSC_helloworld_post_listing_data_source" xsi:type="string">SmartOSC\HelloWorld\Model\ResourceModel\Post\Grid\Collection</item>
</argument>
</arguments>
</type>
<virtualType name="SmartOSC\HelloWorld\Model\ResourceModel\Post\Grid\Collection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
<arguments>
<argument name="mainTable" xsi:type="string">SmartOSC_helloworld_post</argument>
<argument name="resourceModel" xsi:type="string">SmartOSC\HelloWorld\Model\ResourceModel\Post</argument>
</arguments>
</virtualType>
</config>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<update handle="styles"/>
<body>
<referenceContainer name="content">
<uiComponent name="SmartOSC_helloworld_post_listing"/>
</referenceContainer>
</body>
</page>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="provider" xsi:type="string">SmartOSC_helloworld_post_listing.SmartOSC_helloworld_post_listing_data_source</item>
<item name="deps" xsi:type="string">SmartOSC_helloworld_post_listing.SmartOSC_helloworld_post_listing_data_source</item>
</item>
<item name="spinner" xsi:type="string">spinner_columns</item>
<item name="buttons" xsi:type="array">
<item name="add" xsi:type="array">
<item name="name" xsi:type="string">add</item>
<item name="label" xsi:type="string" translate="true">Add New Post</item>
<item name="class" xsi:type="string">primary</item>
<item name="url" xsi:type="string">*/*/new</item>
</item>
</item>
</argument>
<dataSource name="nameOfDataSource">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider</argument>
<argument name="name" xsi:type="string">SmartOSC_helloworld_post_listing_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">post_id</argument>
<argument name="requestFieldName" xsi:type="string">id</argument>
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
<item name="update_url" xsi:type="url" path="mui/index/render"/>
<item name="storageConfig" xsi:type="array">
<item name="indexField" xsi:type="string">post_id</item>
</item>
</item>
</argument></argument>
</dataSource>
<columns name="spinner_columns">
<selectionsColumn name="ids">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="resizeEnabled" xsi:type="boolean">false</item>
<item name="resizeDefaultWidth" xsi:type="string">55</item>
<item name="indexField" xsi:type="string">post_id</item>
</item>
</argument>
</selectionsColumn>
<column name="post_id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">textRange</item>
<item name="sorting" xsi:type="string">asc</item>
<item name="label" xsi:type="string" translate="true">ID</item>
</item>
</argument>
</column>
<column name="name">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">text</item>
<item name="editor" xsi:type="array">
<item name="editorType" xsi:type="string">text</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item> </item>
<item name="label" xsi:type="string" translate="true">Name</item>
</item>
</argument>
</column>
<column name="created_at" class="Magento\Ui\Component\Listing\Columns\Date">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">dateRange</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
<item name="dataType" xsi:type="string">date</item>
<item name="label" xsi:type="string" translate="true">Created</item>
</item>
</argument>
</column>
<column name="updated_at" class="Magento\Ui\Component\Listing\Columns\Date">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">dateRange</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
<item name="dataType" xsi:type="string">date</item>
<item name="label" xsi:type="string" translate="true">Modified</item>
</item>
</argument>
</column>
</columns>
</listing>
このコードでは、グリッドのレイアウト(ボタン、列)を宣言し、データソースを呼び出す方法を知ることができます。キャッシュを更新して、このグリッドページにアクセスすると、管理画面のグリッドが以下のように表示されます。

5.4: リストツールバーの作成
このページのトップで述べたように、Magento 2 のグリッドは、ソート、フィルタ、アクションの削除/更新など、グリッドを操作するためのアクションをサポートしています。ソート機能はグリッドのデフォルトアクションです。カラムのヘッダをクリックすると、アイテムがソートされます。ここでは、グリッドの他の機能を構築する方法について説明します。
そのためには、コンポーネント・レイアウト・ファイルで、親リストの下にリスト・ツールバー要素を作成します。
ファイル:app/code/SmartOSC/HelloWorld/view/adminhtml/ui_component/SmartOSC_helloworld_post_listing.xml
<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<!-- ... other block of code -->
<listingToolbar name="listing_top">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="sticky" xsi:type="boolean">true</item>
</item>
</argument>
</listingToolbar>
<!-- ... other block of code -->
</listing>
5.5: ブックマークの作成
この引数は、Magento/Ui/view/base/web/templates/grid/toolbar.htmlというテンプレートを定義するために使用されます。このテンプレートは、グリッド内のすべてのajax更新アクションを処理するためのknockout jsを定義するために読み込まれます。上記の機能は、このコンテナの中で定義します。このコンテナ要素をcolumns要素の前後に配置することで、ツールバーの位置を定義することができます(columnsの上または下)。各アクションの詳細を見てみましょう。ブックマーク
ファイル:app/code/SmartOSC/HelloWorld/view/adminhtml/ui_component/SmartOSC_helloworld_post_listing.xml
<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<!-- ... other block of code -->
<listingToolbar name="listing_top">
<!-- ... other block of code -->
<bookmark name="bookmarks"/>
</listingToolbar>
<!-- ... other block of code -->
</listing>
これにより、ブックマーク機能が追加され、管理者がグリッドの異なる状態を設定できるようになります。それぞれの状態には、異なるカラムリストがあります。これにより、各管理者は、自分に関連する情報を選択して表示することができます。
5.6: コラムの制御
このノードはカラムリストボックスを追加し、グリッドに表示するカラムを管理者が選択できるようにします。このリストを変更した後、管理者はその状態をブックマークとして保存し、その状態に素早くアクセスできるようにします。
ファイル: app/code/SmartOSC/HelloWorld/view/adminhtml/ui_component/SmartOSC_helloworld_post_listing.xml
<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<!-- ... other block of code -->
<listingToolbar name="listing_top">
<!-- ... other block of code -->
<columnsControls name="columns_controls"/>
</listingToolbar>
<!-- ... other block of code -->
</listing>
5.7: 全文検索
このノードは、グリッドの上部に検索ボックスを追加します。これを使って、テーブル内のすべてのデータを検索することができます。
ファイル:app/code/SmartOSC/HelloWorld/view/adminhtml/ui_component/SmartOSC_helloworld_post_listing.xml
<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<!-- ... other block of code -->
<listingToolbar name="listing_top">
<!-- ... other block of code -->
<filterSearch name="fulltext"/>
</listingToolbar>
<!-- ... other block of code -->
</listing>
5.8: フィルター
このノードでは、各カラムのフィルタボックスを定義します。これは、グリッドの上部にあるFilterボタンをクリックすると見ることができます。
ファイル:app/code/SmartOSC/HelloWorld/view/adminhtml/ui_component/SmartOSC_helloworld_post_listing.xml
<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<!-- ... other block of code -->
<listingToolbar name="listing_top">
<!-- ... other block of code -->
<filters name="listing_filters" />
</listingToolbar>
<!-- ... other block of code -->
</listing>
5.9:マス・アクション
このノードは、マスアクションセレクトをグリッドに追加します。管理者はこのアクションを使って、複数のアイテムに対して素早く何らかのアクションを起こすことができます。
ファイル:app/code/SmartOSC/HelloWorld/view/adminhtml/ui_component/SmartOSC_helloworld_post_listing.xml
<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<!-- ... other block of code -->
<listingToolbar name="listing_top">
<!-- ... other block of code -->
<massaction name="listing_massaction">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/tree-massactions</item>
</item>
</argument>
<action name="delete">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="type" xsi:type="string">delete</item>
<item name="label" xsi:type="string" translate="true">Delete</item>
<item name="url" xsi:type="url" path="SmartOSC_helloworld/post/massDelete"/>
<item name="confirm" xsi:type="array">
<item name="title" xsi:type="string" translate="true">Delete Post</item>
<item name="message" xsi:type="string" translate="true">Are you sure you wan't to delete selected items?</item>
</item>
</item>
</argument>
</action>
</massaction>
</listingToolbar>
<!-- ... other block of code -->
</listing>
5.10: ページング
このノードは、グリッドにページネーションを追加します。これは、テーブルに大量のデータがある場合に便利です。
ファイル:app/code/SmartOSC/HelloWorld/view/adminhtml/ui_component/SmartOSC_helloworld_post_listing.xml
<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<!-- ... other block of code -->
<listingToolbar name="listing_top">
<!-- ... other block of code -->
<paging name="listing_paging"/>
</listingToolbar>
<!-- ... other block of code -->
</listing>
5.11:エクスポートボタン
このノードは、グリッドのデータをエクスポートするためのエクスポートボタンを追加します。
<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<!-- ... other block of code -->
<listingToolbar name="listing_top">
<!-- ... other block of code -->
<exportButton name="export_button"/>
</listingToolbar>
<!-- ... other block of code -->
</listing>
5.12: エクスポートボタン
このノードは、グリッドのデータをエクスポートするためのエクスポートボタンを追加します。
<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<!-- ... other block of code -->
<listingToolbar name="listing_top">
<!-- ... other block of code -->
<exportButton name="export_button"/>
</listingToolbar>
<!-- ... other block of code -->
</listing>
キャッシュをクリアして、グリッドページに行ってみると、このようなグリッドが表示されます。

6: 方法2 – レイアウトを使ってAdmin Gridを作成する
重要 ステップ5の準備ができている場合は、このステップをスキップしてください。
コンポーネントを使ってMagento 2のグリッドを追加する方法を紹介しました。今度は、通常のレイアウト/ブロックファイルを使って行う方法を見てみましょう。
6.1: グリッド用ブロックの作成
ファイル:app/code/SmartOSC/Block/Adminhtml/Post.php
<?php
namespace SmartOSC\HelloWorld\Block\Adminhtml;
class Post extends \Magento\Backend\Block\Widget\Grid\Container
{
protected function _construct()
{
$this->_controller = 'adminhtml_post';
$this->_blockGroup = 'SmartOSC_HelloWorld';
$this->_headerText = __('Posts');
$this->_addButtonLabel = __('Create New Post');
parent::_construct();
}
}
Gridブロックは、MagentoBackend\BlockWidget\GridContainerを継承し、_construct()メソッドで変数を定義します。
- _blockGroupはVendorName_ModuleNameのフォーマットで、モジュールの名前です。
- controllerはBlockフォルダ内のGridブロックへのパスです。このhelloWorldでは、Adminhtml/Postフォルダ内にGrid.phpファイルを置いています。
- _headerTextは、グリッドのページタイトルです。
- _addButtonLabelは、新規追加ボタンのラベルです。
6.2: レイアウトファイルの作成
次に、Grid Blockに接続してグリッドをレンダリングするためのレイアウトファイルが必要です。このファイルを作ってみましょう。
ファイル:app/code/SmartOSC/HelloWorld/view/adminhtml/layout/SmartOSC_helloworld_post_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<update handle="styles"/>
<body>
<referenceContainer name="content">
<block class="SmartOSC\HelloWorld\Block\Adminhtml\Post" name="SmartOSC_post_grid">
<block class="Magento\Backend\Block\Widget\Grid" name="SmartOSC_post_grid.grid" as="grid">
<arguments>
<argument name="id" xsi:type="string">post_id</argument>
<argument name="dataSource" xsi:type="object">SmartOSC\HelloWorld\Model\ResourceModel\Post\Collection</argument>
<argument name="default_sort" xsi:type="string">id</argument>
<argument name="default_dir" xsi:type="string">ASC</argument>
<argument name="save_parameters_in_session" xsi:type="string">1</argument>
</arguments>
<block class="Magento\Backend\Block\Widget\Grid\ColumnSet" name="SmartOSC_post_grid.grid.columnSet" as="grid.columnSet">
<arguments>
<argument name="rowUrl" xsi:type="array">
<item name="path" xsi:type="string">*/*/edit</item>
</argument>
</arguments>
<block class="Magento\Backend\Block\Widget\Grid\Column" as="post_id">
<arguments>
<argument name="header" xsi:type="string" translate="true">ID</argument>
<argument name="index" xsi:type="string">post_id</argument>
<argument name="type" xsi:type="string">text</argument>
<argument name="column_css_class" xsi:type="string">col-id</argument>
<argument name="header_css_class" xsi:type="string">col-id</argument>
</arguments>
</block><block class="Magento\Backend\Block\Widget\Grid\Column" as="name">
<arguments>
<argument name="header" xsi:type="string" translate="true">Name</argument>
<argument name="index" xsi:type="string">name</argument>
<argument name="type" xsi:type="string">text</argument>
<argument name="column_css_class" xsi:type="string">col-id</argument>
<argument name="header_css_class" xsi:type="string">col-id</argument>
</arguments>
</block>
<block class="Magento\Backend\Block\Widget\Grid\Column" as="created_at">
<arguments>
<argument name="header" xsi:type="string" translate="true">Created</argument>
<argument name="index" xsi:type="string">created_at</argument>
<argument name="type" xsi:type="string">date</argument>
<argument name="column_css_class" xsi:type="string">col-id</argument>
<argument name="header_css_class" xsi:type="string">col-id</argument>
</arguments>
</block>
<block class="Magento\Backend\Block\Widget\Grid\Column" as="updated_at">
<arguments>
<argument name="header" xsi:type="string" translate="true">Modified</argument>
<argument name="index" xsi:type="string">updated_at</argument>
<argument name="type" xsi:type="string">date</argument>
<argument name="column_css_class" xsi:type="string">col-id</argument>
<argument name="header_css_class" xsi:type="string">col-id</argument>
</arguments>
</block>
</block>
</block>
</block>
</referenceContainer>
</body>
</page>
このレイアウトファイルでは、グリッドのためのいくつかの引数を定義します。主な引数はdataSourceです。この引数は、上記のdi.xmlファイルで宣言したdataSourceとリンクして、データベースに接続し、このグリッドのデータを取得します。
6.3: カラムの追加
Columnセットは、グリッドに表示されるカラムを定義します。massActionを使いたい場合は、このブロックをgrid要素に追加します。
<block class="Magento\Backend\Block\Widget\Grid\Massaction" name="SmartOSC.helloWorld.massaction" as="grid.massaction">
<arguments>
<argument name="massaction_id_field" xsi:type="string">post_id</argument>
<argument name="form_field_name" xsi:type="string">ids</argument>
<argument name="use_select_all" xsi:type="string">1</argument>
<argument name="options" xsi:type="array">
<item name="disable" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Delete</item>
<item name="url" xsi:type="string">*/*/massDelete</item>
</item>
</argument>
</arguments>
</block>
この後、キャッシュを更新し、グリッドページにアクセスして結果を確認してください。このように表示されることがあります。
