はじめに
今の世の中、エンジニアでなくとも生成AIは身近に寄り添う存在となっています。
職場では、「生成AIの活用」というワードを目にしない日はないですし、
業務外でも、Claude Mythos関連のニュースが毎日、報道されています。
正直、AIとか忘れて離島でのんびり釣りでもして過ごしたい気分です。
しかし、そういうわけにもいかんので、久々にGoogle AI Studioに触れてみることにしました。
そして、トップ画面を見て、いきなり躓くことになったのです。
UIが相変わらず分かりづらい
え？こんなにメニュー豊富だったっけ？
AgentsとModelsで何が違うの？
しかも、相変わらず、日本語非対応で分かりづらい。
アプリを作るにはどれを選べばいいんですかね？
まずは、画面構成の理解から始まりました。
１．ModelsとAgents
トップ画面ではModelsとAgentsのどちらかを選びます。
※Agentsがデフォルト表示なのだが、個人的にはModelsをデフォルト表示してほしい
・Agents
| 項目役割 | （どんな部下か） | 具体的な仕事内容 |
|---|---|---|
| Antigravity Preview | 自律型PC操作エージェント | リモートのLinux環境をAI自身が操作し、指示された複雑なタスクを自律的にこなします。 |
| AI Talk Radio | ラジオ番組作成 | テキストの元ネタを渡すだけで、ホストやゲストが話すBGM付きの本格的なラジオ番組風の音声に変換してくれます。 |
| Customer Support | 顧客対応・FAQ | 自社のWebサイトを読み込ませることで、その内容に基づいてユーザーからの質問に答えるサポート窓口を作れます。 |
| Data Analyst | データ分析官 | ビジネスデータ（売上など）を渡し、指示を出すだけで、データの集計や高度な分析を勝手にやってくれます。 |
| Document Processor | 書類処理・レポート作成 | 領収書や請求書を突合（チェック）したり、内容を検証してHTMLの綺麗なレポートにまとめてくれます。 |
| Repo Maintainer | コード保守エンジニア | ソースコードを分析して、バグを見つけたり自動で修正パッチを作ってくれたりします。 |
・Models
| 項目 | 機能 | 説明 |
|---|---|---|
| Featured | 高性能モデル体験 | Googleが今一番推している、新しく高性能なモデルを試せます。 |
| Code and Chat | コード生成 | チャット形式での対話や、プログラムのコード生成・レビューを行う定番のエリアです。 |
| Image Generation | 画像生成 | テキストの指示から画像を生成したり、既存の画像を編集したりします。 |
| Video Generation | 動画生成 | テキストなどからハイクオリティな動画を生成します。 |
| Speech and Music | 音声と音楽 | 音声データのテキスト化や、逆にテキストからの音声・音楽生成を扱います。 |
| Real-time | リアルタイム・超低遅延 | 音声や映像をタイムラグなしでやり取りする、高度なリアルタイム対話（Live API）を試せます。 |
癒し系アプリを作りたい
最近、若手層の休職、離職が相次いでいます。
労働環境がブラックというわけでもないのですが、みんな、心に闇を抱えているんですかね。
私も日頃、ストレスを受けてないかと問われると、Noとしか言えないのが悲しいのですが。
そんな事情もあり、ストレスを緩和するためのアプリを作ろうと思いました。
癒し系アプリの仕様は、以下です。
・嫌なことやストレスに感じることをメモ帳ライクなUIに書き出す
・今の気分についても書き出す
・上記入力後、「癒して」ボタンを押下すると、ストレスを緩和するために花火が上がる
・花火が上がる際、ランダムな応援メッセージも表示する
・入力内容と日付をバックグラウンドでログに残し、あとから見返すことが出来る
（当然、ログはローカルに保存する）
・嫌なことを書き出した量に応じて、花火の量も増減させる
・バリデーションとして、何も記入せずに「癒して」ボタンを押下すると線香花火を表示させ入力を促す
早速、Code and Chatでコード生成に取り掛かります。
上記の仕様をプロンプトに入力します。
2分弱でデモアプリが出来上がりました。
早速、index.htmlを▶ボタンから動作検証します。
確認メッセージが表示されます。
翻訳すると以下の通りです。
生成されたHTMLやSVGをプレビューすると、外部へのネットワークリクエストを通じて、このチャットの内容が漏洩する可能性があります。
このチャットが機密情報を含む場合は、絶対にこれを行わないでください。
今回は大丈夫なので、[Show preview]を選びます。
入力画面がでましたね、出来事と気分を入力して、癒してボタンを押します。
※癒してボタンが画面内に表示されなかったので、ブラウザのズーム機能で縮小表示してます
いい感じに出来ました。
花火の打ち上げ速度や花火の量を増やしたりと、2回、プロンプトで修正を行いました。
現状では、index.htmlの１ファイルなので、MVCモデルにリファクタリングしてもらいます。
以下、プロンプトの内容です。
index.htmlですが、今後も機能追加など拡張をしたいと考えており、初心者がコードを参照することに対するソースコードへのコメント強化やコードの構造整理としてMVCモデルを意識したリファクタリングをお願いできますか？
リファクタリングして、ファイル分割も行いました。
・index.html (HTML構造)
・style.css (デザインスタイル)
・script.js (JavaScriptロジック)
ファイル分割すると、Google AI Studioのプレビュー環境では他ファイルを参照できないので、スタイルが崩れたり支障が出るようになります。
なので、私はローカルに全ファイルをダウンロードして、ブラウザで動作検証しました。
GitHub Pagesに公開
ここからは誰でもアプリが利用できるように、GitHub Pagesを公開する手順を紹介します。
Webサーバなんか作らずとも、GitHubに公開して、設定をちょいといじるだけで公開できるなんて便利ですね。
１．GitHubアカウントの作成とリポジトリ作成
GitHubにログイン（未作成の場合は新規登録）します。
右上の「+」ボタンから「New repository」を選択します。
リポジトリ名（例：shinkyo-hanabi）を入力します。
公開範囲を「Public（公開）」に設定します。
「Add a README file」にチェックを入れて「Create repository」ボタンを押します。
２．ファイルのアップロード
作成したリポジトリ画面で、「Add file」から「Upload files」を選択します。
上記コードを保存した index.html ファイルをドラッグ＆ドロップしてアップロードします。
画面下の「Commit changes」をクリックして保存します。
３．GitHub Pagesの設定
リポジトリ画面上部のタブから「Settings（設定）」をクリックします。
左側メニューにある「Pages」をクリックします。
「Build and deployment」＞「Source」が「Deploy from a branch」になっていることを確認します。
「Branch」欄で、None となっている部分を main（あるいは master）に変更し、フォルダは / (root) のまま「Save」をクリックします。
４．確認
数分経過すると、設定画面（Settings > Pages）の上部に Your site is live at https://[ユーザー名].github.io/shinkyo-hanabi/ のようなURLが表示されます。そこへアクセスするとアプリが利用可能です。
ちゃんとweb上でも動くことを確認できました。
ちなみに、バリデーションとして、何も入力せずに癒してボタンを押下すると線香花火が出て、入力を促します。
こうやって、気持ちを書き出すことは、頭の中のモヤモヤを可視化したり、書き出すことで問題を自分の外側において切り離すことが出来るそうです。
GitHub Pagesでの公開は、公開範囲をPublicとすることが前提となります。
アプリとGitHubの情報はこちら（しれっと消えてるかもしれません）