カスタムモジュール IP Checker を作ってみた

IPv4 または IPv6 のどちらでこのサイトに訪問しているかをサイドバーに表示させるブロックを作ってみた。
ただし、作ったのは Chat GPT-4 であって、自分の作業は数回のプロンプト入力と提案されたコードをコピペして適用しただけ。
以下は提案されたコードと実装の手順です。

Drupal 10のカスタムモジュールの作成

• modules ディレクトリ内に新しいディレクトリ（例： ip_checker）を作成します。
• .info.yml ファイル（例： ip_checker.info.yml）を作成し、以下の内容を追加します。

name: IP Checker
description: Checks if the user's IP address is IPv4 or IPv6.
package: Custom
type: module
core_version_requirement: ^10

• .module ファイル（例： ip_checker.module）を作成します。ただし、このモジュールは非常に基本的なもので、.module ファイルは空でも構いません。
• Drupalの管理画面から、作成したモジュールを有効化します。

カスタムブロックの作成と配置

• ip_checker モジュールディレクトリ内に src/Plugin/Block ディレクトリを作成します。
• このディレクトリ内に IpCheckerBlock.php という名前のファイルを作成し、以下の内容を追加します。

以下のコードだけではキャッシュの無効化は不十分でした。

<?php

namespace Drupal\ip_checker\Plugin\Block;

use Drupal\Core\Block\BlockBase;

/**
 * Provides a 'IP Checker' Block.
 *
 * @Block(
 *   id = "ip_checker_block",
 *   admin_label = @Translation("IP Checker Block"),
 *   category = @Translation("Custom"),
 * )
 */
class IpCheckerBlock extends BlockBase {

  /**
   * {@inheritdoc}
   */
  public function build() {
    $ip_address = \Drupal::request()->getClientIp();
    if(filter_var($ip_address, FILTER_VALIDATE_IP, FILTER_FLAG_IPV4)) {
        $ip_type = 'IPv4';
    } elseif(filter_var($ip_address, FILTER_VALIDATE_IP, FILTER_FLAG_IPV6)) {
        $ip_type = 'IPv6';
    } else {
        $ip_type = 'Unknown';
    }

    // 現在の日時を取得
    $current_date = date('Y-m-d H:i:s');

    return [
      '#markup' => $this->t('Your IP address type is: @type. <br> @date', ['@type' => $ip_type, '@date' => $current_date]),
      '#cache' => [
        'max-age' => 0,
      ],
    ];
  }

  /**
   * {@inheritdoc}
   */
  public function getCacheMaxAge() {
    return 0;
  }

}

• Drupalの管理画面から、作成したカスタムブロックをサイドバーに配置します。

Chat GPT-4 でのやりとりはこんな感じ。

キャッシュの無効化は最終的にモジュール Blocache（Block Cache Control）で解決した。
モジュールをインストールしてから、管理画面の「サイト構築＞ブロックレイアウト」から、追加したカスタムブロック IP Checker Block を設定する。
下画像のとおり Max-age を 0 にすることでキャッシュを無効化する。

管理画面の環境設定＞開発＞パフォーマンスからキャッシュをクリアの後、ブロック IP Checker を有効化したら、このサイトのサイドバー上部に表示されているとおり正常に動作した。

Chat GPT、便利だね。