※ この記事はZennに投稿したものの転載です。
https://zenn.dev/daichi1208/articles/d107b77a758757
なぜ作ったか
個人サイトにGA4を入れていたんですが、ずっとモヤモヤしていました。
- Cookieの同意バナーを出さないといけない
- IPアドレスや行動履歴がGoogleに送られる
- 日本の個人情報保護法的にグレーな運用になりがち
- ダッシュボードが複雑すぎて見たい数字がすぐ出てこない
海外には Plausible や Fathom という
Cookieなしのプライバシーファースト解析ツールがあります。
でも日本語UIがなく、月額$9〜と個人には少し高い。
「日本語で、無料で、Cookieなしで使えるやつを自作すればいいのでは」
そう思って作ったのが Keiro Analytics です。
技術スタック
| レイヤー | 技術 |
|---|---|
| バックエンド | FastAPI (Python) |
| データベース | PostgreSQL (Railway) |
| フロントエンド | Next.js 14 + Tailwind CSS |
| 認証 | Clerk |
| ホスティング | Railway（API） + Vercel（フロント） |
シンプルに動くものを最速で出すことを優先しました。
Cookieなしでどうやってユニーク訪問者を識別するか
ここが一番の肝です。
GA4はCookieにユーザーIDを保存して追跡します。
Keiro AnalyticsはCookieを一切使いません。
代わりに以下の情報を組み合わせてSHA256ハッシュを生成します。
def hash_visitor(ip: str, site_id: str, user_agent: str) -> str:
today = datetime.now(timezone.utc).strftime("%Y-%m-%d")
return hashlib.sha256(
f"{ip}{user_agent}{site_id}{today}".encode()
).hexdigest()[:16]
ポイントは 日付を含める こと。
同じ人が翌日アクセスしても別のハッシュになるので、
日をまたいだ追跡が設計上できません。
IPアドレス自体はDBに保存しません。
これはPlausibleやFathomと同じアプローチです。
計測タグの仕組み
たった1行貼るだけで計測が始まります。
<script defer src="https://keiro-analytics.vercel.app/k.js"
data-token="YOUR_TOKEN"
data-api="https://your-api.railway.app">
</script>
k.jsの中身はシンプルで、1×1の透明GIF画像リクエストでデータを送っています。
new Image().src = api + '/api/collect?t=' + token
+ '&u=' + encodeURIComponent(location.href)
+ '&r=' + encodeURIComponent(document.referrer)
+ '&s=' + screen.width + 'x' + screen.height;
XHRやfetchではなくimgタグを使う理由はCORS制約を回避するためです。
どのドメインからでも追加設定なしで計測できます。
SPAにも対応していて、history.pushState をフックしてページ遷移も拾います。
デプロイ構成
ユーザーのサイト
↓ k.js（Vercelから配信）
↓ 計測データ送信
Railway（FastAPI + PostgreSQL）
↑ ダッシュボードAPIリクエスト
Vercel（Next.js）
↑ ブラウザ
RailwayはPythonアプリのデプロイが簡単で、PostgreSQLも同じプロジェクト内で立てられます。
フロントはVercelに任せてNext.jsをそのままデプロイ。
実装してよかったこと・ハマったこと
よかった点
- FastAPI + SQLAlchemyの組み合わせはシンプルで速い
- VercelとRailwayの組み合わせは無料枠でそこそこ動く
- Cookieなし設計はむしろ実装がシンプルになる
ハマった点
- RailwayのリバースプロキシでIPが
X-Forwarded-Forに入っていてハマった - Clerk v7とNext.js 14のpeer dependency競合（
.npmrcでlegacy-peer-deps=true） - Railway無料プランのプロジェクト数制限（1つしか作れない）
今後やること
- Stripe決済でProプランを作る
- カスタムドメイン対応でClerk本番モードへ
- CSVエクスポート機能
使ってみたい方へ
現在無料で使えます。
自分のブログや個人サイトに入れてみたい方はぜひ。
フィードバックは X（@daichi_1208）まで。