【Google AI Studio×GAS×LINE】猫の日記を家族で共有できるウェブアプリを自作してみた記録 🐱📲

はじめに 🌿

Xで「Google AI Studioを使ってUIを自動生成してる！」という投稿を見かけて、
「えっ、こんなのあるの！？ わたしもやってみたい！」と即ポチ。

ちょうど猫のトイレやお薬の記録を家族で共有したいと思っていたタイミングだったので、
AIツールの力を借りて“はじめてのウェブアプリ作り”に挑戦してみました🐾✨

この記事でわかること ✏️

• Google AI Studio × ChatGPT でたたき台を作る手順 💻

• Stitch を使って自然言語や画像から UI を生成する方法 🪄

• LINE 通知＆Google スプレッドシート連携を GAS で実装するコツ 🛠️

• CORS・iOS localStorage 問題など、ハマりポイントの回避策 ⚡

🧩 使用した技術・サービスまとめ

完成したアプリの紹介 🎯

レコード（記録）追加画面

バックアップ・リストア画面

LINE通知の様子

やり方 🛠️

Step1：Google AI Studio と Stitch でアプリのたたき台を作成 ✨

• Google AI Studio（Gemini） に「猫の記録アプリを作りたい」と自然言語で伝えて、データ構造や画面設計のたたき台を生成。

• Stitch を使って、

  • 「パステルカラーで柔らかい UI、猫アイコン付きで」など自然言語で指示

  • 手書きワイヤーやスクリーンショットから UI を生成

• その後、動作確認をしながら ChatGPT を使ってエラーハンドリングなどを進めました。

Step2：Google Apps Script でバックエンドを構築 💡

GAS（Google Apps Script）側では、1つの Web App URL に対して action パラメータで処理を切り替える構成にしています。

🔄 処理一覧（フロントとGASのやりとり）

await fetch(GAS_WEB_APP_URL, {
  method: "POST",
  mode: "no-cors",
  headers: { "Content-Type": "text/plain" },
  body: JSON.stringify({
    action: "backup",
    cats,
    records,
  }),
});

Step3：Vercel でデプロイ 🚀

• GitHub 連携で main ブランチにプッシュするだけで自動ビルド＆公開

• 独自ドメインの設定もボタン1つ。無料枠でも軽快に動作します🐱

📸 アプリ画面の遷移・動作イメージ

注意ポイント ⚡

① iOS の localStorage 問題

Safari では一定期間で localStorage が消えることがありました。大事なログは外部ストレージへ！

② GAS の CORS 制限（プリフライト回避）

• fetch の Content-Type を text/plain に設定

• mode: "no-cors" にすることで プリフライト（OPTIONS）を発生させない

• 復元（GET）はそのまま問題なく取得可能です

🌱 今後の改修予定

今後こんな機能も追加できたらいいな～😺

• 画像アップロード：病院でもらった明細とか、検査結果の写真をアップロードしたい

• LINE 通知→個別レコード画面リンク：通知から詳細ページにアクセス可能にできると便利そう

まとめ ✨

Google AI Studio × ChatGPT × Stitch × GAS × Vercel で、
「こんなアプリ欲しかった」を形にする体験が実現できました。

家族で猫の体調を記録・共有できるようになり、作って本当に良かったと思えるプロジェクトです🐾

これから作ってみたい人にとって、この記事が参考や後押しになりますように✨

あわせて読みたい 📖

• GASのCORSエラーを解消する

• 【GAS】LINEのgroupIDを返してくれるbot