AIでツールを自作する：Gemini Notebookクローン開発入門

こんにちは、AIニュースアプリ Morning AI 開発者の矢野哲平です。この記事では、AIを使ったプログラミングについて触れます。

先日、Gemini Notebook（旧NotebookLM）の音声概要機能のクローンアプリを作りました。この記事では、その開発の過程でどのようにAIを活用したのかを共有します。AIを使った開発をどう始めたらいいかわからない、という声はよく聞きます。何かを開発するための実践的なアプローチを、できるだけ具体的にお伝えします。

この記事で解説するポイントは、主に次の3つです。

1. Gemini Notebookの音声概要クローンを作った話
2. どのようなツールを使い、どのように進めたのか
3. 知識ゼロからどうプログラミングを始めるか

自分が欲しいものを自分で作れる時代

先日、Gemini Notebookの音声概要機能のクローンを作りました。音声概要は、ユーザーがアップロードしたソースからポッドキャスト風の音源を作れる機能です。耳の空いた時間を有効活用できる、とても便利な機能なのですが、使い込むと「一括で音声を作りたい」「APIで自動化したい」といった課題も見えてきます。

こうしたとき、選択肢は2つあります。実装されるまで待つか、自分で作ってしまうか。そして今は、AIの力を借りれば自分で作れるようになっています。今回のクローンも、だいたい3時間の作業×5日ほどで完成しました。

この記事でお伝えしたいのは「Gemini Notebookのクローンを作った」という事実そのものではありません。自分が欲しいと思うアプリや機能は、AIの力を借りれば作れるようになっている、ということです。

これは仕事でも応用できます。チームの業務を効率化するアイデアが浮かんで、外部に開発を依頼したら見積もりが高くて諦めた、というケースはよくあります。でも今は、AIを使って自分たちで開発する、という選択肢が出てきました。

具体的な事例があります。香川県のある自治体では、固定資産税の課税基準となる土地の用途を、衛星画像からAIで判別するシステムを開発しました。元々アイデアはあったものの、開発の見積もりが非常に高かった。そこで自分たちでChatGPTを使って開発し、見積もりの30分の1ほどの費用で実装したそうです。3000万円規模の開発費用を、120万円で実装したと。これは2024年の話で、当時のChatGPTを使っています。今はさらに高性能なモデルが出ているので、開発環境はもっと整っています。

業務効率化のシステムを自分たちで開発できれば、運用しながら思いついた機能の追加も、費用をかけずに簡単にできます。AIを組み合わせて自分たちでシステムを開発する。そういう選択肢が、今は取れるようになっています。

どんなツールを使い、どう進めたのか

では、実際にどんなツールを使い、どう進めたのか。Gemini Notebookのクローン開発を例に説明します。今回使ったツールは3つです。

• Gemini 2.5 Pro：Googleが提供する最新のAIモデル
• Google AI Studio：Googleが提供するAIの実験環境
• Stitch：GoogleのUI生成ツール（実験段階）

ChatGPTやClaudeという選択肢もありますが、今回はGemini 2.5 Proをメインに使いました。

Google AI Studioを選んだ理由は、コンテキストウィンドウが大きいからです。コンテキストウィンドウとは、AIの短期記憶のようなものです。開発を進めると会話のボリュームが増えます。「ここはどうしたらいいですか」「この機能は何ですか」と、やり取りが長くなる。Google AI Studioは長い会話を保持できるので、開発で力を発揮してくれます。

そしてStitchは、テキストからUI（Webページなど）を作成できるツールです。

まずは計画を固める

最初はGoogle AI Studioを開いて、これから開発するものの計画を固めます。「Gemini Notebookの音声機能を自分で実装したいのですが、どうすればいいですか」といった具合です。このとき、インターネットの情報も参照できるように、グラウンディングという機能をオンにして進めます。ここはコードを書く前の準備段階、情報収集の段階です。

コードエディターでコードを書く

ある程度情報が固まったら、コードを書いていきます。このときCode Editorを使います。プログラム版のワードのようなアプリだと思ってください。書類を書くときにワードを使うように、コードを書くときはコードエディターを使います。

今、AIでコードを書くには色々な選択肢があります。CursorやVS Code、Windsurf、Claude Code、先日公開されたGemini CLIなどです。選択肢が多くて迷いますが、現時点ではCursorかVS Codeのエディターがおすすめです。Cursorは勢いがありますし、VS Codeは無料でできる範囲が大きいです。AIコーディングエージェントの全体像についてはAIコーディングエージェントとは？も参考にしてください。

AI搭載のコードエディターでは、中でAIが動きます。質問しながらコードを書けますし、エージェントのように、指示した内容から自動でコードを生成させることもできます。

エージェント機能の注意点

エージェント的な使い方には、注意点があります。人間の少ない指示でAIが自動でコードを生成してくれる。一見すごく便利ですが、落とし穴もあります。

簡単な機能はうまくいくのですが、複雑なものになると、AIが間違った実装をしてしまうんですね。原因は2つあります。一つはAIモデルの性能の限界、もう一つは人間の指示不足です。

なので、複雑なタスクでは、あえてエージェント機能を使わずにAIと対話を重ね、実装する機能を固めてからエージェント機能を解放する、という使い方がおすすめです。

何回も実装していて、指示の出し方も仕様も把握しているタスクなら、AIが間違ってもすぐ発見できます。こうしたタスクではエージェント的な使い方も全然ありです。一方で、人間自身も手探りで、全体像が把握できていないタスクでは、エージェント機能は注意しながら使いましょう。

エラーの対処

開発を進めると、必ずエラーに遭遇します。エラー文は英語で出力されますが、それをそのままコピペしてAIに渡します。「こんなエラーが発生しています」と。するとAIが解決方法を提示してくれます。

エラー解決の精度で言うと、私の感覚ではGemini 2.5 Proが使いやすかったです。今回の開発でGemini 2.5 Proを選んだ理由の一つでもあります。

画面（フロントエンド）の実装

ユーザーがPDFをアップロードできる画面、いわゆるフロントエンドの作り込みには、Stitchを使いました。「ユーザーがファイルをアップロードできるページを作成してください」「ログインボタンを押したらGoogleログインする画面を作成してください」といった指示を出します。Stitchは小回りが効くので、テストプロダクトの開発に向いています。

Stitchが生成した画面のスクリーンショットを撮り、Geminiに渡して「この画像のデザインに則ったコードを生成してください」と指示します。すると、結構な精度で画面を生成してくれます。Webデザインに関するコードは、私は一行も書いていません。

HTMLやCSSを触ったことがある人ならわかると思いますが、慣れていないとレイアウト崩れや余白の調整が結構面倒です。そうした部分をStitchとGeminiの組み合わせで解決します。AIにお願いしてもレイアウトが崩れることはありますが、その部分のスクリーンショットを撮って「ここが崩れています」と画像で説明することもできます。

整理すると、Google AI Studioで打ち合わせをして、AI搭載のCode Editorでコードを書き、UI部分はStitchにお願いする。複数のAIツールを組み合わせることで、自分で開発するハードルはぐっと下がります。

変更履歴を管理するGit

AIではありませんが、もう一つ導入してほしいツールがあります。Gitです。ファイルの変更履歴を管理してくれるツールです。

開発を進めると「この実装をやり直したい」という場面が出てきます。Gitを入れておけば、簡単にバージョン管理ができます。詳しい使い方はPro Git（日本語版）というチュートリアルが参考になります。

知識ゼロからプログラミングを始める方法

ここまでで、AIを使って自分のアイデアを形にする方法を紹介しました。紹介したツールはすべて無料で使えるので、誰でも作ろうと思えば作れます。

ここからは、さらに開発の精度を上げるアプローチです。答えはシンプルで、人間自身がプログラミングの知識を身につけることです。

AIに質問すれば何でも答えてくれますが、質の高い、こちらの意図に沿った回答を引き出すには、人間側の質問力が問われます。質問力を上げるには、その分野の知識を備えるしかありません。今はプログラミングの無料教材がYouTubeなどにたくさんあります。少しでも知識を身につけておけば、開発の精度も上がります。

プログラミング言語にもいろいろな種類があります。有名なところでは、Python、Web開発で使うJavaScriptやTypeScript、iOS開発のSwift、Androidアプリ開発のJavaやKotlinなどです。何を作りたいかで変わりますが、独学の入り口としてはPythonがおすすめです。

理由は、ChatGPTやGeminiのキャンバス機能を使うと、チャット画面上でPythonを動かしながら勉強できるからです。「このコードはどういう意味ですか」「このコードはどんな処理をしていますか」と、リアルタイムでAIとやり取りしながら学べます。

ChatGPTとGeminiのどちらを使うかというと、現時点ではGeminiがおすすめです。私が試した範囲では、Geminiのほうがレスポンスが早く、特に初回の起動が早いです。また、Geminiは生成したコードに多くのコメントをつける傾向があります。海外では冗長だと批判されることもありますが、初心者にとっては、コードの説明があるほうがわかりやすいです。

PythonはチュートリアルもWebに色々あります。たとえばPython公式チュートリアル（日本語版）を片方の画面で開き、もう片方でGeminiのキャンバス機能を立ち上げて勉強を進める、というスタイルもおすすめです。

なお、チュートリアルや本は全部やる必要はありません。必要な部分だけ勉強して理解を深め、使わない部分は割り切って飛ばす。実は私自身、昔JavaScriptを分厚い本で1ページ目から最後までやって、自分が実装したいものには使わない機能まで勉強してしまい、遠回りした経験があります。必要な部分から学び、それ以外は必要になったらその都度勉強する、というアプローチで十分です。

そして、プログラミングスキルを上げる一番の近道は、とにかく何か作ってしまうことです。自分の業務を効率化するツールや、趣味の延長になるツールを作る。一般公開するものは気をつける点が増えて大変ですが、自分やチームだけが使うものならハードルはぐっと下がります。

何か作ると、エラーが出たりうまくいかなかったり、色々な問題が出てきます。それをAIや自分の頭を使って解決する中で、知らず知らずのうちにスキルが高まっていきます。今はAIがあるので、何でも質問できるし24時間対応してくれます。プログラミングを学ぶ環境としては、過去で一番いいと思います。

まとめ

最後に、今回のポイントをまとめます。

1. AIを使ってGemini Notebookのクローンを作った。Gemini 2.5 Pro、Google AI Studio、Stitchの3つを組み合わせて実装した
2. 現在はプログラミングスキルがゼロでも開発できる環境が整っている。さらに人間自身に知識があるほど、作れるものの幅が広がる
3. スキルを伸ばすベストプラクティスは、とりあえず何か作ってみること

頭の中にある業務効率化のアイデアを形にすれば、業務効率化にもつながり、プログラミングスキルも上がります。興味のある方は、ぜひ手を動かしてみてください。