HSP3Dish.jsでフルスクリーン化2（2）

2026/01/04

はじめに対象と前提について使い方の全体の流れ HTMLテンプレートファイルを差し替える WEBアプリ変換用設定ファイル（hsp3dish.ini）を用意する WEBアプリ用に変換する出力された HTML の設定を変更するサーバーに配置して動作確認するよくあるつまずき・注意点おわりに

はじめに

　本記事では、HSP3Dish を使用した WEB アプリにおいて、画面最大化（フルスクリーン表示）を扱いやすくするためのサンプルと、その使い方を紹介します。

　WEB 向けにビルドした HSP3Dish アプリでは、自分の作品に合った最大化方法を採用したいと思っても、画面サイズや縦横比、フルスクリーン時の挙動などをどう選ぶべきか悩むことが多いと思います。また、実装面でも「どこから手を付ければいいのかわからない」と感じることも少なくありません。

　今回用意したサンプルでは、 HTML テンプレートと設定項目を差し替えるだけで、いくつかの画面最大化方式を簡単に切り替えられるようにしています。 HSP スクリプト本体を大きく書き換える必要はありません。

　本記事では、

サンプルの導入手順
基本的な使い方
設定項目の意味と調整方法

を中心に説明します。細かな内部実装の解説は行わず、「とりあえず動かせる」「試しながら調整できる」ことを重視した内容になっています。

　サンプル一式は、以下の ZIP ファイルとして配布しています。ダウンロードして、サンプルを触りながら記事を読み進めてください。

サンプルをダウンロード：neta035/sample01.zip

対象と前提について

　本記事は、HSP3Dish を使用して WEB アプリを作成している方向けの内容です。対象は HSP3 ユーザーのみとしており、JavaScript や HTML の詳細な知識は前提としていません。

　サンプルの導入や設定は、基本的にファイルの差し替えと設定値の変更だけで完結します。そのため、HSP スクリプト本体を書き換えることなく、画面最大化やフルスクリーン表示の挙動を試すことができます。

　内部処理や設計方針、個別の端末への対応方法については、ここでは詳しく扱いません。

　あくまで、「HSP3Dish の WEB アプリで、画面最大化を無理なく扱えるようにする」ことを目的としています。細かな最適化や高度な調整については、必要に応じて個別に対応してください。

　また、本サンプルは主にスマートフォンでの利用を想定しています。 PC 環境では解像度差が大きくなるため、表示が想定と異なる場合がありますが、本記事ではその点については割り切った設計としています。

使い方の全体の流れ

　このサンプルは、いくつかのファイルを差し替え、設定を変更するだけで利用できるようにしています。作業の流れ自体は、通常の WEB アプリ（hsp3dish.js）向けビルド（変換）とほぼ同じです。

　全体の手順は、次のとおりです。

HTML のテンプレートファイルを差し替える
　画面最大化処理を含んだテンプレートを使用します。一度行えば2回目から不要になる作業です。
変換用の設定ファイル（hsp3dish.ini）を用意する
　無くても動作はしますが、設定を簡単にするために使用します。実運用上は、ほぼ必須と思ってください。
WEB アプリ用に変換する
　普段どおりの手順で、WEB 向けにビルドします。HSP3Dish的には「html5に変換」という表現が使用されています。
出力された HTML の設定を必要に応じて変更する
　画面最大化の方式や縦横比などを、HTML 内の設定項目で切り替えます。
必要なファイルをサーバーに配置して動作確認する
　ブラウザでアクセスし、表示や挙動を確認します。

　以降の章では、それぞれの手順について順番に説明していきます。基本的には「差し替えて、ビルドして、設定を少し変えるだけ」で動く構成になっているので、細かい仕組みを理解していなくても、そのまま動かすことができます。

HTMLテンプレートファイルを差し替える

　まず最初に行うのは、HTMLテンプレートファイルの差し替えです。これは、出力されるWebアプリのHTML内容を、本サンプル向けのものに置き換えるための作業です。

　このページで配布している zip ファイルに付属の template.html を、以下の場所にある既存のテンプレートファイルと置き換えてください。

差し替える対象のファイル：
C:\hsp37\hsp3js\template.html

　元のファイルをバックアップした上で、新しい template.html を同じ場所にコピーするだけです。

　このテンプレートを使うことで、後の手順で出力されるHTMLに、本サンプル用の設定項目や構成が反映されるようになります。

WEBアプリ変換用設定ファイル（hsp3dish.ini）を用意する

　次に、WEBアプリ（html5変換）向けの設定ファイルを準備します。この設定ファイルは必須ではありませんが、解像度変更を1か所の書き換えだけで完了させることができるため、実際の運用ではほぼ必須です。配布しているzipファイルに付属のhsp3dish.iniを使用してください。

自分で作成する場合は、以下の手順で作成します。

空のテキストファイルを作成し、ファイル名を「hsp3dish.ini」にします。
hsp3dish.ini を、作成したプログラム（.hsp ファイル）と同じフォルダに置きます。

hsp3dish.ini を、以下の内容で記述します。
hsp3dish.ini


  ; hsp3dish settings
  wx=640
  wy=480

ezlocal-dish-jsを導入している場合は、以下のように記述します。
hsp3dish.ini


  ; hsp3dish settings
  wx=640
  wy=480
  
  ; ezlocal-dish-js settings
  sx=ENV_HSP_WX
  sy=ENV_HSP_WY
  noAdj_border=1
  noAdj_controls=1
  noAdj_systembox=1
  noAdj_mobile=1
  noAdj_logmes=1
  noAdj_fixmtinfo=1
  noAdj_sensor=1

wx,wyは描画画面の解像度です。プログラム本体側でscreen命令を使うのではなく、ここで指定します。

なお、hsp3dish.iniは、Shift-JIS、改行コードCR+LFで作成してください。

WEBアプリ用に変換する

　設定が終わったら、WEBアプリ用に変換します。手順自体は、通常の HSP3Dish による WEB 向けビルドと変わりません。

HSPスクリプトエディタのメニューから
　「ツール＞ HSP3dish/Cソース変換」を選びます。
HSP3Dish ヘルパーが起動するので、
　一番下のボタンから「hsp3dish.js」を選びます。
「参照」をクリックし、変換したい hsp ファイルを選びます。
「変換」を押すと、WEBアプリ用に変換されます。

　ezlocal-dish-js を導入している場合は、 F5 キーを押して表示される指示に従うだけで、変換が行われます。

　特別な操作は不要で、先ほど用意した template.html と hsp3dish.ini の内容が、この時点で反映されます。

　変換が完了すると、hsp ファイルと同じフォルダに HTML ファイルと関連ファイルが生成されます。

出力された HTML の設定を変更する

　WEBアプリ用に変換が完了すると、hsp ファイルと同じフォルダに HTML ファイルが生成されます。（ezlocal-dish-jsを使用した場合は、ローカルサーバー上に HTML ファイルが生成されます。）この章では、その HTML 内にある設定項目を変更して、画面最大化の方式などを切り替える方法を説明します。

　生成された HTML ファイルをテキストエディタで開いてください。 185行目付近に、本サンプル用の設定項目がまとまって記述されています。コメントを目印に探してください。

　ここで変更できるのは、主に次のような項目です。（カッコ内は設定変数）

フルスクリーンボタンの表示位置（HSP_VIEW_USEFULLSCRN）
フルスクリーンの表示方式の選択（HSP_SCREEN_MODE）
縦横比（HSP_ASPECT_RATIO）
動作解像度（ENV_HSP_WX、ENV_HSP_WY）

　設定値を変更したら、HTML ファイルを上書き保存し、そのままブラウザで開き直せば変更が反映されます。

　まずは表示方式の切り替えだけを試し、「どの表示が一番しっくり来るか」を確認するのがおすすめです。細かい調整は、動作を見ながら後から行えば問題ありません。

補足：フルスクリーン操作に関する注意

　本サンプルでは、キーボードの F11 キーによるフルスクリーン切り替えには対応していません。必ず、画面上に用意されたフルスクリーンボタンを使用してください。（F11 キーはHSP3Dish.js側で無効にされています。）

　また、JavaScript のコマンドを実行することで、HSP3 側からフルスクリーンを解除することも可能です。フルスクリーンを解除したい場合は、次のコマンドを実行します。

HSP3


	exec "cancelFullScreen();"

　ゲーム終了時など、必要に応じて活用してください。

補足：固定解像度モードと可視領域について

　「固定解像度（はみ出しを許容する）」表示方式を使用した場合、端末や画面サイズによっては、描画領域の一部が画面外にはみ出して見えなくなることがあります。

　この対策として、実際に表示可能な可視領域を取得するための JavaScript 命令（GetHSP3CanvasSize）を用意しています。この命令を HSP3 側から呼び出すことで、現在の可視領域サイズを取得できます。ただし、端末固有の挙動すべてを完全に吸収できるわけではないため、最終的には実機での確認も行ってください。

　画面内に必ず表示したい UI 要素や操作ボタンなどがある場合は、この可視領域取得命令を利用して配置を調整すると便利です。

サーバーに配置して動作確認する

　設定が終わったら、必要なファイルをサーバーに配置して動作を確認します。基本的な流れは、通常の HSP3Dish 製 WEB アプリと同じです。

　生成された HTML ファイルと、同時に出力された関連ファイル一式を、同じフォルダ構成のままサーバーにアップロードしてください。具体的には、.html ファイル、.dat ファイル、hsp3dish.js などが対象になります。

　なお、ezlocal-dish-js を使用している場合は、画面の指示に従うだけで、ここまでの作業はすでに完了しています。

　アップロードが完了したら、ブラウザで HTML ファイルにアクセスします。 PC だけでなく、スマートフォンでも表示を確認し、次の点をチェックしてみてください。

フルスクリーン表示が正しく切り替わるか
画面の端で要素が見切れていないか
縦横比や余白の見え方に違和感がないか

補足：PCブラウザでの確認について

　スマホでの表示確認は、スマホ本体以外でもブラウザのデベロッパーツールで可能です。ただし、ノッチや角丸の有無、フルスクリーン表示時に実際に描画へ利用できる領域の違いまでは再現されません。そのため、表示結果は実機と若干異なる場合がある点に注意してください。実機での確認を推奨します。

　特にスマートフォンでは、画面の回転やフルスクリーンのオン・オフによって、表示領域が変化します。その際にレイアウトが大きく崩れないかを確認しておくと安心です。

　なお、このサンプルはスマートフォン横向きを前提に作成しています。スマートフォンで確認する場合は、画面を横向きに切り替えたうえで、ページをリロードしてください。

　問題がなければ、基本的な導入作業は完了です。気になる点があれば、前章で説明した HTML 内の設定項目を変更したり、プログラム側を調整しながら、表示を詰めていきましょう。

よくあるつまずき・注意点

　本サンプルは、設定を差し替えるだけで使えるようにしていますが、環境によっては思った通りに動かないことがあります。ここでは、よく起きやすい点をいくつか挙げておきます。

フルスクリーンにならない
　ブラウザの仕様上、フルスクリーンはユーザー操作（ボタンのクリックなど）をきっかけにしないと有効になりません。自動でフルスクリーンに切り替わらない場合は、フルスクリーンボタンを押して動作を確認してください。

スマートフォンで表示が合わない
　スマートフォンでは、アドレスバーや画面回転の影響で、表示領域が動的に変化します。横向き表示を前提としている場合は、画面を横向きにしてからページを再読み込みしてください。

画面の端が見切れる
　ノッチや角丸のある端末では、画面の端が表示できない場合があります。重要な要素は、端から少し余裕を持たせるようにしてください。

表示がぼやける
　拡大・縮小を行う方式では、画像や文字がぼやけて見えることがあります。ドット絵やくっきりした表示を重視する場合は、「固定解像度（はみ出しを許容する）」方式を選ぶと改善されます。

　まずは難しく考えず、やってみておおよそうまくいく方法を探ってみてください。

おわりに

　ここまでで、サンプルの導入から設定変更、動作確認までの一連の流れは完了です。特別なコード修正を行わなくても、ファイルの差し替えと設定変更だけで、フルスクリーン対応を試せる構成になっています。

　今回の記事では、まず実際に動かせることを優先して説明しました。詳細な設定や使い方については、HTMLファイル内のコメントやサンプルスクリプトの記述を参考にしてください。内部処理の仕組みをすべて理解していなくても、表示方式を切り替えながら、自分の作品に合った設定を見つけられるはずです。

　まずは気軽に動かしてみて、表示の違いを体感してみてください。