WordPress REST API を使ってレーダーチャートを作ってみた 
【希少！】A/C ファンモーターブラシスプリングリペア済み！ (Golf Mk1 Cabriolet 1990 ~ 1993) この記事は、デジタルキューブ ＆ ヘプタゴン Advent Calendar 2022 4日目の記事です。ちょっと遅くなっちゃいました。
デジタルキューブの保守チームでお客様のウェブサイトの運用・保守のお手伝いをしているフロントエンドエンジニアの西村です。主にテーマ・プラグインのカスタマイズをやっています。
目次
ネジが好きです
元単車屋です。
単車屋といっても偏っていまして、旧車の修理やレストアがメインでした。最近また人気が再燃しているようですが、ヨンフォア、Z400FX、CBX400F などなど当時から旧車扱いだったものばかり触っていました。
今は諸事情で単車に乗ることができなくなり、フォルクスワーゲンゴルフ1 カブリオレに乗っています。1.8 リッター SOHC エンジンです。SOHC 最高です。
乗り始めて 18年目になります。とにかく丈夫でパーツも未だ豊富に入手できます。
車体やエンジンを分解して並べて、指でオイルを塗りながらゆっくり組み上げるのが至福の時です。
旧車に限らずですが、車・単車ってネジが固着して回らなかったり以前の整備でネジの頭が潰れて工具でスムーズに緩めることができないものなどがあります。
それらをバーナーで炙ったり、ハンマーで殴ったり、削ったり、溶接したり、ありとあらゆる方法で緩めます。分解整備というよりこういった厄介な奴らを攻略する事に喜びを感じます。緩めた後のネジ穴の復旧も好きですね。
自分が一番好きなものは何か？を突き詰めて考えてみると車に乗ることよりネジを締めたり緩めたりすることが好き、に行き着きました。車に限らず緩んでいるネジを見つけるとつい手締めで限界まで締めます。先日はコワーキングスペースの背もたれのネジが緩んでいたので締めしました。思いっきり締めました。しばらくは大丈夫なはずです。
WordPress REST API 使ってレーダーチャート作成
WordPress REST API https://developer.wordpress.org/rest-api/
すっかり前置きが長くなりましたが、先日 WordPress REST API を使ってデータに基づいてレーダーチャートを出力させるタスクがありました。レーダーチャートはこんなやつ。
このレーダーチャートのフレームワークには vega を使用しています。
A Visualization Grammar | Vega https://vega.github.io/vega/
データを可視化できるツールでレーダーチャート以外にも様々なタイプのグラフやチャートを表示させることができます。データは json 形式で読み込ませるタイプ。今回はカスタムエンドポイントを追加して、https://private.hibou-web.com/wp-json/vega/v1/chart/投稿ID へアクセスすると、投稿に紐づいくカスタムフィールドの値を基にレーダーチャートを作ってみます。
json ファイルがあればそれで OK なんですが、投稿毎に物理ファイルを作成してしまうよりエンドポイントへアクセスして動的に json を返せば良いのでは？とチームからアイディアをもらって実装しました。
チームほんとありがたいです。チームはいい。
register_rest_route
register_rest_route() | Function | WordPress Developer Resources https://developer.wordpress.org/reference/functions/register_rest_route/
WordPress の場合サイト URL + /wp-json/ へアクセスするとデフォルトで様々なデータへアクセスできることがわかります。レスポンスは json 。
例えば、https://自分のサイト/wp-json/ へアクセスしてみてください。
register_rest_route はこの routes に独自のエンドポイントを追加することができる関数です。
今回は、ゴルフの各パーツのボルト・ナットの規定トルクをピックアップして可視化するエンドポイントを追加します。
register_rest_route(
$namespace, ← torque/v1
$route, ← /vega/(?P<id>\d+)
[
'methods' => 'GET',
'callback' => 'get_torque_data_json', ← コールバック (ここで json 作成)
]
);https://domain/torque/v1/vega/post_id/number へアクセスすると、vega 用の json を返すよう作成します。こんな感じ。
add_action ( 'rest_api_init', 'golf_bolt_nut_torque_toute' );
function golf_bolt_nut_torque_toute () {
register_rest_route (
'torque/v1',
'/vega/(?P<id>\d+)'
[
'methods' => 'GET',
'callback' => 'get_torque_data_json',
]
);
}
function get_torque_data_json ( $data ) {
$post_id = $data[id];
$torque_data = get_post_meta( $post_id, 'torque_data', true );
$vega_json = '';
if ( ! empty ( $torque_data ) ) {
$connecting_rod_cap = $torque_data['connecting_rod_cap'];
$vega_json .= '' . PHP_EOL;
[vega の json 作成]
...
...
...
}
return $vega_json;
}そしてチャート呼び出し。
<div id="view"></div>
<script>
vegaEmbed(
'#view',
"<?php echo home_url( '/' ); ?>wp-json/torque/v1/vega/<?php echo get_the_ID(); ?>",
);
</script>カスタムエンドポイントをもっと使っていこう
カスタムエンドポイントを作成したら、パーマリンクのフラッシュが必要です。
ダッシュボード > 設定 > パーマリンク で更新ボタンをクリックすれば OK。
json ファイル作成はちょっと面倒ですが、物理ファイル不要なすっきりした構成にすることができました。
vega の json はこちらです。
興味ありましたら試してみてください。
明日のアドベントカレンダーは？
@takagerbera さんで
「AWS re:Invent 5K RUN に参加しました」
です！