WEBアプリ開発のちょとした躓きと、やらかし―VercelとSupabaseとGemini APIとでサムネ見出しチェッカーをつくってみた

前回、WEBアプリを作った話を書きました。

今回は、どうやって作ったのかを書いてみます。

まずは、開発環境など

今回使ったのは、GitHub、Vercel、Supabase、Gemini APIです。
Next.jsで開発します。

なんか、はやりっぽいので、この環境にしました。

まずはGitHubのアカウントを作ります。私の場合は、以前に作ったアカウントがあったので、ログインするだけです。
次にVercelのアカウントを作り、GitHubと連携します。

こちらの記事を参考にしました。

最近は、こういった開発系の手順を調べるときも、Googleで検索してQiitaやZennの記事を探すより、noteの中で検索するようになりました。
初心者向けの記事は、noteの方が探しやすい気がします。

今回はAIも使うので、Google AI StudioでGemini APIも使えるようにしておきます。

ここまで、すべて無料枠の範囲です。

ソースを書くエディタもWebで

ソースコードを書く作業も、Web上で完結させることにしました。いろいろとインストールするのを避けるためです。

そこで、GitHubと連携して使えるCodespacesを利用します。

ここでちょっと躓いたのが、リポジトリを作成する際の設定です。

「Add README」をONにしておかないと、AIが教えてくれた手順ではCodespacesの画面を開けませんでした。

これもAIに聞いて解決しました

まずは、Hello World

定番の「Hello World」の作り方をAIに聞き、Codespacesでソースファイルを作成しました。

先ほど紹介した記事を参考にVercelと連携させると、実際に動くWebアプリができました。

そこから、テキスト入力欄とボタンを用意し、ボタンを押すと入力した文字列がテキストエリアに表示されるアプリを作りました。

まずは、基本的な動作の確認です。

次はGemini APIの呼び出し

少し、それっぽいアプリになってきます。

テキスト入力欄に入力した文字列をGemini APIに渡し、返ってきた文字列をテキストエリアに表示します。

ここでちょっと躓いたのは、Geminiのモデル指定です。
AIが教えてくれたのは、なぜか「1.5-flash」でした。
これを「3.5-flash-lite」に変更すればよいと分かるまでに、少し時間がかかりました。

これで、API経由でGeminiを使えるようになりました。

ちょっと、それっぽいアプリになってきます。

やっとSupabaseとの接続

データベースがなしの状態でも、それっぽいWebアプリができました。
これで、データベースを接続すれば本格的なアプリになります。

そこで、Supabaseのアカウントを作って接続してみます。
最初に紹介した記事を参考にしたところ、それなりにサクッと接続できました。

環境変数の設定場所でちょっと躓きましたが、AIに聞きながら対応しました。

ひとまず、Webアプリとして動くところまで完成です。

公開までには、まだいろいろと

動くようにはなったものの、見た目はまだ公開できる状態ではありません。

アプリ名は仮のままだし、説明もないし、各種リンクも紹介したいし……。
ここで躓いたのが、よくあるリンクカードです。

例えば、こんなサービスがあります。

このサイトでHTMLを生成しました。

しかし、ここでもちょっと躓きます。
Next.jsでは、生成したHTMLをそのままでは使えません。Next.jsの書き方に合わせて修正する必要があります。

AIに聞いて解決しましたが、しっくりこないところは、ソースコードを直接編集して微調整しました。

こうして、なんとか公開にこぎつけました。

公開後のやらかし、その１

公開した翌朝、ページタイトルが未設定だったことに気づきました。
デフォルトのままです。faviconもデフォルトのままでした。

さっそくAIに聞いて修正します。

GitHub側のソースコードを修正してコミットすれば、自動的にVercelと連携して再デプロイされます。

これは、非常に便利です。

公開後のやらかし、その２

Supabaseのダッシュボードを見ていると、セキュリティ関連の設定に問題があることに気づきました。

AIに聞いて設定を変更しようとしたのですが、設定方法がよく分かりません。
その結果、公開中にもかかわらず、数分間ですがWebアプリが動かなくなってしまいました。

公開後の設定変更は、慎重にやらないといけませんね。

公開後のやらかし、その３

SupabaseのダッシュボードでTable Editorを開いていると、どんどん「Logs Query」の使用量が増えていきます。
あわてて、ダッシュボードでデータベースへの書き込み状況を確認するのをやめました。

代わりに、GitHub Actionsのワークフローに、データベースのレコード総数を取得するYAMLファイルを登録しました。

必要なときに手動で実行すれば、レコード数を確認できます。これなら、ダッシュボードを開かずに済みます。

また、Webサイトへのアクセス状況については、Vercel Analyticsを有効にして確認するようにしました。

実際には、Google Analyticsもlayout.tsxに組み込み、リアルタイムのアクセス状況は、主にAnalyticsで確認しています。

数日後の躓き

数日後、コードを少し変更してローカル環境で確認しようとしたところ、なぜか動きません。

調べてみると、2026年9月30日のアップデートの影響で、next.config.tsの修正が必要になっていました。

この躓きも、AIに聞くと対処方法が分かったので助かりました。
こういうとき、AIに聞くとサクッと対処方法がわかるのは便利ですね。

という事で、ぜひ使って見て

「サムネ見出し」パワーチェッカー
https://www.nariten.com/thumbchecker

ぜひアクセスして使って見てください。
無料で、登録不要です。
使ってみた感想やご意見を、ぜひこの記事のコメント欄にお寄せください。

この記事へのスキやフォローも、開発の励みになります。

🔗 α版の採点ロジックを試してみる（サムネ見出しパワーチェッカー）

皆さんのご意見と応援を、よろしくお願いいたします！