【Gemini APIで実践するAIO】Google AI Studioがヒント！あなただけの「専門AIチャットボット」開発入門

目　次

【Gemini APIで実践するAIO】Google AI Studioがヒント！あなただけの「専門AIチャットボット」開発入門のPodcast
ストーリーブック
はじめに：アイデアの源泉は「Google AI Studio」
AIチャットボットの心臓部：Gemini APIと「RAG」という考え方
1. AIOの核となる「RAG」とは？
2. AIの振る舞いを決定づける「システムインストラクション」という名の魔法
開発ステップ1：UI/UX設計とブラウザ内でのプロジェクト管理
開発ステップ2：多種多様なファイルに対応する知識の読み込み機能
開発ステップ3：UX（ユーザー体験）を劇的に向上させるストリーミング表示
AIO（AI Optimization）の観点からこのアプリを振り返る
まとめ：AIアプリ開発の第一歩を踏み出そう
参考資料

【Gemini APIで実践するAIO】Google AI Studioがヒント！あなただけの「専門AIチャットボット」開発入門のPodcast

下記のPodcastは、Geminiで作成しました。

ストーリーブック

「ヒロキとふしぎなAIのタネ」の絵本を見る

はじめに：アイデアの源泉は「Google AI Studio」

「自分が持っている大量のメモ（テキストファイル）や、過去に書いたプログラム（ソースコード）。この中身だけを完璧に覚えていて、質問したら何でも答えてくれる…。そんな『自分専用のAIアシスタント』がいたら、どれほど便利だろうか？」

この純粋な「あったらいいな」という思いから、今回ご紹介する「自分専用のチャットボット工房」というWebアプリケーションは生まれました。

これは、あなたが持っている様々なテキストファイル（例えば .txt や .md といったメモ帳ファイル、.js や .py などのプログラムファイル、.html というWebページファイルなど）をAIに「教科書」として読み込ませるだけで、その教科書の内容についてだけ答えてくれる専門AIチャットボットを、いくつも作って管理できるツールです。

このアイデアがひらめいた直接のきっかけは、Googleが提供している「Google AI Studio」というツールでした。これは、AIを手軽にお試しできる「AIの実験室」のような場所です。その中に、ファイルをアップロードして、そのファイルの内容についてAIとチャットできる機能があったのです。

AIが一般的な知識（インターネット全体から学んだこと）で答えるのではなく、私たちが「これだけを参考にして」と渡した情報源（これをグラウンディングと呼びます）に基づいて回答を考える。この仕組みは、AIの回答の正確さを劇的に高める可能性を秘めていました。

「このすごい体験を、もっと手軽に、自分だけのチャットボットとして何個も管理したい！しかも、他人に見られたくないプライベートな情報は、インターネット上のサーバー（お店の倉庫）に送らず、自分のパソコンのブラウザ（手元のカバン）の中だけで全部終わらせたい！」

そう強く考えたのが、開発のスタート地点です。

この記事では、プログラミングを始めたばかりの方や、「AIアプリ開発って面白そう」と興味を持っている方に向けて、この「チャットボット工房」アプリが、どのような考え方と技術で成り立っているのかを解説します。

特に、AIの性能を上手に引き出すための工夫であるAIO（AI Optimization：AI最適化）という考え方にも触れながら、できるだけ専門用語を噛み砕き、丁寧に紐解いていきます。

作成した「自分専用のチャットボット工房」でPubMedのPDF（PubMed の使い方 - 医学図書館 - 東京大学
を読み込ませ、これを知識ベースとしたチャットボットを作成し、「PubMedとは？」と聞いたら回答を返してくれた画面のスクリーンショットです。

AIチャットボットの心臓部：Gemini APIと「RAG」という考え方

このアプリの「頭脳」として働いているのは、Googleが開発した強力なAIモデル「Gemini（ジェミニ）」です。AIとの会話は、このGeminiとインターネット経由で通信する「Gemini API」という仕組みを使って実現しています。

AIモデルにも様々な種類がありますが、今回は「gemini-2.5-flash」というモデルを選びました。

その理由は、「速さ」と「お得さ（コスト）」のバランスが抜群に良いからです。

私たちが普段使うチャットアプリを想像してみてください。メッセージを送ったら、すぐに返事が来ますよね。AIチャットボットも同じで、質問してから何十秒も待たされると、使うのが嫌になってしまいます。リアルタイムの「会話」には、AIの「応答速度」がとても重要です。

gemini-2.5-flashは、非常に高速に応答を返してくれるため、ユーザーを待たせません。それでいて、APIの利用料金も比較的安価に抑えられています。個人が趣味で使うツールとして、これ以上ない最適な選択でした。（これも、目的に合わせてAIを選ぶという立派な「AIO」の一つです）。

AIOの核となる「RAG」とは？

しかし、ただAIモデルを使うだけでは、私たちの「自分専用の教科書についてだけ答えてほしい」という願いは叶いません。なぜなら、AIは「インターネット全体の知識」を持っているため、私たちが渡した教科書に書いていないことまで、知っている知識で答えてしまう（時には、それらしい嘘をついてしまう＝ハルシネーション（幻覚））からです。

そこで重要になるのが、AIO（AI最適化）の核となる「RAG（ラグ）」という考え方です。

RAGとは、Retrieval-Augmented Generation（検索拡張生成）の略です。日本語にすると「検索（Retrieval）で情報を補ってから、生成（Generation）する」という意味になります。

[RAG（検索拡張生成）の仕組みの図]

これを、このアプリに当てはめてみましょう。

検索 (Retrieval)：ユーザーが質問をすると、AIはまず、私たちが読み込ませた「専用の教科書（アップロードした全ファイル）」の中から、その質問に関連しそうな部分を探します。
生成 (Generation)： AIは、その見つけてきた「関連部分のテキスト」と「ユーザーの質問」をセットにして、答えを考えます（生成します）。

このRAGの仕組みを使うことで、AIの知識を「私たちが渡した教科書の範囲内だけ」に限定できます。これにより、AIが「知ったかぶり（ハルシネーション）」をするのを劇的に減らし、回答の信頼性をグッと高めることができるのです。

AIの振る舞いを決定づける「システムインストラクション」という名の魔法

では、どうやってAIに「RAGの考え方で動いてね」とお願いするのでしょうか？そのために使うのが「システムインストラクション」という魔法の呪文です。

これは、AIに対する「基本方針」や「お仕事マニュアル」を、私たちが普段使う言葉（自然言語）で与える指示のことです。チャットを始める前に、AIに「あなたはこういう役割で、こういうルールに従って動いてください」と教え込むイメージです。

このアプリでは、AIに以下のような（日本語に翻訳した）指示を与えています。

この指示の重要なポイントは3つです。

役割の設定：「エキスパートアシスタント」として振る舞うよう指示し、専門家としての回答を促します。
知識源の限定：「提供されたテキストのみ」「外部の知識は一切使用しないで」と強く釘を刺し、AIが勝手な知識で答えることを防ぎます。これこそがRAGの考え方をAIに実行させるための「肝」です。
例外処理の指示：「答えが見つからない場合」にどう行動すべきかを具体的に定義し、AIが嘘をつくくらいなら「分かりません」と誠実に答えるように導きます。

このように、AIの「性格」や「振る舞い」をシステムインストラクションで細かく制御すること。これこそが、AIの応答を最適化するAIOの、最も重要で基本的な第一歩なのです。

開発ステップ1：UI/UX設計とブラウザ内でのプロジェクト管理

どんなにすごい機能も、使いにくければ誰も使ってくれません。そこで、UI（ユーザーインターフェース：見た目やデザイン）とUX（ユーザーエクスペリエンス：使い心地や体験）を重視しました。

目指したのは、「説明書を読まなくても直感的に操作できること」です。「新しいチャットボットを作る」「ファイルを読み込ませる」「今あるボットを消す」といった主要な操作は、画面の上部（ヘッダー）にボタンとしてまとめました。そして、作ったチャットボットはドロップダウンリストから簡単に切り替えられるように設計しました。

そして、このアプリのもう一つの大きな特徴が、「すべてのデータをサーバーに送信せず、ユーザーのブラウザ内だけで管理する」という点です。

これにより、あなたのプライベートなファイル内容やチャット履歴が、開発者を含む他の誰にも知られることがなく、プライバシーを最大限に保護できます。

これを実現しているのが、ブラウザに標準で備わっているlocalStorage（ローカルストレージ）という機能です。これは、例えるなら「ブラウザの中にある、自分専用の小さな引き出し」のようなものです。

ユーザーが作成したチャットボット（このアプリでは「プロジェクト」と呼んでいます）は、「名前」「ID（識別番号）」、そして「知識ベースとなるテキスト内容」が全部セットになって、この localStorage という引き出しの中に保存されます。

アプリのページを開くたびに、ブラウザはこの引き出しからデータを取り出すので、いつでも作業を中断したり、再開したりできるのです。

開発ステップ2：多種多様なファイルに対応する知識の読み込み機能

プライバシーを守るため、ファイルの中身を読み込む処理も、すべてブラウザの中だけで完結させる必要がありました。

そのために使ったのがFileReader（ファイルリーダー）という、ブラウザの標準機能（Web API）です。これは、ユーザーがパソコンから選択したファイルを、JavaScriptというプログラミング言語でこっそり読み込むことができる便利な機能です。

当初は、私自身が「Obsidian（オブシディアン）」というメモアプリを使っていたため、そのファイル形式であるマークダウン（.md）だけに対応していました。

しかし、「どうせなら、自分が持っている他のテキストデータも全部、AIの教科書にしたい」と考え、対応するファイル形式を大幅に増やしました。

プログラミングのソースコード（.js, .py, .html）、データファイル（.json, .csv）、設定ファイル（.yml）など、パソコンが「これは文字の集まりだな」と判断できるプレーンテキスト形式のファイルなら、約30種類以上を読み込めるように拡張しました。

ユーザーが複数のファイルを選ぶと、アプリは裏側で以下の作業を自動的に行います。

FileReader を使って、選ばれたファイルの中身を一つずつ読み込む。
--- DOCUMENT: ファイル名A.txt --- のような「区切り線」をファイルごとに入れる。
すべてのファイル内容を、この区切り線でつなぎ合わせて、一つのとてつもなく巨大なテキスト文字列にする。

この「巨大なテキスト文字列」こそが、AIの教科書（知識ベース）の正体です。そしてこれが、先ほどのシステムインストラクションの [ここに〜挿入される] の部分に丸ごと渡されるのです。

開発ステップ3：UX（ユーザー体験）を劇的に向上させるストリーミング表示

AIチャットボットと対話するとき、質問を送信してから、AIの回答が「ドン！」と一度に全部表示されるまで数秒待たされると、少し味気なく感じませんか？

それよりも、人間同士がチャットアプリで会話するように、相手が「入力中...」と表示され、文章が少しずつ画面に出てくる方が、より「会話している感」があって自然に感じられます。これを技術的に実現するのが「ストリーミング表示」です。

通常のAPIリクエストが「レストランで注文した料理が、すべて完成してから一度にテーブルに運ばれてくる」イメージだとすれば、ストリーミングAPIは「回転寿司のように、できたお皿から一皿ずつ順番に流れてくる」イメージです。

Gemini APIには、このストリーミングを実現するために chat.sendMessageStream() という、特別な「通り道」が用意されています。

このアプリでは、このストリーミングの通り道から送られてくるテキストの「断片（chunk）」を、受け取るたびに画面に「追記」していく処理を実装しました。

これにより、あたかもAIがあなたの質問をリアルタイムで考え、その場で文章をタイプしているかのような視覚効果が生まれます。ユーザーは「今、AIが考えてくれているな」と感じることができ、待っている間のストレスが大幅に減ります。

このストリーミング表示は、使い心地（UX）を劇的に向上させるため、現代的なAIチャットアプリケーションにおける、ほぼ必須の技術と言えるでしょう。

AIO（AI Optimization）の観点からこのアプリを振り返る

さて、ここまで解説してきた内容を、改めてAIO（AI Optimization：AI最適化）、つまり「AIをいかに賢く、上手に使いこなすか」という観点から振り返ってみましょう。

RAGによる「ハルシネーション」の抑制： AIOの最も重要な目標の一つは、「AIの信頼性を高めること」です。このアプリでは、AIの知識源を「アップロードされたファイルだけ」に厳しく限定するRAGの仕組みを採用しました。これにより、AIが事実に基づかない、もっともらしい嘘（ハルシネーション）をつくことを効果的に防いでいます。
対話の最適化（システムインストラクション）： AIに「専門家として」「教科書に基づいて」「分からないことは正直に」といった明確な役割と行動ルール（システムインストラクション）を与えることで、私たちが求める回答（専門家として、提供された情報のみに基づく回答）を引き出しやすくしています。これも、AIとの対話を最適化する立派なAIOです。
コストとパフォーマンスの最適化（モデル選択）： AIOは、回答の「品質」だけでなく、「効率」も考えます。今回の「リアルタイムなチャット」というお題に対して、最高性能だけど高価で遅いモデルではなく、速度とコスト（料金）のバランスに優れた gemini-2.5-flash を選びました。これも、使う目的に合わせてリソース（資源）を最適化するという観点でのAIOと言えます。

このように、AIOとは「このAIモデルを使いなさい」といった単一の技術を指す言葉ではありません。AIの性能を最大限に引き出し、かつ、私たちの目的にピッタリ合う最適な形で利用するための「総合的な工夫のすべて」を指す言葉なのです。

まとめ：AIアプリ開発の第一歩を踏み出そう

「自分専用のチャットボット工房」の開発は、Google AI Studioという「AIの実験室」で触れたシンプルな機能から始まりました。

そして、AIOの中核であるRAGの考え方、プライバシーをどう守るかという設計思想、そしてストリーミング表示による使い心地の向上といった、アプリケーション開発における重要な要素を一つずつ学びながら形にしていく、楽しい旅でもありました。

この記事で解説した技術要素（localStorage, FileReader, ストリーミングAPI）は、一つ一つを分解してみれば、決してプログラミング初心者にとって難解すぎるものではありません。

Gemini APIのような強力なAIツールが誰でも使えるようになった今、大切なのは「こんなものがあったらいいな」というあなたのアイデア次第で、誰でも便利なAIアプリケーションを創造できる時代が来ている、ということです。

ぜひ、この記事の出発点となった「Google AI Studio」を、まずは遊び道具として触ってみてください。そして、あなた自身の「あったらいいな」を形にする、AIアプリ開発の第一歩を踏み出してみてはいかがでしょうか。

あなただけの知識が、世界で一つだけの賢いアシスタントに生まれ変わる日は、もうすぐそこです。

参考資料

Google AI Studio, https://aistudio.google.com/
Gemini API ドキュメンテーション, https://ai.google.dev/docs/gemini_api_overview
Web API インターフェイス | FileReader, https://developer.mozilla.org/ja/docs/Web/API/FileReader
Web Storage API | localStorage, https://developer.mozilla.org/ja/docs/Web/API/Web_Storage_API
Retrieval-Augmented Generation (RAG) とは - IBM, https://www.google.com/search?q=https://www.ibm.com/jp-ja/topics/retrieval-augmented-generation