[comment]: # aside:1

[comment]: # ({b311df1e-8fe7205c})
# モジュールの作成 (チュートリアル)

[comment]: # ({/b311df1e-8fe7205c})

[comment]: # ({98067368-5fb5b83a})
これは、シンプルなZabbixフロントエンドモジュールを作成する方法を示すステップバイステップのチュートリアルです。
このモジュールのすべてのファイルをZIPアーカイブとしてダウンロードできます: [MyAddress.zip](../../../../assets/en/devel/modules/examples/MyAddress.zip)。

[comment]: # ({/98067368-5fb5b83a})

[comment]: # ({5fe8674d-5ce71b9d})
### 作成するもの

このチュートリアルでは、まず新しい*My Address*メニューセクションを追加するフロントエンドモジュールを構築し、次にそれを[より高度な](#part-iii---module-action)フロントエンドモジュールに変換します。このモジュールは、*https://api.seeip.org*にHTTPリクエストを送信し、レスポンス(コンピューターのIPアドレス)を新しく作成された*My Address*メニューセクションの新しいページに表示します。
完成したモジュールは次のようになります:

![](../../../../assets/en/devel/modules/tutorials/module/my_address_finished.png){width="600"}

[comment]: # ({/5fe8674d-5ce71b9d})

[comment]: # ({a5c86d2c-8c2bcd9e})
### パート I - 新しいメニューセクション

[comment]: # ({/a5c86d2c-8c2bcd9e})

[comment]: # ({9c416cbb-1d4de634})
##### Zabbixフロントエンドに空のモジュールを追加

1. Zabbixフロントエンドインストールの*modules*ディレクトリに*MyAddress*ディレクトリを作成します (例: *zabbix/ui/modules*)。

2. 基本モジュールのメタデータを含む*manifest.json*ファイルを作成します (サポートされている[パラメーター](../file_ Structure/manifest)の説明を参照)。

**ui/modules/MyAddress/manifest.json**

```json
{
    "manifest_version": 2.0,
    "id": "my-address",
    "name": "My IP Address",
    "version": "1.0",
    "namespace": "MyAddress",
    "description": "My External IP Address."
}
```

3. Zabbixフロントエンドで、*管理 → 一般 → モジュール*セクションに移動し、*ディレクトリのスキャン*ボタンをクリックします。

![](../../../../assets/en/devel/modules/tutorials/widget/scan_dir.png)

4. リスト内で新しいモジュール*My IP Address*を見つけ、"無効"ハイパーリンクをクリックしてモジュールのステータスを"無効"から"有効"に変更します (モジュールがリストされていない場合、[トラブルシューティング](/manual/extensions/frontendmodules#installation)セクションを確認してください)。

![](../../../../assets/en/devel/modules/tutorials/module/module_register.png){width="600"}

これで、モジュールがフロントエンドに登録されました。ただし、モジュールの機能を定義する必要があるため、まだ表示されていません。
モジュールディレクトリにコンテンツを追加し、ページを更新すると、Zabbixフロントエンドの変更がすぐに表示されます。

[comment]: # ({/9c416cbb-1d4de634})

[comment]: # ({64c4a481-d88b8114})
##### メニューセクションの作成

1. *MyAddress*ディレクトリに*Module.php*ファイルを作成します。

このファイルは、デフォルトの*CModule*クラスを拡張する新しい*Module*クラスを実装します。
*Module*クラスは、新しい*My Address*メニューセクションをメインメニューに挿入します。

*setAction()*メソッドは、メニューセクションをクリックしたときに実行されるアクションを指定します。
まず、事前定義されたアクション*userprofile.edit*を使用すると、*ユーザープロファイル*ページが開きます。
このチュートリアルの[パートIII](#part-iii---module-action)では、カスタムアクションの作成方法を学習します。

**ui/modules/MyAddress/Module.php**

```php
<?php

namespace Modules\MyAddress;

use Zabbix\Core\CModule,
    APP,
    CMenuItem;

class Module extends CModule {

    public function init(): void {
        APP::Component()->get('menu.main')
            ->add((new CMenuItem(_('My Address')))
            ->setAction('userprofile.edit'));
    }
}
```

:::noteclassic
`'userprofile.edit'`を他のアクション、たとえば`'charts.view'`(カスタムグラフを開く)、`'problems.view'`(*データ監視 → 障害*を開く)、または `'report.status'`(*システム情報*レポートを開く)に置き換えることができます。
:::

3. Zabbixフロントエンドを更新します。Zabbixメインメニューの下部に、新しい*My Address*セクションが追加されました。
*My Address*をクリックして、*User profile*ページを開きます。

![](../../../../assets/en/devel/modules/tutorials/module/my_address_top_menu.png){width="600"}

[comment]: # ({/64c4a481-d88b8114})

[comment]: # ({89dbfda8-5c3fc480})
### パート II - メニューセクションの位置変更

このパートでは、*My Address*メニューセクションを*監視データ*セクションに移動しし、そこにネストされたメニューを追加します。
その結果、ユーザーは*監視データ → マイ アドレス*メニューセクションから2つのサブメニューページにアクセスできるようになります。

1. *Module.php*ファイルを開いて編集します。

**ui/modules/MyAddress/Module.php**

```php
<?php

namespace Modules\MyAddress;

use Zabbix\Core\CModule,
    APP,
    CMenuItem;

class Module extends CModule {

    public function init(): void {
        APP::Component()->get('menu.main')
            ->findOrAdd(_('Monitoring'))
            ->getSubmenu()
            ->insertAfter(_('Discovery'),
                (new CMenuItem(_('My Address')))->setAction('userprofile.edit')
            );
    }
}
```

2. Zabbixフロントエンドを更新します。 *監視データ*メニューセクションを展開し、*My address*セクションが*ディスカバリ*セクションの下にあることを確認します。

![](../../../../assets/en/devel/modules/tutorials/module/my_address_monitoring.png){width="600"}

3. ネストされたページを*My Address*メニューセクションに追加するには、*Module.php*ファイルを再度開いて編集します。

このステップでは、2つのサブセクションが作成されます。

-   次の手順で定義する新しい'my.address'アクションを実行する*External IP*。
-   *User profile*ページを開くための事前定義された'userprofile.edit'アクションを実行する*User profile*。

ネストされたメニューの場合は、前の手順で使用したクラスに加えて*CMenu*クラスを使用する必要があることに注意してください。

**ui/modules/MyAddress/Module.php**

```php
<?php

namespace Modules\MyAddress;

use Zabbix\Core\CModule,
    APP,
    CMenu,
    CMenuItem;

class Module extends CModule {

    public function init(): void {
        APP::Component()->get('menu.main')
            ->findOrAdd(_('Monitoring'))
            ->getSubmenu()
            ->insertAfter(_('Discovery'),
                (new CMenuItem(_('My Address')))->setSubMenu(
                    new CMenu([
                        (new CMenuItem(_('External IP')))->setAction('my.address'),
                        (new CMenuItem(_('User profile')))->setAction('userprofile.edit')
                    ])
                )
            );
    }
}
```

4. Zabbixフロントエンドを更新します。*My address*メニューセクションに、*External IP*と*User profile*の2ページからなる第3レベルのメニューが含まれていることを確認します。

![](../../../../assets/en/devel/modules/tutorials/module/my_address_nested.png){width="600"}

[comment]: # ({/89dbfda8-5c3fc480})

[comment]: # ({6061bdad-8798eff6})
### パート III - モジュールアクション

アクションは、*actions/MyAddress.php*と*views/my.address.php*の2つのファイルに実装されます。
***actions/MyAddress.php***ファイルはビジネスロジックの実装を担当し、***views/my.address.php***ファイルはビューを担当します。

1. *MyAddress*ディレクトリに*actions*ディレクトリを作成します。

2. *actions*ディレクトリに*MyAddress.php*ファイルを作成します。

アクションロジックは*MyAddress*クラスで定義されます。
このアクションクラスは、*init()*、*checkInput()*、*checkPermissions()*、*doAction()*の4つの関数を実装します。
Zabbixフロントエンドは、アクションが要求されると*doAction()*関数を呼び出します。
この関数は、モジュールのビジネスロジックを担当します。

::: noteimportant
データは連想配列として編成する必要があります。
配列は多次元にすることができ、ビューで予期される任意のデータを含めることができます。
:::

**ui/modules/MyAddress/actions/MyAddress.php**

```php
<?php

namespace Modules\MyAddress\Actions;

use CController,
    CControllerResponseData;

class MyAddress extends CController {

    public function init(): void {
        $this->disableCsrfValidation();
    }

    protected function checkInput(): bool {
        return true;
    }

    protected function checkPermissions(): bool {
        return true;
    }

    protected function doAction(): void {
        $data = ['my-ip' => file_get_contents("https://api.seeip.org")];
        $response = new CControllerResponseData($data);
        $this->setResponse($response);
    }
}
```

3. *MyAddress*ディレクトリに新しいディレクトリ*views*を作成します。

4. *views*ディレクトリに*my.address.php*ファイルを作成し、モジュールビューを定義します。

変数`$data`は、特に定義しなくてもビューで使用できることに注意してください。
フレームワークは自動的に連想配列をビューに渡します。

**ui/modules/MyAddress/views/my.address.php**

```php
<?php

(new CHtmlPage())
    ->setTitle(_('The HTML Title of My Address Page'))
    ->addItem(new CDiv($data['my-ip']))
    ->show();
```

5. モジュールアクションは*manifest.json*ファイルに登録する必要があります。 *manifest.json*を開き、以下を含む新しいオブジェクト`actions`を追加します。

-   小文字(a~z)で書かれ、単語がドットで区切られたアクション名を持つアクションキー (例: `my.address`)
-   `my.address`オブジェクトの`class`キーの値としてのアクションクラス名 (`MyAddress`)
-   `my.address`オブジェクトの`view`キーの値としてのアクションビュー名 (`my.address`)

**ui/modules/MyAddress/manifest.json**

```json
{
    "manifest_version": 2.0,
    "id": "my-address",
    "name": "My IP Address",
    "version": "1.0",
    "namespace": "MyAddress",
    "description": "My External IP Address.",
    "actions": {
        "my.address": {
            "class": "MyAddress",
            "view": "my.address"
        }
    }
}
```

6. Zabbixフロントエンドを更新します。 *My address → External IP*をクリックして、コンピュータのIPアドレスを確認します。

![](../../../../assets/en/devel/modules/tutorials/module/my_address_finished.png){width="600"}

[comment]: # ({/6061bdad-8798eff6})