スロット攻略 プロジェクトドキュメント

Appearance

日別記事管理画面UI改善機能 ​

概要 ​

日別記事投稿ページの管理画面で、必須フィールドを常に表示し、その他のフィールドはWordPressの「画面上の要素」（Screen Options）で表示/非表示を制御できるようにする機能です。

実装ファイル ​

TypeScriptソースファイル ​

  • 場所: core_src/Template/DailyArticleTemplate/assets/src/daily-article-admin-ui.ts
  • ビルド後: core_src/Template/DailyArticleTemplate/assets/js/daily-article-admin-ui.js

PHP統合 ​

  • ファイル: core_src/PostType/DailyArticlePostTypeAdmin.php
  • 関数: daily_article_enqueue_admin_ui_assets()
  • フック: admin_enqueue_scripts

Webpack設定 ​

  • ファイル: webpack.config.js
  • エントリーポイント: daily-article-admin-ui

必須フィールド（常に表示） ​

以下のメタボックスは「画面上の要素」で非表示にできず、常に表示されます：

  1. 基本情報 (daily-article-meta-fields)

    • 考察日時
    • ホール選択

  2. 公開 (submitdiv / publishdiv)

    • WordPress標準の公開パネル

  3. データインポート (daily-article-import)

    • CSVインポート機能

  4. 考察フィールド (6つのブロックエディター)

    • daily-article-block-editor-island_pre - アイランド秋葉原 前半考察
    • daily-article-block-editor-island_after - アイランド秋葉原 後半考察
    • daily-article-block-editor-espasu_pre - エスパス秋葉原 前半考察
    • daily-article-block-editor-espasu_after - エスパス秋葉原 後半考察
    • daily-article-block-editor-bigapple_pre - ビッグアップル秋葉原 前半考察
    • daily-article-block-editor-bigapple_after - ビッグアップル秋葉原 後半考察

オプショナルフィールド ​

必須フィールド以外のメタボックスは、「画面上の要素」のチェックボックスで表示/非表示を切り替えられます。

動作仕様 ​

1. 初期化処理 ​

  • daily_article投稿タイプの編集画面でのみ動作
  • DOMContentLoadedイベント後に初期化

2. 必須メタボックスの処理 ​

表示の確保 ​

  • 必須メタボックスを常に display: "" に設定
  • 対応するチェックボックスを常に checked: true に設定

Screen Optionsからの除外 ​

  • 必須メタボックスのチェックボックスを display: none に設定
  • これにより、ユーザーは必須フィールドを非表示にできない

3. 変更の監視 ​

MutationObserverを使用して以下を監視：

  • #screen-options-wrap - Screen Optionsコンテナ
  • .postbox-container - メタボックスコンテナ

変更が検出されると、必須メタボックスを再度表示状態に設定します。

ビルド方法 ​

開発ビルド ​

bash
npm run start

本番ビルド ​

bash
npm run build

テスト方法 ​

手動テスト手順 ​

  1. WordPress管理画面にアクセス

    • 日別記事の編集画面を開く
    • 新規作成: /wp-admin/post-new.php?post_type=daily_article
    • 既存編集: /wp-admin/post.php?post={ID}&action=edit

  2. 必須フィールドの確認

    • 以下のメタボックスが表示されていることを確認
      • 基本情報
      • 公開
      • データインポート
      • 6つの考察フィールド

  3. Screen Optionsを開く

    • 画面右上の「表示オプション」をクリック
    • 必須フィールドのチェックボックスが表示されていないことを確認
    • オプショナルフィールドのチェックボックスは表示されていることを確認

  4. 非表示テストの試行

    • Screen Optionsでオプショナルフィールドのチェックを外す → 非表示になる
    • 必須フィールドは常に表示されたまま

  5. ページリロード後の確認

    • ページをリロードしても必須フィールドが表示されていることを確認

ブラウザコンソール確認 ​

F12キーで開発者ツールを開き、以下を確認：

  • JavaScriptエラーがないこと
  • daily-article-admin-ui.js が正常にロードされていること
javascript
// コンソールで確認できる内容
document.getElementById('daily-article-meta-fields'); // nullでないこと
document.getElementById('daily-article-meta-fields-hide'); // チェックボックスが見つからないこと

トラブルシューティング ​

スクリプトがロードされない ​

症状: 必須フィールドがScreen Optionsに表示される

確認事項:

  1. ビルドが正常に完了しているか
    bash
    ls -la core_src/Template/DailyArticleTemplate/assets/js/daily-article-admin-ui.js
  2. PHPファイルのシンタックスエラーがないか
    bash
    php -l core_src/PostType/DailyArticlePostTypeAdmin.php
  3. ブラウザのコンソールでエラーが出ていないか

必須フィールドが非表示になる ​

症状: Screen Optionsで必須フィールドを非表示にできてしまう

原因: MutationObserverが正しく動作していない可能性

確認事項:

  1. ブラウザがMutationObserverをサポートしているか
  2. JavaScriptエラーがコンソールに表示されていないか

設計上の注意点 ​

シンプルな実装 ​

  • 過度に複雑な処理を避け、WordPressの標準的な動作に従う
  • Screen Optionsの既存機能を活用し、独自のUI要素を追加しない

パフォーマンス ​

  • MutationObserverは必要な要素のみを監視
  • イベントリスナーは適切に管理し、メモリリークを防止

互換性 ​

  • WordPress標準のメタボックスIDを使用
  • 他のプラグインとの競合を避けるため、固有のクラス名を使用

関連ドキュメント ​

変更履歴 ​

日付バージョン変更内容
2026-01-131.0.0初版作成（TypeScriptで再実装完了）