ティラノスクリプトのゲームをスマホ対応させる
遊びをつくる執筆にClaudeを使用しています。
ティラノスクリプトで作ったノベルゲームをスマホで快適に遊べるようにしたい、という相談はゲーム制作コミュニティでよく見かけます。ティラノスクリプト自体はHTML5ベースなので、スマホのブラウザでも「動く」ことは多いです。しかし「動く」と「快適に読める・操作できる」は別物で、PCで作ったそのままの状態では文字が小さすぎたり、タップ領域が狭すぎたりして離脱を招きます。 この記事では、ティラノスクリプト（ティラノビルダーを含む）で制作したゲームをスマホでも快適に遊べる状態に仕上げるための判断基準と手順を整理します。「どこから手をつければよいか分からない」という段階から、「公開できる品質」に引き上げるまでの道筋を示します。
スマホ対応で実際に何が問題になるか
ティラノスクリプトのデフォルト設定はPC画面（横長、幅800px前後）を想定しています。スマホで開いたときに起きやすい問題は大きく三つです。
一つ目はレイアウトの縮小です。画面全体が縮小表示されて文字が読めなくなります。これはHTMLの<meta name="viewport">タグが正しく設定されていないか、ゲームの幅がビューポートを超えているために起きます。
二つ目はタップ操作のズレや反応しにくさです。ティラノスクリプトはクリックイベントを基本にしているため、タップとの相性で「一回タップしても進まない」「二回タップしないと反応しない」という症状が出ることがあります。
三つ目は音声の自動再生制限です。iOSとAndroidはユーザー操作なしの音声自動再生を制限しています。BGMがPCでは流れるのにスマホでは無音になる、という問題はこれが原因です。
この三つを順番に解消していくのが、スマホ対応作業の実質的な内容です。
ビューポートとレイアウトの調整
まずティラノスクリプトのプロジェクト内にあるindex.html（またはティラノビルダーの場合はエクスポートしたHTMLファイル）を開き、<head>内に次のタグがあるか確認します。
<meta name="viewport" content="width=device-width, initial-scale=1.0">このタグがなければ追加します。initial-scale=1.0を指定することで「スマホの画面幅に合わせて等倍表示する」という指示になります。
次に、ゲーム本体の表示サイズ設定を確認します。ティラノスクリプトではConfig.tjs（またはティラノビルダーのプロジェクト設定）で画面サイズを指定しています。ここに固定ピクセルで幅・高さが書かれている場合、スマホ画面よりも大きな値だと画面外にはみ出ます。
スマホ対応の現実的な方法は二つあります。
方法A：縦横比を維持して画面全体に収める
CSSのtransform: scale()を使い、画面サイズに合わせてゲーム全体を拡縮します。ティラノスクリプトは標準でこの機能を持っており、Config.tjsの中にscaleModeという設定項目があります（バージョンによって名称が異なる場合があるため、使用しているバージョンの公式ドキュメントで確認してください）。この設定を有効にするだけでスマホでも縦横比を保ったままフィットした表示になります。
方法B：縦長レイアウトをスマホ向けに別途用意する
縦スクロール主体のノベルゲームや、縦長スマホで見栄えよくしたい場合は、背景画像・立ち絵・UIのレイアウトを縦長向けに作り直す方が品質が上がります。工数はかかりますが、読み応えのある長編作品ではこちらが最終的に満足度の高い選択肢です。
短編や試作品であれば方法Aで十分なことが多いです。公開に向けた作品なら方法Bも検討する価値があります。
タップ操作の改善
ティラノスクリプトは比較的タップ対応が整っていますが、カスタムボタンや選択肢のサイズが小さいとタップミスが起きやすくなります。
まずボタン・選択肢のCSSを確認します。heightやpaddingが小さい場合、最低でも44px以上（Appleが推奨するタッチターゲットの目安）を確保するように調整します。ティラノスクリプトのUIはCSSで上書きできるため、tyrano/css/以下のファイルか、プロジェクト固有のCSSファイルで調整します。
次に「ダブルタップでズームしてしまう」問題です。これはビューポート設定にuser-scalable=noを追加することで防げます。ただしアクセシビリティの観点から一概に推奨はされていないため、ゲームの性質に合わせて判断してください。
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">タップしても次に進まない「反応しない」問題は、クリックイベントとタッチイベントの両方が実装されているかに関係します。ティラノスクリプト本体の新しいバージョンでは改善されていることが多いため、古いバージョンを使っている場合はまずアップデートを検討するのが早道です。
音声の自動再生への対処
iOSとAndroidでは、ページロード直後の音声自動再生がブラウザによってブロックされます。ティラノスクリプトでは最初の画面でユーザーにタップ（クリック）を求める「タイトル画面」を挟むことが一般的な解決策です。
タイトル画面でユーザーが一度タップすると、その操作を契機にBGMの再生が許可されます。つまり「ゲームを始めるボタン」を押した後にBGMを再生する設計にすれば、スマホでも音声が流れます。
シナリオの冒頭でいきなり[bgm]タグを書いている場合は、タイトル画面やオープニングのタップを挟んだ後に移動させてください。プロジェクト設定でオープニングのファイルを変更できます。
音声ファイル形式も確認します。mp3は広く対応していますが、oggはiOSで再生できない場合があります。BGMや効果音をmp3に統一しておくと、環境差による問題を減らせます。
実機確認で見つけやすい問題と確認の手順
設定変更後は必ず実機またはそれに近い環境で確認します。デスクトップブラウザのデベロッパーツールにあるスマホエミュレーターはレイアウト確認には使えますが、タッチイベントや音声の挙動は実機と異なる場合があります。
確認の順序として、以下が実用的です。
- iOSのSafariで開き、文字の大きさ・レイアウトを目視確認する
- BGMが再生されるか（タイトルタップ後に音が出るか）確認する
- 選択肢が正しくタップできるか、全選択肢を一通り試す
- Androidの標準ブラウザ（ChromeまたはSamsung Internet）でも同様に確認する
- 横向きにしたときにレイアウトが崩れないか確認する
実機を複数用意するのが難しい場合は、身近な人に異なる機種で試してもらうのが現実的です。
次の行動
スマホ対応の最初の一歩として、index.htmlのビューポート設定とConfig.tjsのscaleMode設定を確認するところから始めてください。この二点だけで多くのレイアウト崩れは解消されます。対応が完了したら、ゲームをZIPにまとめてアソバースに投稿することでスマホブラウザからのアクセスにも対応した状態で公開できます。公開後も実際にスマホからプレイして気になる点があれば、随時CSSや設定を調整してください。
参考資料
- ティラノスクリプト 公式ドキュメント（リファレンス・Config.tjs設定項目）
- ティラノビルダー 公式ヘルプ
- Apple Human Interface Guidelines（タッチターゲットサイズの指針）
- MDN Web Docs「viewport meta タグ」
