Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【ITニュース解説】Building a Zero-Ad, Sub-100ms Build Planner for Shape of Dreams on Astro 4

2026年10月21日に「Dev.to」が公開したITニュース「Building a Zero-Ad, Sub-100ms Build Planner for Shape of Dreams on Astro 4」について初心者にもわかりやすく解説しています。

作成日: 更新日:

ITニュース概要

広告や古い情報が多いゲーム攻略サイト問題を解決すべく、Astro 4で超高速なゲームビルドプランナーを開発。サーバーレス構成で、ゲームデータを直接反映し正確性を担保。URL共有でアカウント不要、データもオープンソース公開中だ。

ITニュース解説

近年、人気のアクションRPGやローグライクといったジャンルのゲームでは、その複雑なゲームシステムを理解し、キャラクターの最適なビルド(能力構成)を組むことが攻略の鍵となる。しかし、従来のゲーム攻略サイト、いわゆるWikiの多くは、広告が過剰に表示されたり、動画バナーやポップアップ広告でページが重く、情報の読み込みに時間がかかったりするという問題に直面している。さらに、ゲームのアップデートによるバランス調整が頻繁に行われるにもかかわらず、情報が古いまま放置されていることも珍しくなく、プレイヤーは最適なビルドを選択できないという課題を抱えている。

こうした現状を解決するため、「Shape of Dreams」というゲーム向けの新たなWebコンパニオン「Shape of Dreams Wiki & Interactive Build Planner」が開発された。これは、広告が一切なく、100ミリ秒未満という非常に高速な応答性を実現し、さらに情報の正確性を保証するという目標を掲げている。このツールは、ユーザーがストレスなくゲームの情報を検索し、キャラクターのビルドを検討できるように設計されたものだ。

このプロジェクトの実現には、いくつかの洗練された技術的なアアプローチが用いられている。まず、ゲーム内の複雑なメカニズムを正確に把握し、データとしてモデル化することが重要だった。Shape of Dreamsには、「Essences(エッセンス)」と呼ばれるスキル動作を変化させるパッシブな能力や、「Hero Stars(ヒーロースター)」と呼ばれるキャラクターごとの才能ノード、そして「Memories(メモリー)」というアクティブスキルが存在する。これらの要素は、ダメージ計算、属性変換、クールダウン時間など、多岐にわたる複雑な相互作用を持つ。例えば、スキルのクールダウン時間は、特定のステータス「Memory Haste(メモリーヘイスト)」の値によって減少するが、その計算には特定の数式が適用される。ゲーム内の計算結果とWebツールでの計算結果がずれると、プレイヤーは誤った情報を基にビルドを組んでしまうため、開発チームはゲーム本体が持つアセットデータ(ゲームの素材情報)を直接利用し、浮動小数点計算の精度に至るまで、完全に一致するよう徹底した。これにより、ゲームと寸分違わぬ正確なデータに基づいたビルド計画が可能になった。

次に、このツールの核となる技術アーキテクチャが「0-Backend, Instant Client State」というコンセプトで構築されている。これは、サーバーとの通信を極力なくし、ユーザーの操作に対してWebブラウザ側(クライアント側)で瞬時に反応することを意味する。

具体的には、「Astro 4」というWebフレームワークを利用して、すべてのデータベースページ(93種類のエッセンス一覧やキャラクター情報など)を事前に純粋なHTMLファイルとして生成している。これを「静的プリレンダリング」と呼ぶ。これにより、ユーザーがページを開いた瞬間にすべての情報が表示され、ページの主要なコンテンツが表示されるまでの時間(LCP: Largest Contentful Paint)は120ミリ秒未満、ページの読み込み中にレイアウトがガタつく現象(CLS: Cumulative Layout Shift)も完全にゼロという、非常に高いパフォーマンスを実現している。通常、Webサイトでは、ユーザーがアクセスするたびにサーバーがページを生成して送り返すが、この方式では事前に生成された軽量なHTMLファイルを配信するため、サーバー側の負荷も減り、ユーザーはより高速に情報を得られるのだ。

さらに、ビルドプランナーの計算部分は、Webページ全体の一部として独立した「マイクロハイドレーションされたアイランド(島)」として実装されている。これは、Webページ全体を動的にするのではなく、インタラクティブな機能を持つ特定のコンポーネントだけを独立した小さなアプリケーションのように動作させるアーキテクチャだ。ユーザーがメモリーを交換したり、エッセンスを装備したりするたびに、アクティブなダメージ出力や有効なクールダウン、防御ステータスといった情報が、わずか16ミリ秒という驚異的な速さでリアルタイムに再計算される。これにより、ユーザーはビルドの変更がすぐに結果に反映されるため、快適に試行錯誤できる。

ユーザーがビルドしたキャラクター設定を保存・共有する仕組みも非常に工夫されている。通常、このような機能にはユーザー登録やサーバー側のデータベースが必要になるが、このツールではそうした仕組みを一切使わない。代わりに、ユーザーが作成したキャラクターの全設定(選択したトラベラー、メモリー、エッセンス、ヒーロースターなど)を、コンパクトなJSON形式のデータとしてまとめ、それをBase64という形式でURLの末尾にあるハッシュ部分に埋め込んでしまう。この「ステートレスURLシリアル化」により、ユーザーは自分のビルド設定が完全に記録されたURLをコピーするだけで、DiscordやRedditのようなプラットフォームで簡単に共有できる。アカウントを作成する手間もなく、サーバー側の負担もゼロという、非常に効率的でユーザーフレンドリーな設計だ。

最後に、開発チームは、ゲームのデータベースはコミュニティ全体がアクセスできるべきだという信念から、このプロジェクトで利用されているクリーンなデータセットとインタラクティブなツールをオープンソースとして公開している。これにより、他の開発者がこのデータを利用したり、コミュニティがツールの改善に貢献したりすることが可能になる。

この「Shape of Dreams Wiki & Interactive Build Planner」は、既存のゲーム攻略サイトが抱える問題点を、先進的なWeb技術とデータ管理のアプローチによって見事に解決した事例と言えるだろう。広告なし、高速、正確、そして共有しやすいというユーザー体験の向上は、システムエンジニアリングの視点からも学ぶべき点の多い優れた実践例を示している。

関連コンテンツ

関連IT用語

関連ITニュース