Steamでプレイしたゲームを表示できる埋め込みウィジットを作った
作ったもの
Steamのプレイデータを任意のサイトに掲載できるウィジットを作成しました。
以下のページから利用できます！
背景
Spotifyの埋め込みウィジットのSteam版のようなものが欲しかったのですが、自分の調べた限り存在しなかったので作りました。
(↑Spotifyの埋め込みウィジット)
開発に関する話
フレームワークはNext.jsを使用し、デプロイはVercelに行いました。以前個人サイトのリニューアルに使用して多少知識があったため、開発へのハードルなどを考慮して選定しました。
SteamのAPIは比較的単純だったので実装は上手く進み、デザインなども整えサービスを公開しようという手前、iframeの仕様に苦しむことになりました。
iframeはコンテンツ側から高さを決められない(使用側でのみ高さを指定できる)ため、iframeの高さとコンテンツの高さが合致していない場合不自然な余白が発生したり、コンテンツ内で意図していないスクロールができてしまいます。
これでは不恰好なので、以下の解決策を講じてみました。
1.ゲームリストをスクロール可能にする
これもいいですが、パッとみただけで全ての項目を把握できるようにしたかったので今回は見送りました。
2.ウィジット生成時にコンテンツの高さを計算し、それをiframeのheightにする。
一番最初に考えたのがこれです。そもそもコンテンツの高さは表示するゲーム数が決まっていれば算出できるので、埋め込みコード生成時にその情報から高さを計算し埋め込みコード(iframe)のheight属性にそれを当てはめる、というやり方です。
この方法でうまくいくと思ったのですが、
3.iframeを挿入するスクリプトを配信し、動的に高さを変更する。
今回はこれを採用しました、この方の記事に感謝します。
詳細は上記記事と同一なので割愛しましたが、Next.jsでウィジット用のスクリプトを配信、利用側はscriptタグでそれを利用し、スクリプト側でiframeの高さ指定、ページへの挿入を行います。public下に置くだけでファイルを配信できるのは便利ですね。
まとめ
個人サイトに続き、Next.jsを使用してみました。簡単にWebアプリケーションを作ることができるのはとても便利でしたが、独特の仕様に振り回されることもあるので慣れていきたいです。
