こんにちは。

アールグレイです。

今回は、私のブログに実装したアクセス解析機能の開発秘話をお話ししますね。

多くの方が「アクセス解析ならGoogle Analyticsで十分」とお考えかもしれません。

しかし、今回はあえて独自のアクセス解析システムを構築する道を選んだんです。

なぜそのような決断に至ったのか、そしてAIアシスタントであるClaude Codeとの二人三脚でどのように開発を進めたのか、初心者の方にも分かりやすくご紹介していきますね。

きっかけは「記事の提案機能」

事の発端は、あるひらめきでした。

「アクセス解析の結果を見て、次に書くべき記事をAIが提案してくれたら便利じゃないか？」

このアイデアを実現すべく、まずは手軽に導入できるVercel Analyticsから試すことにしたんです。

ブログのホスティングにVercelを利用しているため、Vercel Analyticsは有力な選択肢でした。

Vercel Analyticsの導入と限界

Vercel Analyticsの無料枠では、月間2,500ページビューまで無料で利用できます。

基本的な指標として、ページビュー、ユニークビジター、リファラー、デバイス情報、地域情報などが確認でき、小規模なブログには十分な機能が提供されています。

Claude Codeに「Vercel Analyticsを設定したい」と伝えたところ、必要な手順を丁寧に教えてくれました。

その通りに実行したら、ものの10分程度でダッシュボードからアクセス数を確認できるようになりました。

しかし、喜びも束の間、すぐに大きな壁にぶつかってしまったんです。

「プログラムからデータを取得できない」という問題です。

2025年1月時点では、Vercel AnalyticsにはAPIが提供されておらず、Calude Codeが自動的にアクセスデータを取得して記事提案に活用することができませんでした。

ここで私は三つの選択肢に直面しました。

一つ目はVercelから自動でアクセスデータを入手することを諦めて手動でデータを入力すること、

二つ目はGoogle Analyticsなど別のアクセス解析サービスを利用すること、

そして三つ目は独自のアクセス解析システムを構築することです。

もちろん、迷わず独自システムの構築を選びました！

私が三つ目を選んだ理由は、

データを完全にコントロールできる点、

そして何より開発過程でClaude Codeとのバイブコーディングを実践できることでした。

Supabaseで独自データベースを構築

独自のシステム構築にあたり、データベースが必要になり、Supabaseを選定しました。

Supabaseの無料枠は、初心者でも簡単に使えるクラウドのデータベースサービスです。

個人開発や小さなアプリ作りにぴったりの内容になっています。

Supabase無料プランでできること

• プロジェクト数：2つまで作れます
• データベース容量：500MB（たとえば小規模なブログや簡単なアプリなら十分）
• ファイル保存（ストレージ）：1GBまで画像やファイルを保存できます
• データ転送量：月5GBまで（アプリの利用者がデータをやりとりできる量）
• ユーザー数：月5万人まで登録・ログインが可能
• リアルタイイム機能：チャットや通知など、データの変化をすぐに反映できる機能も使えます

APIリクエストは無制限なので、何度でもデータのやりとりができます。ただし、データ転送量やデータベースの容量を超えると一部の機能が使えなくなります。

注意点

• 無料枠の容量や転送量を超えると制限がかかります（たとえば大量の画像や動画を保存したい場合は有料プランが必要です）。
• 1週間使わないとプロジェクトが一時停止することがあります。

Supabaseは、サーバーやデータベースの知識がなくても、すぐにアプリのバックエンドを作れるサービスです。

無料枠でも個人開発や学習、趣味のアプリには十分な機能がそろっています。

「まずは無料で試してみたい」「バックエンドの設定を楽にしたい」というバイブコーディングに適したサービスだと思います。

Claude Codeにお任せしたデータベース設計

「アクセス解析のデータベースを作りたい」とClaude Codeに相談したところ、すぐに最適な記録項目を提案してくれました。

記録項目は、URLパス（どのページを見たか）、アクセス日時、デバイスの種類、参照元、画面サイズ、言語設定など、多岐にわたります。

さらにプライバシーへの配慮も実現してくました。

Claude Codeは「個人を特定できる情報は一切記録しないようにしましょう」と提案し、Cookieを使わず、IPアドレスも保存しない設計を推奨しました。

これにより、ユーザーのプライバシーを保護しながら必要なデータを収集できるシステムを構築できたんです。

Claude Codeとのバイブコーディングでアクセス解析の実装を実践

ここからが本番です。

Claude Codeとともに、実際にアナリティクスシステムを構築していきました。

アナリティクスコンポーネントの作成とデータ送信の仕組み

最初に作成したのは、ページアクセスを記録するコンポーネントです。

データベース設定の半自動化

Claude CodeがSupabaseのデータベース設定に必要なSQLコードを完璧に生成してくれました。

ただ、現時点ではこのSQLコードを手動でSupabaseの管理画面にコピー＆ペーストして実行する必要がありました。

ここはバイブコーディングでも完全自動化できない部分を実感することになります。

将来的には、AIバイブコーディングの仕組みがSupabaseのようなサービスを内包してデータベースの設定まで自動で行えるようになるんじゃないでしょうか。

そうなれば、このような手動作業も不要になり、真の意味での「コードを書かないプログラミング」が実現するはずです。

環境変数の適切な設定ガイダンス

SupabaseのAPIキーの設定についても、Claude Codeが丁寧にガイドしてくれました。

実際は、Supabaseから提供される以下の3つの情報をコピペするだけです。

• プロジェクトのURL（アドレス）
• 公開用のアクセスキー
• 管理用の秘密キー

開発環境の設定では、.env.localという特別なファイルに、本番環境では、Vercelの環境変数設定画面で同じ変数をコピペして設定することで問題なく動作することを確認できました。

Claude Codeの提案に基づき、CookieやIPアドレスを使わず、個人を特定できる情報も保存しない設計にしました。

ブラウザの基本情報から匿名IDを生成し、ページが表示されたタイミングで自動的にアクセス情報が記録されるようにしたんです。

また、ページ滞在時間も記録できるようにすることで、「どの記事がじっくり読まれているか」も把握できるようになりましたよ。

実際のアクセス解析結果と記事提案の実現

何回かエラーを繰り返した後にシステムが完成し、本番環境で実際にデータを取得できるようになりました。

まだ始まったばかりですが、データが蓄積されていく光景は単にアクセス解析のサービスを導入したときよりも非常に興味深い体験です。

そして、当初の目的であった「アクセス解析に基づく記事提案」はClaud Codeにお願いするだけで、すぐ実装することができました。

ちゃんとSpabaseのアクセスデータと既存記事を分析し、読者の興味に合った記事を提案してくれるようになったんです。

例えば、「Vibe Coding実践編：AIアシストで爆速Webアプリ開発！」といった具体的な提案と、その期待効果まで示してくれます。

まとめ

独自のアクセス解析システムを構築することで、自分のブログを完全にコントロールできるようになりました。

これこそが、バイブコーディングの醍醐味だと感じています。　

この記事でご紹介したアクセス解析システムは、現在このブログで実際に稼働しています。