HSPTV!掲示板

HSP3Dish.js をローカルで動作させる為の環境を自動構築して、簡単にテストできるようにします。
・ローカル動作環境としてXAMPPポータブル版を自動でインストールします。(レジストリは書き換えません。)

■ 動作紹介動画 (解説なし、垂れ流し)
https://www.youtube.com/watch?v=jkADEpBRjSE

■ インストール後は HSP3Dish helper の実行補助を行います。
・HSP3Dish helper 起動とファイル名等の指定
・Apache(ローカルサーバ)の起動
・テスト用ディレクトリへのファイルコピー
・ローカル実行URLへのリンク表示
・QRコードを利用してスマホからローカル実行URLへ簡単アクセス

■ モジュール取得先
以下３つの内のどれかからダウンロードをお願いします。
・HSP3アップデータ： https://suwa.pupu.jp/HSP/package/u115_index.hspupd
・コンテスト2024：https://hsp.tv/contest2024/list_n3.html#2463
・HomePage： https://suwa.pupu.jp/HSP/index.html#ezlocalDishJs

■ 使い方

#include "hsp3dish.as"

#include "ezlocal-dish-js.hsp"
ezLocalJS

---
今まで HSP3Dish.js の説明にはローカルでの動作確認方法について言及が無かったため、特に初心者にとっては敷居が高かったのではないかと思います。
ezlocal-dish-js は #include すれば数クリックで環境インストールとブラウザでの動作確認が行えるのでそこそこ簡単便利なものが作れたのではないかと思ってます。

ただ私自身はHSP3Dish自体を今までほぼ触ってこなかったため、経験者の方に触ってみてもらってここが足りないとか、こういうのがあったら良いな みたいなものがあればお聞きしたいです。

その他の補足です。

■ 環境のアンインストールについて
ポータブル版XAMPPなのでレジストリを書き換えません。
「C:\xampp-portable」フォルダを削除すればアンインストール完了です。

■ 対象HSP3バージョン
・推奨：(β版も含む)最新バージョン
・動作可能：HSP3.51 〜
・HSP3.6, HSP3.7β1, HSP3.7β2：「ブラウザ上にデータ保存」機能が制限されます。

■ HSP3Dish.js サンプル稼働ページ
ezlocal-dish-jsを用いて同梱サンプルをjs化したものをアップロードしてます。
https://suwa.pupu.jp/HSP/ezlocal-dish-js/sample.html

■ インストール時間・・・
ZIPの展開にやっっっっっったら時間が掛かります。（私の環境では5分くらい）
ご了承ください。。。

XAMPPのダウンロードや展開に時間かかってて、PHPやJavaやMariaDBの機能を使っていないならnginxがいいかもしれません。
シンプルなウェブサーバーだけでzip展開とダウンロード2MB、展開後5MBくらいで済みます。

>zakki さん
コメントありがとうございます。

なるほど nginx。名前は見たことありましたがイマイチその存在を把握できていませんでした。
調べてみたらかなり良さそうに感じたのでインストール物を XAMPP から nginx に変更しました。

■ ezlocal-dish-js ver.2.0
・HSP3アップデータ： https://suwa.pupu.jp/HSP/package/u115_index.hspupd
・HomePage： https://suwa.pupu.jp/HSP/index.html#ezlocalDishJs
(コンテスト2024は更新待ち)

>PHPやJavaやMariaDBの機能を使っていないなら
スコアランキングとかと連携するとき用にPHPくらいは動いても良いのかなと思いましたが、nginx のシンプル・コンパクトさが魅力だったので乗り換えました。
なんなら php-fpm というものも合わせてインストールしようかとも悩みましたが、現状では nginx のみになってます。

改めまして zakki さん、
nginx を教えて頂き導入できたことで、ユーザーが ezlocal-dish-js を試してみることがより手軽になったと思います。
ありがとうございます！

--------------------
もし、既にver.1.1を試して頂いていた方はポータブル版XAMPPの「C:\XAMPP-portable」をフォルダごと削除してください。
ポータブル版なのでレジストリは書き換えられていません。フォルダを削除すればアンインストールは完了です。

流れぶった切って悪いのですが、Pythonのローカルサーバーとかのほうが速いような気もします。
HSPではなくDishとなると、他の言語や開発環境も多かれ少なかれ依存しているわけで、
PythonもHSPもC言語系列ベースなのでいいかなと。

python -m http.server 8000

>ABATBeliever さん
コメントありがとうございます。

基本的にはユーザーに負担をあまり掛けさせることなく HSP3Dish.js の体験ができることを目的としています。

サーバーの実行ファイルだけダウンロードさせて、他には何もインストールさせることなく、レジストリ等も変更されること無い、というのを目指したので今のところ nginx が良さそうだと判断してます。


ただ、調べてみると『Windows 10 May 2019 Updateではデフォルトで「python.exe」コマンドが導入される』なんて記事が出てきて何だってぇー！？
、、、と思いきや、pythonコマンドを実行すると「MicrosoftストアのPythonページが表示される」というものみたいでした。
https://atmarkit.itmedia.co.jp/ait/articles/1906/17/news023.html

Python の導入自体は簡単になってきていそうですね。

★ ver.2.1 にアップデートしました

やっぱり PHP も使えるようにしたい！ ということで PHP-FPM もダウンロードすることにしました。

・PHP-FPM(PHP実行環境)のインストール
・phpを介してサーバへのテキスト保存/読込とSQLite編集を行う簡易サンプルezphp.phpを同梱
・ゲーム画面が横長のときスマホ横持ちで全画面Fit（β機能）

■ ezlocal-dish-js ver.2.1
・HSP3アップデータ： https://suwa.pupu.jp/HSP/package/u115_index.hspupd
・コンテスト2024：https://hsp.tv/contest2024/list_n3.html#2463
・HomePage： https://suwa.pupu.jp/HSP/index.html#ezlocalDishJs


> ezphp.php (mod_ezphp.hsp)
新規命令： ezphpsave, ezphpload, ezphpsql(ezphpsql_json)

サーバへのテキストファイル保存/読み込み、SQLiteデータベースの簡易的な操作が行えます。
これによりランキングの作成などが比較的簡単に出来るようになりました。

◆ サンプルページ
https://suwa.pupu.jp/HSP/ezlocal-dish-js/sample3_ezphp-sql.html

これらの新規命令は httpload を使って ezphp.php を通して動作しています。
(htmlファイルをアップロードするとき一緒にphpファイルもアップロードする必要があります。)

SQLite は大抵の(主要な)レンタルサーバなら最安プランでも使えるみたいです。
スコアとユーザーネームを追加していくだけ、順位はSQLite側でスコア順にソート、あとは取得したデータを並べてしまえばランキング表示の完成、みたいなことができます。

ただ、phpやsqlは自分が必要な分だけしか触ってこなかったためezphp周りはツッコミどころありなコードになっているかもしれません。。。
何かあればコメントください_(._.)_


> スマホ横持ち全画面（β機能）
やっぱゲームと言えば横長サイズだし、スマホなら画面いっぱいに表示したい。ということで挑戦してみました。
「ページを結構下の方までスクロールしていると、横画面にしたときURLバーなどの表示されない全画面表示になる」という特性を利用しています。

かなり無理くり実現しているところがあるので環境によっては上手くいかないかも。
あと問題点もちらほら。。。
・iPhone(safari)は上部をタッチするとURLバーが被さってしまう
・Android(iPnone-safari以外)はページ表示後必ず少しスクロールしてもらう必要がある
・横画面からスタートされると問題がある
・なんだか拡大されて解像度が低いような気がする

◆ サンプルページ （スマホで開いてみてください）
https://suwa.pupu.jp/HSP/ezlocal-dish-js/sample4_yoko.html

(ENV.HSP_SX, ENV.HSP_SY [表示解像度]を途中で変更することって出来ますか・・・？)

> (ENV.HSP_SX, ENV.HSP_SY [表示解像度]を途中で変更することって出来ますか・・・？)

今のところ対応してません。

実際試してはいませんが無理矢理やるとHSP側はで

exec "sessionStorage.setItem('MY_HSP_SX', '1000');"
exec "location.reload();"

のようにsessionStorageに保存しといてページのリロードかけて、

Module.preRun.push(function() {
    ENV.HSP_SX = sessionStorage.getItem('MY_HSP_SX') || "480";
});

JS側で値を読んで設定するみたいなのは出来なくはないと思います。`
最初からJS側で解像度とってpreRunで設定する処理書く方が簡単かも……

情報ありがとうございます！
すみません。嘆くだけ嘆いて用途を書いてなかったですね。

スマホ横持ち全画面の件で、ゲームのプレイ中にスマホが回転やリサイズされたときに もっと上手くフィットさせたい、解像度を粗くしたくない(調整したい) と思っての呟きでした。

さっそくテストとして、分かりやすく１秒後に極端に小さくなるよう下記をhtmlの387行目(ENV.HSP_LIMIT_STEP = "15000")下に追加してみました。

setTimeout(function() {
	Module.preRun.push(function () {
		ENV.HSP_SX = "100";
		ENV.HSP_SY = "100";
	});
	Module.print('#Error - MES: 1sec later');  // ちゃんと実行されたかスマホで確認用
	window.scrollTo({top: document.body.scrollHeight, behavior: 'smooth'}); //最下部スクロール
}, 1000); // 1秒後

しかし、ゲームの画面サイズに変化はありませんでした。

もしかしたらと思い『Module['preRun'].push』『Module.postRun.push』『Module['postRun'].push』も試してみましたが同様に変化はありませんでした。

何か勘違いして受け取ってしまってるでしょうか。もしかして"ゲームプレイ中"には表示解像度変更はできないでしょうか。

Module.preRun.push は初期化時にコールバックされる処理を登録する処理で、起動後にいじっても効果ありません。

起動後に変えられないなら再起動すればやれて、
(リサイズや回転など)→データ保存→ページ再読み込み→アプリ再実行→再開
の流れならなんとかって力技についての話でした。

F5リロードみたいにページ再読み込みを挟むので、ページリロードで消えるJSやHSPの普通の変数じゃなくて、sessionStorageやlocalStorageやURLパラメータなどが必要です。

>Module.preRun.push は初期化時にコールバックされる処理を登録する処理で、起動後にいじっても効果ありません。

なるほど、わかりました。
早とちりしてしまいました（＾＾； すみません。

今回はとりあえず現状のままで行こうと思います。
zakkiさんから情報を頂けて大変感謝してます。ありがとうございます。

★ ver.2.2 にアップデートしました

・ゲームパッドを使用できるようにするモジュールを同梱 (Gamepad API利用)

■ ezlocal-dish-js ver.2.2
・HSP3アップデータ： https://suwa.pupu.jp/HSP/package/u115_index.hspupd
・HomePage： https://suwa.pupu.jp/HSP/index.html#ezlocalDishJs

■ Gamepad API について
https://developer.mozilla.org/ja/docs/Web/API/Gamepad_API

◆ サンプルページ (ゲームパッドをご用意ください。Joy-Con、Proコン 等)
https://suwa.pupu.jp/HSP/ezlocal-dish-js/sample5_gamepad.html

あらかじめコントローラを機器に接続しておいてください。
Bluetoothじゃなくても有線接続でもOKみたいです。

# 法貴優雅さんのサンプルスクリプトを使用させて頂いてます。ありがとうございます！
# https://hsp.tv/play/pforum.php?mode=pastwch&num=81890#81895

◆ 動作中の動画 X(旧Twitter)
https://x.com/millline/status/1837776964977152224