画面サイズの実験

更新:2022年8月21日   HSPトップへもどる

・全画面(フルスクリーン)もしくは それに近い画面サイズでHSP製Webアプリを実行する方法を実験してみました。
普通の iPad (9.7インチ)を縦にして、Safariブラウザで実行する想定です。

最終結果 iPad でなるべく大きな画面で実行する
 ◆ブラウザで動作するページ
  http://www.junjisuzuki.jp/stg/stg_ipad_i.html

・画面サイズ 768 × 872 で作成、実行しています
(たぶん、縦はもうすこしだけ長くしても入ると思います 縦 888 くらい?)

・ 普通の iPad (9.7インチ)のSafari ブラウザで表示したとき最適になることを想定して実験しています
・iPad Pro でも動作します。余白はできます。
・Windows PCのブラウザ(Chrome など)でも動作します

・Safari 上部の URLバーや 複数ページのタブをWebアプリ側から消す(非表示にする)方法は現時点では不明です(iOS は バージョン 15.5 でテストしています) 

★追記: iPad の Safari側の機能(iPadOS15.6.1現在)として、Safariアプリ画面の最上部(時計が表示されてる高さの部分)をユーザー自身がタッチして上方向へスワイプ操作すると、全画面にちかいカタチでページ閲覧(Webアプリ実行)ができます。
 もとにもどすには、最上部をタップします。

また、基本的な操作として、
iOS の Safari は 表示したページの文字や画像が小さくて見にくいときに「ピンチ・アウト」操作することで、ほとんどのWebページが拡大表示できます。
HSP製Webアプリのページもおなじ操作で画面拡大できます。

やりかた:
① スクリプト作成時に screen 命令で画面サイズを指定
② HSP3Dish helper で変換前に 画面サイズ指定した hsp3dish.ini ファイルを用意
③ 変換後に生成されたWebアプリ本体である .html を手作業で修正

html の最初のほうで meta タグ を追加
(※これはiPad Safari用です。Androidタブレットや他のPCブラウザ用には別の書き方があります)

<meta name="viewport" content="initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

textareaタグをさがして、コメント化(無効化)

<!--     <textarea id="output" rows="8"></textarea> -->

↓ 前述の②の作業をしていればこの部分の修正は不要。②がうまくできなかったときはここを直接修正してもよい

        ENV.HSP_WX = "768";//スクリプトの動作解像度
        ENV.HSP_WY = "872";
        ENV.HSP_SX = "768";//表示解像度
        ENV.HSP_SY = "872";

末尾部分の表記をコメント化(無効化)して消し、画面がいっぱいに収まるようにする

<!--   <p><font size="2" color="#404040">powered by <a href="https://hsp.tv/make/hsp3dish.html" target="_blank">hsp3dish.js</a> / OpenHSP</font></p> -->

★ htmlファイルを修正したら、再度アップロードし直すのを忘れないで!

実験過程のバージョン

768 × 872
 iPad Safari で表示すると画面を収めるための自動縮小がかかっています
 ◆ブラウザで動作するページ  <textarea> あり
  http://www.junjisuzuki.jp/stg/stg_ipad_g.html

768 × 1024
 ◆ブラウザで動作するページ  <textarea> あり
  http://www.junjisuzuki.jp/stg/a/stg_ipad
 
 ◆ブラウザで動作するページ  <textarea> なし
  http://www.junjisuzuki.jp/stg/b/stg_ipad_b

768 × 800
 ◆ブラウザで動作するページ  <textarea> なし
  http://www.junjisuzuki.jp/stg/e/stg_ipad_e 

現時点の結論

・iPad では、なにも指定しなければブラウザ側が「自動縮小」で実行画面を画面内に収めようとする、ようである

・はじめからスマホ以外の大きめ画面を想定したWebアプリを作りたい場合、画面サイズがちがうタブレットも多いので、苦労してぴったりのサイズで作ろうとがんばるよりも、640×800 や 800×640 でまずは作ってみるのがよいかもしれない

・スマホ用のちいさな画面サイズ(縦長)
・タブレットとパソコン用の大きな画面サイズ(横長)

自分のWebアプリを作るとき、一つのスクリプトが完成したら、複数の画面サイズ用に.htmlのバージョンを作って、いくつか公開するやりかたもあります。

★この実験で使用したスクリプトは、
 HSP3Dish.js ゲームサンプル『シンプルシューティング』
 のページに追加してあります


   HSPトップへもどる