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

2024/12/29

はじめに

　前回でHSP3Dish.jsを使っていろいろと試すための準備が終わりました。最終目標がフルスクリーンなので、解像度を変えたいですね。ということで、今回は標準機能での解像度変更の確認と、解像度を限界まで上げる事をやってみたいと思います。

標準機能で解像度を調整

　まずはHSP3Dishに用意された解像度変更の機能を見てみます。 htmlファイルの以下の部分を書き換えることで、表示を調整することができます。


ENV.HSP_WX = "300";//スクリプトの動作解像度
ENV.HSP_WY = "400";
ENV.HSP_SX = "300";//表示解像度
ENV.HSP_SY = "400";
ENV.HSP_AUTOSCALE = "0";//スケーリングモード
ENV.HSP_FPS = "0";//フレームレート
ENV.HSP_LIMIT_STEP = "15000";//ブラウザに処理を返すまでの実行ステップ数

　詳細はマニュアルを読んでください。関連個所だけ説明しておきます。

　動作解像度は、プリグラム側が認識している解像度です。表示解像度を変えると画面に表示される大きさが変わります。動作解像度と表示解像度は通常は同じ値を指定して使用した方がいいようですが、異なる値を指定することもできます。例えば、動作解像度＜表示解像度 にすると荒い解像度のまま、画面上への表示面積を大きくすることができます。拡大表示されるので。境界線などがぼやけた印象になります。

　line命令など一部の描画命令は、線の太さが表示解像度に依存します。特に理由がない限り、動作解像度と表示解像度は同じ値で運用した方いいようです。

　スケーリングモードは、動作解像度と表示解像度が異なる場合に機能します。基本的に0以外使うことは無いと思います。

実行環境によって解像度を変える

　ディスプレイ解像度は実行環境によって異なります。なので実行環境に合わせて解像度を変更する方法を考えてみます。

　この方法は、実行環境に合わせて動作解像度と表示解像度を変更する例です。スマホで開いた場合だけ、表示解像度をブラウザの解像度に合わせるようにしています。スマホの時は余すことなくディスプレイを使い、PCの時は広すぎるのでサイズを固定するといった使い方です。

　スクリプトの修正箇所はこのようになっています。


<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mobile01 - HSP3Dish</title>

    …

        ENV.HSP_WX = "300";//スクリプトの動作解像度
        ENV.HSP_WY = "400";
        ENV.HSP_SX = "300";//表示解像度
        ENV.HSP_SY = "400";
        ENV.HSP_AUTOSCALE = "0";//スケーリングモード
        ENV.HSP_FPS = "0";//フレームレート
        ENV.HSP_LIMIT_STEP = "15000";//ブラウザに処理を返すまでの実行ステップ数
        // スマホの場合、スマホのブラウザ解像度に合わせる
        if (navigator.userAgent.match(/iPhone|Android.+Mobile/)) {
          // スクリプトの動作解像度サイズ
          // 実行環境ごとにウィンドウサイズが変わります。
          ENV.HSP_WX = String(document.documentElement.clientWidth); // ブラウザ内の表示域(スクロールバーを除く)
          ENV.HSP_WY = String(window.innerHeight); // ブラウザ内の表示域(スクロールバーを含む)
          // WEBブラウザ上で表示される解像度サイズ
          ENV.HSP_SX = ENV.HSP_WX;
          ENV.HSP_SY = ENV.HSP_WY;
        }

    …

ひとつずつ見ていきます。

ビューポートを設定

　最近のスマホのディスプレイ解像度はとても高くなっています。4Kとかもあるらしいですね。高解像度のままウェブサイトを表示するととても読んだりタップしたりできるサイズでは表示できません。


    <meta name="viewport" content="width=device-width, initial-scale=1.0">

　そこで、通常はこのようなmetaタグが使われています。このタグが使われると、ブラウザはモバイル向け解像度でウェブサイトを表示します。このモバイル向け解像度は、ビューポート解像度（ブラウザサイズ、ブラウザ解像度、画面サイズ、など…まだ一般名詞化されていないそうです。）などと呼ばれています。

　スマホのビューポート解像度は、機種ごとにデフォルト値が異なっていますが、おおむね320x568～430x932の範囲が使用されているようです。上記のような属性を設定するとデフォルトのビューポート解像度に設定されます。

　スマホのビューポート解像度は、おそらくディスプレイの物理寸法から、指がタップできる物理サイズ、文字が読める物理寸法、などを根拠に設定されている値だと思います。スマホでの表示は、ビューポート解像度を使えばそれなりに物理寸法が揃えられると、私は勝手に期待しています。なので、上記のような記述がお勧めです。

スマホ判定


        // スマホの場合、スマホのブラウザ解像度に合わせる
        if (navigator.userAgent.match(/iPhone|Android.+Mobile/)) {
          …
        }

　サイトを閲覧している端末が、スマホかどうかを調べています。ユーザーエージェントで判定しています。

　そのうちUserAgentの廃止の動きとか削減とかあるようですね。個人の記事などを少し調べてまわった感じでは、まだ当分はこの判定方法で大丈夫っぽいです。まあ、動かなくなりそうだったらその時また考えます。

　PCブラウザで見るときは、ディスプレイが広すぎるので固定値を使い、スマホで見るときは画面面積が狭いので表示解像度を変更する、といった使い方をしています。

環境ごとに解像度を変える


          // スクリプトの動作解像度サイズ
          // 実行環境ごとにウィンドウサイズが変わります。
          ENV.HSP_WX = String(document.documentElement.clientWidth); // ブラウザ内の表示域(スクロールバーを除く)
          ENV.HSP_WY = String(window.innerHeight); // ブラウザ内の表示域(スクロールバーを含む)
          // WEBブラウザ上で表示される解像度サイズ
          ENV.HSP_SX = ENV.HSP_WX;
          ENV.HSP_SY = ENV.HSP_WY;

　ENV.HSP_SX にブラウザ内の表示域幅(スクロールバーを除く)を設定。 ENV.HSP_SY にブラウザ内の表示域高さ(スクロールバーを含む)を設定。出来るだけ広くなるようにしています。ここではこの方法ですが、JavaScriptなのでお好みのサイズを指定することができます。今回はこの方法にしてみました。

　拡大されると困るのと、line命令などの描画結果が変わってしまうと困るので、動作解像度と表示解像度は同じにしています。 ENV.HSP_SX＝ENV.HSP_WX、 ENV.HSP_SY＝ENV.HSP_WY

実行結果

　上記の変更を加えたものがこちらです。
./dish/mobile01_f1.html

　PCだと特に変化ないので、デペロッパーツールを起動してデバイスをスマホに切り替えてください。表示をスマホに切り替えたら再読み込み（F5）を行ってください。スマホの機種を切り替えると、実行環境でウィンドウサイズが異なっていることがわかります。

　この方法なら拡大しないので鮮明な表示が可能です。またディスプレイ解像度をフルに使うことができるので、精細な表現が可能になります。ウィンドウサイズは、ginfo_winx, ginfo_winyで取得することができます。

　ただし注意も必要です。プログラムする際にウィンドウサイズが変化することを考慮しながら作成する必要があります。例えばボタンやアイコンの位置は固定ではなく、ginfo_winx, ginfo_winyを使って比率やウィンドウ端からの距離で決める必要があります。左上を基準とした固定値を指定していると、左上に偏ったり右下が見切れたりしてしまうので注意が必要です。

　極端に縦長なディスプレイの物もあるので、解像度ごとに思った通りの表示結果になっているか確認が必要です。解像度を確認して一定の解像度以下なら画面レイアウトを変えるなど、レスポンシブWebデザインを参考にした開発の見当が必要かもしれません。