どうも！LSSです！！
先日、ここで公開したブラウザゲーム、
最大のポイントは「同じ記事なのにコメント欄のリンクから入ると違う迷路になる」というところでした。
普通ならサーバ側でのプログラムで内容を書き換えるところを、そういった事ができない、はてなブログの記事でやってるところがミソですねｗ
今回はその種明かしの話になります！
URLについて
あのゲームの記事のURLは、
https://little-strange.hatenablog.com/entry/2020/10/03/234717
でした。
この「little-strange.hatenablog.com」の部分がこのブログのURLで、その後ろにある
/（スラッシュ）で区切られたものがディレクトリ…PCでいう「フォルダ」と同様のモノです。
はてなブログ内の、LSSのブログのデータを置いてる場所にある「entry」フォルダの中の、「2020」フォルダの中の…って感じですね。
で、この「URL」というのは、ブラウザのアドレスバーに入力するか、他のWebサイトからのリンクをクリックするか、ブラウザのお気に入りから選ぶなどした時に、
「お使いのブラウザからサーバに対してリクエストする」
事になります。
「little-strange.hatenablog.com」ってどこのサーバ？ってのを見つけた後は、該当のサーバがその後の「/entry/2020/10/03/234717」を見て、どのデータをインターネット経由で送るか？を判断して送ってくれたものを、ブラウザが表示してくれてやっと、記事がPCやスマホの画面に表示されて読む事ができるようになるんですね。
URLの中に半角の「?」が含まれていた場合
コメント欄の中のリンクをクリックすると、
https://little-strange.hatenablog.com/entry/2020/10/03/234717?mz=6e6736666fedeef1efb8d7f610a8e1
のようなURLをリクエストする事になります。
さっきの記事のURLの後ろに「?」記号と、あとナゾの文字列が続いてる感じですね。
こうしたURLがリクエストされた場合、サーバ側は
「とりあえず?以降の文字列は無視して返すデータを探す」
という動作をします。
この「?以降の文字列」、サーバ側の該当部分がPHPなどの「いったんプログラムにかけてから返す」タイプだった場合、利用される事もありますが、そうでなければ全く同じ記事データを送ってくれる事になります。
https://little-strange.hatenablog.com/entry/2020/10/03/234717
にリクエストしても、
https://little-strange.hatenablog.com/entry/2020/10/03/234717?mz=6e6736666fedeef1efb8d7f610a8e1
にリクエストしても、見る記事は同じ、って事ですね。
JavaScriptのlocation.search
表示される記事データは同じ、ですが、その記事内にJavaScriptで
「記事の表示内容を書き換える」
コードを入れています。
で、その中に、
mzi=location.search.indexOf('mz=');
if(mzi>0){
bd=location.search.substr(mzi+3,30);
}
という部分があります。
この「location.search」、リクエストして結果が返ってきた後から、今のURLの「?以降の文字列」を「ブラウザ側から」文字列として取得する事ができるんですね^^
そしてその文字列を元に、JavaScriptから迷路の壁を表示するコードを書いています。
あとは「コメント欄にコピペしてください」として、「記事のURL?迷路データ」へ飛ぶリンクになるHTMLコードが出てくるようにしておきました。
これで、
「ひとつの記事なのに、クリックするリンクによって表示される迷路が変わる」
仕組みの完成です^^
文字列は結構長くてもOKですが、
あまりにも長ったらしく0と1が並ぶと、「アドレスバーの見栄えがよくない」「コメント欄の場所を食う」「そして怪しいｗ」などのデメリットがあるので、
に書いた方法を用いて、なるべく文字数が少なくなるようにしています^^
これをブラウザゲームに使うのは
かなり以前にブラウザゲームサイトを作っていた頃に思いついた事ですが、あまりこのlocation.searchを使ってる例を見かけませんでした。（気づいてないだけかもですが）
単一のページで、サーバサイドのプログラム処理を必要としないで表示されるもの（今回の場合は迷路）が変化する、って面白いと思うんですが、ひょっとしたら
「ものすごいアイデアを暴露してしまってる」
ような気がしなくもない今日この頃です。（自画自賛・思い上がりの類ｗ）
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
