ティラノスクリプトのゲームをWebに置く：ファイル構成と注意点
遊びをつくる執筆にClaudeを使用しています。
ティラノスクリプトで作ったノベルゲームをブラウザで動かすとき、「どのファイルをどこに置けばよいか」「なぜローカルでは動くのにサーバーでは動かないのか」という疑問がよく出てきます。ティラノスクリプトはHTML5向けの書き出しを標準で備えていますが、ファイル構成を理解しないままアップロードすると画像や音声が読み込めない、セーブが機能しない、スマートフォンで文字が崩れるといった問題に直面します。 この記事ではティラノスクリプトのWeb用出力フォルダの構成を確認しながら、アップロード前に整えておくべき点と、公開後に問題が起きたときの調べ方を順に説明します。Webサーバーの種類を問わず共通する考え方を中心に置きます。
この記事の目次
Web書き出しで何が生成されるか
ティラノスクリプト（およびティラノビルダー）でWeb向けにビルドすると、プロジェクトフォルダと同じ構造を持つ出力フォルダが作られます。中心になるのは次の要素です。
- index.html — ゲームの入り口になるHTMLファイル
- tyrano/ — エンジン本体のJavaScriptとCSSが入ったフォルダ
- data/ — シナリオ（.ksファイル）、画像、音声、フォントなどすべての素材
data/ の中はさらに bgimage/、fgimage/、sound/、bgm/、video/、scenario/ などに分かれています。この階層関係がそのままブラウザからのファイルパスになります。シナリオ内で storage="bg_room.jpg" と書けば、ブラウザは data/bgimage/bg_room.jpg を取りに行きます。階層をずらしたりフォルダを省いたりすると素材が見つからなくなります。
アップロードするときはこの出力フォルダをまるごと転送するのが基本です。一部だけを転送したり、フォルダ構造を手で組み替えたりすると問題の原因になります。
ローカルでは動くのにサーバーで動かない理由
最も多いのは CORS（クロスオリジンリソース共有） と ファイルパスの大文字・小文字 に関する問題です。
ローカルで file:// プロトコルを使って開いている間は、ブラウザのセキュリティ制限が一部緩んでいます。サーバーに置いて https:// でアクセスすると、JavaScriptがローカルファイルを読み込むような動作は制限され、素材の読み込みに失敗することがあります。
ファイルパスの大文字・小文字はWindowsとLinuxで挙動が異なります。Windowsのローカル環境では BGRoom.jpg と bgroom.jpg は同じファイルとして扱われますが、多くのLinuxサーバーでは別ファイルとして区別されます。シナリオ内のパス記述とファイル名が大文字・小文字まで一致していないと、ローカルでは動いてもサーバーでは404エラーになります。
対処の手順は次のとおりです。
- ブラウザの開発者ツール（F12）を開き「コンソール」タブと「ネットワーク」タブを確認する
- 赤いエラーに表示されているファイル名とパスを書き留める
- 実際のフォルダ内のファイル名と1文字ずつ照合する
- 不一致があればシナリオ側の記述またはファイル名どちらかに統一する
ファイル名はプロジェクト開始時点からすべて小文字・英数字・アンダースコアだけに統一しておくと、この問題を根本から避けられます。
セーブデータの扱いとブラウザの制約
ティラノスクリプトのWeb版はセーブデータをブラウザの localStorage に保存します。これはドメインごとに管理されるため、同じゲームでもURLのドメインが変わるとセーブが引き継がれません。
また、ブラウザの設定によっては localStorage の容量が制限されたり、プライベートブラウジングモードでは保存自体が無効になったりします。ゲームの冒頭や設定画面に「セーブデータはブラウザに保存されます。ブラウザのデータを消去するとセーブも消えます」という案内を入れておくと、プレイヤーの混乱を減らせます。
容量の問題はセーブスロット数やフラグ変数が増えると顕在化しやすくなります。localStorage の上限はブラウザにより異なり、一般に5〜10MB程度とされています。大量の変数を保存する設計の場合は早めに動作確認をするのが安全です。
音声・動画ファイルの形式と再生制限
ブラウザは自動再生に制限を設けており、ユーザーが何も操作しないうちに音楽や効果音を鳴らすことができません。ティラノスクリプトのWeb版では、最初のクリックやタップをトリガーにして音声を開始する設計になっているため、通常の使い方であればゲーム開始直後の操作で音声が有効になります。ただし、スキップや巻き戻しの実装によっては音が出ないケースがあるため、公開前にスマートフォンの実機でも確認しておくことを勧めます。
音声ファイルの形式はOGGとMP4（AAC）を両方用意しておくと安全です。ティラノスクリプトはブラウザに応じて対応形式を自動選択しますが、どちらか一方しかない場合は特定のブラウザで無音になることがあります。形式の変換はAudacityなどのツールで対応できます。
動画（ムービー演出）はMP4（H.264）が最も広く対応しています。ただしiOSのSafariでは自動再生に追加の制限があり、playsinline 属性と muted 属性の有無が挙動に影響する場合があります。動画演出を使う場合はiOS実機での確認を必ず行ってください。
アソバースへの投稿時に確認すること
アソバースはZIPファイルのアップロードに対応しています。ティラノスクリプトのWeb出力フォルダをZIP圧縮して投稿するときは、index.html がZIPの直下（または最上位フォルダの直下）に来るようにパッケージしてください。深い階層に index.html が埋まっていると正常に起動できません。
投稿前に手元のローカルサーバーで動作を確認しておくことも大切です。VS CodeのLive Server拡張などを使うと http://localhost:〇〇〇〇 でサーバー経由のプレビューができ、file:// では気づけない問題を事前に発見できます。
セーブ機能をアソバースのクラウドセーブと連携させたい場合は、アソバースが提供するSDKを用いた実装が必要です。SDKに対応していないゲームではブラウザのローカルストレージにセーブが残る標準の動作になります。
次の行動
Web書き出しフォルダを確認し、index.html から始まるフォルダ構造がそのまま維持されているかを確かめてください。ローカルサーバーで一通りプレイし、開発者ツールのコンソールにエラーが出ないことを確認してからアップロードすると、公開後のトラブルを大幅に減らせます。動作確認が取れたらZIPにまとめてアソバースに投稿してみてください。
参考資料
- ティラノスクリプト 公式ドキュメント
- ティラノビルダー ヘルプページ
- MDN Web Docs「localStorage」
- MDN Web Docs「Autoplay guide for media and Web Audio APIs」
