Steamworks Web APIを使ってゲームに費やしたお金を算出するアプリをつくった🚀

こんにちは。

Steam、利用していますか？ Steamとは主にPCゲームの配信を行っているプラットフォームであり、Counter-StrikeやHalf-Lifeといった有名なゲームの開発を行っているValveによって開発、運営が行われているサービスです。

約四半期間隔で大規模なセールが行われたりして、やりもしないのにゲームを買ってしまうことはあるあるかと思います。

そんなSteamで一体いくらゲームの購入にお金をかけてしまったのか気になりませんか？僕は気になりました。

Steamのサポートページから確認することも出来ますが、せっかくAPIが公開されているなら使えないかなと考え得たことがきっかけです。

ですので、タイトルの通りですがSteamworks Web APIを使って、ゲームに費やしたお金や遊んだ時間を算出するアプリをつくりました。

https://dowo.dev/works/steam-measure/

所持しているゲームの値段を足しているだけなのでセールでの購入は考慮されていません。正確な金額を知りたい方は公式のページを見ましょう。

WebフレームワークにはAstroを使ってみました。デプロイはCloudfalre Pagesで行いました。

また、Steamworks Web APIをCloudfalre Workersを使って叩いています。これは、開発中にAPIを叩きまくったことでRate limitに引っかかり一時的に使えなくなることが起きたためです。

WebアプリケーションサーバからWorkerを経由してSteamworks Web APIを叩いているため、レスポンスにかなり影響がありそうだなと思っていましたが後述するServer Islandsのserver:deferを使うことでLighthouseでそこそこのスコアを出せたのでは無いでしょうか？（90点切ってしまっているが、主に指摘されている点はLCPやLayout Shiftが発生していることなので画像の最適化や初期表示の作りの修正で改善しそう。）

Server IslandsとはとはAstroにおけるPartial Prerenderingに近い機能です。静的なHTMLを先にブラウザに送信したあと、部分的に動的なコンポーネントを差し込むことでユーザを待たせることなく素早くコンテンツを表示することが出来ます。

また、Next.jsにおけるSuspenseのfallbackのような仕組みを、動的なコンポーネントの差し込みまでに表示させるコンポーネントをserver:deferというServer Directiveを使うことで実現ができます。

突貫工事で作ったので結果画面の動的なOG画像の生成Twiter(自称: X)へのシェア機能の追加、Layout Shiftの修正、トップの画像の最適化などまだまだやりたい事があるので、今後も開発は続けます。

次はバズってめざましテレビに取り上げられるようなアプリをつくりたいですね。