World Dev Info Meta Searcher（WDIMS）は、Claude Codeでサクッと開発した軽量メタ検索エンジンです。検索窓に単語を入力してエンターすると、開発技術＋αの情報収集に有用と思われる検索結果のURLのリストを表示します。
- 基本的な「検索エンジンの表示設定」と「検索エンジンとタブの編集と入れ替え」「設定のインポート＆エクスポート」が可能です。
- URLに「選択中のタブ」と「検索中のワード」の情報がパラメータとして入ります。ページをブラウザブックマークしておくことで、素早く現在の検索結果にジャンプすることが可能です。
./src/data/searchEngines.jsonを書き換えた後にビルドすることで、初期設定で使用する検索エンジンをカスタムすることが可能です。エクスポート機能で保存した設定ファイルの内容を使用することも可能です。- サーバー不要でローカルのブラウザから直接開く(fileプロトコルで開く)だけで動作する、単一HTMLファイルにビルドすることが可能です。→
npm run build-offline。LINEやDiscordやメールでHTMLファイルを送るだけでアプリの共有が可能です。 - アプリ(HTMLファイル)のサイズは50KB程度で非常に小さいです（Preactをフレームワークに採用しているため）。
- 検索結果URLを生成する処理はクライアント上(ブラウザ内)で行われます。単一HTMLファイルを開いて使用する場合だとプライバシー的に安全です。※GitHub PagesのやつだとGitHub側に検索クエリが記録される可能性があるので一応注意です。
このリポジトリのGitHub Pagesにアクセスすると使えます。初期状態では技術関連タブの「Preact」の検索結果のリストを表示します。
https://tweeteafox223.github.io/world-dev-info-metasearcher/?tab=tech-blogs&q=Preact
💣️注意：設定はブラウザの内部データ(ローカルストレージ)に保存されます。「シークレットモード使用時にアクセスし編集を行った後にブラウザを閉じる」「ブラウザの設定から手動でこのページのサイトデータを消去する」という操作をすると、設定が消えてしまうので気をつけてください！
💣️注意：編集や設定変更した時の設定は、「Webページを開いたブラウザアプリの内部データ(ローカルストレージ)」に保存されます！別々のブラウザでHTMLを開くと、設定はそれぞれに別になるので気をつけてください！
下のリンクから単一HTMLファイルを、PCやスマホにダウンロード →適当なブラウザで開くのでも使えます！ 黄色い丸で囲ったボタンを押してください。
https://github.com/TweeTeaFOX223/world-dev-info-metasearcher/blob/main/dist-offline/index.html
💣️注意：方法Aと同じことに注意が必要です。→ 「シークレットモード使わない」「設定は開いたブラウザに保存」「ブラウザ設定からサイトデータ消さない」
💣️注意：ローカルHTMLを開いて使用する場合、ブラウザの内部データ(ローカルストレージ)は、「HTMLのファイル位置(パス)」に紐付けられます。一度使用した後にHTMLファイルの場所を移動させると、設定が別扱いになってしまうので気をつけてください！
これ(Web版)は「💣️注意」に書いてあることが色々と面倒くさいです。それへの対応として、設定ファイルをPC内に保存するデスクトップ版を作りました。
不意のデータ消失を避けたい人、異なるブラウザで同じ設定を使いたい人、シークレットモードで使いたい人、アプリのフォルダを移動させる可能性がある人、GitHubに検索内容を送りたくないって人↓を使ってみてください。
WDIMS-desktop-by-sea
https://github.com/TweeTeaFOX223/WDIMS-desktop-by-sea
以前から「特定のトピックに関するZennやQiitaやDev.toやGitHubやCSDNやMediumやnoteやXやReddit等の新着投稿を手動検索で全部確認したいが…、毎回毎回各サービスの検索窓に単語を入力する作業が面倒臭すぎる。ブラウザの検索エンジン追加機能は一回ずつ選択する形式なのでUI的に微妙だな。」と感じていました。
ふと「一回単語入力するだけで各種の技術情報サイトの検索結果URLを一括で表示する、開発情報特化のメタ検索エンジンを作ったら便利なのでは？」と考えたので、Claude Codeに要件定義を入れてサクッと作ってみました。
※手動検索による新着投稿の全確認：生成AIによる自動検索・身内チャット情報網・X(旧Twitter)やYouTubeやTechFeed等のフォローTLとレコメンド(おすすめ)で回ってくる範囲ではカバーできない、マイナーな面白い情報を発見できることがあるので、開発に限らずあらゆる分野で非常に良い行動なのではないかと思います。
※作っている最中に「開発情報収集以外でも使えそう」と思ったので、世界各国言語特化の検索エンジンや百科事典やブログや動画サイトもザッと入れてみました。「開発系サイトで検索する単語を、ついでに開発無関係なサイトでも検索してみる」、逆に「開発無関係な活動で検索する単語を、ついでに開発系サイトでも検索してみる」ということをやると想定外の面白い情報を発見できるかもしれないです。
先駆者様のメタ検索エンジンです。私のやつとは違った特徴があります。
複数の検索エンジンの検索結果を統合して表示するタイプが良い or 最近流行りの生成AIエージェントを用いた検索利用ならSearXNG(Perplexityも使ってるらしい)、国内外の政治経済情報の調査ならありとあらゆる分野をカバー可能な最速一括検索を使用するのがオススメです。
- SearXNG:https://github.com/searxng/searxng
- 最速一括検索：https://skensaku.com/
- world-dev-info-metasearcher
- 目次
- 技術スタック
- アプリの動作＆改変方法
- プロジェクトのファイル構成
- 検索エンジン初期設定に入れたサイトの一覧
- GitHub Pages(GitHub Actionsの設定)
- 開発参加
- ライセンス
「軽量かつ動作楽なアプリをサクッと作る」という基準で選定。
| 技術項目 | 使用しているもの |
|---|---|
| AI エージェント | Claude Code（Sonnet 4.5） |
| プログラミング言語 | TypeScript |
| フロントエンドフレームワーク | Preact |
| CSS | 通常のCSS |
| パッケージ管理とタスク処理 | npm |
| ビルドツール | Vite |
| Viteで単一HTMLを出力 | vite-plugin-singlefile |
これらのインストールが必須です。node.jsの公式サイトからDLできます。一番新しいLTSのやつを使えば多分動きます。 https://nodejs.org/ja/download
| 事前インストールが必要 | 動作確認したver |
|---|---|
| npm | v10.9.2 |
| node.js | v23.7.0 |
ファイルを入れたいディレクトでリポジトリをクローンし、cdでディレクトリに入ってください。gitがない場合はZIPでダウンロードして解凍してください。
git clone https://github.com/TweeTeaFOX223/world-dev-info-metasearcher.git
cd world-dev-info-metasearcher
npmで以下のコマンドを実行すると動きます。./src/data/searchEngines.jsonを書き換えてカスタムしたり、コンポーネントのUIを変えたりすることができます。
# 依存関係のインストール
npm install
# 開発サーバーの起動
npm run dev
# ブラウザで http://localhost:5173 を開くnpm run build
# dist/index.html が生成されるnpm run build-offline
# dist-offline/index.html が生成される./dist-offlineに単一のindex.htmlが生成されます。そのindex.htmlをブラウザで直接開くと動きます。
src/data/searchEngines.json を編集して、検索エンジンを追加・削除できます。
{
"tabs": [
{
"id": "custom",
"name": "カスタム検索",
"engines": [
{
"id": "example",
"name": "Example Search",
"url": "https://example.com/search?q={query}",
"description": "説明文（オプション）",
"icon": "https://example.com/icon.png（オプション）"
}
]
}
]
}編集後、再ビルドが必要です。
npm run build
# dist/index.html が生成されるnpm run build-offline
# dist-offline/index.html が生成されるproject-root/
├── .github/
│ └── workflows/
│ └── main.yml # GitHub Actions CI/CD設定
├── .claude/
│ └── settings.local.json # Claude Code設定
├── config_sample/ # サンプル設定ファイル
│ ├── wdis-display-settings.json # 表示設定のサンプル
│ └── wdis-search-engines.json # 検索エンジン設定のサンプル
├── dist-offline/
│ └── index.html # 単一HTMLビルド出力
├── scripts/
│ └── generateMarkdownTable.ts # 検索エンジン設定をMD変換。ここだけnode.js
├── src/
│ ├── components/ # Preactコンポーネント
│ │ ├── AddEngineModal.tsx # 検索エンジン追加モーダル
│ │ ├── AddTabModal.tsx # タブ追加モーダル
│ │ ├── ConfirmModal.tsx # 確認ダイアログ
│ │ ├── DeleteTabModal.tsx # タブ削除確認モーダル
│ │ ├── ScrollToTop.tsx # フローティングアクションボタン
│ │ ├── SearchBox.tsx # 検索ボックス
│ │ ├── SearchEngineCard.tsx # 検索エンジンカード
│ │ ├── SearchResults.tsx # 検索結果グリッド
│ │ ├── Settings.tsx # 設定パネル
│ │ └── TabBar.tsx # タブバー
│ ├── data/
│ │ └── searchEngines.json # 検索エンジン設定 ※カスタムする場合は書き換える
│ ├── types/
│ │ └── index.ts # 型定義
│ ├── utils/
│ │ ├── localStorage.ts # ローカルストレージ操作ユーティリティ
│ │ └── searchUtils.ts # 検索URL生成ユーティリティ
│ ├── App.tsx # メインアプリケーション
│ ├── index.html # HTMLエントリーポイント
│ ├── main.tsx # JSエントリーポイント
│ └── style.css # グローバルスタイル
├── .gitattributes # Git属性設定
├── .gitignore # Git除外設定
├── A2.png # スクリーンショット(一時)
├── A3.png # スクリーンショット(一時)
├── LICENSE # ライセンス
├── README.md # プロジェクト説明
├── ScreenShot.png # スクリーンショット
├── ScreenShot2.png # スクリーンショット
├── eslint.config.ts # ESLint設定
├── package-lock.json # 依存パッケージロックファイル
├── package.json # 依存パッケージとタスク
├── search-engines-table.md # 検索エンジン一覧表(自動生成)
├── tsconfig.json # TypeScript基本設定
├── tsconfig.app.json # TypeScript設定(クライアント)
├── tsconfig.node.json # TypeScript設定(node.js)
├── vite.config.ts # Vite設定
└── vite.config.offline.ts # 単一HTMLビルド用のVite設定
src/data/searchEngines.jsonにあります。
↓このリンクを踏むと見れます。↓
https://github.com/TweeTeaFOX223/world-dev-info-metasearcher/blob/main/src/data/searchEngines.json
npm run generate-tableでscripts/generateMarkdownTable.tsを実行するとmdテーブルをsearch-engines-table.mdに生成します。
↓このリンクを踏むと見れます。↓
https://github.com/TweeTeaFOX223/world-dev-info-metasearcher/blob/main/search-engines-table.md
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
npm run build-offlineを実行して単一HTMLをビルドしてプッシュした時に、GitHub Pagesにビルド＆デプロイするようになっています。
https://github.com/TweeTeaFOX223/world-dev-info-metasearcher/blob/main/.github/workflows/main.yml
プルリクエストは大歓迎です！。このアプリのアイディアを利用して全く別に新規作成することも大歓迎です！
訪問者の皆さんも何かしらの用途に特化したメタ検索エンジンを好きな技術スタックで作ってみると面白いのではないかと思います。
「MIT License」です。