HSP3Dish.jsでフルスクリーン化（4）
目次
解像度を固定したまま表示
前回、解像度が固定のまま開発できれば、どの環境でも同じ表示結果になるはず。 とは言ったものの現実は甘くありません。そのまま拡大しただけではいくつかの問題が残ります。
- ディスプレイのインチ数が大きい端末ではボタンが大きく表示される一方で、インチ数が小さいコンパクトな端末ではボタンを押すのが難しいくらい小さくなる。
- 同じ理由で、表示される文字の大きさも端末ごとにばらばらになる。小さい端末だと読めないかも。
- 拡大するので画像がぼやける。
そこで、解決の基本方針はこうです。拡大しない。拡大しないためには、解像度がある程度そろっている必要があります。表示結果もなるべく揃えたいので、スマホのブラウザの解像度をなるべく揃えます。それでもばらつくので機種によっては、画面からはみ出します。はみ出すことを考慮してプログラムすることで解決します。
はみ出させる事については、こちらの記事を参照ください。
作成例
作成例です。できればスマホ実機で表示してみてください。 スマホがない場合は、デペロッパー ツールを起動して、スマホでの表示結果を確認してみて下さい。 拡大しないのであまりぼやけていないはずです。 文字の大きさも機種ごとの極端な差は無いと思います。
今回はスクリプトを変更しているので載せておきます。
; スマホ向けHSP3Dishのサンプル
; 次の内容を出力します。
; ・ウィンドウサイズ
; ・現在タッチされている座標
; ・スマホサイズ枠を描画
#include "hsp3dish.as"
#module
#deffunc lbox int p1, int p2, int p3, int p4
line p3, p2, p1, p2
line p3, p4
line p1, p4
line p1, p2
return
#deffunc lbox_center int x1, int y1, int x2, int y2
wx = ginfo_winx
wy = ginfo_winy
sx = (wx-(x2 - x1)) / 2
sy = (wy-(y2 - y1)) / 2
lbox x1+sx, y1+sy, x2+sx, y2+sy
return
#global
screen 0, 430, 764
; スマホの画面サイズ
dim mbileWinSize, 30, 2
n=0 : mbileWinSize(0, n) = 320, 568
n++ : mbileWinSize(0, n) = 320, 693
n++ : mbileWinSize(0, n) = 360, 800
n++ : mbileWinSize(0, n) = 360, 780
n++ : mbileWinSize(0, n) = 360, 640
n++ : mbileWinSize(0, n) = 360, 720
n++ : mbileWinSize(0, n) = 375, 667
n++ : mbileWinSize(0, n) = 375, 812
n++ : mbileWinSize(0, n) = 390, 844
n++ : mbileWinSize(0, n) = 393, 852
n++ : mbileWinSize(0, n) = 393, 873
n++ : mbileWinSize(0, n) = 393, 851
n++ : mbileWinSize(0, n) = 412, 915
n++ : mbileWinSize(0, n) = 412, 960
n++ : mbileWinSize(0, n) = 412, 892
n++ : mbileWinSize(0, n) = 414, 896
n++ : mbileWinSize(0, n) = 414, 736
n++ : mbileWinSize(0, n) = 418, 976
n++ : mbileWinSize(0, n) = 428, 926
n++ : mbileWinSize(0, n) = 430, 932
mbileWinSize_Length = n + 1
*main
redraw 1 : await 16 : redraw 0 : color 255, 230, 230 : boxf : color : pos 0,0
; スマホのビューポート解像度を表示
repeat mbileWinSize_Length
idx = mbileWinSize_Length - 1 - cnt
s = (120.0 / mbileWinSize_Length) * cnt + 135.0
hsvcolor 0, 120, s
x0 = 0
y0 = 0
x1 = mbileWinSize(0, idx)
y1 = mbileWinSize(1, idx)
lbox_center x0, y0, x1, y1
loop
; テキストを表示
; x = ( ginfo_winx - mbileWinSize(0, 0) ) / 2
; y = ( ginfo_winy - mbileWinSize(1, 0) ) / 2
x = 55 : y = 98
pos x, y
color
mes "---- ウィンドウサイズ ----"
mes "" + ginfo_winx + " x " + ginfo_winy
mes "---- マルチタッチ ----"
mtlist tpointID
tpointNum = stat
mes "ポイントIDの数：" + tpointNum
repeat tpointNum
mtinfo infoTouch, tpointID(cnt)
f = infoTouch(0)
x = infoTouch(1)
y = infoTouch(2)
id = infoTouch(3)
r = 40
color 255, 0, 0 : line x, 0, x, ginfo_winy
color 0, 255, 0 : line 0, y, ginfo_winx, y
color
circle x-r, y-r, x+r, y+r, 0
pos x-r, y-r-16
mes "ID "+id
loop
goto *main
ビューポート解像度を使う
最近のスマホは4kの物もあるらしいです。そんな環境で拡大せずに表示すれば文字もボタンもゴマ粒サイズで表示されてしまいます。
ところでブラウザでウェブサイトを表示する場合も同じ問題を抱えているはずですが、ちゃんと読めるサイズで表示されています。これはスマホで表示する場合、表示用の読みやすい低い解像度でブラウザが動作するようになっているからです。例えば、iPhone 16 ProMax のディスプレイ解像度は 2868x1320ですが、ブラウザで表示する場合は 440x956で動作します。この表示用解像度の名称は一般化されていないらしく、ビューポート解像度、ブラウザサイズ、ブラウザ解像度、画面サイズなどと呼ばれているようです。ここではビューポート解像度と呼ぶことにします。
ビューポート解像度は機種ごとに異なります。ビューポート解像度はメーカーの推奨解像度と考えていいと私は考えています。 理由は推測になりますが、インチ数大きい場合は解像度を高くしないと文字などが大きくなりすぎてしまいます。シニア層がターゲットの機種なら、文字を大きめに表示する必要があるので低解像度になっていると思います。 ビューポート解像度のデフォルト値は、ディスプレイのインチ数や利用者層という制限を考慮して設定されているはずです。
推測ではありますが以上のような理由で、メーカー推奨解像度であろうビューポート解像度を使えば、文字やボタンが極端に小さくなってしまう問題を解決出来るはずです。
ビューポート解像度は、headタグ内に以下のmetaタグを入れるだけで適用されるようになります。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
画面解像度のシェア
ビューポート解像度が低い場合は、画面の一部をはみ出させるという方針なので、絶対に表示される安全な領域を把握しておく必要があります。
こちらのサイトを参考に、スマホのビューポート解像度（画面解像度）の現状について調べてみました。
レスポンシブCSSで使うブレイクポイントの決め方
https://allabout.co.jp/gm/gc/454493/2/
まずは現状把握から。
StatCounter（https://gs.statcounter.com/）の集計による 2024年4Q（7月～9月）のモバイル環境のシェアを見てみます。タブレットは大きいので、今回はとりあえずPC扱いとして除外しました。
モバイル画面解像度統計 日本 2024年第3四半期
csvでダウンロードして1%以下も見てみました。 最近のスマホは縦に伸びていく傾向があるようです。記事にある通り比較するなら横幅でしょう。 横幅は 320px～430px です。90pxの差、20%以上違うって結構違いますね。トップシェアは390pxのようです。 過去と比較すると大きくなってきているようです。物理的に大きい機種が増えてるのでそのせいだと思います。 320pxで収まるように作っておけば確実に表示出来そうです。
縦横比も見てみましょう。 16:9が一番小さくて、最大は21:9。シェアは19:9が多いようです。 16:9で作っても高さが足りないということはなさそうです。
プログラムを作る際は、ウィンドウ幅を430pxで作成する。 文字やアイコンなど重要な物は320pxの範囲内に配置する。 という方針で作ればよさそうです。
スクリプト
スクリプト作成時は、ウィンドウ幅を430、アスペクト比を 16:9 にしてみることにします。
screen 0, 430, 764
hsp3dish向けにコンパイルするときにscreenは無視されるので、hsp3dish.iniファイルも同じサイズを指定しておきます。
次に、プログラム作成時にスマホのビューポート解像度がどのくらいなのか分からないと開発時に困ります。 なので解像度の枠を表示するようにしました。 アプリ実行時に表示されていた枠はこれです。 今更ですが、一番小さい枠だけ表示すれば良かったかも。
; スマホの画面サイズ
dim mbileWinSize, 30, 2
n=0 : mbileWinSize(0, n) = 320, 568
n++ : mbileWinSize(0, n) = 320, 693
…
n++ : mbileWinSize(0, n) = 428, 926
n++ : mbileWinSize(0, n) = 430, 932
mbileWinSize_Length = n + 1
htmlの修正
emscripten_borderクラスを持つdiv要素（HSP3Dishの描画領域のコンテナ要素）を画面いっぱいに表示されるようにするため、スタイルを次のように変更しています。
div.emscripten_border {
height: 100vh;
width: 100vw;
background-color: black;
overflow: hidden;
/* 中央寄せ */
display: flex;
justify-content: center;
align-items: center;
}
このままだとcanvasは大きさが変わらないので、コンテナをはみ出します。
overflow: hidden; とすることで、canvas要素がはみ出した場合に描画しないようにしています。
メリットとデメリット
PCのブラウザだと面積が広いので、上下左右の黒い窓枠が残ってしまいます。PCブラウザの場合は動作結果を変えるようにするとかすればいいかもしれませんね。
さてこの方法だと、解像度を変えないので、絵がぼやけない。実行環境の変化に合わせて、画面内のレイアウトを可変にする必要がない。などのメリットがあります。
一方で大きめに作るので、上下または左右の一部が画面外にはみ出す。はみ出した部分は見えない。というデメリットもあります。 ターゲットとする機種やユーザー層を絞った方がいいかもしれません。 例えば320px幅はらくらくホンとかiPhone 5などの古い機種だと思うので対応を見送るとかです。