Velog 閲覧数確認 API(ベータ)
(github.com/day1swhan)開発背景と実装アイデア
- Velog に書いた投稿の閲覧数が気になるが、毎回ログインして確認するのが面倒
- Velog 内部の閲覧数 API をリバースエンジニアリングしてもよいが、面倒になりそうで拡張性(例:訪問者通知)も低い
- 以前、国内のメールサービスがピクセル画像を使って既読確認機能を提供していたことを思い出した
- Velog は Markdown 記法による投稿作成をサポートしている
- ブラウザは cross-site ドメインであっても、単純な画像呼び出しまではブロックしない
- 投稿に 1x1 ピクセルの透明画像を挿入すれば、投稿が閲覧されるたびにサーバー側で呼び出し記録を残せる
- ほとんどの Velog ユーザーの投稿は 1 日 1,000 人以上の訪問者が来ることはない。この程度のトラフィックなら Workers KV でも十分
- Velog に限らず、Markdown 記法で画像挿入をサポートしている(ユーザードメインから画像提供が可能な)プラットフォームならどこでも利用可能
動作方式
- 画像に 識別値(slug)を付与したうえで、CDN ではなくプログラム可能な Workers を使ってレスポンスを返し、識別値を KV の
Key prefixとして呼び出し記録を保存すれば、簡単にページビューを求められる - 日付、ip、userAgent、画像識別値を
Hash関数で key 値にすれば、最低限の重複訪問処理が可能- HASH: SHA-256 ベースの 128 ビットハッシュを base64url(22 文字)でエンコード。
- KEY:
view:${slug}:${hash}. - VALUE: UserAgent, Date...
- Workers KV 無料プランは 1 日 1,000 件の PUT、LIST をサポートする。
- PUT: 1 日 1,000 件の訪問者カウント情報を保存可能
- LIST: 1 日 1,000 件以上のページビュー情報を提供可能
- ページビュー照会リクエストには LIST コマンドを使い、識別値(slug)情報を
prefixとして取得したうえで単純にカウントすればよい- ページビュー照会はリアルタイム性がそれほど重要ではないため、レスポンス値を適切にキャッシュすれば 1 日 1,000 件以上のリクエスト処理が可能になる
制限
高速に開発するためシンプルなストレージである KV を使っていることもあり、次のような制限がある。
- Eventual consistency: Workers KV の PUT リクエストはリアルタイムではない。リアルタイム性が必須なら Durable Objects(DO) を使う必要がある。
- LIST 依存: LIST コマンドを使ったカウント方式は、(ページビューが継続的に発生するという前提では)時間が経つにつれて取得すべき KEY 値が増えるほど遅くなる。Cron ジョブで継続的に保存構造を更新するか、DO または Analytics Engine の利用を検討する必要がある。
対応予定
できるだけ早いうちに、次のような機能を追加する予定。
- 日付順ソート: サーバーレスブログコメント API を 30 分で作ってみる で最新コメントの並び替えに使った方法である Unix Time を使えば、最新セッション基準で並んだ一覧を提供できる
- API セキュリティ: ミドルウェア追加で対応予定。HTTP Authorization ヘッダーを使う予定
- Rate Limit: 人気のある Velog ユーザーの場合、嫉妬やいたずら目的のユーザーが悪意あるリクエストを送ってくる可能性があるため、対策が必要です。おそらく自分には関係ないので最後に追加する予定...
- 検索: API 追加で対応予定
- 日付: 特定の日付、期間別検索機能。KEY 構造の変更が必要
- セッション: 特定セッションの活動情報検索機能。現在のセッション情報は各投稿ごとに 1 日間有効。個人情報保護ポリシーの検討が必要
- ブラウザ/OS: UserAgent からパースした情報をもとに提供予定。精密ではなくてもおおよその把握は可能
- サービス API: 誰でも簡単に メール認証 + 個人キー発行 で使えるよう、API をサービス形式で提供予定
- Webhook: ページビューイベント発生時に POST リクエストを提供。開発者に人気の Slack を使った通知が可能になる
- メール: Webhook 処理が面倒なユーザー向けの、古典的だが便利な通知機能
- Custom campaign: 設定したイベント(例:特定閲覧数到達)を統合した画像識別値(slug)を提供
追加
- 内部の動作構造に興味のある方は、1x1 ピクセルから始まる Velog 閲覧数確認 API 開発記 をご参照ください。
- インストール・デプロイ方法、詳細な API Reference、全コードは Github リポジトリで確認できます。
まだコメントはありません。