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

2024/12/29

目次

はじめに HSP3Dish.jsを始める これからやりたい事の計画 HSP3Dish.jsを使った例 ブラウザでの動作確認 出力されたhtmlのデバッグ 準備が出来たら次へ

はじめに

　HSP3Dishのhtml5版が面白そうなのでいろいろと試してみたいと思います。 まずはフルスクリーン化です。解像度がどういう扱いになっているかの理解を深めつつ進めてみます。

　最初となる今回は、準備作業です。スクリプトの準備、html5化、デバッグ作業を行います。

　…と、その前に。今回の記事を書くにあたって、勝手ながらこちらのツールの出力を一部参考にさせていただきました。大変参考になりました。感謝です。
ezlocal-dish-js モジュール（作者・MIZUSHIKIさん）
https://dev.onionsoft.net/seed/info.ax?id=2463

HSP3Dish.jsを始める

　HSP3Dish.js（HSP3Dishのhtml5版）を使うと、ブラウザで動作するプログラムを手軽に作成することができます。unityroomとかFlashゲームみたいなことがHSP3でも出来るわけです。便利な世の中になったものです。

　ブラウザで遊べると、いくつかとてもいい事があります。

　ブラウザで動くということは、ダウンロード作業もインストール作業もいらないということです。ゲーム紹介ページから１クリックでページ移動するだけですぐに遊べるわけです。ユーザーに余計な手間をかけさせずにゲームを遊ばせることができます。つまり、遊んでもらえる可能性が上がるというわけです。

　ブラウザで動くということは、WindowsでもMacでもスマホでも動くということです。 1つのリリースで、OSに依存しないクロスプラットフォームなアプリが公開できるというわけです。OS毎にコンパイルしたり動作確認したりが不要になりますね。 パソコンユーザーよりもスマホユーザーの方が多いので、より遊んでもらえる可能性が上がります。これもいい点ですね。

　ブラウザで動くということは、PWA化が可能だという事です。PWA（Progressive Web Apps）とは、Webサイトをアプリのように利用できるようにする仕組みの事です。Webアプリのページをスマホにインストールして、オフライン環境でも遊べるようにできます。Webアプリの更新をプッシュ通知することもできるようです。 ブラウザ経由で配布できるアプリのようなものなので、Google PlayやApp Storeなどのアプリストアを利用する必要がありません。登録や審査が不要なので気軽に配布できるのメリットです。

　と言っても、HSP3Dish.jsにはPWA化の機能はありません。今はまだ、自分の手作業で頑張ればできなくはないとう感じです。

　ブラウザ動作なので制約はありますが、それでも多くのメリットがある機能です。自分のサイト（https）を持っていれば、作り方は簡単です。マニュアル見ながらやってみてください。

HSP3Dish プログラミングマニュアル
https://www.onionsoft.net/hsp/v37/doclib/hsp3dish_prog.htm

hsp3dish.js (WebGL/html5版) プログラミングガイド
https://www.onionsoft.net/hsp/v37/doclib/hsp3dish_js.htm

これからやりたい事の計画

　いい事沢山のブラウザ版ですが、HSP3.7β9現在もの足りない部分がいくつかあります。いずれ修正されるとは思いますが、いつになるか分からないので自力で解決していきたいと思います。というかおおむね自力解決してしまったので、忘れないように記事化していきたいと思います。

  • HSP3Dish.jsを使ってみる
  • htmlのデバッグ
  • 解像度が異なる環境への対応
  • フルスクリーン化
  • PWA化

HSP3Dish.jsを使ってみる
　まずは基本的な使い方がわかってないと困るので、マニュアルにしたがって作っていきます。

htmlのデバッグ
　出力されるHTMLに文法違反や動作不良がいくつかあるので、これを修正します。ブラウザでの動作結果にはほとんど影響しませんが気になるので。

解像度が異なる環境への対応
　スマホの場合、機種によって解像度が異なります。最近のスマホは高解像度化がどんどん進んでいるようですね。スマホでも4Kの物があるらしいです。環境ごとに異なる解像度に対してどう対応していくといいかを考えてみます。

フルスクリーン化
　ボタンは付いているのですが、なぜか無効化されています。フルスクリーン機能を自力実装してみます。せっかくなのでボタンのデザインも変更したいですね。

PWA化
　スマホにインストールできるwebアプリを作成してみます。注意点が沢山あるようです。

　最後を書ききるまで体力が持てばいいですが…。

HSP3Dish.jsを使った例

　まずは説明に使用するためのサンプルを用意します。 HSP3のスクリプトは出来るだけシンプルにしてhtml5に変換したものを使います。

　HSP3のスクリプトはこんな感じ。現在のウィンドウサイズとクリックまたはタップした座標を取得して表示します。マルチタッチ対応です。背景が白だと描画領域の境界がわかりにくいのでちょっとだけ色を付けています。

mobile01.hsp


; スマホ向けHSP3Dishのサンプル
; 次の内容を出力します。
; ・ウィンドウサイズ
; ・現在タッチされている座標
#include "hsp3dish.as"

*main
	redraw 1 : await 16 : redraw 0 : color 255, 230, 230 : boxf : color : pos 0,0
	
	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

　html化のための設定ファイルも準備します。無くても大丈夫なんですが、ここでは次のようなものを用意しました。解像度とスケーリングモードを設定しています。mobile01.hspファイルと同じフォルダにおいてください。

hsp3dish.ini


; hsp3dish settings
wx=300
wy=400
autoscale=1

　ファイルの準備が出来たら、ヘルパーを使ってhtml5に変換します。スクリプトはいつものように実行ファイルを作成するのではなく変換という手順になります。

メニューバーから ツール　＞　HSP3Dish / Cソース変換 をクリックする。
HSP3Dish helperが起動します。

HSP3Dish helperの一番下のボタンは、hsp3dish.jsが選択されていることを確認します。

[参照]ボタンを押してmobile01.hspファイルを選択。

[変換]ボタンを押してしばらく待って「終了しました。」とメッセージが出れば変換は完了です。

次のファイルが出力されます。

  • mobile01.data　…　作成したアプリ本体
  • mobile01.html　…　mobile01.data専用に作成される。アプリを表示して動かすためのhtmlファイル。
  • hsp3dish.js　…　htmlで使用される共通部品。

　作成された3つのファイルをサーバーにアップロードすれば作業は完了です。
なお、ローカル環境でmobile01.htmlファイルをブラウザで開いてもアプリは起動しません。

ブラウザでの動作確認

　これだけでブラウザで動作するアプリが出来上がりです。簡単ですね。

　mobile01.htmlにアクセスするだけでアプリが起動します。
作例：./dish/mobile01.html

　１つ注意があるとすれば、アプリを更新した際にブラウザにキャッシュが残ってしまって再読み込みしただけではバージョンアップが確認できないことがある点です。 こういう場合は、ブラウザからキャッシュを消す必要合があります。Chromeの場合は、「キャッシュの消去とハード再読み込み」を使うと便利なのでお勧めです。

Chromeには3種類の「再読み込み」があるって知ってた？ Webページ上の画像などを最新の状態にするテク - 窓の杜
https://forest.watch.impress.co.jp/docs/serial/chrometips/1152903.html

　PCブラウザだけではなく、スマホでの動作結果の確認方法も覚えておきましょう。スマホはさまざまな画面サイズがあるので、全てを実機でそろえるなんて到底無理です。PCブラウザはスマホ画面をエミュレートできるので、この機能を使います。

PC版Chromeブラウザでスマホサイトをチェックする - @IT
https://atmarkit.itmedia.co.jp/ait/articles/1403/20/news050.html

出力されたhtmlのデバッグ

　デバッグとは書いたものの、症状が出ないのでバグというほどのものではありません。HSP3.7β9（HSP3Dish helper ver1.98）が出力するhtml5は、文法違反や適切ではない処理がいくつか含まれています。症状がないとはいえ気持ち悪いので、まずはこのあたりの修正を済ませてから、機能追加をやっていきたいと思います。

　修正済みのソースコードを全部載せると長いので、ソースはリンク先から見てください。
./dish/mobile01dbg.html

　修正箇所を一つずつ見ていきます。 

変更前
  <html lang="en-us">

変更後
  <html lang="ja">

　出力されたhtmlは、ごく普通のhtmlファイルなのでゲームの説明文などを追記することができます。おそらく日本語が追記されることがほとんどだと思います。ですので言語の設定を日本語にします。 

削除箇所
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

　<meta charset="utf-8"> があるので、文字コードが二重に指定されています。html5では使われない古い書き方でもあるので、この行はまるごと削除です。 

変更前
	body {
	・・・
	padding: none;
	}

変更後
	body {
	・・・
	padding: 0;
	}

　スタイルシートの文法違反です。noneはpaddingの引数ではありません。 

変更前
     #output {
        width: 100%;
        …
      }

変更後
      #output {
        width: 90%;
        …
      }

　デバッグログの表示幅が少し大きいようです。横方向スクロールバーが出てしまうと困るので少し小さくしておきます。あまりいい修正方法ではありませんがとりあえずはこれでよしとします。 

変更前
  <progress value="0" max="100" id="progress" hidden=1></progress>

変更後
  <progress value="0" max="100" id="progress" hidden></progress>

　progress要素のhidden属性に無効な値 1 が設定されています。hidden属性を display: none として使用する場合の使い方は、次のいずれかです。 


  <progress ... hidden>...
  <progress ... hidden="hidden">...
  <progress ... hidden="">...

変更前
  <p><font size="2" color="#404040">powered by …</font></p>

変更後
  <p style="font-size: small; color: rgb(64, 64, 64);">powered by …</p>

　fontタグは廃止されました。文字色を返る場合は、スタイルを使用します。 

変更前
  <script type='text/javascript'>
  …
  <script async type="text/javascript" src="hsp3dish.js"></script>

変更後
  <script>
  …
  <script async src="hsp3dish.js"></script>

　script要素でJavaScriptを指定する場合、「type」属性は不要らしいです。 

削除箇所
	#controls {
	  display: inline-block;
	  float: right;
	  vertical-align: top;
	  margin-top: 30px;
	  margin-right: 20px;
	}
	…
	<span id='controls'>
	  ～
	</span>

　この要素は現在機能していないようです。将来的に復活する可能性もありますが、今は動いてないのでスタイルシートごと削除しておきます。 

変更前
  if (!text) spinnerElement.style.display = 'none';

変更後
  if (!text) spinnerElement.style.display = 'none';
  if (!text) statusElement.style.display  = 'none';

　左上に表示されるアイコンは、アプリをダウンロード後に非表示になるのですが、一部が残ってしまうようです。完全に非表示にするために１行追加します。

準備が出来たら次へ

　これで準備完了です。修正したhtmlファイルの名前を変えて保存し、サーバーにアップロードしてください。アクセスしてみると一目瞭然…ほぼ何も変わりません！ロード後に上部の空白が消えた程度の違いはありますがそれだけです。HTMLの構文チェックをかけた時に警告が減っていますがそれだけです。

　準備ができたので次に行きましょう。

関連記事

  1. HSP3Dish.jsでフルスクリーン化（2）　はじめに 標準機能で解像度を調整 実行環境によって解像度を変える ビューポートを設定 スマホ判定 環...
  2. HSP3Dish.jsでフルスクリーン化（3）　解像度を固定して拡大表示 サンプル HSP3Dishの描画先要素 コンテナサイズを調整 HSP3Di...
  3. HSP3Dish.jsでフルスクリーン化（4）　解像度を固定したまま表示 作成例 ビューポート解像度を使う 画面解像度のシェア スクリプト html...
  4. HSP3Dish.jsでフルスクリーン化（5）　フルスクリーン化 サンプル フルスクリーンに切り替えるボタン 後の処理の準備 解像度の設定 フルスク...