topページ

### はじめに

Javardry HTML5版 は、Java製のJavardryをHTML5（HTML5 + CSS + JavaScript）に移植したものです。JavaScript製なので、Jsardry2とでもすべきなのかもしれませんが、まあJavardryの移植なのでJavardry HTML5版としておきます。JavardryEditorでHTML5版用のゲームデータを書き出して利用します。Java版とほぼ同様の仕様ですが、多少の違いはあるため、以下で解説します。

#### 動作環境・実行方法

実行用のHTMLファイルをブラウザで読み込んで実行します。ローカル（オフライン）でもオンライン（ネット上にアップしたもの）でも動作しますが、ローカル動作時にはダンジョンの画像表示が行えないという制限を設けてあります（理由はこちら）。そのため、プレイ時にはオンライン動作（ローカルサーバでの動作を含む）をお薦めします。

- PC（Windows、Mac OS X、Linux等）の場合
  - WindowsのGoogle Chrome、Microsoft Edge、Firefoxで動作確認済み。Internet Explorerでは動作しません。
  - Linux（Ubuntu 16.04、22.04）のFirefoxで動作確認済み。
  - Macは未確認。Mac使いの方の動作報告待ち。
  ローカル環境で動作制限なしで動かす方法はこちらです。
- Android（スマホ、タブレット）の場合
  Android10のChromeにて、オンライン動作を確認済み。ただし、メモリの少ない機種（2GB程度）の場合にはメモリ使いすぎのエラーが出る事があるようです。
- iOS（iPhone、iPad）の場合
  iPad Air4、iPhone11のChrome, Safariにて、オンライン動作を確認済み。ただし、音楽・効果音の再生に関して、以下の二つの問題があります。
  - 最初に一度再生しておかないと、ゲーム中に再生出来ない（っぽい）ので、起動時のタイトル画面直前、もしくはオプションにて音楽・効果音を有効にしてオプション画面を閉じる際に、全音楽・効果音をミュートにして一度再生させているため、フリーズしたかと思うほど待たされる。
  - 再生が大幅に遅れる、もしくは鳴らない場合がある（特に効果音）

#### PCのローカル環境で動作制限なしで動かす方法

ローカル環境（ゲーム関係のデータをPC内に置いた状態）での実行時には、JavaScriptの仕様（クロスドメイン制約）により、読み込んだ画像ファイルに対して一部の画像処理が行えません。そのため、ローカル環境での実行で、かつ、実際に画像ファイルを読み込んでの一部の画像処理が行えない場合（内部的に実行して失敗した場合）には、「ダンジョンの画像表示不可」の制限を設けて動作させています。
ただし、以下の二つの方法により、ローカル環境での動作であっても制限無しで動かすことが可能です。

- ローカルサーバ（ローカルWebサーバ、簡易Webサーバ）を立てる
  ローカルサーバを立てて実行すれば、ネット上にアップしたものを実行するのと同じ扱いで、オンライン動作になります。恐らくはこれが一番真っ当な方法です。簡単にローカルサーバを立てられるフリーソフトはいくつかありますが、Served（Windows, Mac OS X, Linux対応）というソフトを使えば、何の知識がなくとも簡単にローカルサーバを立てることが出来ます。
  一応、ごく簡潔にServedの使い方を書いておきます。

  Served を実行すると上の画像のようなウィンドウが表示されますので、そこに Javardry HTML5版のデータを入れたディレクトリ（フォルダ）をドラッグ＆ドロップするか、ディレクトリ直下のファイルをドラッグ＆ドロップ、もしくは Select file から選択します。例えば、ゲーム実行用のHTMLファイル（Javardry.html等）をドラッグ＆ドロップします。

  すると、http://localhost:～ などとURLが表示されますので、URL部分をクリックするとデフォルトに設定されたブラウザでそのURLを開きます。別のブラウザで開いても構いません。

  ブラウザでファイルとディレクトリのリストが表示されます。実行用のHTMLファイル（ここではJavardry.html）をクリックすると、ゲームが開始します。

  ローカルサーバ上で実行出来ていれば、Option 画面でダンジョンの画像表示（[Dungeon] -> graphic）が選択出来るようになっているはずです。
  プレイ中は Served も起動したままにして下さい。Served のURLの横にある×をクリックして設定を消さなければ、次回起動時にも設定は引き継がれます。
- ブラウザの設定を変更する
  ブラウザにクロスドメイン制約を回避する設定をすることで、ローカルでの実行でありながら、動作制限なしで動かすことが可能です。ただし、推奨はしません。何か問題が起きたとしても自己責任でお願いします。
  以下、ブラウザごとに実際に動作を確認した方法です。すべてWindows 64bit版です。
  - Google Chrome
    バージョン101.0.4951.67で確認。起動オプションの設定で回避出来ます。

    chrome.exe のショートカットを作成し、右クリックでプロパティを開き、「リンク先」に「--allow-file-access-from-files --allow-file-access --allow-cross-origin-auth-prompt --disable-web-security --user-data-dir="C:\Users\(ユーザー名)\AppData\Local\Google\Chrome\User Data"」とオプションを付けて、ショートカットから起動すればよいようです。(ユーザー名)の部分は適宜自分の環境に合わせて書き換えて下さい。
  - Microsoft Edge
    バージョン101.0.1210.53で確認。Chromeと同様に、起動オプションの設定で回避出来ます。
    msedge.exe のショートカットを作成し、右クリックでプロパティを開き、「リンク先」に「--allow-file-access-from-files --allow-file-access --allow-cross-origin-auth-prompt --disable-web-security --user-data-dir="C:\Users\(ユーザー名)\AppData\Local\Microsoft\Edge\User Data"」とオプションを付けて、ショートカットから起動すればよいようです。(ユーザー名)の部分は適宜自分の環境に合わせて書き換えて下さい。
  - Firefox
    バージョン100.0.1で確認。about:config で設定を変更する（security.fileuri.strict_Origin_policy を false にする）ことで回避出来ます。
    about:config の画面は、バージョンにより若干見た目や操作が異なる場合がありますが、基本的には同じです。

    Firefoxのロケーションバー（アドレスバー）に about:config と入力し、Enterを押します。

    警告が表示されます。「危険性を承知の上で使用する」をクリックします。

    about:config の画面が表示されます。検索窓に security.fileuri.strict_Origin_policy と入力します。

    設定項目「security.fileuri.strict_Origin_policy」が表示されます。デフォルト値は真偽値のtrueです。

    右端の切り替えボタンをクリックし、設定値をfalseに変更します。
    値を変更したら about:config の画面は閉じて構いません。Firefoxの再起動をする必要もなく、そのままJavardry HTML5版を読み込めば、動作制限はなくなっているはずです。

#### コンソール

HTML5版でもJava版と同様に、コンソールにてデバグコマンドの結果やエラー表示を確認出来ます。コンソール画面は、ブラウザにより表記は異なりますが、開発者ツール内で見ることが出来ます。開発者ツールは、ブラウザやそのバージョンによって違いはありますが、大体下記の場所にあります。

- Google Chrome
  [Google Choromeの設定] → [その他のツール] → [デベロッパーツール]
- Microsoft Edge
  [設定など] → [その他のツール] → [開発者ツール]
- Firefox
  [ツール] → [ブラウザーツール] → [ウェブ開発ツール]

開発者ツールを選択すると、こんな感じの画面が表示されます。これはChromeの画面ですが、他のブラウザでも大体似たような表示です。開発者ツールの初回起動時には大抵コンソール以外のネットワーク等のタブが選択されているようです。

コンソールを選択してやれば、コンソール画面が表示されます。デバグコマンドの結果やエラー等はここに表示されます。

主にChrome/Edgeでの動作時ですが、実行環境等により、動作に影響しない（もしくはローカル制限等で表示されてしまう）エラーや警告が出ることがあります。動作がおかしい、フリーズする等の明らかな異常がない限りは、その手のエラー・警告は無視して下さい。下記二つはその一例です。

また、Chrome/Edgeでの動作時には、画像や音声ファイルが読み込めなかった旨の表記が大量にされるようです。

こんな感じに、404 (Not Found) という表示がズラーっと続きます。音声ファイル等はまた若干異なる表示だったりもしますが、いずれもファイルが読み込めないという警告の表示です。これらも動作には影響しないので無視してもらってよいのですが、あまりに多いためにわずらわしいと感じる場合には下記の方法で非表示にして下さい。

まず、右端にある設定ボタン（歯車マーク）から設定画面を開きます。

「選択したコンテンツのみ」にチェックを入れます。

すると、404 (Not Found) 関係の表記が消えます。すべての余計な表記が消えるというわけではありませんが、Chrome/Edgeを使用している場合には、これで大分見やすくなると思います。

#### 操作方法

操作はキーボードかゲームパッドで行います。Java版の操作方法とほぼ同様ですが、キー・ボタンの初期設定は config.js にて行います。また、ゲーム中に Option の Key Config にてキー・ボタンの設定を変更出来ます。キー・ボタンの識別名は Option の Keyname で確認して下さい。
JoyToKey等を利用してゲームパッド操作を行う場合には、オプションで GamePad を off にして下さい。
下記の実行用HTMLファイルの設定にてコントローラ部分を表示している場合には、マウス（クリック）・タッチ操作も可能です。マウス操作時の操作方法は見たまんまですが、ゲーム画面の一部がEscapeキーとデバグキー操作になっています。

#### 実行用HTMLファイルの設定

実行用HTMLファイルにて、いくつか設定が可能なので説明します。記述方法は、まあ見てもらえばわかると思います。

- SaveName
  ローカルストレージへのデータ保存時の識別名を指定します。省略時は Javardry となります。PC用、スマホ用で別にセーブしたい場合などに設定します。
- Size
  ゲーム画面のサイズ指定ですが、実際の表示はブラウザのウィンドウサイズに応じて拡縮されるため、解像度的な意味になります。300～3000の間で指定出来ますが、通常は800程度を想定しています。
- Align
  ゲーム画面の配置（左寄せ、中央寄せ、右寄せ）を left/center/right で指定します。
- Controller
  コントローラ部分の表示の有無を on/off で指定します。主にスマホ用です。
- LoadingScreen
  ロード画面（画像等の読み込み中の画面）のタイプを数字で指定します。基本的にはワイヤフレームのダンジョン内を進んでいく風の画面表示ですが、以下の種類があります。
  - 0（もしくは未指定）
    ただただ真っ直ぐ進んでいくタイプです。同じパターンの繰り返し表示になります。
  - 1
    ごく小規模なダンジョンをある程度ランダムに歩き回るタイプです。進行方向（あるいは向き変更方向）を示す矢印が表示されます。
- NotLoadSaveData
  起動時にセーブデータを読み込まない設定の on/off を指定します。以前のセーブデータが悪さをして起動に支障が出る場合などにonにします。通常はoffにしておいて下さい。
- NoSoundAllowed
  音楽・効果音の読み込みと再生を強制的に不可にする設定の on/off を指定します。環境により、音楽・効果音の読み込みや再生時に動作不良を起こすような場合などにonにします。この設定がonの場合、後述のSoundPrefetch（音楽・効果音の先読み）設定は無視されます。通常はoffにしておいて下さい。
- GraphicPrefetch
  起動時に画像を先読みするかどうかを on/off で指定します。ただし、地上の背景画像等、基本的な画像はここでの設定に関わらず強制的に先読みしています。onにするとかなり重く（起動が遅く）なるため、ローカル動作であってもオススメはしません。
- SoundPrefetch
  音楽・効果音を先読みするかどうかを on/off で指定します。ただし、先読みがoffであっても再生がonであれば読み込みを実施します。offにしておけば無駄な読み込みを減らせますが、ゲーム中に読み込みが発生するのがイヤで、どうしても最初に読み込ませたいという場合にはonにして下さい。
- GraphicLimit
  読み込み済みの画像を削除せずに保持しておくかどうかを on/off で指定します。offにすると毎回読み込みが発生します。通常はonで良いと思いますが、メモリが少ないスマホ等ではoffにした方が良い場合もあるかもしれません。
- GraphicCache, SoundCache
  データ読み込み時にブラウザのキャッシュを利用するかどうかを on/off で指定します。どの程度有効なのかは不明ですが、キャッシュを利用出来るなら無駄な読み込みを減らせるかもしれません。デバッグ時等、更新されない等の問題がある場合にはoffにして下さい。

#### 初期設定（config.js）

初期設定、フォント指定、キー設定（キー初期設定）、呪文名指定はconfig.jsにまとめてあります。キー設定方法、呪文名指定方法はJava版と同様です。
config.jsのファイル名を変更する場合は、実行用HTMLファイル内の記述の変更が必要ですので注意して下さい。

- InitialConfigData["Bgm"]
  音楽を鳴らすかどうかの初期設定を true/false で指定します。プレイ中に Option で変更可能です。
- InitialConfigData["Se"]
  効果音を鳴らすかどうかの初期設定を true/false で指定します。プレイ中に Option で変更可能です。
- InitialConfigData["ControllerAlign"]
  コントローラ部分の初期表示位置を左寄り・右寄りのいずれにするかを left/right で指定します。プレイ中に Option で変更可能です。
- InitialConfigData["GamePad"]
  ゲームパッドを（Javardry HTML5版の機能で）使用するかどうかの初期設定を true/false で指定します。プレイ中に Option で変更可能です。
- InitialConfigData["Dungeon"]
  ダンジョンの初期表示を画像・線画のいずれにするかを graphic/wireFrame で指定します。プレイ中に Option で変更可能です。
- InitialConfigData["PerspectiveView"]
  ダンジョンの画像表示時、遠近表示効果有無の初期設定を true/false で指定します。プレイ中に Option で変更可能です。
- InitialConfigData["AutoMapping"]
  オートマップ表示（マップ表示/数値表示）の初期設定を true/false で指定します。プレイ中にタイトル画面で変更可能です。

#### フォント指定

フォントは config.js 内の Font にて指定します。Java版と同様に、等幅（固定幅）フォントでないと表示が崩れます。論理フォント名（monospaced）か、物理フォント名（MS Gothic, MS Mincho, IPAGothic, IPAMincho, VL Gothic 等）で指定して下さい。
dataディレクトリ等に入れたフォントファイルを指定する場合には、Font の値は GameFont として下さい。そして、実行用HTMLファイル内のスタイルシート部分にて、Webフォントとしてフォントファイルを指定して下さい。フォントファイルはJava版での直接指定同様にTrueType（ttf）フォントでも構いませんが、サイズの小さいWeb Open Font Format（woff）がよいかと思います。
スマホでプレイする際には、OSのバージョンにもよるのかもしれませんが、論理フォント名（monospaced）を指定しても等幅フォントが入っておらず、プロポーショナルフォントで表示されてしまうようです。そのため、スマホでの動作を想定するならば、フォントファイルを同梱し、そのファイルを直接指定した方が良さそうです。

#### Option

プレイ中に音楽の on/off 等を変更出来ます。

- Music
  音楽のon/offを変更します。また、再生音量の調整が出来ます。
- Se
  効果音のon/offを変更します。また、再生音量の調整が出来ます。
- Controller Align
  コントローラ部分の表示位置（left/right）を変更します。
- GamePad
  ゲームパッド操作のon/offを変更します。通常は on のままでよいと思いますが、JoyToKey（Windows）やQJoyPad（Linux）等のゲームパッドからの入力をキーボードの入力に変換する類のフリーソフトを使用する際には、Javardry HTML5版側の入力と被ってしまうため、この項目を off にして下さい。
- Dungeon
  ダンジョン表示（graphic/wire frame）を変更します。
- Perspective
  ダンジョン画像表示時の遠近表示効果（on/off）を変更します。と言っても、遠くがやや暗く表示されるだけで、好みによりますが、雰囲気重視ならon、見やすさ重視ならoffが良いでしょう。
- Save Data
  セーブデータのバックアップと復旧が出来ます。セーブデータをファイルとして書き出し（Backup）、そのファイルを読み込む（Recovery）ことでセーブデータを復旧出来ます。
- Key Config
  現在のキー設定を表示します。また、キー設定の変更を行います。オンライン動作時等、config.jsのキー設定（初期設定）を書き換えられない場合には、ここでキー設定を行って下さい。設定方法はJava版と同様です。
  ここで設定したキー設定は、Option設定データとしてローカルストレージに保存されます。キー設定を初期化したい場合は、Option設定データを削除した後にリロード（再読み込み）して下さい。
- Keyname
  Java版の Key test と同様に、キーボードの各キーやゲームパッドの各ボタンに対応する識別名を表示させることが出来ます。キー設定を行う際に活用して下さい。
- Delete option data
  ローカルストレージに保存されているOption設定データを削除します。ゲームのセーブデータを削除するわけではありません。
  Option設定を初期化したい場合には、Option設定データを削除した後にリロード（再読み込み）して下さい。

#### 顔画像

冒険者用の顔画像は、Java版と同様にfaceディレクトリ内の冒険者と同名の画像ファイルが表示されますが、（ローカルサーバではない）オンライン動作時にはプレイユーザによる画像ファイル名の変更が困難なため、HTML5版では、ゲーム上で画像ファイルの指定を出来るようにしました。
画像ファイルの指定は訓練場で行います。訓練場の「キャラクタを見る」で冒険者を選択し、「顔画像の設定」を選ぶとテキスト入力フィールドが表示されますので、画像ファイルのURLを（拡張子まで含めて）入れてEnterを押して下さい。未設定（従来通りfaceディレクトリ内の冒険者と同名の画像ファイル表示）の場合は "none" として下さい。
画像ファイルは、例えば "http://hoge.example.ne.jp/hage/fuga.png" のようにhttpやhttpsから始まるURLで指定するか、もしくはゲームのアップされている同サーバ内の画像であれば "graphic/face/fighter.png" や "graphic/monster/Angel.png" といった形で指定出来ます。httpやhttpsから始まるURLで指定する場合は、いわゆる直リンになりますので、自分で直リン可のサーバにアップした画像か、直リンの許可を得ている画像を指定して下さい。

以下の二つの画像ファイルはテスト用に使用して頂いて構いません。
- https://thu.sakura.ne.jp/img/prof_mikan.jpg
- https://thu.sakura.ne.jp/img/prof_miku.jpg

プレイユーザの手間を省くために、予めfaceディレクトリ等にいくつかの顔画像をアップしておき、合わせてサムネイルとファイル名を示しておくというのも一つの手かもしれません。

#### セーブデータ

HTML5版のセーブデータは、ローカルストレージに保存されます。そのため、ブラウザにより表記は異なりますが、閲覧履歴やcookie、サイトデータの削除を行うとセーブデータも削除されてしまいますので注意して下さい。プレイ中は、適当なタイミングでOptionにあるセーブデータのバックアップを行うことをおすすめします。
訓練場が無人の状態（全冒険者を削除した状態）で、さらに「キャラクタを消す」コマンドを実行すると、データの初期化をすることが出来ます。その際には、ローカルストレージに保存されているセーブデータも削除され、次にセーブが行われるまではセーブデータが無い状態になります。ローカルストレージからJavardryのセーブデータだけを削除したい場合には活用して下さい。

#### その他、Java版との違い

- defaultMessage.txt は defaultMessage.js となっている
  書式もやや異なりますが、内容はほぼ同一です。
  defaultMessage.jsのファイル名を変更する場合は、実行用HTMLファイル内の記述の変更が必要ですので注意して下さい。
- 暗号化画像・音楽は使用不可
  Java版にある暗号化ファイルの再生機能なんてどうせ使う人はいないだろう、というのは言い訳で、技術的に（作者のスキル的に）困難なため不可にしています。
  しかし、聞いたところでは、素材を暗号化せずにゲーム本体と一緒に配布するのは二次配布にあたるとして、利用規定で禁止している素材製作者の方もいらっしゃるとか。その場合は……配布ではなく、オンラインプレイ用（Web上にアップしたもの）として公開すればいける……のかもしれませんが、詳しくは各素材サイト等の利用規定をよく確認して下さい。
- 通常画像、高画質画像の分けがない
  Java版では、動作を軽くするための苦肉の策として、通常画像（サイズの小さい画像）と高画質（サイズの大きい画像）の二種類を切り替えられるようにしていましたが、HTML5版では動作にあまり影響なさそうだったので表示の切り替えを無しにしました。
- MIDIが使えない
  音楽（BGM）に使えるのはMP3だけです。効果音（SE）はJava版と同様にWAVEとMP3が使えます。Java版よりもMP3の再生はスムーズなため、効果音はMP3にしておくことをお勧めします。
- PCを転生させた際に、元のPCのデータが削除されない
  PCを転生させた際、Java版ではPCを削除していましたが、HTML5版では、ファイルのダウンロードという形でしかファイルの書き出しが出来ず、転生データを保存出来たかどうかを確認出来ないため、PCの削除は行いません。

#### 配布方法

「シナリオの公開」にてJava版について説明していますが、HTML5版もほぼ同様に考えて貰って構いません。
HTML5版の場合、考えられる配布方法は以下の三つでしょうか。上二つはJava版と同様です。

- HTML5版の本体（jsファイルや実行用HTMLファイル等）と自作シナリオデータ等を一緒にして配布する
- 自作したシナリオデータ（HTML5版ゲームデータ）や画像・音楽・効果音データ等のみを配布する
- Web上にアップして、オンラインプレイ用として公開する
  ファイル一式をどこかテキトーな場所（Web上）にアップして、そこにアクセスしてプレイしてもらうという方法です。配布ではなく公開、ですかね。通信量が気にならない環境であれば、この方法が一番プレイしてもらいやすい……かもしれません。
  オンライン用として公開する場合には、わかりやすい場所にreadme.txt等の解説ファイルへのリンクを張って下さい。ただし、テキストファイルはスマホでの閲覧時に文字化けする場合があるため、文字コードを指定出来るhtmlファイルにした方がよさそうです。
  Java版やHTML5版のローカルプレイの場合には、ファイル名・ディレクトリ（フォルダ）名は日本語でも構いませんが、HTML5版のオンラインプレイの場合（ネットにアップする場合）には、ファイル名等に日本語を使わないで下さい。今は日本語でも普通に読み込める環境が増えているようですが、サーバー上では基本的に半角英数字と一部の半角記号のみが有効です。