【実験04】読むのが苦手な自分が「note記事を倍速で聴く（耳読）ツール」をGoogle AI Studioで開発してみた🎵

日々、noteを見ていて「宝物の山」で、
「これ！見たい〜」
という記事がどんどん新着で届くのですが、
如何せん、自分が読むのが苦手なもので…
色々見たいけど、時間がなく歯がゆい、
というジレンマに…

そこで、
今回見たい note記事を「倍速で聴く（耳読・速聴）ツール」
を自分で作ることを決心し、その奮闘記です。
Webアプリなので、PCでもスマホでも活用できます！

やればできる！　無料の挑戦で、♾️の彼方へ
まさに、快適環境を手に 🎵

◾️先ず、Google AI Studioを無料で登録する

無料でツール開発ができる「Google AI Studio」に今回はお世話になって、今の自分にとっての神ツールを作ってみたいと思います！
今はやりの「バイブ コーディング」ってやつですね！
ということで、実験開始です！

▼実験目標：
note記事を「倍速で聴く（耳読・速聴）ツール」を
作って、快適noteライフを過ごす！

• Google AI Studioに無料で登録する

• 作りたいものを指示出しする　→　AIに開発してもらう

• 動作確認する

• 修正点を指示出しする　→　AIに開発してもらう

• 動作確認する

• 完成

1.Google先生に「Google AI Studio」と入力して、
検索結果の一番最初のリンクをクリックするか、以下のURLをクリックして、Google AI Studioにアクセスします。
　https://aistudio.google.com/
TIPS：
この最初にブラウザで閲覧している時から、Googleアカウントでログインしていない時は、ログインしておいてください。（後で、楽するため）

2.初めてアクセスすると、
以下の「It's time to build」という案内メッセージが表示されるので、初めて使う人は、Use Google AI Studioの横にある「Try Gemini」を押します。
TIPS：
開発上級者で、APIを使ってプログラミングする人は、「Get API key」の方を使うそうです。

3.更に、利用規約等に同意して利用する、
という案内メッセージが表示されるので、チェックしてから「同意する」ボタンを押します。

4.閲覧時から、既にGoogleにログインしていると、
「自動的に、Google AI Studioに登録＆ログインされる」ようです。
ログインされた状態（画面左下にログイン済みのGoogleアカウントが表示される）で、Google AI Studioのメイン画面（チャット用）が表示されます。
TIPS：
・「Google AI Studio」は、元々開発者向けのツールであるため、ここで入力した内容は全てAIの改善に利用されるそうです。なので、個人情報・機密情報は入れないようにして利用します。
・画面右側の「Run settings」が諸々の設定になりますが、モデルは新しい「Gemini 2.5 Pro」がデフォルトで選択されているので、そのまま使います。その他のものもとりあえず、そのまま使います。

5.Google AI Studio上でのチャット履歴や、
開発したアプリの履歴を保存しておいて、後から確認できるようにするためには、上記画面の左側にある「History」メニューの直下の「Enable saving」ボタンを押します。

6.表示されるログイン画面で、Googleアカウントを選択すると、連携が完了し、「History」メニューの直下の「Enable saving」ボタンが非表示となります。

7.なお、連携されるようになると、
Googleドライブの「マイドライブ」の下に、「Google AI Studio」というフォルダが作成されます。

以上で、Google AI Studioが利用できる環境が整いましたので、
早速、ツールを作っていきたいと思います！

◾️「開発モード」的な機能を利用して、ツールを開発する

「作りたいアプリの指示だしから完成するまで」が、
結構長くて、色々奮闘しましたw
因みに、プロンプトでのやり取り奮闘記をこちらに載せておきます。
見たい危篤な方は見てみてください。おぇってなりますけどw

主に以下の流れでやり取りしながら、開発実験を進めました！
＊記事の最後に、"ほぼ"一発出しできる「マジックアイテム」もお伝えしますので、試したい方はそちらをどうぞ🎵

• アプリの目的と全体像を伝える

• 生成アプリに対して、想定と異なる点、エラーを伝えて改善してもらう

• 改善が何度も失敗したら、現時点の仕様を確認する

• 上記の2番と3番を繰り返して、完成したら仕様書を作成してもらう
  （今後のアップデート用と、壊れた時に再現できるように）
  

1.画面左側の「Build」メニューを押します。
そして、チャット欄に作りたいものを指示します！
すると、ガラガラポンと作成してくれたアプリが、画面中央下部にある「Your apps」という場所に保管されていきます！

2.それでは、早速、作りたいアプリについて、
簡単なプロンプトで指示出しします。
【1.アプリの目的と全体像を伝える】
（プロンプト）
Note記事の「URL」を指定してコンテンツを読み取り、その内容を2倍速で音声再生するWebアプリケーションを作ってください。
TIPS：
・画面の左側に、Geminiとのプロンプトの会話履歴が表示されて、やりとりしながら開発を進めていきます。
・プロンプトの指示出しに対して開発作業が完了するごとに、右側部分に最新版アプリがプレビュー表示されて、ここでアプリの動作確認ができます。
・定期的に、画面上部の「ディスクアイコン」を押して、現在のアプリデータを保存します。
（「Unsaved」という保存しない状態で、このページから離れると全てデータが飛びますので、ご注意を！）

という感じで、プロンプトで指示だししては、開発してもらって、を何度も繰り返して完成させます。
この後の、やり取りが長すぎるので、参考になる情報か不明ですが、、、（私の備忘録としてw）
私が指示出ししたダイジェストを以下にまとめておきます！

【2.想定と異なる点、エラーを伝えて修正してもらう】

生成結果：　全くURLと異なる文章を生成
（プロンプト）
指定されたURLのみのコンテンツを読み取り、その内容をそのままに、音声再生するようにしてください。

（プロンプト）
https://note.com/mtru2/n/nfc150ced3809
上記URLを指定したのですが、
生成される内容が実際の上記URLの内容と全く違います。
なぜ、異なる内容になってしまうのかを調査して原因と対策を教えてください。

（プロンプト）
まだ、上記改善点が解決していないので、
調査して原因と対策を報告して修正してください。

生成結果：　URLの内容が正しく取得できません。
（プロンプト）
今起きている「エラーの原因」を詳細に教えてください。

（プロンプト）
{"error":{"code":400,"message":"Request contains an invalid argument.","status":"INVALID_ARGUMENT"}}
上記のエラーが出たので、調査して原因と対策を報告して修正してください。

生成結果：　全くURLと異なる文章を、何度も生成
（プロンプト）
「指定したURLから、その内容を正確に抽出する」ために最適なライブラリがないかを調査して利用可能かどうか教えてください。

（プロンプト）
まだ、指定してURLの原文と、生成された文章が異なります。
調査して原因と対策を報告して修正してください。

【3.現時点の仕様を確認する】
（プロンプト）
現時点での、アプリケーションの基本仕様をまとめてもらえますか？

【4.想定と異なる点、エラーを伝えて修正してもらう】
生成結果：　相変わらず、全くURLと異なる文章を、何度も生成
（プロンプト）
指定したURLの原文抽出処理については「AIを経由せず」に、直接そのまま取得する方法にできませんか？

（プロンプト）
まだ、指定してURLの原文と、生成された文章が異なります。
調査して原因と対策を報告して修正してください。

生成結果：　「記事の取得に失敗しました」エラーが再度発生。
（プロンプト）
以下のエラーが出たので、調査して原因と対策を報告して修正してください。
# エラーメッセージ
記事の取得に失敗しました: AIが記事のタイトルまたは本文を抽出できませんでした。

（プロンプト）
複数回同じエラーが発生して全く改善できていないです。
根本原因を徹底的に調査して、原因と対策を報告してください。

生成結果：　何度も生成された文章が原文と全く違う
（プロンプト）
指定してURLの原文と、生成された文章が完全に異なり、正直使えないです！指定したURLの原文抽出処理については「AIを経由せず」に、「スクレイピング」等の直接そのまま取得する方法にできませんか？
原文はとにかく正確に取得し、その後で「要約する時に、AIに活躍してもらう」という流れにすれば良いと思います！

生成結果：　原文がようやく表示されたが、途中で切れてしまう
（プロンプト）
やっと、うまく本文取得できましたね！
但し、全体の文字制限があるかのように、記事後半が途中で切れてしまっています。調査して原因と対策を報告して修正してください。

と繰り返して、
なんとか原文に近しいものを、倍速で読んでもらえるツールができました！
これを完全に原文通りにさせて完成させるには、もう少し道のりがありました、、、

【5.完成版の仕様書を作成する】
（プロンプト）
こちらを一旦、完成版としたいので、アプリケーションの基本仕様をまとめてもらえますか？

◼️まとめ

ということで、
Google AI Studioを使って、「note記事を倍速で聴く（耳読）ツール」をバイブコーディングで実験開発してきました。

最後に、
色々と長いことやり取りをじゃっぴー（Gemini）さんとして、ようやく完成した、一発出しのマジックアイテム「基本設計書」がこちらです。

完全100%の再現性、とまではいかないかと思われますが、私が試してみて今のところ、5回中、5回は想定通りの機能を再現できています🎵

▼NoteReader 完成版「基本設計書」
（使い方）
1. Google AI Studioにログイン
2. 「Build」メニューを押す
3.この全テキストを「チャット」欄にコピペ
あとは、ガラガラポンです！

＊なお、あくまで実験なので、ご利用頂く際には、もしかすると、うまくいかない時もあったらご容赦ください。
でもコメント頂けたら、わかる範囲で一緒に考えます🎵

▼NoteReaderアプリケーションについて
（使い方を簡単に⭐️）
・note記事のURLをコピペして、要約の長さを「原文のまま」にして、「要約を生成」ボタンを押すと、画面下部に音声再生する文章が表示されます。
・「▶︎（再生）」ボタンを押すと、指定された速度で音声再生されます。
　（再生しながら、再生速度は変更できません）
・要約の長さを「1分」など選択すると、その長さに記事全体を要約してくれます。時間がない時にちょっと確認しておいて、後でじっくり記事をみる（聞く）ということもできます。

今回も、かなり長文となってしまいましたが、ここまで読んで下さった方には、感謝感謝です🙇

このツールが、
私と同じく「読むのが苦手〜」、「時間がない〜」
という方の、快適なnoteライフのお役に立てたら、
嬉しいです🎵

では、不定期な実験は、次回もできるよう頑張ってみますぅ〜