設置店舗トップページのURLは以下。
http://bandainamcoent.co.jp/am/vg/Synchronica/shop/
トップページには日本地図を模したクリッカブルマップがあり、このマップをクリックすることで都道府県別ページに遷移できる。
あるいは、「北海道・東北」「関東」「甲信越・北陸」「東海」「近畿」「中国・四国」「九州・沖縄」のような、地方ごとのドロップダウンメニューも用意されており、JavaScriptで開閉させている。
都道府県別ページのURLは以下。
http://bandainamcoent.co.jp/am/vg/Synchronica/shop/detail.php?pref=${pref}
パラメータpref
で都道府県を指定するオーソドックスな作り。1が北海道、2が青森、(中略)、47が沖縄。繰り返し指定がしやすいですね。
例えば三重県detail.php?pref=24
を見てみると、
<div id="container"> <div class="containerInner"> <div id="mainCont01" class="alBg"> <h2 class="cmnTtl type01"><img src="./img/ttl_01.png" alt="設置店舗"></h2> <div class="mainContInner"> <p class="upDate">2015年7月4日 現在の設置店舗リストです 。</p> <div id="areaDetail"> <!--▼都道府県名--> <!--▽動的挿入--> <h2>三重県</h2> <!--△動的挿入--> <!--▲都道府県名--> <ul><!--▼店舗情報--> <!--▽動的挿入--> <li> <h4>四日市アミューズメントパーク</h4> <p>三重県四日市市安島1-3-31 ララスクエア四日市5F</p> </li> <!--△動的挿入--> <!--▽動的挿入--> <li> <h4>ラウンドワンスタジアムみえ・川越IC</h4> <p>三重県三重郡川越町南福崎851-1</p> </li> <!--△動的挿入--> <!--▽動的挿入--> <li> <h4>ナムコランドイオンモール鈴鹿</h4> <p>三重県鈴鹿市庄野羽山4-1-2 イオンモール鈴鹿2F</p> </li> <!--△動的挿入--> <!--▽動的挿入--> <li> <h4>ラウンドワン津・高茶屋</h4> <p>三重県津市高茶屋小森町277-8</p> </li> <!--△動的挿入--> </ul> </div><!--/#areaDetail--> <p class="btnWrap"><a href="./">取扱店舗トップへ戻る</a></p> </div> </div><!--/#mainCont01--> </div> </div><!--/#container-->
div要素である<div id="areaDetail">
内の順序無しリスト<ul>
で、リスト<li>
1件につき1店舗。<h4>
が店舗名で、<p>
が住所を表す。
なお、現時点で未設置である都道府県、例えば島根県detail.php?pref=32
の場合、
<div id="container"> <div class="containerInner"> <div id="mainCont01" class="alBg"> <h2 class="cmnTtl type01"><img src="./img/ttl_01.png" alt="設置店舗"></h2> <div class="mainContInner"> <p class="upDate">2015年7月4日 現在の設置店舗リストです 。</p> <div id="areaDetail"> <!--▼都道府県名--> <!--▽動的挿入--> <h2>島根県</h2> <!--△動的挿入--> <!--▲都道府県名--> <ul><!--▼店舗情報--> <!--▽動的挿入--> <li> <p>現在、この地域の設置店舗はありません</p> </li> <!--△動的挿入--> </ul> </div><!--/#areaDetail--> <p class="btnWrap"><a href="./">取扱店舗トップへ戻る</a></p> </div> </div><!--/#mainCont01--> </div> </div><!--/#container-->
のようになる。<h4>
要素の有無で判断できそう。