新しいウィジェットを作成方法

#カスタムウィジェット
ウィジェットとは、ストアのページに動的またはスタティックコンテンツを追加するために使用されるMagento 2の機能があります。

#ウィジェットを作成
新しいウィジェットステップ：
1. `widget.xml`ファイルにウィジェットを宣言する
2. `widget.xml`ファイルにウィジェットのパラメーターを追加
3. ウィジェットを確認する
4. ウィジェットのブロッククラスを作成する
5. ウィジェットのテンプレートファイルを作成する
6. フロントエンドに表示を確認する

##`widget.xml`ファイルにウィジェットを宣言
`etc/widget.xml`ファイルに、名前、説明、ブロッククラスなどのウィジェット基本情報を定義します

```xml:Karabiner/Widget/etc/widget.xml
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
    <widget class="Karabiner\Widget\Block\Widget\Test" id="karabiner_test_widget">
        <label>New Widget</label>
        <description>This is a New Widget</description>
        <parameters>
            ...
        </parameters>
        <containers>
            ...
        </containers>
    </widget>
</widgets>
```

`module.xml`ファイルの`Magento_Widget`へのDependenciesを追加する必要があります。

```xml:Karabiner/Widget/etc/module.xml
...
<sequence>
    <module name="Magento_Widget" />
</sequence>
...
```
##`widget.xml`ファイルにウィジェットのパラメーターを追加
パラメータとして、以下のフィールドタイプ使用できる：
テキスト
セレクト
複数セレクト
ブロック

以下例はテキストとセレクトフィールドを追加しました

```xml:Karabiner/Widget/etc/widget.xml
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
    <widget class="Karabiner\Widget\Block\Widget\Test" id="karabiner_test_widget">
        ...
        <parameters>
            <!-- テキスト -->
            <parameter name="title" xsi:type="text" required="true" visible="true" sort_order="10">　
                <label>Label</label>
            </parameter>
            <!-- セレクト -->
            <parameter name="size" xsi:type="select" visible="true" required="true" sort_order="20"> 
                <label translate="true">Size</label>
                <options>
                    <option name="s" value="S">
                        <label>S</label>
                    </option>
                    <option name="m" value="M" selected="true">
                        <label>M</label>
                    </option>
                    <option name="l" value="L">
                        <label>L</label>
                    </option>
                </options>
            </parameter>
        </parameters>
    </widget>
</widgets>
```

##ウィジェットを確認する
キャッシュクリアコマンド `php bin / magento cache：flush` を実行した後

       Admin panel > Content > Pages > Homepage(または任意のページ) > Edit


[コンテンツ]タブで、[ウィジェットの挿入]アイコンをクリックします。

![widget-icon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275433/a3131e7b-30c9-d502-7ff3-83b8e50d3cf5.png)


![custom-widget-options.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275433/05b0344b-93b2-d55b-94f4-8922f2527a4e.png)

##ウィジェットのブロッククラスを作成する
ブロッククラスは、テンプレートファイルにデータを提供するクラスです。
このクラスの`$_template = "widget/test.phtml`はテンプレートファイル場所を設定します

```php:Karabiner/Widget/Block/Widget/Test.php
namespace Karabiner\Widget\Block\Widget;

use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;

class Test extends Template implements BlockInterface
{
    protected $_template = "widget/test.phtml";
}
```
##ウィジェットのテンプレートファイルを作成する

フロントエンドでウィジェットのデータを表示するために使用されるテンプレートを作成します。

```php:Karabiner/widget/view/frontend/templates/widget/test.phtml
<?php
/** \Karabiner\Widget\Block\Widget\Test $block */
?>
<h3><?= $block->escapeHtml($block->getData('title')) ?></h3>
<h3><?= $block->escapeHtml(__('Size:')) ?> <?= $block->escapeHtml($block->getData('size')) ?></h3>
```

##フロントエンドに表示を確認する
以下のコマンドを使用して、Magentoキャッシュを削除します。

    php bin/magento cache:flush

ウィジェットがフロントエンドに表示されるようになりました。
![custom-widget-result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275433/481279df-06a4-70ea-5b91-f042ed74f453.png)