統合アナリティクスダッシュボード
GA4・Search Console・Cloudflare・各プラットフォームAPIを1画面に集約
React GA4 Data API Search Console API Cloudflare API GitHub Actions Vercel
Overview
プロジェクト概要
GA4、Google Search Console、Cloudflare Analytics、Zenn、Note、Qiitaなど、複数のプラットフォームに散在するアクセスデータを1つのダッシュボードに集約するプロジェクトです。各サービスの管理画面を個別に確認する手間を排除し、サイト全体のパフォーマンスを一目で把握できるようにしています。
データ収集はGitHub Actionsのスケジュール実行で完全自動化。各APIからデータを取得し、JSONファイルとしてリポジトリに蓄積します。フロントエンドのReact SPAがこのJSONを読み込み、インタラクティブなグラフやテーブルで可視化する構成です。
GitHub Actionsの無料枠とVercelの無料ホスティングを活用することで、ランニングコストゼロでの運用を実現。サーバーレスかつメンテナンスフリーなアナリティクス基盤として、日々のデータドリブンな意思決定を支えています。
Features
主な機能
マルチソースデータ集約
GA4、Search Console、Cloudflare、Zenn、Note、Qiitaの6つ以上のデータソースを1画面に統合。
GitHub Actionsによる自動データ収集
スケジュール実行で各APIからデータを定期取得し、JSONファイルとしてリポジトリに蓄積。
ダッシュボードUI
Reactベースのインタラクティブなグラフ・テーブルで、アクセス数やトレンドをリアルタイムに可視化。
ゼロコスト運用
GitHub Actions（無料枠）+ Vercel（無料枠）でランニングコストゼロを実現。
Architecture
技術構成
Frontend
- ▸ React + TypeScript
- ▸ Tailwind CSS
- ▸ Recharts（グラフ描画）
Data Collection
- ▸ GitHub Actions（スケジュール実行）
- ▸ Node.js スクリプト
APIs
- ▸ GA4 Data API
- ▸ Search Console API
- ▸ Cloudflare Analytics API
- ▸ Zenn / Note / Qiita APIs
Deployment
- ▸ Vercel（自動デプロイ）
Results
実績数値
6+
データソース統合
24/7
自動収集
0円
ランニングコスト
1画面
で全体把握