HSPポータル
サイトマップ お問い合わせ


HSPTV!掲示板


未解決 解決 停止 削除要請

2024
0821
MIZUSHIKIezlocal-dish-jsモジュール 作りました【HSP3Dish.js 簡単ローカル実行】11解決


MIZUSHIKI

リンク

2024/8/21(Wed) 00:10:57|NO.102058

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

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

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

■ モジュール取得先
以下3つの内のどれかからダウンロードをお願いします。
・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自体を今までほぼ触ってこなかったため、経験者の方に触ってみてもらってここが足りないとか、こういうのがあったら良いな みたいなものがあればお聞きしたいです。



この記事に返信する


MIZUSHIKI

リンク

2024/8/21(Wed) 00:11:55|NO.102059

その他の補足です。

■ 環境のアンインストールについて
ポータブル版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分くらい)
ご了承ください。。。



zakki

リンク

2024/8/22(Thu) 08:51:38|NO.102060

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



MIZUSHIKI

リンク

2024/8/23(Fri) 01:12:49|NO.102062

>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」をフォルダごと削除してください。
ポータブル版なのでレジストリは書き換えられていません。フォルダを削除すればアンインストールは完了です。



ABATBeliever

リンク

2024/8/25(Sun) 10:38:09|NO.102075

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

python -m http.server 8000



MIZUSHIKI

リンク

2024/8/25(Sun) 23:29:17|NO.102080

>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 の導入自体は簡単になってきていそうですね。



MIZUSHIKI

リンク

2024/9/11(Wed) 20:43:22|NO.102201

★ 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 [表示解像度]を途中で変更することって出来ますか・・・?)



zakki

リンク

2024/9/12(Thu) 11:53:42|NO.102202

> (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で設定する処理書く方が簡単かも……



MIZUSHIKI

リンク

2024/9/12(Thu) 19:46:29|NO.102203

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

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

さっそくテストとして、分かりやすく1秒後に極端に小さくなるよう下記を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』も試してみましたが同様に変化はありませんでした。

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



zakki

リンク

2024/9/12(Thu) 23:33:59|NO.102207

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

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

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



MIZUSHIKI

リンク

2024/9/13(Fri) 01:30:59|NO.102208

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

なるほど、わかりました。
早とちりしてしまいました(^^; すみません。

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



MIZUSHIKI

リンク

2024/9/22(Sun) 18:01:24|NO.102259

★ 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



記事削除

記事NO.パスワード
(質問が解決したスレッドは他の利用者に活用してもらうため、削除しないようお願いします)

NO.102058への返信

マスコット

好きなマスコットを選んでください。

名前

e-mail
HOME
  1. 初めて利用する方は、HSP3掲示板の使い方をお読みください。
  2. 不要部分の多い長いスクリプトの投稿は ご遠慮ください。
  3. 書き込みは自動改行されません。適度に改行を入れてください。
  4. スクリプトは小文字の<pre>〜</pre>で囲むと見やすく表示できます。

削除用パスワード

エラー発生時、再送信すると二重送信になることがあります。
回答が得られたら、お礼書き込み時に[解決]チェックしてください。
SPAM防止のためURLから始まる文章は投稿できません。
SPAM防止のため英文字のみの本文を投稿することはできません。

ONION software Copyright 1997-2023(c) All rights reserved.