生成AI-Webアプリの構築

Windowsの場合、macOSの場合
Extensionは、VS codeを立ち上げた画面の左端のカラムの上から5番目のExtensionsアイコンをクリックして、現れたExtensionsカラムの最上部の検索窓で「Python」を検索する。検索結果の上位に表示されるMicrosoftのPythonの「Install」ボタンを押してPython Extensionをインストールする。
GitHub CopilotのExtensionも同様に、「GitHub Copilot」と検索して、インストール。これだけでも最小限AIが使えますが、制限があるので、無制限に使えるようにするためには、学生としてGitHub Educationに応募します。

４．ライブラリのインストール

Windowの場合

bashと書いた行の下のpipで始まるコマンドは、Windows PowerShellか、「ターミナル」か、Git Bashか、Visual Studio Codeのターミナルなどにコピペして実行します；Visual Studio Codeのターミナルは、WindowsとMacで共通に使えます；Windows PowerShellの見つけ方：Wiindowsのスタートボタン→上部の検索窓で「PowerShell」と入力すると見つかる→右クリックして「スタートにピン留め」しておくと今後便利

macOSの場合

bashと書いた行の下のpipで始まるコマンドは、Macの場合は、「ターミナル」を開いて、コピペして実行します；Macの場合は、まず、次のコマンドで、pipをインストールする必要があります；Visual Studio Codeのターミナルは、WindowsとMacで共通に使えます

python -m ensurepip --upgrade

↑ここやここやここを見て要調査

bash

pip install -q -U google-genai gradio plotly pandas wordcloud matplotlib

↑おそらく、エラーは赤字で、警告は黄色字で表示されるので、赤字が出たら、何とかする必要があります。警告はおそらく当面は対処しなくても大丈夫。ここでエラーが出る場合は、それを生成AIにコピペして尋ねると、解決策を提案してくれる。コピペするのは、エラーメッセージだけでなく、入力したコマンド（上記）も含めて出力全体をコピペするとよい。必要ならその前の文脈として必要そうなコマンドとそれへの応答もいっしょにコピペする。PowerShellの場合だと、私の場合は、「PS C:\Users\okana> ここにコマンドを打つ」という入力形式なので、この行を含めてコピペする。C:\Users\okanaの部分もカレントディレクトリ（今いるディレクトリ）を示すので、ここも情報を持っているのでコピペする。

numpyのインストールが必要な場合は、以下のコマンドでインストール

bash

pip install numpy

以下は各ライブラリの機能の概説：

google-genai: Googleの生成AI（Gemini APIなど）をPythonから利用するためのライブラリ
gradio: 機械学習モデルなどに対して簡単にWeb UIを作成するためのライブラリ
plotly: Webページ上のインタラクティブなグラフ描画用のライブラリ
pandas: データ操作・解析のためのライブラリ
wordcloud: 単語の出現頻度をもとにワードクラウド（文字サイズで頻度を表現した画像）を作るライブラリ
matplotlib: グラフ描画のための基本ライブラリ

５．Google AI Studio（Gemini API）の API キー取得

- Google アカウントで https://ai.google.dev/gemini-api/docs?hl=ja にアクセス
- 「Gemini API キーを取得する」→「API キーを作成」→画面に表示される手順でキー文字列を取得
  - APIキーを作成する際、キー名を適当に入力（複数のキーを作成したときに、自分が区別がつくような名前なら何でもよいと思います。キー名には日本語を含めない方が後でトラブルが起きにくいはず）して下さい。プロジェクトの選択のところは、プロジェクトがまだない場合は、新規プロジェクトを作成し、プロジェクト名を適当につけて（複数プロジェクトを作った際に、自分で区別できる名前なら何でもよいと思います。プロジェクト名も日本語を含めない方が安心だと思います）、そのプロジェクトを選択すると、キーの作成ができるようになります。
- ↓取得したキーを環境変数にセット（取得したキーをダブルクォーテーションで囲んで下さい）
  bash
  setx GOOGLE_API_KEY "取得したキー文字列"

↑bashと書いた行の下の setx で始まるコマンドは、Windows PowerShellか、「ターミナル」か、Git Bashか、Visual Studio Codeのターミナルなどにコピペして実行します；「取得したキー文字列」をはさむダブルクォーテーションは、そのまま残して、ダブルクォーテーションの間に取得したキーをコピペして下さい。

II. スクリプトのダウンロードとローカルでの実行

ここは、本来は、自分で（AIに助けてもらいながら）Pythonスクリプトを作成するところですが、今回は代わりに作成済みのスクリプトをダウンロードして実行してみましょう。

https://github.com/okana2ki/emotion-sns/blob/main/emotion_sns4.py

①↑これをクリックして現れる画面の右上部の「Download raw file」ボタン（図参照）をクリックし、このスクリプトをダウンロードします。

②ダウンロードしたスクリプトemotion_sns4.pyを、ドラッグアンドドロップなどの方法で、適切なフォルダ（フォルダ名やパスに日本語が含まれるとトラブルが起こることがあるので、ファイル名、フォルダ名、パスには日本語を含めないことを推奨）に移動します。

③このスクリプトの実行の仕方（の一つ）は、このスクリプト・ファイルをダブルクリックすると、Visual Studio Codeで開くので、実行ボタン（右上部の三角形の再生ボタン）を押す。（制限モードになっていると実行できないので、「信頼する」を押して制限を解除する。）

④正常に実行されると表示されるlocal URLまたはpublic URLをブラウザで開くと作成したWebアプリが表示されます。（McAfeeのリアルタイムスキャンにより脅威が阻止されたなどの原因により、share linkが作れないというメッセージが出ることがあります。この場合は、一時的にリアルタイムスキャンを無効にするなどすればpublic URLも表示されます。なお、local URLだけでもアプリの動作確認はできます。産経大のネットワークに接続している状態では、share linkが作れないようです。学内のネットワークの安全上の制約にかかるのが原因だと思います。なお、次のステップ「III. Hugging Face Spaceで公開」での公開は、学内ネットワークからでもできます。

以上の方法で作成したWebアプリのURLは、ローカルコンピュータで上記のPythonスクリプトを実行している間だけ有効です。このスクリプトの動作を停止したり、ローカルコンピュータをシャットダウンしてもアプリが継続して動作するようにしたい場合は、次の「III. Hugging Face Spaceで公開」に進んで下さい。

III. Hugging Face Spaceで公開

１．Hugging Faceアカウントの作成

Hugging Face の公式サイトにアクセスし、右上部の「Sign Up」ボタンをクリックしてアカウントを作成します。詳しくは、たとえば、ここを参照。

２．新しいSpaceの作成

サインアップ後（ログイン後）、Hugging Faceのページ右上部の自分のアバターをクリック→ドロップダウンメニューから「New Space」をクリック→Space name（スペース名）を入力（例：Emotion SNS）→Short description（短い説明）を入力（省略可能；記載例：投稿のセンチメント分析をするSNS; Analyze emotions in SNS posts and generate AI comments）→License（ライセンス）を選択（今回のアプリは、デモとして使ってもらったり、コードを参考にしてもらってよいと考えるのであれば、利用・改変・再配布などの自由度が高い、apache-2.0やmitを選んでおく）→Space SDK（Gradioを選択）→Gradio template（Blankを選択）→Space hardware（CPU Basicを選択；無料で選べるのはこれ）→公開／非公開の選択（Publicを選択）→「Create Space」ボタンを押す→Spaceの作り方の画面が現れますが、放置して、下記の手順３．に進んで下さい。

３．Gemini APIキーの設定

①手順２．の最後の画面の右上部の「Settings」（図参照）をクリック

②現れた画面を下にスクロールし、「Variables and secrets」というセクションを見つけ、右端の「New secret」ボタン（図参照）をクリック

③現れた入力画面の「Name」欄に「GOOGLE_API_KEY」と入力し、「Value (private)」欄にGemini APIキーを入力（上記手順 I. の５．を参照；ただし、ここではダブルクォーテーションは不要）して、「Save」ボタンをクリック

４．ファイルの準備

以下のファイルを準備します：

app.py （II. で実行したスクリプトをapp.pyという名前で保存したもの；そのまま保存してもおそらく大丈夫ですが、念のため、最後の行のshare=Trueを削除しておくとより安心）
requirements.txt （必要なライブラリを記したもの）
packages.txt （必要なフォントを記したもの）

それぞれ、以下からダウンロードできます（ダウンロード操作は上述のII.と同じ）：

５．ファイルのアップロード

Gitを使用してローカル環境にクローンし、必要なファイルを追加してコミット、プッシュという手順が推奨されますが、Gitを使ったことがない人は、以下の通り、Spaceのウェブインタフェースからファイルを直接アップロードするのが簡単です。

①２．で作成し、３．でAPIキーを設定しておいたSpaceの画面上部の「Files（ファイル）」（図参照）をクリック

②新たに表示された画面右上部の「Contribute（貢献）」（図参照）をクリック

③現れたプルダウンメニューから「Upload files（ファイルをアップロード）」をクリック

④現れた画面の「Upload file(s)」領域（図参照）に、上記の手順４．で準備した3つのファイルをドラッグ・アンド・ドロップ

⑤画面左下の「Commit changes to main（変更をmainブランチにコミット）」ボタン（図参照）をクリック

⑥自動的に環境構築が始まり、画面左上部の表示（図参照）が「Building」→「(Re)starting」→「Running」の順に遷移（2，3分かかる）

⑦「Running」表示になったら、画面上部のタブ「App」（図参照）をクリックし、アプリケーション画面に切り替え

（参考１）Hugging Face Spaceの複製

スペースの複製は、既存のデモ（例：感情分析SNS）を初期テンプレートとして新しいデモ（例：学習支援アプリ、顧客対応チャットボットなど）を構築したい場合に便利です。複製手順は以下の通り：

スペース右上部の三点メニューをクリックし、Duplicate this Space（このスペースを複製）を選択します。これにより、以下の属性を変更できるようになります：
1. Owner（所有者）：複製されたスペースは、自身のアカウントまたはあなたが書き込み権限を持つ任意の組織を所有者とすることができます
2. Space name（スペース名）：半角英数字と半角の-と.と_だけが使えます。半角スペースは使えません
3. Visibility（可視性）：スペースはデフォルト（初期設定）でPrivate（非公開）です。Public（公開）を選ぶこともできます。
4. Space hardware（ハードウェア）: スペースが稼働するハードウェアを選択できます。無料で選択できるのは、CPU Basicです。
5. Space secrets（シークレット）: 元のリポジトリにシークレットが設定されているため、リポジトリ複製時にその設定が求められます。Add secret欄に自分が管理するGemini API key（ここで無料で取得可能）を入力して下さい。スペースを公開した場合でも、ここで入力したシークレット情報が公開されることはありません。

上記の手順で複製したスペースをHugging FaceのWebインタフェース上で直接編集（下記の「参考２」を参照）して、構築したいアプリを作ることもできますが、スペースをローカル環境にクローンしてから、ローカルで編集したり実行（下記の「参考３」を参照）することもできます。

（参考２）Hugging Face Spaceのファイルを直接編集

[注意] 直接編集できるのは、上記のように複製するか、自分が新規作成して書き込み権限があるスペース内のファイルだけです。

スペース上部の「Files（ファイル）」タブ（図参照）をクリック
ファイル一覧から、編集したいファイルのファイル名（図参照）をクリック
ファイルを開いた画面上部の「edit（編集）」（図参照）をクリック
編集画面で（AIなどに相談しながら）適宜編集
編集画面下部の「Commit changes to main（変更をmainブランチにコミット）」をクリック

（参考３）Hugging Face Spaceからローカル環境にクローン

[注意] Gitを使える人向けです（この手順で開発したい人は、GitやGitHubの知識が必要です）

スペース右上部の三点メニューをクリックし、Clone repository（レポジトリをクローン）を選択
表示された指示に従って、Git Bashで、（HTTPSを選択した場合）以下のコマンドを実行してクローン

git lfs install

git clone https://huggingface.co/spaces/okana2ki/emotion-sns

Git Bashで以下のコマンドを実行することにより、ローカル環境で実行

cd emotion-sns # プロジェクトのディレクトリに移動

pip install -r requirements.txt # requirements.txtに書かれたライブラリを一括インストール

python app.py # アプリを実行；Visual Studio Codeでapp.pyを開いて実行してもよい

（AIなどに相談しながら）編集したいファイルを適宜ローカル環境で編集
編集結果を、書き込み権限があるHugging Face Spaceにプッシュ

git add app.py # app.pyを編集した場合、それをコミットする候補として登録（ステージング）

git commit # ステージングされた変更をローカルの履歴に保存；エディタが開くのでコミットメッセージを入力

git push origin main # originはgit cloneしたときのリモートリポジトリのURLが自動的に設定されたもの

# 別のリポジトリにpushしたいときは、originを書き換えるか、別名のリモートを追加してそこにpush

# mainはmainブランチへのプッシュを意味する

# Hugging Face Spacesでは、mainにプッシュすると、自動的に再ビルド、再デプロイされる

[注意] 編集後、クローン元のリモートレポジトリにpushできるのは、上記（参考１）のように複製するか、自分が新規作成して書き込み権限があるスペースをクローンした場合だけです。

（参考４）生成AIとの相談経過へのリンク

Claude Sonnet 4で仕様を練り、どんな技術を使うかを相談し、試作し（1）、改良やデバッグを繰り返してみた（2, 3, 4）が、今ひとつ、いい感じのシステムにならず、どうしたものか、というとき、ちょうどGPT-5が使えるようになったので
GPT-5で相談と構築を始めた（1）（途中一部Claudeとも相談（5））が途中で行き詰ったため
ColabのGeminiに切替（1, 2）
GPT-5でHugging Face Spaceでの表示エラー対策（2）
ClaudeでWeb公開方法を相談（6）

IV. ちょっとした仕様変更を試みる

ステップIIIで公開したアプリを少し仕様変更してみよう
変更操作の手順については、上記の（参考１）や（参考２）などを参照

進め方

「ユーザが使う様子を観察して、問題点を見つけ、それを解決する」という流れを推奨するが、自分で使ってみて、使いにくかったり、分からなかった点を改良するのでもよい。

必要に応じてユーザにインタビューするのも有効。操作記録や操作の様子を撮影したビデオを見ながら「なぜそのように操作したのですか？」「ここでどう感じましたか？」など。ビデオ撮影してあると、操作に迷った様子なども観察可能。

「改良したら、再度、ユーザに使ってもらう」というループを素早く繰り返すのが、有効（ラピッド・プロトタイピングと評価の繰り返し）。

仕様変更のヒント

アプリの使い方が、アプリ画面を見たら分かるようにする
- 感想を入力→投稿ボタン→表示更新ボタン、という流れが、ユーザに伝わるようにする
- アプリ画面に直接使い方を書くのがいいか、メニューボタンから使用手順画面を開けるようにするか、などの設計上の選択肢がある
アプリ画面の見た目を変える（ユーザ・インタフェースの変更）
「いいね」ボタンを追加
投稿ボタンを複数回押すと、同じ内容が複数回投稿されてしまう仕様になっているが、これはｘｘという問題が生じるので、〇〇のような仕様に変更すべき（ｘｘや〇〇を自分で考えて埋めよう）
表示更新ボタンを無くして、常に最新の内容が表示されているようにできるか？あるいは、××秒おきに、表示が更新されるようにできるか？
生成ＡＩのＡＰＩへのリクエストにはレート制限があるため、これにかからないように、リクエストを一定の間隔を空けてする仕様（多数の投稿が集中すると、キューにためておいて処理する）にしているが、このことをユーザに説明する必要があるか？あるいは、この仕様（リクエスト間隔を空けることによるレート制限回避）を再検討すべきか？

生成AIとの相談のしかた

たとえば、以下の A) または B) の相談のしかたがあります（他の方法もあります）：

A) 仕様変更の出発点にするPythonスクリプト（app.py）を添付して（チャット入力欄の「＋」ボタンを押すと添付できる）、ClaudeやChatGPTに、仕様変更を依頼する（「○○を××に変更したい」のような感じで依頼）；複雑なプログラムを大幅に変更するときは、Claudeの方がうまくいく可能性が高いと思う（2025年10月時点）。
B) 仕様変更の出発点にするPythonスクリプト（app.py）をVisual Studio Codeで開いて、GitHub Copilotに仕様変更を依頼する
1. VS Codeのタイトル・バー（一番上のバー）中のチャットアイコンをクリックして、チャット・ビューを開く
2. チャットビューの左下隅をクリックしてチャット・モードを選択：Agentモード（このモードが一番強力です）を選んで「このアプリの使い方を表示できるようにする。使い方を表示するためのボタンを設け、それを押したら使い方が表示されるようにする。」のような感じで依頼する
3. コード上に直接変更案が示されるので、一括して承認する（下部の青地の「Keep」をクリック）か、個々の変更箇所を下部の青地の「↑」「↓」で選んで、個々の場所に表示される青地のKeepアイコンやUndoアイコンにより、個々に承認／否認することもできる
4. 承認したら、実行ボタンを押して実行してみる
5. うまくいったら完了；実行エラーがでたらAIにデバッグを依頼；仕様を再度変更したい場合は、AIへのリクエストを適宜繰り返す
6. （補足説明）生成AIのモデルもチャット・ビューの下部で選べますが、デフォルト（初期値）のGPT-4.1のままでいいと思います（より強力なGPT-5やClaude-4は、2025年10月時点では無料版では選べません）→この点では、最新モデルが無料で使える、上記A)のやり方の方が強力ですが、VS Code上で直接変更や実行ができるのは快適なので、一長一短かなと思います

V. 自分がつくりたいWebアプリをつくる

「IV. ちょっとした仕様変更」と同じ方法で作成できるはず。作り方は2通り考えられます：

A) 上述のアプリを出発点として、そこから変更する形でつくる（つまり、「IV. ちょっとした仕様変更」と同じやり方）

B) ゼロから作る；ただし、ゼロから制約なしに作るといろいろなところでつまづくと思うので、以下のような感じで開発の大枠をプロンプトで指定する。

Gemini APIを無料枠で使う（SDKや、モデルも上述のアプリを参考に具体的に指定する）
gradioを使う
Hugging Face Spacesで公開する

Page updated

Google Sites

Report abuse