適性判断や自動見積、またはゲームなど目の前の複数のドアを選んで、どんどん先へ進んでいき最後に、結果発表というシミュレーションの仕組みは、WEBやアプリでよく使われています。
シミュレーションには項目や分岐を一元管理する仕組みが必要です。この分岐を企画する場合、通常はエクセルなどで分岐を作っていくと思います。
しかし、HTML化していくうちに頻繁に変更が発生します。
こういう仕組みを1ぺージづつHTML化していると、変更に対応するのはかなり大変です。
ここはやはり基本ページのみをHTMLで用意し、データそのものはJSONファイルで構築、それをjavascriptで読み込み、HTMLを書き出す仕組みがもっとも効率が良いです。
ちなみにこのサイトで解説するjavascriptはすべてネイティブJSです。ES6以上、一部ES7で記述しています。
基本のコードにはJSONファイルとそれを展開しHTML化するプログラムが必要です。
JSONファイルは、すべてのページ情報のデータをオブジェクト化し、それらを配列に格納したファイルとなります。
次はシンプルなJSON構文です。
{
"products": [
{
"Name": "葬送 の フリーレン",
"Location": "ハイファンタジー",
"Price": "583円"
}
,
{
"Name": "それでも町は廻っている",
"Location": "日常系コメディ",
"Price": "550円"
}
,
{
"Name": "戦国小町苦労譚",
"Location": "歴史ファンタジー",
"Price": "653円"
}
]
}Fetch についてはMDNの解説ページで次の様に記載されています。
『fetch() はグローバルのメソッドで、ネットワークからリソースを取得するプロセスを開始し、レスポンスが利用できるようになったら履行されるプロミスを返します。』
まあ、簡単にいうと、非同期関数であり、そのため処理が完了したらプロミスを返し、プロミスの値によって処理を変更するような記述ができるよ、ということです。
この場合エラーが起きても、（ファイルが読み込めないとか）真っ白になるとかページ全体の処理が停止することはありません。
で、下がMDNで掲載されている、JSONファイルを読み込むサンプルコードです。
MDNのサンプルはオブジェクトを読み込む仕様になっています。
注意するのは、読み込みはJSONファイルの仕様に合わせる事が重要なことです。
オブジェクト以外に配列で読み込む方法、JSONPで読み込む方法などいろいろあります。
const myList = document.querySelector("ul");
const myRequest = new Request("products.json");
fetch(myRequest)
.then((response) => response.json())
.then((data) => {
for (const product of data.products) {
const listItem = document.createElement("li");
listItem.appendChild(document.createElement("strong")).textContent =
`『${product.Name}』`;
listItem.append(`は、${product.Location}コーナーにあります。 価格: `);
listItem.appendChild(document.createElement("strong")).textContent =
`${product.Price}`;
myList.appendChild(listItem);
}
})
.catch(console.error);
ページ遷移していくシミュレーションは、通常ボタンを押してページ遷移します。
そのボタンのhref属性にパラメータを付与したURLをリンクします。
このパラメータには遷移先のページ番号を記載します。
href="./?pageid=2"遷移先（この場合は同じページ）でそのURLを読み込む時、付与されたパラメータを解析しページ番号を取得します。
そして配列の同じ番号のデータを探し出しHTMLへ展開する流れとなります。
URLパラメータを取得するサンプルコード
function getPrm(p){
var andPairs=location.search.split('?');
if(!andPairs[1]){return false;}
var pairs=andPairs[1].split('&');
var key = new Array();
var value = new Array();
var settings = new Array();
for( var i=0; i<pairs.length; i++ ){
key[i]=(pairs[i].split('='))[0];
value[i] =(pairs[i].split('='))[1];
settings[key[i]] = value[i];
settings[key[i]]= decodeURI(settings[key[i]] );
value[i]= decodeURI(value[i] );
}
return settings[p];
}
/* パラメータpageidの値を取得するサンプル */
const pageid= getPrm(pageid);シミュレーションにはいろいろなタイプがありますが、代表的な2つをご紹介。
ページ全体が切り替わっていくタイプ。1ページまるまる設問に使えるので複雑な設問に向いてます。
しかし、自分がどこにいるのか分かりにくくなりやすいので、適切なマップが必要です。
同一ページ内にステップ倍ステップの様に階層が一個づつ増えていくタイプ。物理的に設問スペースが狭いです。
こちらは自分がどの位置にいるのか分かりやすい反面、複雑な設問を設置づらい面があります。
どちらも基本は同じです。
80年代にはやったゲームブック、最近またひそかなブームのようですが、このAタイプで実装すると面白そうです。
このページで紹介しているプログラムやビジュアルなどご依頼いただければ実装を賜ります。
お問い合わせはこちら