Seu Dev Notes

個人サイトのライブウィジェットと外部 API の制限

一言まとめ

GitHub 草・Spotify 再生中・Last.fm・Steam・Strava・Letterboxd・WakaTime などを個人サイトに出すときの取得経路とレート制限、秘密キーの置き場所。Spotify は 2025-05 から extended quota が法人限定になり、Letterboxd は公式 API が個人不可で RSS が現実解。

作成 · 更新 · #api#widgets#personal-site#rate-limit
目次 6 sections
  1. 01 GitHub contribution graph
  2. 02 “Now playing” 系
  3. 03 その他の埋め込み
  4. 04 WebGL ヒーロー・カスタムカーソル
  5. 05 関連
  6. 06 更新履歴

調査時点: 2026-04。外部 API のポリシーとレート制限は変わりやすいので、実装前に再確認する。

GitHub contribution graph#

  • 2D: GraphQL API の contributionsCollection を SSG のビルド時に取得して静的 SVG にする。非公式の REST プロキシや gitgraph.dev のような埋め込みサービスもある。
  • レート制限: トークンなし 60 req / 時、PAT あり 5,000 req / 時。ビルド時取得なら問題にならない。公開情報なのでプライバシー影響はほぼない。
  • 3D skyline: gh-skyline(GitHub 公式 CLI 拡張)で STL / MP4 を生成して画像・動画として貼る。インタラクティブ版(github-graph-3d など)は WebGL 依存でモバイルが重い。
  • 自サイトの投稿頻度ヒートマップは cal-heatmap(MIT)や D3 で、Content Collections の投稿日から静的 SVG を作れば外部 API 不要。

“Now playing” 系#

サービス経路制限・注意
Spotify/v1/me/player/currently-playing をサーバーレス関数経由で返す2025-04-15 発表・2025-05-15 施行で extended quota mode は法人限定。個人は development mode のまま使える。レート制限は非公式で 1 秒 20 req 目安。サーバーレス側でキャッシュ + 30 秒 revalidate、refresh token 管理が要る
Last.fmUser.getrecenttracks(API キーのみ、認証不要)公式レート制限 5 req / 秒。Spotify の代替・補完に向く
SteamIPlayerService/GetRecentlyPlayedGames直近 2 週間・最大 10 件。API キー無料。プロフィール非公開だと取得不可、プレイしていない週は空
StravaV3 API、または公式 iframe embedaccess token は 6 時間で失効し refresh token フロー必須。Free tier は 15 分 100 req / 1 日 1,000 req。位置情報を含むのでプライバシーゾーン設定を確認
Letterboxdユーザー RSS(https://letterboxd.com/<username>/rss/)を parse公式 API は個人プロジェクト不可。RSS → JSON は Cloudflare Worker などで。非公式 API の迂回はグレー、RSS は通常利用の範囲
WakaTime公開用の embeddable chart URL秘密 API キーをクライアントに置くのは明示的に禁止。レート制限は 5 分ウィンドウで 10 req / 秒以下

その他の埋め込み#

  • Cal.com 予約: inline / pop-up ボタン / element click pop-up の 3 方式。@calcom/embed-react か script タグ 1 行。Free プランで無制限、OSS でセルフホスト可。
  • ローカル時刻・稼働状況: Intl.DateTimeFormat で特定タイムゾーンを描けば外部 API 不要。現在地は都市名レベルに留める。
  • ゲストブック: memorista.io(ホスティング型、free tier)か Supabase + 自作フォーム。reCAPTCHA / honeypot のスパム対策が要る。
  • AMA フォーム: 外部サービス(CuriousCat / NGL)誘導か、Workers + KV で自作。匿名ゆえ荒らし対策が要る。
  • AI チャットボット: LLM + RAG。有料 API を常時公開するコスト設計(小さいモデルでも月数百円規模になりうる)とプロンプトインジェクション対策が要る。SSG では edge function か外部 API サーバーが必須。
  • ターミナル風 UI: スクリーンリーダー対応が難しく、メインナビは別途必要。

WebGL ヒーロー・カスタムカーソル#

  • Three.js 本体は約 600KB min。@react-three/fiber か vanilla Three.js を Island にして、モバイル GPU 負荷と prefers-reduced-motion の代替表示を用意する。
  • カスタムカーソルは cursor: none + 追従 div(GSAP で smooth lag)。タッチデバイスでは無意味で、フォーカスの視認性と reduced-motion 対応が要る。
  • アニメーションのコスト順は CSS → Web Animations API → JS ライブラリ。

関連#

更新履歴#

  • 2026-04-19: 初版(ローカル調査ノート)
  • 2026-10-17: Wiki へ移植、概念ページとして再構成

出典

  1. https://docs.github.com/en/rest/overview/rate-limits-for-the-rest-api
  2. https://developer.spotify.com/blog/2025-04-15-updating-the-criteria-for-web-api-extended-access
  3. https://developer.spotify.com/documentation/web-api/concepts/rate-limits
  4. https://www.last.fm/api
  5. https://partner.steamgames.com/doc/webapi/iplayerservice
  6. https://developers.strava.com/
  7. https://letterboxd.com/api-beta/
  8. https://wakatime.com/developers
  9. https://cal.com/embed

同じトピック — Web