プログラムガイド

WordPress 上で、YouTube 大型企画向けのテレビ番組表を管理・公開する独立プラグインです。

開発前の環境確認

確認日: 2026-07-28

• 提供された作業フォルダは空で、既存の Git リポジトリではありませんでした。
• WordPress 本体、wp-config.php、テーマ、既存プラグインは提供されていません。
• PHP CLI と WP-CLI は作業環境にインストールされていません。
• そのため、使用中テーマや既存プラグインとの実環境上の競合確認、WordPress 統合テストは未実施です。
• この成果物は WordPress 6.5 以上、PHP 8.1 以上を想定します。

実環境へ導入する前に、ステージング環境で使用中テーマ、キャッシュ／SEO／カスタム投稿タイプ関連プラグインとの結合確認を行ってください。

設計方針

• WordPress 本体やテーマを変更せず、単独で有効化できるプラグインとします。
• PHP の名前空間は ReverV\ProgramGuide、内部識別子は rpg_、メタキーは _rpg_ で始めます。
• 仕様で固定された投稿タイプ program が既に登録されている場合は、上書きせず管理者へ競合警告を表示します。
• 番組説明は投稿本文、サムネイルはアイキャッチ画像、公開／非公開は WordPress 標準の投稿ステータスを利用します。
• 番組ジャンルは階層型カスタムタクソノミー program_genre とします。
• 番組表はショートコード [reverv_program_guide] から出力し、テーマに依存しない BEM 風の rpg- CSS クラスを使用します。
• 詳細ページだけプラグインのテンプレートへ差し替え、ヘッダーとフッターは有効テーマのものを利用します。
• 第4段階の検索・絞り込み、第5段階の現在時刻連動、第6段階の管理画面編集まで実装します。第7段階の画像書き出しは今回の対象外です。

データモデル

カスタム投稿タイプ

項目	設計
投稿タイプ	program
管理画面表示	番組
本文	番組説明
アイキャッチ	サムネイル
投稿状態	公開／非公開（WordPress 標準）
リビジョン	有効
REST API	有効

カスタムタクソノミー

項目	設計
タクソノミー	program_genre
管理画面表示	番組ジャンル
形式	階層型
REST API	有効

メタデータ

メタキー	型	内容	保存時の検証
_rpg_event_date	string	開催日 Y-m-d	実在日を検証
_rpg_start_time	string	開始時刻 H:i	24時間表記を検証
_rpg_end_time	string	終了時刻 H:i	24時間表記を検証
_rpg_performers	string	出演者名	sanitize_text_field
_rpg_youtube_url	string	YouTube 配信 URL	HTTPS と YouTube ホストを検証
_rpg_status	string	配信状態	許可リストで検証
_rpg_priority	integer	表示優先順位	整数化
_rpg_featured	boolean	注目番組	真偽値化

終了時刻が開始時刻以前の場合は、日付をまたぐ番組として保存を許可し、管理画面に警告を表示します。これにより「警告する」と「日付をまたぐ番組を表示する」の両要件を両立します。

配信状態

• scheduled: 配信予定
• soon: まもなく配信
• live: 配信中
• ended: 配信終了
• cancelled: 配信中止

第1〜第6段階の実装計画

第1段階: 基本的な番組管理機能

1. 投稿タイプとジャンルタクソノミーを登録します。
2. 番組情報メタボックス、保存処理、管理画面の検証警告を実装します。
3. nonce、権限確認、入力のサニタイズ、URL の許可リストを実装します。
4. 管理一覧へ開催日、時間、状態、優先順位を表示します。
5. 有効化時にリライトルールを更新します。

第2段階: 公開側のテレビ番組表

1. [reverv_program_guide] と date="Y-m-d" 属性を実装します。
2. 公開済み番組を日付と開始時刻順に取得し、メタキャッシュを利用します。
3. 重複区間をレーンへ割り当て、PC では時間軸、スマートフォンでは縦型一覧を表示します。
4. 日付タブ、サムネイル、ジャンル、配信状態、出演者、詳細リンクを表示します。
5. :hover、:focus-visible、prefers-reduced-motion に対応します。

第3段階: 番組詳細ページ

1. 番組専用テンプレートを提供します。
2. YouTube URL がある場合だけ視聴リンクを表示します。
3. X 共有リンクと Google カレンダー登録リンクを外部 API なしで生成します。
4. 時系列の前後番組、同ジャンルの関連番組を表示します。
5. 配信中止を色とテキストの両方で明示します。

第4段階: 検索と絞り込み

1. 番組名・出演者名のキーワード検索を提供します。
2. 開催日・ジャンル・手動の配信状態で絞り込めます。
3. 現在時刻から判定した「配信中」「まもなく配信」でも絞り込めます。
4. 条件を URL に保持し、JavaScript 有効時は番組表部分だけを更新します。
5. JavaScript 無効時も GET フォームとして利用できます。

第5段階: 現在時刻連動表示

1. WordPress のサイトタイムゾーンで現在位置を計算します。
2. 当日の時間軸に現在時刻線を表示し、初回表示時に線付近へ移動します。
3. 配信中・まもなく・終了済みのカードを視覚的に区別します。
4. 管理画面で設定した配信状態を優先し、時刻判定は表示補助として扱います。
5. 「まもなく」の基準は「番組」→「番組表設定」で変更できます。

第6段階: 管理画面のドラッグ＆ドロップ編集

1. 「番組」→「番組表編集」に日付別の編集用時間軸を表示します。
2. カードの上下移動、同時配信の横順変更、下端リサイズ、未配置番組の配置に対応します。
3. 保存前の変更一覧、未保存表示、重複警告、完全重複の確認を表示します。
4. 変更は専用ボタンから一括保存し、nonce・投稿権限・別画面での更新競合を検証します。
5. 保存途中で失敗した場合は更新済みデータを元に戻し、画面上の変更内容を保持します。

構成ファイル

reverv-program-guide/
├── reverv-program-guide.php
├── uninstall.php
├── README.md
├── includes/
│   ├── class-plugin.php
│   ├── class-program-post-type.php
│   ├── class-program-taxonomy.php
│   ├── class-program-meta.php
│   ├── class-program-settings.php
│   ├── class-program-query.php
│   ├── class-program-status.php
│   ├── class-program-shortcode.php
│   ├── class-program-detail.php
│   ├── class-program-assets.php
│   └── class-program-admin-editor.php
├── admin/
│   ├── css/
│   │   └── program-editor.css
│   └── js/
│       └── program-editor.js
├── public/
│   ├── views/
│   │   ├── program-guide.php
│   │   ├── program-card.php
│   │   └── single-program.php
│   ├── css/
│   │   └── program-guide.css
│   └── js/
│       └── program-guide.js
├── templates/
│   └── single-program.php
└── tests/
    ├── static-audit.js
    ├── meta-callback-audit.js
    ├── swell-compatibility-fixture.html
    └── admin-editor-fixture.html

第7段階に属する番組表の画像書き出しは今回作成しません。

セキュリティ上の注意

• メタ保存は edit_post 権限と専用 nonce の両方を確認します。
• REST 公開用メタには投稿編集権限を確認する auth_callback を設定します。
• 日付、時刻、状態、URL は許可形式または許可値に限定します。
• YouTube URL は HTTPS の youtube.com、そのサブドメイン、youtu.be のみ保存します。
• HTML 出力は文脈に応じて esc_html、esc_attr、esc_url、wp_kses_post を使い分けます。
• 外部リンクには rel="noopener noreferrer" を付与します。
• SQL は直接記述せず、WordPress のクエリー API を使用します。
• アンインストール時も初期状態では投稿と設定を削除しません。

合理的な初期値

• 配信状態: scheduled（配信予定）
• 表示優先順位: 0
• 注目番組: 無効
• まもなく配信の基準: 開始15分前
• PC 時間軸: 番組の最早開始〜最遅終了を30分単位で丸め、1分あたり4px
• 時刻表示: WordPress の time_format
• タイムゾーン: WordPress のサイトタイムゾーン
• スマートフォン切替幅: 782px

導入方法

実装完了後、このディレクトリを reverv-program-guide.zip に圧縮し、WordPress 管理画面の「プラグイン」→「新規プラグインを追加」→「プラグインのアップロード」から導入します。

1. プラグインを有効化します。
2. 管理画面の「番組」→「新規追加」で番組を登録します。
3. 番組タイトルと説明を入力し、「番組サムネイル」から画像を設定します。
4. 「番組情報」で開催日、開始／終了時刻、出演者、YouTube URL、配信状態、優先順位、注目フラグを設定します。
5. 「番組ジャンル」を選び、公開します。初回有効化時には仕様例の7ジャンルが作成されます。
6. 必要に応じて「番組」→「番組表設定」で「まもなく配信」、配信状態タグ、スマホ表示、編集の操作単位を変更します。
7. 「番組」→「番組表編集」では、カードをドラッグまたはリサイズしてから「変更を保存」を押します。
8. 固定ページに次のショートコードを配置します。

[reverv_program_guide]

特定の日を初期表示する場合:

[reverv_program_guide date="2026-08-15"]

複数日分の公開番組がある場合は日付タブが表示されます。タブの選択日は ?rpg_date=2026-08-15 としてURLに残るため、その表示を共有できます。

番組カードを選ぶと専用詳細ページへ移動します。YouTube URL、X共有、Googleカレンダー登録は詳細ページのアクション欄に表示されます。

実装状況

段階	状態
第1段階: 基本的な番組管理機能	実装済み
第2段階: 公開側のテレビ番組表	実装済み
第3段階: 番組詳細ページ	実装済み
第4段階: 検索と絞り込み	実装済み
第5段階: 現在時刻連動表示	実装済み
第6段階: 管理画面のドラッグ＆ドロップ編集	実装済み
第7段階: 番組表の画像書き出し	未実装

更新履歴

1.3.3

• 番組詳細ページのタイトル、「番組内容」見出し、本文が、SWELLを含む有効テーマの標準文字色を引き継ぐようにしました。
• 開催日・配信時刻・出演者・ボタンなど、白いカード内の情報は従来の濃色を維持し、背景とのコントラストを保ちます。
• 本文ブロックで個別に設定した文字色は、テーマの標準色より優先されます。

1.3.2

• WordPressのプラグイン一覧に表示される名称を「プログラムガイド」、制作者を「陽色しな」へ変更しました。
• 既存サイトとの互換性を保つため、プラグインフォルダ名、Text Domain、内部名前空間、ショートコード、メタキーは変更していません。

1.3.1

• スマホの横並び表示でもサムネイルを省略せず、レーン幅に合わせて小さく表示するようにしました。
• 横並び表示の設定説明を、サムネイルは表示し、出演者・ジャンルのみ省略する内容へ更新しました。

1.3.0

• 「番組」→「番組表設定」へスマホ表示の切り替えを追加しました。
• 従来の時刻別縦並びに加え、時間が重なる番組をPC版と同じ優先順位・レーン計算で横並び表示できます。
• 横並び表示では、狭い画面でもタイトルと配信時刻を読み取れるようサムネイルを小さく表示し、出演者・ジャンルは省略します。

1.2.3

• Chromeのネイティブ時刻入力が step 属性を無視して1分刻みの候補を表示するため、開始・終了時刻を「時」と「分」の選択欄へ変更しました。
• 分の候補は 00、15、30、45 のみに制限し、保存処理でもそれ以外の分数を受け付けないようにしました。

1.2.2

• SWELL環境の番組詳細ページで、長いタイトルとサムネイルが互いのカラムへはみ出さないよう、タイトルの封じ込めと画像枠の幅を強制しました。
• 番組情報の開始・終了時刻を15分刻みで入力できるようにしました。
• 日をまたぐ番組は、開始日のタイムラインでは24:00まで、翌日のタイムラインでは00:00から終了時刻まで分割表示するようにしました。番組情報の時刻表記は従来どおり「開始時刻–翌終了時刻」です。

1.2.1

• 番組詳細ページで長いタイトルがサムネイル領域へはみ出さないよう、詳細ヒーローのカラムとタイトルの折り返しを調整しました。

1.2.0

• 検索・絞り込みを初期状態では閉じ、ボタン操作で開閉できるパネルへ変更しました。条件適用中は開いた状態を維持します。
• 「配信予定」「配信中」などの状態タグを、番組表設定からまとめて非表示にできるようにしました。
• 管理画面へ番組表編集ページを追加し、開始時刻のドラッグ変更、同時配信の横順変更、終了時刻のリサイズ、未配置番組の配置に対応しました。
• 未保存表示、変更前後の一覧、重複警告、完全重複の確認、一括保存とキャンセルを追加しました。
• 保存時にnonce・権限・更新競合を確認し、途中失敗時には更新済みデータを元へ戻す処理を追加しました。

1.1.1

• _rpg_priority のメタデータ用サニタイズ処理を、WordPressから渡される追加引数を受け取れる独自コールバックへ変更しました。
• 管理画面とREST APIの整数変換を共通化し、優先順位が空欄の場合も 0 として安全に保存されるようにしました。
• プラグイン全体を監査し、整数変換関数がサニタイズやフックのコールバックとして直接登録されていないことを検証するテストを追加しました。

1.1.0

• 番組名・出演者名検索と、開催日・ジャンル・配信状態・現在の時間による絞り込みを追加しました。
• 検索条件を URL に保持し、JavaScript 有効時はスクロール位置を保ったまま番組表だけを更新します。
• WordPress タイムゾーンに基づく現在時刻線と、配信中・まもなく・終了済みの時間連動表示を追加しました。
• 「まもなく配信」の基準時間を変更できる「番組表設定」を追加しました。
• 注目番組へ「PICK UP」バッジ、金色の枠、控えめな発光を追加しました。

1.0.3

• 番組カードの出演者とジャンルに項目名を表示し、内容を判別しやすくしました。
• 日付タブはページを再読み込みせずに番組表だけを更新し、スクロール位置を維持します。
• ブラウザーの戻る・進む操作でも、URLと番組表の内容が一致するようにしました。

1.0.2

• 単日開催でも、SWELL の見出し装飾に影響されない通常テキストの日付を表示します。
• 長時間番組でもサムネイル枠を 16:9 に保ち、縦長の切り抜きにならないよう調整しました。

1.0.1

• SWELL の見出し装飾が単日の日付へ適用される問題を避けるため、単日表示では日付見出しを省略しました。
• 番組表と詳細ページを白・淡い水色中心の明るい配色へ変更しました。
• 15分・30分番組で文字が縦方向に圧縮されないよう、時間軸の高さと短時間カードの表示情報を調整しました。
• SWELL のリンク行高と画像余白がカード内へ影響しないよう、プラグイン側で明示的にリセットしました。

アンインストール

プラグインを停止または削除しても、番組投稿、ジャンル、メタデータ、番組表設定は保持されます。破壊的な全削除オプションは提供しません。

検証

作業環境には PHP と WordPress がないため、同梱の静的監査を Node.js で実行します。

node tests/static-audit.js
node tests/meta-callback-audit.js
node tests/cross-midnight-and-layout-audit.js
node tests/mobile-lane-layout-audit.js
node tests/single-page-theme-color-audit.js

静的監査は必要ファイル、主要フック、nonce／権限確認、出力エスケープ、外部 API の不使用、PHP ファイルの基本的な括弧対応を検査します。実環境では別途 php -l、WordPress Coding Standards、投稿登録・公開表示の結合テストを実行してください。

公開番組表は、サンプルデータを使ってデスクトップと390px幅のローカル表示も確認済みです。実サイトでは有効テーマのCSSと組み合わせた最終確認が必要です。