あむちょです。

最近ぜんぜん更新してませんでした…

というのもモンスターハンター4の攻略サイトを作ろうとしたものの、あまりの量と地道な作業にブログどころじゃありませんでした。

けっしてモンハン4を楽しんでたわけじゃないからね！(プレイ時間350時間)

発売からそろそろ2か月たちますが、みてやってくれると嬉しいです。今のところ、スマートフォン専用です。

[MH4]モンハン4攻略図鑑

近々、Android用アプリとしても出す予定なのでそちらもよろしく。

今回、サイト構築にあたってオープンソースのTwitter Boostrapを使わせていただきました。

Twitter Boostrapとは、CSSなどのデザイン面がよくわからなくてもそれっぽいサイトが簡単に作れるフレームワークです。いちおうレスポンシブデザインに対応してます。

Boostrap

モンハン攻略サイトは、これにページ内スクロールを追加して使ってます。

ページ内スクロールはjQueryを使って、#accordion2 .innerクラスがあてられたn番目に移動するようにしてます。

<br />
function scroll(n){</p>
<p>    var p = $(&quot;#accordion2 .inner&quot;).eq(n).offset().top;</p>
<p>    //scroll<br />
    $(&#8216;html,body&#8217;).animate({ scrollTop: p }, &#8216;slow&#8217;);</p>
<p>}<br />

またページ遷移の際にもスクロールさせたいので、

<br />
$(function(){</p>
<p>    var n = window.location.href.slice(window.location.href.indexOf(&#8216;?&#8217;) + 4);</p>
<p>    if(n.length &lt; $(&quot;#accordion2 .inner&quot;).size()) {<br />
        var p = $(&quot;#accordion2 .inner&quot;).eq(n).offset().top;</p>
<p>        //scroll<br />
        $(&#8216;html,body&#8217;).animate({ scrollTop: p }, &#8216;slow&#8217;);</p>
<p>        //show inner<br />
        $(&#8216;#collapse&#8217;+(Number(n)+1)).collapse(&#8216;show&#8217;);</p>
<p>        return false;<br />
    }<br />
});<br />

これでm番目にスクロールしたい時は、ＵＲＬの最後に?no=mとすれば、ページ移動後にスクロールします。ついでにアコーディオンを開いてます。

<a href=”http://mh4.fieldwalking.jp/boss/index.html?no=32″>こんな感じに</a>

これで、サイトのテンプレートはほぼ完成です。問題はデータの量があまりにも多いこと…

攻略サイトはもうやりたくない

　[ad]