自作ショートコード実装してみた

エオルゼア時間表示

ショートコード例：ページ内でポップアップ

表示例：画面左上に表示されてホームページスクロールしても追従する

[eorzea_floating_clock
 popup="true"
 popup_position="left"
 format_et="24h"
 format_jt="24h"
 theme="pink"
 mascot="true"
 animate="pop"
 font_size="18px"
 show_on_mobile="true"
]

UsaNeko Eorzea Floating Clock

サーバー時刻同期・ET/JST対応フローティング時計（WordPress用）

本記事では、WordPressに
エオルゼア時間（ET）と日本時間（JST）を同時表示できるフローティング時計
を実装するための仕組みと、実装のポイントをメモとして残しておきます。

本コードは、
👉 実運用で使っている構成をベースに、ポイントだけ抜粋して紹介します。

---

この時計でできること

• エオルゼア時間（ET）をリアルタイム表示
• 日本時間（JST）を同時表示
• サーバー時刻と同期（閲覧者の端末時計ズレを補正）
• 昼／夜で配色とアイコンが自動切替
• 固定表示／インライン表示に対応
• ショートコードで簡単に設置可能
• 外部ライブラリ・外部CSSファイルは使用せず、WordPress標準機能のみで実装しています。

---

実装方針（先に結論）

この時計は、次の考え方で作られています。

• 1ページに1個置く前提
• 動作が分かりやすく、トラブルが起きにくい構成
• WordPress標準機能のみを使用
• 「高度すぎない」ことを重視

そのため、
ブログ内ツールとして扱いやすく、仕組みも理解しやすい構成にしています。

---

全体構成

PHPコードは、大きく次の3パートで構成されています。

① CSS（インラインCSSとして登録）
② サーバー時刻取得用 REST API
③ ショートコード（HTML + JavaScript）

---

① CSS：時計の見た目を定義

※以下は理解しやすいように要点のみ抜粋しています。

add_action( 'wp_enqueue_scripts', function () {
    wp_register_style( 'usaneko-eorzea-clock', false );
    wp_enqueue_style( 'usaneko-eorzea-clock' );
    wp_add_inline_style( 'usaneko-eorzea-clock', $css );
});

解説

• 外部CSSファイルは使用しません
• WordPressの wp_add_inline_style() を使い、CSSを安全に出力
• テーマやキャッシュ設定の影響を受けにくい構成です

昼夜テーマ切替

• .day / .night クラスをJavaScript側で制御
• 配色・文字色・アイコンをET基準で切替

---

② サーバー時刻取得 REST API

register_rest_route(
  'usaneko/v1',
  '/time',
  array(
    'methods'  => 'GET',
    'callback' => function () {
      return array(
        'server_ms' => (int) round( microtime( true ) * 1000 ),
      );
    },
    'permission_callback' => '__return_true',
  )
);

なぜサーバー時刻を使うのか？

JavaScriptの Date.now() は
👉 閲覧者のPCやスマホの時計に依存します。

そこでこのコードでは、

1. サーバーの現在時刻を取得
2. 通信遅延を考慮して補正
3. クライアント側の時計ズレを吸収

という仕組みを採用しています。

結果として、

どの端末で見ても、ほぼ同じ時刻を表示

できるようになります。

---

③ ショートコード（HTML + JavaScript）

ショートコード登録

add_shortcode( 'eorzea_floating_clock', 'usaneko_get_eorzea_clock_html' );

記事内では、次のように使えます。

[eorzea_floating_clock]

---

HTML構造

<div id="usaneko-eorzea-floating-clock">
  <span class="icon">☀️</span>
  <span class="label">Eorzea</span>
  <span id="usaneko-et">--:--</span>
  /
  <span class="label">Japan</span>
  <span id="usaneko-jt">--:--:--</span>
</div>

• #usaneko-et：エオルゼア時間
• #usaneko-jt：日本時間
• ☀️ / 🌙：昼夜状態アイコン

---

JavaScriptの仕組み（核心）

エオルゼア時間の計算

ET_RATE = 86400 / 4200;

• 現実時間 70分 = ET 24時間
• この比率を使ってET時刻を算出

---

サーバー時刻との同期

offsetMs = server_ms + (通信時間 / 2) - Date.now();

• サーバーとクライアントの時刻差を補正
• 表示は常に Date.now() + offsetMs

---

更新処理

setInterval(update, 1000);

• 毎秒 ET / JST を更新
• 60秒ごとにサーバー時刻を再同期

---

昼夜の自動切替

(et.hh >= 7 && et.hh < 18) ? "day" : "night";

• ET基準で昼夜を判定
• CSSクラスとアイコンを切替

---

ショートコード属性一覧

属性	説明
theme	green / pink / night
position	fixed / inline
top / right / bottom / left	固定表示時の位置
format_et	24h / 12h
format_jt	24h / 12h
mascot	true / false
popup	true / false
popup_position	center / left / right
show_on_mobile	true / false

※ 仕様はすべて 掲載コードどおり です。

---

注意点（重要）

• 1ページに1個のみ設置前提
• 複数設置するとIDが競合します
• 高度な最適化（JS遅延・結合）環境では挙動が変わる可能性があります
  （DOM生成タイミングやJavaScript実行順の影響を受けるため）

これは仕様上の割り切りで、プログラミングを学び始めた頃の自分でも管理できるシンプルさを優先しています。
※コードは自由に改変OKですが、複数設置（同一ページに2つ以上）はID競合で動作しないため非推奨です。

---

免責事項

本記事に掲載しているプログラムは、「うさねこ散歩」による個人のプログラム学習および検証を目的として作成された非公式ファンメイドプログラムです。 『ファイナルファンタジーXIV』は、株式会社スクウェア・エニックスの著作物です。 本ツールの利用により発生したいかなるトラブル・損害についても、作者は一切の責任を負いません。

書籍