更新 2022年8月22日 【目次トップ】へもどる
HSP製Webアプリ開発に関する いろいろなメモ
◆ iOS のSafariでは exec命令が使えないかも？
公式ドキュメント でも紹介されている機能ですが、実際のところ現在のiPhone, iPad のSafariブラウザでは、「ポップアップ」で他のページを開くことが標準で禁止設定になっているので、これを動作させるためには、ユーザー自身がiOS-Safariの「設定」から「ポップアップブロック」を「オフ」にしてもらう必要があるようです。（iOS15.6.1検証）
exec “https://hsp.tv”,16 ◆ 実験用： ブラウザ上で動作するページ
HSP公式掲示板で TOMATO さんが教えてくれました。ありがとうございました。
◆Webアプリでは、 ソーススクリプト.hsp と同じ場所に hsp3dish.ini を置いてから、 HSP3Dish helper の変換を実行することで、Webアプリ（.ｈｔｍｌ）の画面サイズを指定できる → 参考ドキュメント
・.html の ENV.HSP_WX を直接編集してもよい → 参考ドキュメント
・「#packopt xsize 」も使わない（←これはDishスクリプトでWindows用実行ファイル.exeを生成する時のオプション）
・Webアプリの場合は .html に変換するときに必要なだけなので、hsp3dish.ini をサーバへアップロードする必要は無い
うまくいかない場合：
hsp3dish.ini とは、自分自身で「新規作成」して用意するテキストファイルのことです。（ファイル名の拡張子は .txt でなく .ini にする。中身はおなじ）
「メモ帳」「テキストエディタ」で作れます。
「HSPスクリプトエディタ」でも作れます。が、「名前を付けて保存」するとき「ファイルの種類を All Files *.*」を選ぶことを忘れずに。
まちがえると、hsp3dish.ini.hsp のような間違ったファイル名になってしまいます。
まちがえた場合は ファイル名だけ修正すれば大丈夫です。
・hsp3dish.ini を保存するときの文字コードはANSI（S-JIS）でもUTF8でもどちらでも大丈夫ですが、
余計な文字やコメントが入っていると読み込みに失敗することがあるようです。
wx=480
wy=800
だけ書き込んだファイルでもうまくいかない場合（HSP3Dish helper変換時に指定した画面サイズが適用されない場合）は、
最初の一行目をすぐ改行しておくとうまくいく場合があります。（実際ありました。）
◆HSP3Dish helperで変換した時に生成される .data ファイルは必ずアップロードする必要がある
・現状、外部ファイルを使用していない場合も .dataファイルが生成されるようです。なので、自分のサーバスペースへWebアプリをアップロードする際は .dataファイルも必ず一緒にアップロードする必要があるようです。
※ 私がなにか勘違いしたのか（実際うごいていた気がした）、ベータバージョンで仕様変更があったのかわかりませんが、以前「外部ファイルを使わないスクリプトならば dataファイルをアップロードしなくてよい」という説明をこのサイトで書いてしまいましたが、現状3.7ベータ2時点ではそれは間違いです。
生成された dataファイル は必ず アップロードしましょう
WebDishサービス – SoupSeed の場合は、自作したスクリプトだけをフォームから送信します。
正式な3.7公式リリース版ではさらに仕様が変化している可能性もあります
そのほか確認中：
・外部モジュールの配置や使用可否、組み合わせ、本体.hspへの取り込み
・UTF と webアプリの関係（UTFでヒエログリフを表示するサンプルを公開したが、モジュールを使わなくても表示可能なのかもしれない？）
※まよったときは 公式ドキュメント
hsp3dish.js (WebGL/html5版)プログラミングガイド
これを読む！
（必ず最新バージョン ｖ3.7 の資料か確認！）
書いてある情報はときどき更新されます
↓ 以降は7月以前のふるいおぼえがき
◆HSP3Dish.js （Webアプリ）は、画像ファイルをじぶんで用意しなくても、画像がつかえます。スクリプト内に
buffer 1,128,128
celload “chr.png”,1
と書くだけで大丈夫。
picload も使えます。
・使用できる画像一覧 WebDish素材
（HSP公式のWebサーバ側に画像ファイルが常時存在している）
※HSP開発セットをインストールした自分のパソコンの中の
[HSP37フォルダ]-[HSPTVフォルダ] 内にも、
ほぼ同じモノが存在しています。
サウンドファイルもあります。
読み込み用に用意できる buffer は ＩＤ 1 以降。
画像の描画や表示に指定できるのは いま見えているスクリーン（ID 0）に対してのみ。
HSP3Dish.js では、見えない画面である buffer へは読み込みしか行えません。
（Windows向けHSPプログラムでは buffer 内での書き込みや画像加工なども可能）
◆ Dish.jsの 文字表示で行末の文字が欠ける問題（ベータ版）
公式掲示板で話題がでています。
とりあえず、
・行末によぶんな全角スペースをひとつ入れる
・一行づつ表示させる （mes 命令を別個にする）
でとりあえず対処できそうです。（正式リリース版では修正されてるかも。）
参考リンク：HSP公式掲示板スレッド
◆ 変換後の .htmlファイルは恐れずに編集しよう
HSP3Dish helper で 変換後にできた .html ファイルは、テキストエディタなどで自分で編集することができます。
・実行画面の下に表示される黒いメッセージボックスを非表示にしたい時
→ .html ファイルの中身から <textarea id=”output” というタグを検索して、その行をコメントアウト（無効化する。 <!– と –> でその行を囲む。うまくいかない場合はタグ自体削除しても大丈夫。）
ENV.HSP_WX = “480”; など、ENV. の部分も自分で編集して適切な画面サイズや解像度を設定できます。
→ 編集しなおした.htmlファイルは再度アップロードします
↑
★【こうだったらユーザーはうれしいかも】
変換時に HSP3Dish helper 上のメニューで設定できるとユーザーは楽かも
・textarea の表示/非表示
・ 画面サイズ・解像度は
「スマホ」「タブレット」「PC」と「ソーススクリプトで screen で設定したサイズ」を選択できる、など
↑
2022年7月時点のバージョン3.7beta の HSP3Dish helper には [ブラウザ実行時の背景の色]を設定できるオプション（プルダウンメニュー）がついています
◆ 【注目】WebDishサービス – SoupSeed が外部ファイルのアップロードに対応するかどうか
今年のHSPプログラムコンテストから .data ファイルの受付を開始するかどうか注目しています（★サーバの安全確保のために、過去に一回以上応募した経験者や住所登録した人に限定してもいいかも。使用するユーザーがまだ少なければ来年以降か？）
※むかしのバージョンのHSP公式ドキュメントをみると、ネットワーク連携で素材をつかえるようにする将来計画はあったようですが、要望や使用ユーザーが多くなかったのかな…。
◆ HSP3Dish Helper で変換して出来上がった .htmlファイル は、hSPで開発したプログラム内容（ script や emscripten タグの内側）以外を自由に編集したり追加してもかまわない
Webサイト、ホームページを作ったことがある人や、HTMLタグの知識がある人は、HSP3Dish.js が実行される .htmlファイルのページソース(タグ)を好きなように編集することが可能です。簡単な例では、Webアプリを実行させながら、その画面の下に操作説明などを書いておくこともできます。
hsp3dish.js で作ったWebアプリに広告を挿入して公開しているHSPユーザーの方もみかけたことがあります。そういう自由な活用のしかたもあります。
↑
さらに、独自のPHPやJavaScriptを混在させることも可能
◆ブラウザ起動時に画面右上にある設定スイッチが動作してるのか不明？ → 調査中
hsp3dish.js アプリをブラウザ起動したとき画面右上に表示される設定スイッチ「Resize canvas」「Lock/hide mouse pointer」「Fullscreen」が正しく動作しているのかよくわからない…？ ブラウザの種類やセキュリティ設定、モードも関係
↑ 特に意味はなく、デフォルト状態の設定らしい
→ （予想）3.7正式版リリース時に整理されると思う
◆セーブ保存するにはどうするのがよいのか？ → 調査中（回答追記あり）
・公式掲示板での情報（2017年11月のふるい情報）
「hsp3dish.jsでのファイル保存について」
・クライアント（端末）側に保存する場合は？
・サーバ側に保存する場合は？
（ hsptvプラグインのランキング機能を転用できるか？）
・「ドラクエ」のふっかつのじゅもん方式もつかえる
・ゲームを途中終了するときに、「つづきからはじめる」ためのランダムな文字列や単語と記号の組み合わせを生成してユーザーに知らせ、ユーザーはそれを自分でメモし、次にゲームをあそぶ開始時にそれを入力すると、以前の続きからゲームが遊べるという仕組みにしてもよい。 パスワード（wikipedia）
追記：そのユーザーにしか使えない復活のパスワードをつくるには、例えば、HSPから参照できる「ユーザー環境変数」「ユーザーのドキュメントフォルダ名」の文字列を参照して何文字か取り出し、用意してあるパスワードテーブルと組み合わせて生成する方法なども考えられる
HSP公式掲示板で HSP3Dish.js の作者 zakki さんが教えてくれました。
zakki さん ありがとうございました。 ◆公式HSP掲示板のスレッドURL（リンク）
> ・文字フォントが動作端末に依存する（実行する端末で文字の見た目がすこし変わる）
フォントのダウンロード時間を気にしなければhsp3dish.js起動前にWebFont先読みすれば対応はできそうです。
https://ics.media/entry/8385/
> ◆セーブ保存するにはどうするのがよいのか？ → 調査中
> ・公式掲示板での情報（2017年11月のふるい情報）
> 「hsp3dish.jsでのファイル保存について」
これは最新版でも使えるはずです
> ・クライアント（端末）側に保存する場合は？
保存だけならデータURLを作ってexecでブラウザのダウンロードダイアログを開けるはずです。
ただ原理的に読み込みが無理なのでゲームのセーブ用には向かないと思います。
https://developer.mozilla.org/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URLs
クッキーへの保存・読み込みならexecでのJavaScript実行とhsp側メモリ書き換えでasだけで実装はできそうですが無理矢理感はあります。
> ・サーバ側に保存する場合は？
> （ hsptvプラグインのランキング機能を転用できるか？）
hsp3dish.jsを置くのと同じサーバーにGETとPOSTを対応したサービスをhspなりcgiなりJavaなりで実装すればhttploadで実現できると思います。
> hsp3dish.js アプリをブラウザ起動したとき画面右上に表示される設定スイッチ
この辺はEmscriptenデフォルトを踏襲してますが、hspの用途的にヘッダー部分もコンソール部分も何もないメイン画面だけのテンプレートhtmlあると自分で編集する必要なくてよさそうですね。
◆hgimg4が複雑になっている現状
hgimg3が登場したときの .txtのマニュアルが非常にわかりやすくて、最初からひとつづつ読んでいくと習得できるステップ構成になっていた。
それにくらべると現在のhgimg4は全体の見通しが一目でわかりにくく、入門者にすすめにくくなっている。
なにか役に立つものを作りたいが、どこから手をつけてよいか思案中。
HSPの一番の魅力は「わかりやすさ」だと思うので、あまり入門のハードルが高くて学習コストが高くなると、「Unity」「JavaScript＋有名フレームワーク」よりも「HSP」をというふうには薦めにくくなる。
◆hgimg3が登場したころはHSPの規模に似合った非常にわかりやすく良質な3Dモデルが作れるアプリ 『 3DACE 』（フリーソフト）が存在しました。 いまでも入手可能
◆このサイトの今後
・ステップ構成のわかりやすい講座記事を書きたい（予定）
・もうすこし先まで遊べるサンプル（スクリプトの部分修正だけでゲームが完成するくらいの内容）を用意したほうが親切か…？
・重複した情報記載が増えてしまったので、正式版3.7公開時にページを整理する。
これまで理解不足やベータ版不具合を誤解して間違った情報を書いてしまったことが何度かあるので、正式版公開時にもういちど再点検する！