Twitter検索クエリビルダー
Twitterの複雑な検索コマンド（検索クエリ）を、フォーム入力だけで簡単に組み立てられるWebツールです。モダンなダークモードデザインを採用し、直感的な操作感を提供します。
機能
- キーワード指定：一般のキーワード、完全一致、除外、OR検索
- 期間指定：
sinceおよびuntil（日付・時間単位での指定が可能） - エンゲージメント指定：
min_faves,min_retweets,min_replies - コンテンツ指定：画像・動画・リンクを含むツイートを絞り込み
- リツイート除外：デフォルトでONにすることで、ノイズを減らした検索が可能
- リアルタイム生成：入力に応じて即座にクエリを生成＆文字数カウント
- アクション：クリップボードへのコピー、Twitterへのダイレクト検索（別タブ）機能
ディレクトリ構成
twitter-search-builder/
│
├── index.html # メイン画面
├── README.md # 本ファイル
├── css/
│ ├── reset.css # リセットCSS
│ └── style.css # メインスタイルシート (Arcインスパイア)
├── js/
│ └── main.js # ロジック (リアルタイム同期、クリップボード等)
├── img/ # 画像格納用 (必要に応じて)
└── assets/ # 各種リソース格納用 (必要に応じて軽量なリソースから)
利用方法
- ツールをブラウザで開きます。
- フィルターの各項目を埋めるか、トグルを切り替えます。
- 画面下部にリアルタイムで生成されるクエリが表示されます。
- 「コピー」して他のアプリにペーストするか、「Twitterで検索」を押して直接検索結果を表示します。
技術構成
- Lucide Icons：軽量なSVGアイコンを活用し、UIに統一感を持たせています。
- レスポンシブデザイン：スマートフォンからPCまで画面幅に合わせて最適化されています。
- ダークモードネイティブ：眩しさを抑えつつ、鮮やかなアクセントカラーを用いることで、長時間作業でも目が疲れない「フロストグラス風」パネルデザインを採用。
- CSS変数：色彩やサイズの設定を一括管理し、デザインの拡張性を維持しています。