解説 Webアプリの公開方法

全体のながれ

※2025年3月4日 時点 HSP3.7β10(ベータ10)までの仕様
自分でサーバへアップロードする場合

HSP3Dish でプログラムを完成させる

素材データをまとめる

使用している画像ファイルやサウンドファイルを[ data ]フォルダを作ってそのなかに入れてまとめておく

HSP3Dish Helper を起動( Windows用 )

HSP3Dish Helper を起動( Windows用 )
  完成したプログラムスクリプト 「 ◯◯.hsp 」を JavaScript に変換。
  同時に [ data ]フォルダ内にまとめておいたものが一つの「 ◯◯.data ファイル」に変換される

サーバへアップロードする

完了後、生成された「 hsp3dish.js 」「 ◯◯.html 」「 ◯◯.data 」をサーバへアップロードする

ブラウザから表示すればWebアプリが起動

アップロードした場所の URL の ◯◯.html をブラウザから表示すればWebアプリが起動します


⭐️ 3.7正式版までに仕様が変わる可能性があります。
 この解説ページは現在作成途中ですが今後も更新していきます



・アップロードに必要なのは 3個(または2個)のファイルだけです。
 大量のファイルをアップロードする必要はありません。
 フォルダ を アップロードする必要はありません

補足説明

ファイル名について:

ファイル名の「 mysakuhin 」
の部分は、HSPスクリプトエディタで HSPプログラミングを開始したときスクリプト保存時につけた名称です

 ◯◯◯◯.hsp

 HSP3Dish helper で変換するとき「ソーススクリプト」指定ボックスで選択したファイル名

 それをもとにして生成されるファイル
 ◯◯◯◯.html

 じぶんで素材ファイルを一つのフォルダ内に集めておくと出来上がるファイル
 ◯◯◯◯.data

複数のアプリをアップロードするときは:

ちがう種類の複数の作品(Webアプリ)をおなじ場所にアップロードしたい場合は
サーバ側に自分のすきな名称のフォルダを新規作成して、
それぞれのWebアプリをそのなかにアップロードしてもかまいません。

[ app1 ] [ app2 ]  [ app3 ] というフォルダをサーバ側に新規作成してそのなかへ
自分のアプリをそれぞれアップロードする



https://junji.jp/userspace/app1/mysakuhin.html

https://junji.jp/userspace/app2/mygame.html

https://junji.jp/userspace/app3/mytool.html

しかし通常は、サーバ側にフォルダを新規作成する必要はありません。
よくわからなければ、
ファイルを3つ(もしくは2つ)だけアップロードすればよいのだな、とおぼえてください


⭐️ 混乱しないようによく注意しよう!

hsp3dish.js

hsp3dish-gp.js
は、複数のアプリから兼用・共用ができます。が、

ただし、開発したときのバージョンが
hsp3dish.js と mysakuhin.html で
異なるとエラーが出て動作しなくなる場合があります。

HSP3.7ベータ9付属の HSP3Dish helper で作った hsp3dish.js
HSP3.7ベータ10付属の HSP3Dish helper で作った mysakuhin.html
をサーバ上のおなじ場所に置いても、うまく動作しないでエラーがでる可能性があります。

また、表面上は おなじ HSP3.7ベータ10 に見えても、
付属の HSP3Dish helper だけバージョンアップされていることもあります。

つまり混乱しないためには、
さいしょから、前述の説明のように
「アップロードする先のサーバ内で、アプリごとにフォルダをつくって分ける
「アプリそれぞれに hsp3dish.js もつけて一緒にアップロードする」
のが安全でわかりやすい方法だと思います。

サーバの容量上限などの問題が起きたら、そのときになってから
hsp3dish.js の兼用・共用」を検討してみたらよいと思います。


この説明は HGIMG4 をつかって 3Dのプログラムスクリプトを作った場合のアップロード方法です



⭐️ 重要 公式ドキュメント リンク

  hsp3dish.js (WebGL/html5版)プログラミングガイド


実験用Webアプリ:

⭐️ 実際に動作するWebアプリ サンプル(HGIMG4使用)
 !音がでます! 音量注意!

 キーボード矢印キー ← → ↓ で、SE10 SE11 SE12 の wavファイルが mmplay実行されます。
キーボード矢印キー ↑ で、MUS01 の mp3ファイルが mmplay実行されます
 mp3再生中に wavファイル再生できているのが確認できます。

・サウンドファイルは実験目的で https://hsp.tv/game/tamahouki_inst.html
からお借りしました。ありがとうございました。


付記:

・解説をわかりやすくするためにここでは 
 WebAssembly形式「.wasm」ファイル
 の話は省略しています。プログラミング開発初心者はこの言葉は無視してかまいません。


追記予定:
のちほど
・ 変換ツールHSP3Dish helper の解説
・ .dataファイルの作り方 の解説
・開発中のファイル指定はどうするか?
についても図解説明を追加する予定です


 
 
ベータ版の開発進展にご協力をおねがいします。
開発者はフィードバック(感想、意見、動作検証の連絡)をお待ちしています

⭐️ この記事は 2025年3月1日現在、
HSP3.7β10(ベータ10)および
付属の変換ツール HSP3Dish helper を用いて動作確認しながら解説を行なっています。

ベータ版とは「開発途上」の意味です。
今後正式版公開までのあいだに仕様、使い方が変更される可能性があります。
(その場合はのちほど記事を修正する予定です)

HSP3Dish や Webアプリ作成、
変換ツールなどをためしてみて、感想や要望がある場合は気軽に遠慮なく、HSP3掲示板に 感想、意見、要望を書き込んでみてください

 → 公式掲示板リンク

解説 Webアプリの公開方法