# SearchApps WordPress Plugin 設計書 ## 概要 s.py の機能を WordPress プラグインとして移植。 非エンジニアでも直感的に使える検索UIを提供。 --- ## 処理フロー（2段階方式） ``` ┌─────────────────────────────────────────────────────────┐ │ Phase 1: 高速検索（API呼び出しなし） │ ├─────────────────────────────────────────────────────────┤ │ app_description_cache.json を読み込み │ │ ↓ │ │ キーワード + レーティング + レビュー数でフィルタ │ │ ↓ │ │ マッチしたアプリ一覧を表示（チェックボックス付き） │ │ ↓ │ │ ユーザーが必要なアプリを選択（背景オレンジでハイライト） │ └─────────────────────────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────────────────────┐ │ Phase 2: ショートコード生成（選択分のみAPI呼び出し） │ ├─────────────────────────────────────────────────────────┤ │ 選択されたアプリIDのみ iTunes API バッチ呼び出し │ │ ↓ │ │ Google Play URL 検索（オプション） │ │ ↓ │ │ [applink] ショートコード一覧を表示 │ └─────────────────────────────────────────────────────────┘ ``` **メリット:** - Phase 1 は JSON 読み込みのみなので高速 - 不要なアプリの API 呼び出しを省略 - ユーザーが結果を見てから選択できる --- ## UI設計 ### 1. キーワード検索エリア（3段構成） #### 1-1. 必ず含む（AND - すべて必須） ``` ┌─────────────────────────────────────────────────────────┐ │ 必ず含む（すべて必須） │ ├─────────────────────────────────────────────────────────┤ │ ┌────────┐ ┌────────┐ ┌────────────┐ │ │ │ AI ✕ │ │ 3D ✕ │ │ + 追加 │ │ │ └────────┘ └────────┘ └────────────┘ │ │ 💡 入力したキーワードをすべて含むアプリを検索 │ └─────────────────────────────────────────────────────────┘ ``` #### 1-2. いずれかを含む（OR - どれか1つでOK） ``` ┌─────────────────────────────────────────────────────────┐ │ いずれかを含む（どれか1つでOK） │ ├─────────────────────────────────────────────────────────┤ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌────────┐ │ │ │ チャット✕│ │ 恋愛 ✕ │ │ 通話 ✕ │ │ + 追加 │ │ │ └──────────┘ └──────────┘ └──────────┘ └────────┘ │ │ 💡 1つでも含まれていればOK │ └─────────────────────────────────────────────────────────┘ ``` #### 1-3. 除外（NOT - 含まないもの） ``` ┌─────────────────────────────────────────────────────────┐ │ 除外（これを含まない） [赤背景] │ ├─────────────────────────────────────────────────────────┤ │ ┌──────────┐ ┌──────────┐ ┌────────┐ │ │ │ 翻訳 ✕ │ │ 英会話 ✕ │ │ + 追加 │ │ │ └──────────┘ └──────────┘ └────────┘ │ │ 💡 入力したキーワードを含むアプリを除外 │ └─────────────────────────────────────────────────────────┘ ``` ### 検索例と内部変換 | 検索条件 | 正規表現 | |----------|----------| | 必須: [AI] | `(?=.*AI)` | | いずれか: [チャット, 恋愛, 通話] | `(?=.*(?:チャット\|恋愛\|通話))` | | 除外: [翻訳, 英会話] | `(?!.*翻訳)(?!.*英会話)` | | **複合** | `^(?!.*翻訳)(?!.*英会話)(?=.*AI)(?=.*(?:チャット\|恋愛\|通話)).*$` | --- ### 2. フィルター設定 ``` ┌─────────────────────────────────────────────────────────┐ │ フィルター設定 │ ├─────────────────────────────────────────────────────────┤ │ │ │ レーティング [====●======] 3.8 以上 │ │ 1.0 5.0 │ │ │ │ レビュー数 [=====●=====] 50 件以上 │ │ 0 1000+ │ │ │ │ □ リリース日で絞り込む │ │ [2020-01-01] 〜 [2025-12-31] │ │ │ └─────────────────────────────────────────────────────────┘ ``` --- ### 3. 検索実行 & 結果表示（Phase 1） ``` ┌─────────────────────────────────────────────────────────┐ │ [🔍 検索する] [クリア] │ └─────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────┐ │ 検索結果: 15件 [全選択] [全解除] [選択を反転] │ ├─────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ □ AI彼女 - バーチャル恋愛チャット ★4.5 (1,234) │ │ ← 未選択（白背景） │ │ AIと会話できる新感覚の恋愛シミュレーション... │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────┐ │ │ │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ │ │ │ ☑ AIトーク - 音声通話アプリ ★4.2 (567) │ │ ← 選択中（オレンジ背景） │ │ AIと通話できる次世代コミュニケーション... │ │ │ │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ │ │ └─────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ □ AIチャットボット ★4.8 (2,100) │ │ │ │ 誰でも簡単にAIと雑談できる... │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────┘ 選択中: 1件 ┌─────────────────────────────────────────────────────────┐ │ [📋 選択したアプリのショートコードを生成] │ └─────────────────────────────────────────────────────────┘ ``` --- ### 4. ショートコード出力（Phase 2） 「ショートコードを生成」ボタン押下後: ``` ┌─────────────────────────────────────────────────────────┐ │ ショートコード出力（1件） [全てコピー] │ ├─────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ AIトーク - 音声通話アプリ [コピー] │ │ │ ├─────────────────────────────────────────────────────┤ │ │ │ [applink icon="..." appname="AIトーク" │ │ │ │ developper="..." price="無料" rate="84" │ │ │ │ rateint="4.2" apple="..." google="..."] │ │ │ └─────────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────┘ ``` --- ## 技術仕様 ### ファイル構成 ``` plugins/ ├── searchapps.php # メインプラグインファイル ├── models/ │ └── app_description_cache.json # 検索対象データ（外部更新） └── style.css # 既存CSS（追記） ``` ### PHP関数構成 ```php // WordPress管理画面メニュー登録 add_action('admin_menu', 'searchapps_add_menu'); // ===== Phase 1: 高速検索（API呼び出しなし） ===== add_action('wp_ajax_searchapps_search', 'searchapps_search_ajax'); function searchapps_search_ajax() { // 1. JSONキャッシュ読み込み（models/app_description_cache.json） // 2. キーワードフィルタリング（AND/OR/NOT → 正規表現変換） // 3. レーティング・レビュー数フィルタ // 4. マッチしたアプリ一覧を返却（app_id, app_name, short_desc, rating, count） // ※ この段階では iTunes API は呼ばない } // キーワード → 正規表現変換 function searchapps_build_pattern($must_keywords, $any_keywords, $exclude_keywords) { // 必須(AND): (?=.*kw1)(?=.*kw2) // いずれか(OR): (?=.*(?:kw1|kw2|kw3)) // 除外(NOT): (?!.*ex1)(?!.*ex2) // 結合: ^(?!.*ex1)(?!.*ex2)(?=.*kw1)(?=.*(?:kw2|kw3)).*$ } // ===== Phase 2: ショートコード生成（選択分のみ） ===== add_action('wp_ajax_searchapps_generate', 'searchapps_generate_ajax'); function searchapps_generate_ajax() { // 1. 選択されたapp_id配列を受け取る // 2. iTunes API バッチ問い合わせ（10件ずつ） // 3. Google Play URL 検索（applink.php の既存関数を流用） // 4. [applink] ショートコード生成して返却 } // [applink] ショートコード生成（applink.php から流用可能） function searchapps_create_shortcode($itunes_info, $google_url) { // s.py の create_applink_shortcode_local と同等 } ``` ### JavaScript処理 ```javascript // タグ入力UI // AND/OR切り替え // スライダー操作 // AJAX検索実行 // 結果表示・コピー機能 ``` --- ## 正規表現変換ロジック ### ユーザー入力 → 正規表現 | 入力 | 変換後の正規表現 | |------|------------------| | 含む(AND): 戦国, RPG | `^(?=.*戦国)(?=.*RPG).*$` | | 含む(OR): 戦国, RPG | `^.*(戦国\|RPG).*$` | | 除外: TOEIC, 英語 | `^(?!.*TOEIC)(?!.*英語).*$` | | 複合(AND + 除外) | `^(?!.*TOEIC)(?!.*英語)(?=.*戦国)(?=.*RPG).*$` | --- ## CSS設計方針 ### カラーパレット - プライマリ: #4a90d9（青系） - 成功: #4caf50（緑） - 警告: #ff9800（オレンジ） - タグ背景: #e3f2fd（薄い青） - 除外タグ: #ffebee（薄い赤） ### コンポーネント - カード形式の検索パネル - タグ入力（Material Design風） - スライダー（Applink既存スタイル流用） - 結果カード（アプリアイコン付き） --- ## 実装ステップ ### Step 1: 基本構造 1. searchapps.php 作成・メニュー登録 2. 管理画面HTML骨組み 3. CSS基本スタイル（style.css に追記） ### Step 2: 検索UI（タグ入力） 4. 「必ず含む」タグ入力コンポーネント 5. 「いずれかを含む」タグ入力コンポーネント 6. 「除外」タグ入力コンポーネント 7. フィルタースライダー（レーティング・レビュー数） 8. リリース日フィルタ（日付ピッカー） ### Step 3: Phase 1 検索ロジック 9. JSONキャッシュ読み込み（models/app_description_cache.json） 10. 正規表現変換（必須AND + いずれかOR + 除外NOT） 11. レーティング・レビュー数フィルタリング 12. 結果一覧表示（チェックボックス付き） 13. 選択時のオレンジ背景ハイライト ### Step 4: Phase 2 ショートコード生成 14. 選択されたアプリIDの収集 15. iTunes APIバッチ問い合わせ（10件ずつ） 16. Google Play URL検索（applink.php 関数流用） 17. [applink] ショートコード生成・表示 ### Step 5: 仕上げ 18. コピー機能（個別・一括） 19. 全選択・全解除・反転ボタン 20. エラーハンドリング・ローディング表示 --- ## 補足: s.pyとの機能対応 | s.py | searchapps.php | |------|----------------| | `pattern = re.compile(...)` | タグUI → 自動変換 | | `rating_threshold = 3.8` | スライダー | | `review_count_threshold = 50` | スライダー | | `use_release_date_filter` | チェックボックス | | `start/end_release_date_str` | 日付ピッカー | | `fetch_multiple_apps_from_itunes()` | PHP版cURL | | `google_scraper()` | Applink既存関数流用 | | `create_applink_shortcode_local()` | PHP版移植 |