仕組みと技術仕様

Image to Wikipedia のアーキテクチャと実装の詳細

Image to Wikipedia は、Wikipedia の公開 API をリアルタイムで活用するフロントエンドのみのアプリケーションです。 サーバーサイドのバックエンドは存在せず、すべての処理はブラウザ（またはスマートフォンアプリ）上で行われます。 本ページでは、アプリの仕組みと使用している技術を解説します。

Wikipedia API の活用

クイズの問題は、日本語版ウィキペディアの MediaWiki API（ja.wikipedia.org/w/api.php）を リアルタイムで呼び出して生成されます。

具体的には以下の API エンドポイントを組み合わせて使用します。

• action=query&list=random： ランダムな記事 ID の一覧を取得します。名前空間 0（本文記事）に限定することで、 カテゴリページや議論ページなどを除外します。
• action=query&prop=extracts|pageimages|info： 記事の本文要約（extract）・代表画像の URL・記事の URL をまとめて取得します。 exintro フラグにより冒頭のイントロ部分のみを抽出し、 explaintext フラグで HTML タグを除いた純テキストを取得します。

取得した記事情報はアプリ内で10件単位にバッファリングされ、次の問題の先読みに使用されます。 これにより、問題間の待機時間を最小化しています。

フロントエンド技術スタック

カテゴリ	使用技術	バージョン
UIフレームワーク	React	19
ビルドツール	Vite	8
言語	TypeScript	5
スタイリング	Tailwind CSS	4
テスト	Vitest	4
モバイル対応	Capacitor	8
デプロイ	Vercel	—

アーキテクチャはシングルページアプリケーション（SPA）で、 画面遷移は URL のルーティングではなく React の state（phase / view）で管理しています。 これにより、ネイティブアプリ（Capacitor）との統一した動作を実現しています。

マスキングアルゴリズム

記事のテキストとタイトルを伏せ字（◯）に変換するマスキング処理は、 アプリの中核をなすアルゴリズムです。単純にすべての文字を伏せると読解不能になるため、 以下のルールに従って「見せる文字」と「隠す文字」を分類します。

常に表示する文字（KEEP）：

• 日本語の助詞・助動詞・接続詞（は、が、の、に、を、で、も、や、と など）
• 句読点・記号（。、！？「」など）
• アラビア数字・ローマ数字
• 空白・改行

タイトル専用のヒントルール：

• タイトルの先頭1文字は常に表示（例：「墨田区」→「墨◯◯」）
• タイトルに括弧表記がある場合（曖昧さ回避）、括弧内の文字はすべて表示（例：「曳舟 (墨田区)」→「曳◯ (墨田区)」）
• タイトルで公開された文字は、本文中の同じ文字もマスクせずに表示（例：「墨」が先頭文字なら、本文中の「墨」もすべて表示）

マスキング処理はブラウザ上でリアルタイムに実行されます。 Wikipedia から取得した生テキストに対して毎回処理を行うため、サーバーへの依存がありません。

正解判定ロジック

ユーザーの入力が正解かどうかを判定するロジックは、以下の5段階の比較を順に試みます。 最初にマッチした時点で正解と判定します。

1. 完全正規化一致： NFKC 正規化（全角→半角）、小文字化、前後の空白除去を両辺に適用して比較
2. 括弧省略一致： 両辺から括弧と括弧内の文字を除去した上で比較（曖昧さ回避部分を省略可）
3. 先頭文字省略一致： 正解から常に表示されている先頭の文字列を取り除いた残りと比較
4. 先頭文字省略 + 括弧省略一致： ルール 3 と 2 を組み合わせた比較
5. 隠し文字コア一致： 正解のうち◯でマスクされていた文字のみを抽出した文字列と比較

すべての比較において、NFKC 正規化・小文字化・空白除去は常に適用されます。 このため「ＡＢＣ」と「abc」、「Tokyo」と「TOKYO」などは同一視されます。

ローカルストレージとデータ永続化

プレイ履歴とスコアはブラウザの localStorage に保存されます。 JSON 形式でシリアライズされ、1エントリには「タイムスタンプ・記事タイトル・ユーザーの回答・正誤フラグ・記事 URL」が含まれます。 外部サーバーへの送信は一切行わないため、データは完全にユーザーの端末内に留まります。