書籍概要

Software Design plus

Google Cloudで学ぶ生成AIアプリ開発入門
――フロントエンドからバックエンドまでフルスタック開発を実践ハンズオン

著者
発売日
更新日

概要

生成AIの普及が急速に浸透してきています。本書は信頼性の高いクラウド環境であるGoogle Cloudで同社の生成AIを活用するための方法を解説します。自社で生成AIを利用したWebサイト構築をしたい方への良きガイドとなるように構成しています。最初に最新のWebサイト構築に必要なJSライブラリの使用法を俯瞰していきます，そして生成AI，本書ではGoogleのPaLM APIを使います。サンプルアプリとして，書英文添削アプリ→チャットボット風アプリ→ドキュメントの要約アプリ→ドキュメントQA サービスアプリを段階的に開発していくプロセスを読者と同じ目線で開発していきます。ステップごとに工程を追いながら，その技術を学ぶことができるようになります。Web+AIで新しい機能とサービスを開発していきましょう。

こんな方におすすめ

  • 生成AIの実践活用のための1冊。Google Cloudを使用した最新のWebサイト構築に興味があり，生成AI機能をシステムにどう組み込みのか興味がある方

本書が対象とする読者

本書は，Google Cloudのサービスを活用しながら，生成AIを利用したアプリの開発がハンズオン形式で体験できるように構成されています。既存の生成AIサービスを使うだけではなく，「生成AIを活用した新しいアプリを作って人々に提供してみたい」「業務システムに生成AIを組み込む方法を知りたい」という方に最適な内容です。Google Cloudのサービスやアプリ開発に使用するライブラリの使い方も基礎から説明していますので，これまでにアプリ開発の経験がない方でも，気軽に読み進めていただけます。

本書の読み方

本書は，第1章から順に読み進めることで，クラウド上でのアプリ開発の基礎と生成AIをアプリに組み込んで利用する方法を段階的に学ぶことができます。本書の手順に従って，実際に動くアプリの開発をハンズオン形式で体験していきます。各章での作業内容は，それまでの章の作業が完了していることが前提になりますので，途中の手順を読み飛ばさないように注意してください。

また，本書で使用するプログラミング言語は，フロントエンドで使用するJavaScriptとバックエンドで使用するPythonです。これらのプログラミング言語についての説明は含まれていませんので，JavaScriptとPythonをまだ使ったことがないという方は，参考書籍などで事前に学習しておくとハンズオンがよりスムーズに進められるでしょう。

本書で使用するコードは，次のGitHubリポジトリで公開されています。ディレクトリ「genAI_book」の内容が本書で使用する部分になります。
https://github.com/google-cloud-japan/sa-ml-workshop

サンプル

samplesamplesamplesamplesample

目次

第1章　前提知識

  • 1.1　Google Cloud入門
  • 1.2　React入門

第2章　Next.jsとFirebaseによるフロントエンド開発

  • 2.1　Google Cloudプロジェクトのセットアップ
  • 2.2　Next.jsによる静的Webページ作成
  • 2.3　Firebaseのセットアップ
  • 2.4　Googleログイン機能の実装
  • 2.5　Cloud Runへのアプリケーションデプロイ
  • 2.6　サーバーコンポーネントの利用

第3章　PaLM APIを用いたバックエンドサービス開発

  • 3.1　PaLM APIの使い方
  • 3.2　英文添削アプリの作成
  • 3.3　ファッションを褒めるチャットボット風アプリの作成

第4章　LangChainによるPDF文書処理

  • 4.1　LangChainによるPDF文書の要約
  • 4.2　スマートドライブアプリの作成

第5章　ドキュメントQAサービス

  • 5.1　埋め込みベクトルによるテキスト検索
  • 5.2　ドキュメントQAサービスの作成
  • 5.3　Vertex AI Searchによる検索サービス

サポート

補足情報

コンテナイメージの初回ビルド時に発生するエラーに関する補足

（2024年8月6日更新）

「2.5.2　Cloud Buildによるコンテナイメージ作成」で，リポジトリ作成直後にコンテナイメージのビルド処理を実行すると，リポジトリが使用するストレージへのアクセス権限の設定が完了しておらずエラーが発生することがあります。このような場合は，1分程度待ってから，再度，ビルド処理を実行してください。本文の手順では，次の箇所が対応します。

2.5.2　Cloud Buildによるコンテナイメージ作成

変更前 p.49 これでコンテナイメージをビルドする準備ができました。
変更後 これでコンテナイメージをビルドする準備ができました。作成したリポジトリに対するアクセス権限の設定が完了するまで少し時間がかかるので、1分程度待ってから次の作業に進みます。

（以下2024年8月2日更新）

PaLM 2からGeminiへの移行について

本書ではGoogle Cloudで提供される大規模言語モデルPaLM 2（text-bison）を使用していますが，今後PaLM 2が提供終了の予定となっており，後継のGeminiへの移行が必要となります。そのため，本書のサンプルコードを提供するリポジトリ内のコードとノートブックは，Gemini（gemini-1.5-flash）を使用するようにコードの修正が行われています。

主な変更内容と書籍内容の変更箇所については，リポジトリ内のREADMEファイルを参照してください。

READMEファイル
https://github.com/google-cloud-japan/sa-ml-workshop/blob/main/genAI_book/README.md

Firebaseのコンソール画面の仕様変更に伴う修正

Firebaseのコンソール画面の仕様変更により，「デフォルトのGCPリソースロケーション」の設定手順が変わりました。「2.3.1　Firebaseへのプロジェクト登録」，および，「4.2.2　Webアプリケーションの実装」の内容を次の様に読み替えてください。

2.3.1　Firebaseへのプロジェクト登録

変更前 p.30 ここでは、プルダウンメニューから既存のGoogle Cloudのプロジェクトが選択できるので、先ほど作成したプロジェクトを選択して、[続行]をクリックします。
変更後 画面下の「Google CloudプロジェクトにFirebaseを追加してください」をクリックすると、プルダウンメニューから既存のGoogle Cloudのプロジェクトが選択できるので、先ほど作成したプロジェクトを選択して、[続行]をクリックします。
変更前 P.31『続いて、「デフォルトのGCPリソースロケーション」を設定します。』から，P.32『設定後の画面は、図2-18のようになります。』までの範囲
変更後 続いて、Cloud Storageのデフォルトバケットを作成します。左のメニューから「構築」→「Storage」を選択すると図4-11（p.155）の画面が表示されるので、［始める］をクリックします。図4-12（p.155）の設定画面が表示されるので、「本番環境モードで開始する」が選ばれた状態のまま［次へ］をクリックします。すると、「Cloud Storageの設定」のポップアップが表示されるので、「Cloud Storageのロケーション」に「asia-northeast1」を選択して、［完了］をクリックします。「デフォルトバケットを作成しています」というメッセージが表示されるので、この処理が完了するのを待ちます。これで、「[Project ID].appspot.com」という名称のデフォルトバケットが作成されました。[Project ID]の部分は、使用中のプロジェクトのプロジェクトIDになります。画面左上の歯車アイコンから「プロジェクトの設定」を選択すると（図2-17）、プロジェクトの設定画面が表示されます。

4.2.2 Webアプリケーションの実装

変更前 P.155『左のメニューから「構築」→「Storage」を選択すると』から，P.156『続いて、Storageの管理画面が表示されるので、上部の［ルール］タブをクリックします。』までの範囲
変更後 左のメニューから「構築」→「Storage」を選択するとStorageの管理画面が表示されるので、上部の［ルール］タブをクリックします。

（以下2024年4月19日更新）

5.3　Vertex AI Searchによる検索サービス

この節で解説している「Vertex AI Search」のサービス名称が「Vertex AI Agent Builder」に更新されました。これに伴い，クラウドコンソールに表示される名称も「Vertex AI Agent Builder」に変わっています。本文とスクリーンショット内にある「Vertex AI Search」をすべて「Vertex AI Agent Builder」に読み替えてください。同じく，下記の2箇所にあるナビゲーションメニューの項目「検索と会話」を「Agent Builder」に読み替えてください。

  • p.189　「データストアの構成」１行目：ナビゲーションメニューの「AI」カテゴリーにある「検索と会話」を選択して，
  • p.192　「検索アプリの構成」１行目：画面左のメニューの「検索と会話」をクリックすると，

商品一覧