自分のSteamライブラリから好きなゲームを集めた紹介サイトを作成しました。

ソースコードも公開したので、似たようなものを作りたい方の参考になればと思います。

GitHub - Subara3/steam-game-shelf: すばらしきSteamゲームの本棚 — Steamゲームのセール情報ダッシュボード

すばらしきSteamゲームの本棚 — Steamゲームのセール情報ダッシュボード. Contribute to Subara3/steam-game-shelf development by creating an account on GitHub.

GitHub

Steamで遊んだゲームの中から、おすすめを並べたダッシュボードです。

すばらしきSteamゲームの本棚｜Balatro・Stardew Valleyなどおすすめインディーゲーム

Balatro、Stardew Valley、RimWorld、Undertale、Disco Elysiumなど厳選インディーゲームのセール・価格情報。

すばらしきSteamゲームの本棚

全体のしくみ

このサイトは、SteamのAPIを利用することで、自動的にセール情報を取得しています。

1. Steam APIからゲーム情報を取得（Python）
2. 取得したデータから静的サイトを生成（Python）
3. GitHub Actionsで自動実行し、FTPでサーバーにデプロイ

という流れです。

Steam Web APIでデータを取る

Steamには公式のWeb APIがあり、ゲームの情報をJSON形式で取得できます。

https://store.steampowered.com/api/appdetails?appids=2379780&l=japanese

APIキー不要です。このURLにアクセスするだけで、価格、説明文、スクリーンショット、ジャンル、対応プラットフォームなどが返ってきます。

どのゲームを追跡するかは games.json というファイルにAppIDを列挙して管理しています。AppIDはSteamストアのURLに含まれている番号です。たとえばBalatroなら store.steampowered.com/app/2379780 の部分。

レビュー統計も別エンドポイントで取れます。

https://store.steampowered.com/appreviews/2379780?json=1&language=all

取得したデータは日次スナップショットとしてJSONファイルに保存します。日付ごとにファイルを分けることで、過去の価格履歴を追えるようになっています。

静的サイトとして生成する

ビルドスクリプト（build_site.py）がやるのは主に3つ。

1. ダッシュボード用JSONの生成 ― フロントエンドの Alpine.js が読み込む
2. Markdown記事のHTML変換 ― 対話形式の独自記法もここで処理する
3. SEO関連ファイルの生成 ― sitemap.xml、robots.txt

GitHub Actionsで毎日自動更新

GitHub Actionsを使い、毎朝7時（JST）に自動でデータ更新からデプロイまでを行っています。

1. リポジトリをチェックアウト
2. fetch_steam.py でSteam APIからデータ取得
3. build_site.py で静的サイト生成
4. 変更があれば git commit & push
5. FTPでロリポップにデプロイ

パブリックリポジトリならGitHub Actionsは無料で使えます。プライベートでも月2,000分まで無料。このワークフローは数分で完了するので十分です。

フロントエンド

フロントエンドは Alpine.js + Pico CSS です。

Alpine.jsは軽量なJSフレームワークで、ReactやVueと違ってビルドステップが不要です。

CSSはPico CSSをベースに、Steamの配色（ #1b2838 、#66c0f4 等）でダークテーマを組んでいます。

技術スタック

おわりに

「もしかして、ダッシュボードみたいな静的なサイトだったら、AWSのEC2とか、GCPとかの課金が発生する可能性があるものを使わないで作れるんじゃないか？」という技術検証目的で作成しました。

（私はロリポップ＋独自ドメインを使用しているので、厳密には無料ではないんですが……。）

自動ビルド＆デプロイをいつかやってみたいと思っていたんですが、自分でやってみて、ようやく良さが分かった気がします。CI/CDというのは素晴らしいですね。

Pulseのほうも、特にみられて困る情報はない（はず）なので、GitHubに移そうかな～。

PULSE - AIの鼓動｜ライフゲーム・マンデルブロ集合・ローレンツアトラクタなどビジュアライゼーション

ライフゲーム、マンデルブロ集合、ジュリア集合、ローレンツアトラクタ、フーリエ変換、ボイド、振り子など数学・物理シミュレーションを眺めて遊べるサイト。AIが毎日更新。

PULSE

また、SteamにはAPIがあったので、GitHub Actionsと組み合わせればデータがとり放題です。

私はロリポップにファイルを置いていますが、GitHub PagesやCloudflare Pagesとかだと、まあまあ、まあまあ、いけそうです。

いまどきのあんまり動きのない同人サイトだったら、GitHub PagesとかCloudflare Pagesで作れたりもしそうです。静的サイトジェネレーター＋無料ホスティングの組み合わせで、思った以上にいろいろできそうです。

みなさんもぜひやってみてください。