このプラグインは、ユーザーが入力したドージコインのアドレスまたはトランザクションハッシュに基づいて、トランザクションの流れをグラフとして表示します
プラグインの構成
プラグインは、以下の主要なファイルとディレクトリで構成されています。
dogecoin-transaction-visualizer.php(メインプラグインファイル): プラグインの初期化、設定、ショートコードの処理、およびJavaScriptファイルの読み込みを行います。includes/Api.php: ドージコインのトランザクション情報を外部APIから取得するクラスが含まれています。includes/Visualizer.php: トランザクションデータを視覚化するためのHTML要素を生成するクラスが含まれています。includes/Settings.php: プラグインの設定ページを管理するクラスが含まれています。assets/css/style.css: グラフ表示のためのCSSスタイルシートが含まれています。assets/js/visualizer.js: グラフ描画のためのJavaScriptコードが含まれています。vendor/: Guzzle HTTPクライアントなどの外部ライブラリを格納するディレクトリ。
機能詳細
1. オートローディング
プラグインは、vendor/autoload.php が存在する場合はComposerのオートローダーを使用し、そうでない場合は独自のオートローダーを使用します。これにより、必要なクラスを動的に読み込み、コードの整理と管理を容易にします。
if (file_exists(__DIR__ . '/vendor/autoload.php')) {
require_once __DIR__ . '/vendor/autoload.php';
} else {
if (!class_exists('DogecoinVisualizer\Plugin')) {
class DogecoinVisualizer {
public static function autoload($class) {
if (strpos($class, 'DogecoinVisualizer\\') === 0) {
$class = str_replace('DogecoinVisualizer\\', '', $class);
$class = str_replace('\\', '/', $class);
require_once __DIR__ . '/includes/' . $class . '.php';
}
}
}
spl_autoload_register('DogecoinVisualizer::autoload');
}
}
2. Plugin クラス
このクラスはプラグインのメインクラスであり、以下の役割を担います。
- 初期化 (
__construct):Api,Visualizer,Settingsクラスのインスタンスを作成します。 - フックの設定 (
init): スクリプトのエンキュー、ショートコード、Ajaxハンドラー、管理メニューの設定を行います。 - スクリプトのエンキュー (
enqueue_scripts): スタイルシートとJavaScriptファイルを読み込みます。また、wp_localize_scriptを使用して、Ajax URL とプラグイン設定をJavaScriptに渡します。 - ショートコード (
shortcode):Visualizerクラスを使ってHTML要素を出力します。 - Ajaxハンドラー (
ajax_handler): JavaScriptからのAjaxリクエストを処理し、Apiクラスを使ってトランザクションデータを取得し、JSON形式で返します。 - エラーハンドリング (
format_error): APIからのエラーレスポンスをフォーマットします。
class Plugin {
private string $plugin_file;
private Api $api;
private Visualizer $visualizer;
private Settings $settings;
public function __construct(string $plugin_file) {
$this->plugin_file = $plugin_file;
$this->api = new Api();
$this->visualizer = new Visualizer();
$this->settings = new Settings();
}
public function init() {
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
add_shortcode( 'dogecoin_visualizer', array( $this, 'shortcode' ) );
add_action( 'wp_ajax_dtv_fetch_transactions', array($this,'ajax_handler'));
add_action( 'wp_ajax_nopriv_dtv_fetch_transactions', array($this, 'ajax_handler') );
add_action( 'admin_menu', array($this->settings, 'add_menu'));
}
// ...
}
3. Api クラス
このクラスは、外部APIとの通信を担当します。主な機能は以下の通りです。
- API URL生成 (
get_api_url): 入力されたアドレスまたはトランザクションハッシュに基づいて、APIエンドポイントのURLを生成します。 - トランザクションデータの取得 (
fetch_transactions):get_transientを使用して、キャッシュされたデータを取得します。- キャッシュが存在しない場合は、
GuzzleHttp\Clientを使用して外部APIからデータを取得します。 - 取得したデータをJSON形式でデコードし、
set_transientを使用してデータをキャッシュします。 - APIエラーを
WP_Errorオブジェクトとして返します。
class Api {
private const CACHE_KEY_PREFIX = 'dtv_cache_';
private const TRANSACTION_HASH_LENGTH = 64;
private const API_SUCCESS_STATUS = 'success';
private function get_api_url(string $address_or_hash): string {
$settings = new Settings();
$api_base_url = $settings->get_setting('api_endpoint', 'https://sochain.com/api/v2/DOGE/');
if (ctype_xdigit($address_or_hash) && strlen($address_or_hash) === self::TRANSACTION_HASH_LENGTH) {
return $api_base_url . 'transaction/' . $address_or_hash;
}
return $api_base_url . 'address/' . $address_or_hash;
}
/**
* Fetches Dogecoin transactions from a public API with caching.
*
* @param string $address_or_hash The Dogecoin address or transaction hash.
* @return array|WP_Error An array of transactions or a WP_Error object on failure.
*/
public function fetch_transactions(string $address_or_hash) {
// ...
}
}
4. Visualizer クラス
このクラスは、トランザクションの視覚化に必要なHTML要素（入力フォーム、ボタン、グラフコンテナ）を生成します。
class Visualizer {
/**
* Renders the Dogecoin transaction visualizer form and container.
*/
public function render() {
$address_placeholder = 'Enter Dogecoin Address or Transaction Hash';
$button_text = 'Visualize';
?>
<div class="dtv-container">
<input type="text" id="dtv-input" placeholder="<?php echo esc_attr($address_placeholder); ?>">
<button id="dtv-submit"><?php echo esc_html($button_text); ?></button>
<div id="dtv-graph"></div>
</div>
<?php
}
}
5. Settings クラス
このクラスは、プラグインの設定ページを管理します。
- 管理メニューの追加 (
add_menu): WordPressの管理メニューに設定ページを追加します。 - 設定ページの表示 (
render_settings_page): 設定ページのHTMLを生成します。 - 設定の登録 (
register_settings): 設定オプションを登録し、設定項目（APIエンドポイント、キャッシュ有効期限）を表示します。 - 設定のサニタイズ (
sanitize_settings): 設定値をサニタイズして安全に保存します。 - 設定値の取得 (
get_setting,get_plugin_settings): 保存された設定値を取得します。
class Settings {
public function add_menu() {
add_options_page(
'Dogecoin Visualizer Settings',
'Dogecoin Visualizer',
'manage_options',
'dogecoin-visualizer-settings',
array( $this, 'render_settings_page' )
);
}
// ...
}
6. assets/js/visualizer.js
このファイルには、グラフ描画のためのJavaScriptコードが含まれています。
- Ajaxリクエストの送信: 入力されたアドレスまたはハッシュをサーバーに送信し、トランザクションデータを取得します。
- エラーハンドリング: APIからのエラーメッセージをユーザーに表示します。
- トランザクションデータの処理: 取得したトランザクションデータを解析し、グラフ描画用のノードとエッジのデータを生成します。
- グラフの描画 (
renderGraph):cytoscape.jsライブラリを使用して、トランザクションデータをグラフとして表示します。 renderTransactions: 複数のトランザクションを処理し、それぞれの入出力関係をグラフ化します。renderTransactionDetails: 単一のトランザクション詳細（入力と出力）をグラフ化します。coseレイアウトを使用して、ノードの配置を最適化します。
(function($) {
$(document).ready(function() {
const $input = $('#dtv-input');
const $submit = $('#dtv-submit');
const $graphContainer = $('#dtv-graph');
const settings = dtv_ajax.settings || {};
$submit.on('click', function() {
// Ajaxリクエスト処理
});
function renderTransactionDetails(data){
// 単一トランザクション詳細描画処理
}
function renderTransactions(transactions) {
// 複数トランザクション描画処理
}
function renderGraph(nodes, edges) {
// cytoscape.jsによるグラフ描画処理
}
});
})(jQuery);
7. assets/css/style.css
このファイルには、プラグインで使用されるCSSスタイルが含まれています。主に、グラフコンテナのスタイル、要素の配置などを制御します。
技術的ポイント
- オブジェクト指向プログラミング: プラグインはオブジェクト指向プログラミングの原則に従って設計されており、各機能がクラスに分割されています。これにより、コードの再利用性と保守性が向上しています。
- 外部ライブラリ:
GuzzleHttp\Clientを使用してAPIリクエストを送信し、cytoscape.jsを使用してグラフを描画します。これらのライブラリは、プラグインの機能を拡張し、効率的な開発を可能にします。 - Ajax: トランザクションデータの取得はAjaxリクエストを使用して非同期に行われるため、ページのリロードなしにデータの取得と表示が可能です。
- キャッシュ: トランザクションデータはキャッシュされるため、APIリクエストの回数を減らし、パフォーマンスを向上させます。
- 設定ページ: プラグインの設定ページからAPIエンドポイントやキャッシュ有効期限を設定できます。これにより、プラグインの柔軟性が高まります。
- ショートコード:
まとめ
このプラグインは、ドージコインのトランザクションを視覚化するための包括的なソリューションを提供します。オブジェクト指向の設計、外部ライブラリの活用、Ajax、キャッシュ、設定ページなどの技術を組み合わせることで、効率的かつ使いやすいプラグインを実現しています。
この解説が、プラグインの構造と技術的な詳細を理解するのに役立つことを願っています。
