[comment]: # translation:outdated

[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]: # ({b971a521-5ce71b9d})
### 作成するもの

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

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

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

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

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

[comment]: # ({a3380cc1-1d4de634})
##### Zabbix Webインターフェースに空のモジュールを追加する

1. Zabbix Webインターフェースのインストール先にある *modules* ディレクトリ内に、*MyAddress* ディレクトリを作成します（例: *zabbix/ui/modules*）。

2. 基本的なモジュールメタデータを含む *manifest.json* ファイルを作成します（サポートされている [parameters](../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 Webインターフェースで、*Administration → General → Modules* セクションに移動し、*Scan directory* ボタンをクリックします。

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

4. 一覧から新しいモジュール *My IP Address* を見つけ、"Disabled" ハイパーリンクをクリックして、モジュールのステータスを "Disabled" から "Enabled" に変更します（モジュールが一覧に表示されない場合は、[troubleshooting](/manual/extensions/frontendmodules#installation) セクションを参照してください）。

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

これでモジュールは Webインターフェースに登録されました。ただし、まだ表示されません。モジュールの機能を定義する必要があるためです。
モジュールディレクトリにコンテンツを追加すると、ページを更新した際に Zabbix Webインターフェース上で変更がすぐに反映されます。

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

[comment]: # ({b344c600-d88b8114})
##### メニューセクションを作成する

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

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

*setAction()* メソッドは、メニューセクションをクリックしたときに実行されるアクションを指定します。  
まずは、あらかじめ定義されている *userprofile.edit* アクションを使用できます。これにより *User profile* ページが開きます。  
このチュートリアルの [part 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'`（*Monitoring → Problems* を開く）、または `'report.status'`（*System information* レポートを開く）などです。
:::

3. Zabbix Webインターフェースを更新します。これで、Zabbix のメインメニューの下部に新しい *My Address* セクションが表示されます。  
*My Address* をクリックすると *User profile* ページが開きます。

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

[comment]: # ({/b344c600-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]: # ({01445d91-8798eff6})
### パート III - モジュールアクション

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

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

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

アクションロジックは *MyAddress* クラスで定義されます。
このアクションクラスは、*init()*, *checkInput()*, *checkPermissions()*, *doAction()* の 4 つの関数を実装します。
Zabbix Webインターフェースは、アクションが要求されたときに *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 Webインターフェースを更新します。*My address → External IP* をクリックすると、コンピューターの IP アドレスを確認できます。

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

[comment]: # ({/01445d91-8798eff6})