文章読み上げ

ブラウザ標準の Web Speech API（SpeechSynthesis）を使用して、日本語の文章を読み上げるシンプルな静的Webアプリです。画像から文字を読み取る通常のOCRは、ブラウザの中だけで動作し、APIキーもサーバーも必要ありません。さらに、選んだときだけGemini APIを使う「AIで高精度OCR」「AIで翻訳・要約」「AI音声（Gemini TTS）で読み上げ」も利用できます（これらだけは GEMINI_API_KEY の設定が必要です）。

使い方

1. index.html を Chrome、Edge、Safari などの対応ブラウザで開きます。
2. 大きな入力欄へ読み上げたい文章を入力、または貼り付けます。
3. 必要に応じて「音声」と「読み上げ速度」を選びます。クリップボードのボタンの下にある**「✨ AI音声で読み上げ（有料）」をONにすると**、ブラウザの音声のかわりにAI音声で読み上げます。
4. 「読み上げ」を押すと再生が始まります。
5. 再生中は「一時停止」「再開」「停止」を利用できます。

「読み上げ」をもう一度押すと、現在の再生を停止し、入力欄にある文章を先頭から読み上げます。長い文章は文末や改行を目安に分割し、順番に再生します。

「入力テキスト」の見出しにある「コピー」を押すと、入力欄の文章をすべてクリップボードへコピーします。コピーできると、ボタンの表示と画面上の案内が「○文字をコピーしました。」に変わり、しばらくすると元へ戻ります。読み取った文章をほかのアプリへ渡して要約したいときなどに使えます。

「現在読み上げ中」には入力文章の改行が反映され、ブラウザから読み上げ位置を取得できる場合は、現在読んでいる語句が黄色でハイライトされます。

ブラウザ側の不具合で読み上げが無言のまま止まったり、特定の箇所で合成に失敗したりした場合は、自動的に検知して直前の位置から読み直します。同じ場所で繰り返し止まるときは、その箇所を数文字だけ飛ばして続きを読み上げ、それでも進めない場合は次の文へ進みます。一度も読み上げられないまま失敗が続く場合だけ、音声を変更するようご案内します。

長い文章は読み上げの単位（ページ）ごとに区切られ、ポップアップの下に進み具合がドットで表示されます。ドットの左右にある「◀」「▶」を押すと、ページ単位で読み飛ばしたり聞き直したりできます。キーボードの ← → キーでも同じ操作ができます（入力欄や速度の調整を操作しているあいだは、キーでのページ送りは行いません）。一時停止中にページ送りしたときは、そのまま一時停止を保ち、再開するとその位置から読み上げます。ページ送りはブラウザの音声のときだけ使えます（AI音声は1ページずつ音声を作って再生するため対象外です）。

読み上げを押しても音が出始めないことがあるため、音が出るまでは案内表示が「音声の準備をしています…」になります。ほかのアプリが音声を使っているなどの理由で始まらないまま1.6秒（オンライン音声は5秒）を過ぎた場合は、音声エンジンを解除して自動的に読み上げ直します。あわせて、画面を最初に触った時点で音声エンジンを起こしておき、初回の開始の遅れを減らしています。

「クリップボードの文章・画像を読み上げ」を押すと、以前の文章と読み上げをクリアしてから、コピーしてある文章を入力欄へ取り込み、すぐに読み上げます。画像をコピーしている場合は、その画像から文字を読み取ってから続けて読み上げます。貼り付けた文章に含まれる絵文字と、何も書かれていない空行（空白やタブだけの行を含む）は自動的に削除されます。ブラウザからクリップボードの読み取り許可を求められる場合があります。

許可確認を表示せずに利用するには、入力欄を選択して Ctrl + V（スマートフォンでは長押しして「貼り付け」）を実行してください。以前の文章が自動的にクリアされ、絵文字と空行を削除した文章だけをすぐに読み上げます。

PDFやWebページからコピーした文章は、画面の表示幅で改行されていることがあります。そのままでは「〜便利な仕」「組みでも〜」のように語の途中で読み上げが切れるため、貼り付けた時点で折り返しの改行をつなぎ直します。句点で終わる行の改行、箇条書き・一覧の行頭、段落のあいだの空行、表示幅に届かない見出しのような行の改行は、区切りとしてそのまま残します。

処理方法を選ぶ

入力欄の下の「処理方法」で、画像の読み取り方と、読み上げる前のAI処理をまとめて選べます。選んだ内容はブラウザに保存され、次に開いたときもそのまま使われます。

画面の一番上にも、同じ内容を切り替えられる横一列の簡易選択（🔊 無料OCR / 🔍 高精度 / 📝 要約 / 📑 詳細要約 / 🌐 翻訳）を置いています。上下どちらを操作しても同じ設定になるので、スクロールせずに切り替えられます。

変更したのに画面が変わらないときは、ブラウザが以前のページを覚えている場合があります。ページを再読み込み（スマートフォンでは下へ引っ張る、パソコンでは Ctrl+Shift+R / ⌘+Shift+R）してください。vercel.json で index.html・style.css・script.js は毎回新しいかどうかを確かめる設定にしています。

処理方法	画像を入れたとき	文章を入れたとき	AIの利用
🔊 無料OCRで読み上げ（初期値）	無料OCR → 読み上げ	そのまま読み上げ	なし
🔍 高精度OCRで読み上げ	Gemini OCR → 読み上げ	そのまま読み上げ（AIは呼びません）	あり
📝 要約して読み上げ	無料OCR → 要約 → 読み上げ	要約 → 読み上げ	あり
📑 詳細要約して読み上げ	無料OCR → 詳細要約 → 読み上げ	詳細要約 → 読み上げ	あり
🌐 翻訳して読み上げ	無料OCR → 翻訳 → 読み上げ	翻訳 → 読み上げ	あり

• 「翻訳して読み上げ」を選んだときだけ、翻訳先の言語（日本語・英語・中国語・韓国語）を選べます。初期値は日本語です。

• 要約・詳細要約は、入力が何語でも日本語で返します。入力された文章の言語は、Gemini側で自動的に判断します。

• 詳細要約は、通常の要約より丁寧にまとめます。要点だけでなく理由・背景・具体例・数値なども残し、長さは元の文章のおよそ3〜5割が目安です。

• AIを使う4つ（高精度OCR・要約・詳細要約・翻訳）は、同じパスワード認証が必要です。認証済みであれば、そのまま使えます。

• AIの結果は、入力欄とは別の「AIの結果」欄に入ります。 元の文章は入力欄にそのまま残るので、失われることはありません。翻訳・要約されたかどうかも一目で分かります。

• 「AIの結果」欄があるときは、そちらの文章を読み上げます。手で直してから読み上げることもできます。「✕ 消す」を押すと、元の文章を読み上げる状態へ戻ります。

• 同じ文章・同じ設定で続けて読み上げても、AIへ送るのは1回だけです。文章や翻訳先の言語を変えると、あらためて処理します。

• 読み上げ中は、「現在読み上げ中」のすぐ右に、実際に行ったことが2つの印で出ます。選んだ処理方法ではなく、実際の動きを示します。

  印	意味
  📄 文字	入力欄へ文字として入れた文章
  📷 画像	画像から読み取った文章
  AIなし（灰色）	AIを使っていない＝料金はかかっていない
  ✨ AIで読取／✨ AIで要約／✨ AIで翻訳（紫）	AIを使った＝料金がかかっている

  例えば「🔍 高精度OCRで読み上げ」を選んでいても、文字を入力したときはAIを使いません（高精度OCRは画像のときだけ働きます）。そのときは「📄 文字」「AIなし」と出るので、AIへ送ったかどうかが一目で分かります。印にマウスを重ねると、詳しい説明が出ます。

• 読み上げ中に音声の選択やAI音声の切り替えを変えても、その読み上げには反映されません。次の読み上げから変わります。

• **処理方法を切り替えても、読み上げは始まりません。**上下どちらの切り替えも設定が変わるだけなので、切り替えたあとに「読み上げ」のボタンを押してください。読み上げ中に変えても、その読み上げには反映されません。表示される処理方法も、読み上げを始めたときのままです。「停止」してから「読み上げ」を押し直してください。

翻訳・要約されなかったとき

AIが原文をそのまま返すことがあります（すでにその言語で書かれている、読み取った文字が崩れている、など）。そのときは、サーバー側でもう一度だけAIへ問い直します。それでも変わらなかった場合は、「AIの結果」欄の見出しが 「◯◯に翻訳（変わりませんでした）」 に変わり、色が付きます。処理されたのかどうかを、見て判断できるようにするためです。

変わらなかったときは、次をお試しください。

• 画像から読み取った文章が崩れているときは、「🔍 高精度OCRで読み上げ」で読み取ってから、翻訳・要約を選び直す
• 翻訳先の言語が、元の文章と同じ言語になっていないか確認する

AI音声で読み上げる（Gemini TTS・有料）

ブラウザの音声のかわりに、Geminiが作った音声で読み上げられます。料金がかかるため、チェックをONにしたときだけ使います。OFFのあいだは、これまでどおり無料のブラウザの音声で読み上げます。

使い方

「クリップボードの文章・画像を読み上げ」のすぐ下にある 「✨ AI音声で読み上げ（有料）」のチェックを入れると、AI音声で読み上げます。OFFのあいだは、これまでどおり無料のブラウザの音声です。

「音声」の選択は、2つに分かれています。

選択	料金	内容
音声（ブラウザ・無料）	無料	端末に入っている音声です（「Microsoft 七海」を優先します）
✨ AI音声（Gemini・有料）	Gemini APIの利用料金	チェックを入れたときに使う声です。8種類から選べます

ページを開き直すと、チェックはOFFに戻ります（つけたまま使い続けて、気づかないうちに料金がかかることを防ぐためです）。

いま何をしているか（「待機中」「AI音声を作っています…（1 / 3）」「読み上げ中です」など）は、この切り替えのすぐ下に出ます。操作ボタンの下では気づきにくいため、画面の上のほうへ置いています。

選べる声は Aoede（軽やかな声・初期値）／Kore（落ち着いた声）／Puck（明るい声）／Charon（説明に向いた声）／Leda（若々しい声）／Achird（親しみやすい声）／Vindemiatrix（やさしい声）／Sulafat（あたたかい声）です。増やすときは、script.js の AI_VOICES と api/tts.js の ALLOWED_VOICES の両方へ追加してください。

読み上げ速度は、ブラウザの音声とAI音声で別々に覚えます。初期値はブラウザの音声が2.0倍、AI音声は1.0倍です（AI音声はもともと自然な速さで話すためです）。チェックを入れたり外したりすると、それぞれの速度に戻ります。

動き

1. 文章を120文字ずつに区切り、Geminiの音声モデル（使えるモデルの一覧から最新のものを自動で選びます）へ順番に音声を作ってもらいます。Gemini 3.8 以降の音声モデルで作るときは、区切った文章ごとに作っても声の調子がそろうよう、毎回同じ「話し方の指示」（api/_gemini.js の TTS_STYLE）を一緒に渡します。
2. **最初のひとかたまりができた時点で再生を始め、次の音声は再生中に作ります。**待ち時間を短くするためです。
3. 「一時停止」「停止」「読み上げ速度」は、ブラウザの音声と同じように使えます。速度は再生中でもすぐに変わります。
4. **AI音声では、終了アナウンス（「〜を終了します。」）は読み上げません。**文章だけを読み上げます（ブラウザの音声では、これまでどおり読み上げます）。
5. 同じ文章・同じ声をもう一度読み上げるときは、作り直しません（料金がかからないようにするためです）。覚えておく音声の量には上限があり、古いものから忘れます。
6. Gemini側が混み合っている（TTS-G429）ときは、少し待ってから自動でやり直します（最大2回）。待つ時間は、Geminiが教えてくれた秒数を優先します。無料枠では1分あたりに作れる回数が決まっているため、待てば続きを作れることが多いからです。

「翻訳」「要約」「高精度OCR」と組み合わせることもできます。そのときは「現在読み上げ中」の印が「✨ AIで翻訳＋音声」のようになり、AIをどこに使ったかが分かります。

音声を保存する

AI音声で読み上げると、操作ボタンの並びに「⬇ 音声を保存（約◯秒）」が出ます。押すと、読み上げた音声を1つのWAVファイル（16ビット・モノラル・24kHz）としてダウンロードできます。

• ファイル名は yomiage-<声の名前>-<日付>-<時刻>.wav です。
• 途中で停止した場合も、そこまでに作った音声を保存できます。
• 新しく読み上げ始めるか、クリップボードから読み込み直すと、保存ボタンは消えます。

利用できないとき

GEMINI_API_KEY と APP_PASSWORD_HASH を設定したVercelなどのサーバー環境が必要です。index.html を直接開いた場合や、設定が足りない場合は、案内と短い印（TTS- で始まる記号）を表示します。

印	意味	直しかた
TTS-401	パスワードが必要	パスワードを入力します（24時間は聞かれません）
TTS-G404	音声モデル名が使えない	案内に出る音声モデル名を GEMINI_TTS_MODEL へ設定します
TTS-G429	Geminiが混み合っている（利用上限）	自動で2回まで待ってやり直します。それでも出るときは、しばらく待ちます
TTS-TIMEOUT	時間内に音声を作れなかった	短い文章でお試しください（1回の生成は60秒まで待ちます）

音声を作るには時間がかかるため、api/tts.js の処理時間は60秒（vercel.json）、Geminiを待つ時間は55秒（api/_gemini.js の GEMINI_TTS_TIMEOUT_MS）にしています。1回に渡せる文章は300文字まで（MAX_TEXT_LENGTH）で、画面側は120文字ずつ（AI_TTS_CHUNK_LENGTH）に区切って送ります。

画像から文字を読み取る（OCR）

画像をコピーした状態で「クリップボードの文章・画像を読み上げ」を押すと、その画像に写っている文字を読み取り、続けてそのまま読み上げます。スクリーンショットを撮ってボタンを押すだけで、画面に写っている文章を聞けます。

コピーした画像を入力欄へ Ctrl + V で貼り付けた場合は、文字を読み取って入力欄へ入れるところまでを行います。読み上げは自動では始まらないので、内容を直してから「読み上げ」を押してください。

どちらの場合も、文章と画像の両方がコピーされているときは、これまでどおり文章を読み上げます。

画像の読み取りには「無料OCR（Tesseract.js）」と「🔍 高精度OCR（Gemini）」の2つがあり、入力欄の下の「処理方法」で選びます。処理中は、選んだ方法に合わせた表示が出ます（無料OCRは進捗率、高精度OCRは「AIで文字を読み取っています…」）。

• 文字認識には Tesseract.js を使用し、日本語（jpn）で読み取ります。APIキーやサーバーは不要です。
• Tesseract.js本体と日本語の学習データはCDN（jsDelivr）から取得するため、初回の読み取りだけインターネット接続が必要で、少し時間がかかります（学習データは十数MB）。2回目以降はブラウザのキャッシュが使われます。
• 読み取った文章では、日本語の文字と文字の間に入った不要な空白と空行を自動的に削除します。
• 画面の折り返し位置に入った改行は、貼り付けた文章と同じように、続きの文としてつなぎ直します。「〜リアルタイムで測」「定値を表示する〜」のように語の途中で改行されていても、途切れずに読み上げます。OCRは1つの文の途中にも空行を入れるため、読み取った文章では空行をまたいでも前後をつなぎます（貼り付けた文章では、空行は段落の区切りとしてそのまま残します）。
• 画面のスクリーンショットのように、文字がはっきり写った画像ほど正しく読み取れます。写真の傾き、手書き文字、背景の模様、小さすぎる文字は読み間違えることがあります。

AIで高精度OCR（Gemini API）

通常のOCR（Tesseract.js）でうまく読み取れない画像のために、Google の Gemini API を使う「🔍 AIで高精度OCR」を用意しています。レイアウトが複雑なスクリーンショットや、通常OCRが文字を取りこぼす画像に向いています。

使い方は次のとおりです。

1. 入力欄の下の「処理方法」で「🔍 高精度OCRで読み上げ」を選びます。この選択はブラウザに保存されるので、設定は最初の1回だけです。初めて使うときは、パスワードの入力を求められます（下の「パスワード認証」を参照）。
2. これまでどおり画像をコピーして貼り付ける、または「クリップボードの文章・画像を読み上げ」を押します。この1回の操作で、AIによる読み取りまで進みます（ボタンから読み上げた場合は、続けて読み上げます）。
3. 読み取った文章が「入力テキスト」へ入ります。内容を直してから「読み上げ」を押してください。

• Gemini APIを呼び出すのは、高精度OCRを選んでいるときに画像を読み取ったときだけです。ページを開いたとき、処理方法を切り替えたとき、文章だけを読み上げるとき、無料OCRのときには呼び出しません。
• 処理中は「AIで文字を読み取っています…」と表示され、読み取り方法は切り替えられなくなります。同じ画像から複数回送信されることはありません。
• AI OCRを選んでいるときだけ、画像がGemini APIへ送信されます。 通常OCRはブラウザの中だけで完結し、画像は外部へ送信されません。画像はサーバーに保存しません（読み取りのあいだだけ扱います）。
• AI OCRが失敗しても、通常OCRへ戻せば読み取りと読み上げをそのまま利用できます。
• 大きすぎる画像は、文字が読める品質を保ったままブラウザ側で縮小してから送信します（長辺2000px・JPEG）。

通常OCRとの使い分け

	無料OCR（Tesseract.js）	高精度OCR（Gemini API）
料金	無料	Gemini APIの利用料金
実行	「無料OCRで読み上げ」「翻訳」「要約」を選んでいるとき	「高精度OCRで読み上げ」を選んでいるとき
処理する場所	ブラウザの中だけ	Vercel経由でGemini API
画像の送信	なし	あり（押したときだけ）
向いている画像	文字がはっきりした簡単な画像	複雑なスクリーンショット、通常OCRで読み取れない画像

パスワード認証（AIの機能のみ）

料金が発生するAIの機能（高精度OCR・翻訳・要約・AI音声）だけに、共通のパスワードを設定します。ブラウザの音声での読み上げと「通常OCR（無料）」は、これまでどおり誰でも認証なしで使えます。

• 「🔍 AIで高精度OCR」で最初に画像を読み取るとき、小さなパスワード入力を表示します。
• 正しいパスワードを入力すると、サーバー側（/api/login）で確認し、HttpOnly Cookie（Secure / SameSite=Strict / 有効期限24時間）を発行します。認証したあとは、そのまま元の読み取りを自動でやり直します。
• 24時間のあいだは、パスワードを聞かれません。期限が切れると、次にAI OCRを使うときにもう一度聞かれます。
• パスワードはサーバー側だけで確認します。コードへ書き込まず、localStorage にもURLにも残しません。Cookieの中身は 有効期限.署名 の形で、書き換えると署名が合わなくなります（authenticated=true のような値は使っていません）。
• パスワードを3回続けて間違えると、しばらく受け付けません。 最初は約30分で、そのあとも間違えるほど待ち時間が長くなります（最長で約3時間）。待ち時間のあいだは、正しいパスワードを入れても認証できません。正しく入力できた時点で、間違えた回数の記録は消えます。
• パスワードの総当たりを防ぐため、/api/login は10分あたり10回までに制限しています。/api/ocr・/api/ai・/api/tts には回数の制限はありません（パスワードで認証した人だけが使えます）。

パスワードのハッシュを作る

パスワードそのものではなく、SHA-256のハッシュを環境変数へ設定します。手元で次のコマンドを実行してください。

node -e "console.log(require('crypto').createHash('sha256').update('ここにパスワード').digest('hex'))"

Vercelでの設定

Settings → Environment Variables で、次を登録して再デプロイします。

名前	値	必須
APP_PASSWORD_HASH	上で作った64文字のハッシュ	必須（未設定のあいだ、AI OCRは使えません）
SESSION_SECRET	署名に使うランダムな文字列	任意（未設定でも動きます）

SESSION_SECRET は次のコマンドで作れます。設定しておくと、パスワードを変えなくても認証をやり直させることができます（値を変えると、それまでの認証はすべて無効になります）。

node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"

APP_PASSWORD_HASH が未設定のあいだは、AI OCRだけが「AI OCRを利用できません。パスワードの設定を確認してください。」と表示されます。読み上げと通常OCRはそのまま使えます。

GEMINI_API_KEY の設定

AI OCRには Gemini API のキーが必要です。キーは Google AI Studio で取得できます。

APIキーはブラウザ側のコードには置きません。 Vercel上のサーバー処理（api/ocr.js）だけが環境変数 GEMINI_API_KEY から読み込みます。NEXT_PUBLIC_ や VITE_ などの、ブラウザへ公開される名前の環境変数には設定しないでください。

Vercelでの設定

1. Vercel の対象プロジェクトを開きます。
2. Settings → Environment Variables を開きます。
3. Key に GEMINI_API_KEY、Value に取得したAPIキーを入力します。
4. Environments で Production にチェックを入れます（プレビュー環境でも使う場合は Preview、vercel dev でも使う場合は Development にもチェックを入れます）。
5. 保存したあと、再デプロイすると反映されます。

ローカルでの設定

ローカルで vercel dev を使って確認する場合は、リポジトリのルートに .env.local を作成します。

GEMINI_API_KEY=取得したAPIキー

.env.local は .gitignore で除外しているため、GitHubへはコミットされません。APIキーの実際の値を、ソースコードやREADMEへ書かないでください。

GEMINI_API_KEY が未設定でも、アプリは問題なく動きます。AI OCRを押したときだけ「AI OCRを利用できません。しばらくしてから再度お試しください。」と表示され、通常OCRと読み上げはそのまま使えます。

うまくいかないときの調べ方

AI OCRが失敗したときは、画面の案内のうしろに （AI-G403） のような短い印が付きます。秘密の情報は含まれていません。

印	意味	主な対処
AI-401	パスワードの認証が切れている	パスワードを入力し直す
AI-NOAUTH	APP_PASSWORD_HASH が設定されていない	Vercelの環境変数を登録して再デプロイする
AI-LONG	文章が長すぎる（要約・詳細要約は10万文字まで、翻訳は2万文字まで。api/ai.js の MAX_SUMMARY_TEXT_LENGTH / MAX_TRANSLATE_TEXT_LENGTH）	短く分けて試す。モデルを変えても変わりません（アプリ側の上限です）
AUTH-401	パスワードが違う	入力を確認する
AUTH-LOCKED	3回続けて間違えたため止めている	表示された時間だけ待ってから試す
AUTH-429	パスワードの試行が多すぎる	しばらく待ってから試す
AI-NOKEY	GEMINI_API_KEY が設定されていない	Vercelの環境変数を登録して再デプロイする
AI-G400 / AI-G401 / AI-G403	Gemini APIがキーを受け付けなかった	APIキーの値と、キーの利用制限を確認する
AI-G404	そのモデルを使えない	案内に表示される「利用できるモデルの例」を GEMINI_MODEL へ設定する
AI-G429	Geminiの利用上限に達した	サーバー側で自動的に代わりのモデル（廉価モデル優先なら gemini-flash-latest）で試します。それでも出るときは、しばらく待ってから試す
AI-G503	Gemini側が一時的に混み合っている	サーバー側で自動的に2回までやり直し、それでもだめなときは代わりのモデル（廉価モデル優先なら gemini-flash-latest）で試します。それでも出るときは、少し待ってから試す
AI-EMPTY	AIが文章を返さなかった	サーバー側で自動的に2回までやり直します（代わりのモデルを先に試します）。それでも出るときは、もう一度試すか、別の画像・文章で試す
AI-TIMEOUT	時間内に終わらなかった	小さい画像で試す
AI-HTTP404	サーバー処理が見つからない	デプロイが終わっているか確認する
AI-HTTP413	送った画像が大きすぎる	小さい画像で試す
AI-HTTP500 など	サーバー処理が止まった	Vercelのログを確認する
AI-NET-B	ブラウザから通信できなかった	ネットワークを確認する

翻訳・要約でAIが原文をそのまま返したときは、Vercelのログに 原文がそのまま返ってきたため、もう一度試します。 の行が出ます。

サーバー処理が公開されているかは、ブラウザで https://（公開しているアドレス）/api/ocr を開くと確認できます。{"message":"この操作は利用できません。","code":"AI-405"} と表示されれば公開されています（POST以外は受け付けないため、この応答が正常です）。ページが見つからない場合は、まだデプロイされていません。

Gemini側の詳しい理由は、Vercelの Deployments → 対象のデプロイ → Logs（または Functions）に記録されます。Gemini APIがエラーを返しました。 の行に、状態コードとGeminiからの説明が出ます。

使用するモデルの変更

新しいモデルが出ても、古いモデルが使えなくなっても、設定を書き換える必要はありません。

画像の読み取りと文章の処理（OCR・要約・翻訳）には、Googleが用意している「最新版を指す別名」を使います。中身はGoogle側で最新のモデルへ自動的に切り替わります。

種類	モデル名	設定している場所
廉価モデル	gemini-flash-lite-latest（最新のFlash-Lite）	api/_gemini.js の DEFAULT_GEMINI_MODEL
通常モデル	gemini-flash-latest（最新のFlash）	api/_gemini.js の STANDARD_GEMINI_MODEL

音声を作るモデルには「-latest」の別名がないため、そのAPIキーで使えるモデルの一覧をGeminiへ問い合わせ、最新のものを自動で選びます（api/_gemini.js の pickTtsModels）。

• 通常モデル：最新のFlashの音声モデル（料金の高いProは選びません）
• 廉価モデル：Flash-Liteの音声モデルがあればその最新、なければ通常モデルより1つ前の世代のFlashの音声モデル（料金が安く、利用上限も別々のためです）。どちらもないときは通常モデルと同じものを使います

選んだ結果は6時間覚えておき、その後に取り直します。音声モデルが見つからない（404、古いモデルが使えなくなったときなど）ときは、すぐに一覧を取り直して選び直したモデルで作り直します。一覧を取得できなかったときだけ、予備の名前（DEFAULT_GEMINI_TTS_MODEL / STANDARD_GEMINI_TTS_MODEL）を使います。

使える設定はモデルの世代で違います。Gemini 3.8 以降のモデルには temperature のかわりに「考える深さ」（thinkingLevel。高精度OCR・要約・翻訳は low、詳細要約は medium）を、それより前のモデルには temperature: 0 を渡します。「-latest」は名前から世代が分からないため、まず新しい世代の渡し方で試し、受け付けられなかった（400）ときは temperature: 0、それでもだめなら指示を本文に入れた形の順に試し直します。受け付けられた渡し方はモデルごとに覚えておき、次からは最初からその形で送ります（中身が切り替わって受け付けなくなったときは、また順に試し直します）。やり直しや代わりのモデルの分も時間がかかるため、api/ocr.js・api/ai.js の処理時間は60秒（vercel.json）、Geminiを待つ時間は50秒（GEMINI_TIMEOUT_MS）にしています。

Gemini側が一時的に混み合っている（503など）ときは、少し待って同じモデルで2回までやり直し、それでもだめなときは代わりのモデルで試します。利用上限（429）に達したときは、上限がモデルごとに別々のため、すぐに代わりのモデルで試します。代わりのモデルでも上限のときは、Geminiが示す待ち時間が15秒以内なら待ってやり直します。代わりのモデルは、画面の「AIモデル」で選ばなかった方のモデルです。

AIが文章を返さなかった（空の返事）ときも、残り時間があれば自動で2回までやり直します。同じモデルが続けて空を返すことがあるため、空を返したモデルを後ろへ回し、代わりのモデルを先に試します。

特定のモデルを試したいときは、Vercelの環境変数で差し替えられます（Settings → Environment Variables で追加し、再デプロイしてください）。値が空のときや使えない形のときは、上の自動の設定に戻ります。

• GEMINI_MODEL：廉価モデル（OCR・要約・翻訳）
• GEMINI_TTS_MODEL：廉価モデル優先で最初に使う音声モデル

AIモデルの優先（通常モデル優先／廉価モデル優先）

設定欄の上の「AIモデル」で、どちらのモデルを先に使うかを選べます（左が「廉価モデル優先」、右が「通常モデル優先」）。選んだ内容はブラウザに保存され、次に開いたときもそのまま使えます（初期値は「廉価モデル優先」）。

選択	最初に使うモデル	混み合っている・上限に達したときの切替先
廉価モデル優先（安価・混雑に強い）	gemini-flash-lite-latest ／ 音声 廉価の音声モデル（自動）	gemini-flash-latest ／ 音声 最新のFlash音声モデル（自動）
通常モデル優先（高品質・料金高め）	gemini-flash-latest ／ 音声 最新のFlash音声モデル（自動）	gemini-flash-lite-latest ／ 音声 廉価の音声モデル（自動）

画面は選んだ内容を modelPriority（standard / economy）として /api/ocr・/api/ai・/api/tts へ送り、サーバー側（api/_gemini.js の getTextModels / getTtsModels）が使う順番を決めます。通常モデルは STANDARD_GEMINI_MODEL で設定しています（音声モデルは自動で選びます）。切り替えると、要約・翻訳の結果やAI音声は、選んだモデルで作り直します。

読み上げのたびに、状態表示（「読み上げが完了しました」など）のすぐ下へ、実際に使ったモデルを小さく表示します（例：「使用モデル　要約：gemini-flash-lite-latest（gemini-3.5-flash-lite）／音声：gemini-3.1-flash-tts-preview」）。「-latest」を使ったときは、実際に使われた版をかっこで添えます（Geminiの返事の modelVersion）。混み合っていて代わりのモデルへ切り替えたときは「（混雑のため切替）」と添えます。AIを使わなかったときは表示しません。

使用しているモデル名は、画面の一番下に「使用AIモデル」の小さな表で表示されます。列は「OCR・要約・翻訳」「AI音声」、行は「最初に使う」モデルと、混み合っているときや利用上限に達したときに切り替える先のモデル（「混雑・上限時」）です（/api/models から取得するため、環境変数で変更した場合や、音声モデルが自動で選び直された場合もその名前が表示されます。取得できないときは、音声は「自動（最新）」と表示します）。DEFAULT_GEMINI_MODEL などを書き換えたときは、index.html の model-info に書いた既定の表示（取得できないときに使われます）も合わせて変更してください。

モデル名が使えない場合（AI-G404）は、そのAPIキーで利用できるモデル名を問い合わせて、案内のなかに例として表示します。表示された名前を GEMINI_MODEL へ設定するか、DEFAULT_GEMINI_MODEL を書き換えてください。

初期設定は「Microsoft 七海」（利用可能な場合）と2.0倍速です。七海が利用できない環境では、既定の日本語音声などが自動的に選択されます。

ローカルでの起動

ダウンロードしたフォルダー内の index.html をダブルクリックするだけで使用できます。Webサーバーの起動は不要です。

公開方法

このリポジトリをそのまま静的サイトとして公開できます。ビルド作業は不要です。

• index.html
• style.css
• script.js
• favicon.svg
• favicon.ico
• apple-touch-icon.png
• api/（AIの機能用。Vercelでのみ動作します）
• vercel.json（AIの機能の処理時間の設定）

Vercelではフレームワークを選ばず、静的サイトとしてデプロイできます。api/ の中のファイルは、Vercelが自動的にサーバー処理（Vercel Functions）として公開します。GitHubへpushすると、これまでどおりVercelへデプロイされます。

GitHub Pagesなど、サーバー処理を持たない場所でも公開できますが、その場合はAI OCRだけが利用できません（通常OCRと読み上げはそのまま動きます）。

対応環境と注意事項

• Web Speech API の SpeechSynthesis に対応した最新の Chrome、Edge、Safari などを推奨します。
• 利用できる音声はOSとブラウザによって異なります。日本語音声がインストールされていない環境では、日本語以外の音声だけが表示される場合があります。
• 「オンライン」と表示される音声は、OSやブラウザの仕様によりインターネット接続を必要とする場合があります。このアプリ自体は外部APIへ接続しません。
• ブラウザや端末によって読み上げ方、発音、利用できる速度には差があります。
• ページ送りは読み上げの区切り（ポップアップのドット1つ分）ごとの移動です。文や語の途中からは始められません。
• ほかのアプリが音声を使っている間などは、読み上げの開始が遅れたり、始まらないまま止まったりすることがあります。自動的に検知して読み上げ直しますが、その際は「音声がすぐに始まらないため、読み上げをやり直します」と案内が出ます。
• 一部のブラウザでは、1回の発話が15秒ほどを超えると読み上げが無言のまま止まることがあります。定期的な再開処理と停止検知で自動的に復帰しますが、復帰の際に短い間が空いたり、直前の語句が読み直されたりする場合があります。
• 読み上げエンジンによっては & < > を含む文章で合成に失敗するため、これらは全角の ＆ ＜ ＞ に置き換えて読み上げます。
• 画像の文字認識（OCR）はCDNからTesseract.jsと日本語の学習データを取得します。社内ネットワークなどでCDNへ接続できない環境では利用できません。
• 「AIで高精度OCR」「AIで翻訳・要約」「AI音声」は、Vercelなどサーバー処理を実行できる環境と GEMINI_API_KEY の設定が必要です。index.html を直接開いた場合は利用できません。
• AI音声は料金がかかります。「✨ AI音声で読み上げ」をONにしたときだけ使い、ページを開き直すとOFF（無料のブラウザの音声）に戻ります。
• スマートフォンでは、画面を一度も触っていない状態で音を鳴らせないブラウザがあります。最初の操作で無音を鳴らして解除していますが、それでも鳴らないときは、画面をタップしてからもう一度読み上げてください。
• OCRの処理時間は画像の大きさと端末の性能によって変わります。大きな画像ほど時間がかかります。
• クリップボードの自動読み取りはブラウザのセキュリティ制限を受けます。許可ダイアログをWebアプリ側から省略することはできません。GitHub PagesやVercelなどのHTTPS環境、またはlocalhostでの利用を推奨します。index.htmlを直接開いて毎回確認される場合は、入力欄への Ctrl + V を利用してください。

ファイル構成

.
├── index.html             # 画面構造
├── style.css              # レスポンシブデザイン
├── script.js              # 読み上げ・長文分割・画像OCR・操作処理
├── favicon.svg            # ファビコン（SVG）
├── favicon.ico            # ファビコン（ICO、非対応ブラウザ向け）
├── apple-touch-icon.png   # iOSホーム画面用アイコン
├── api/
│   ├── ocr.js             # AI高精度OCR（画像から文字を読み取る）
│   ├── ai.js              # AIで翻訳・要約する
│   ├── tts.js             # AI音声（Gemini TTS）で読み上げる音声を作る
│   ├── login.js           # AI機能のパスワード認証
│   ├── models.js          # 画面の一番下に表示する使用AIモデル名を返す
│   ├── _auth.js           # 認証とレート制限の共通処理
│   └── _gemini.js         # Gemini APIの呼び出しとモデル名の設定
├── vercel.json            # AIの機能（OCR・翻訳/要約・音声）の処理時間の設定
├── .gitignore             # .env.localなどを除外
└── README.md              # 使い方