Gemini Canvasで英語プレゼン読み原稿を音声化するアプリを作った

作った経緯

英語で発表する機会が増えてきたとき、読み原稿を声に出して確認したい場面が何度もあった。でも毎回テキストをコピーしてどこかのTTSサービスに貼り付けるのは手間だし、使うたびに業務の文章を外部に出すことへの抵抗もあった。

「Gemini Canvasで作れるんじゃないか」と思って試してみた。

---

2つのバージョンを作った

バージョン1：Google AI TTSモデル（高精度）

gemini-2.5-flash-preview-tts のAPIを使って、高品質な音声を生成するバージョン。PCM16の音声データをWAVに変換してブラウザで再生できる。複数のボイスから選択できて、ダウンロードも可能。

Gemini Canvasに渡したプロンプトはこれ：

ReactとTailwind CSSを使用して、1ファイルで完結する「英語読み上げシステム（Text-to-Speech）」を作成してください。
以下の要件を必ず満たしてください。

1. APIの利用:
   - `gemini-2.5-flash-preview-tts` のAPIエンドポイントを使用してください。
   - レスポンスからPCM16の音声データを抽出し、ブラウザ上でWAVファイルに変換（バイナリ操作）してBlob URLを生成してください。
2. UIと機能:
   - 英語のテキストを入力するtextarea。
   - ボイス選択のドロップダウン（Kore, Zephyr, Puck, Charon, Fenrir, Leda, Orus など）。
   - 音声の生成中はローディング表示をすること。
   - 生成完了後、標準の `<audio>` タグで再生できるようにし、WAVファイルとしてダウンロードできるボタンを配置すること。
3. デザイン:
   - Tailwind CSSを使用し、クリーンでモダンなデザインにすること。
   - アイコンには `lucide-react` を使用すること。

---

バージョン2：Web Speech APIモデル（高速）

外部APIなしでブラウザ標準の window.speechSynthesis を使うバージョン。APIキーが不要で、端末にインストールされている英語音声をそのまま使える。速度（Rate）とピッチ（Pitch）をスライダーで調整できる。

Gemini Canvasに渡したプロンプトはこれ：

ReactとTailwind CSSを使用して、1ファイルで完結する「英語読み上げシステム（Text-to-Speech）」を作成してください。
以下の要件を必ず満たしてください。

1. APIの利用:
   - 外部APIは使わず、ブラウザ標準の `Web Speech API` (`window.speechSynthesis`) を使用してください。
2. UIと機能:
   - 英語のテキストを入力するtextarea。
   - 端末にインストールされている「英語（enで始まる言語）」の音声だけを抽出して選択できるドロップダウン（音声の読み込みは非同期に対応すること）。
   - 読み上げ速度（Rate: 0.5〜2.0）と、声の高さ（Pitch: 0.0〜2.0）を調整できるスライダー。
   - 再生（Play）ボタンと、停止（Stop）ボタン。
   - 再生中は再生ボタンを無効化するか、停止ボタンに切り替えること。
3. デザイン:
   - Tailwind CSSを使用し、クリーンでモダンなデザインにすること。
   - アイコンには `lucide-react` を使用すること。

---

やってみてわかったこと

コードを書く労力は確かに減った。プロンプトを渡してしばらく待てば、動くUIが出てきた。

ただ、全部プロンプト通りに一発で完成したわけではない。構成は概ね妥当だったが、いくつか修正が必要だった：

• APIキーの設定: Gemini Canvas内で動かす限りAPIキーは不要で、これはCanvasを使う大きなメリットの一つ。ただし外部にデプロイして使う場合は別途APIキーの管理が必要になる
• 音声の読み込みタイミング: Web Speech API版は、音声リストが非同期で読み込まれるため、初回のドロップダウンが空になるケースがあった

これはAIの返答の問題というより、「ブラウザ/実行環境の制約」と「要件のすり合わせ不足」に分類できる。コードを書く労力は減ったが、環境の文脈を持ち込む労力は残る、という構図がここにある。

---

使い分けのイメージ

発表前に仕上がりを確認したいならTTS版、スキマ時間にサラッと聞き流したいならWeb Speech API版が向いていると思う。

---

さらに便利にするブラウザ拡張：Canvas Dock

Gemini Canvasで作ったアプリをもっと使いやすくする拡張機能として、Canvas Dock が紹介されていた。

主な機能はこの3つ：

• 作ったCanvasアプリをブックマーク管理できる
• ブラウザのサイドパネルからいつでも呼び出して実行できる
• Canvas内のAPI通信もそのまま動作する（APIキーが不要な構造を維持できる）

サイドパネルで展開できるのは実際に使う場面では便利で、読み原稿を手元に開きながら別タブで資料を確認する、といった使い方が自然にできる。

セキュリティ面でも言及があった。

GWSアカウントでそのCanvasアプリを使うと、そのAPI通信はGWSの保護対象になる

— Canvas DockでGemini Canvasアプリを安全に活用する方法｜まじん

組織のGoogle Workspace（GWS）アカウントでCanvasを使う場合、API通信がGWSの管理下に入るという点は、業務での利用を検討するときに確認しておきたい観点だと思う。拡張機能はZIP配布なのでコードを確認してから使える点も、業務環境に持ち込む際の安心材料になる。

---

現場で使う前に考えること

Gemini Canvasは実験・試作に向いている環境だが、実際の業務に組み込む前にいくつか確認しておきたい点がある。

• 入力テキストに患者情報が含まれていないか: 読み原稿であっても、症例を元にした文章は要注意。Google AI TTS版はAPIを通じて外部にテキストが送られる構造になっている
• 外部送信を避けたい場合はWeb Speech API版を選ぶ: 業務文書を外部サービスに通したくない場合は、端末内で完結するWeb Speech API版が妥当
• ダウンロードしたWAVファイルの保管場所: 共有ドライブに置く場合は、誰がアクセスできるかを確認する

「動いた」と「業務で運用できる」の間には、このあたりの確認がある。

---

おわりに

英語プレゼンの練習ツールとしては十分に使える水準になった。

Gemini CanvasはUIを含むアプリを数分で試せる点が強い。コードが書けないことより、エラーが出たときに止まってしまうことのほうが実際のハードルになりがちだが、エラーコードをそのままGeminiに貼って聞くと大抵は解決策が返ってくる。

「完璧なツールを一発で作る」ことを目標にすると詰まりやすい。「自分の現場の小さな摩擦を一つ消す」くらいの目標設定のほうが、続けやすいと思っている。

---

動画でも解説しています