ページによる振り分け、動的に DOM要素を作る＝はてなブログテーマ hyperspace （３）

「HTML5 UP の Hyperspace デザインイメージを「はてなブログ」で実現できるか？」の３回めです。

下がデモサイトです。時間が取れる時に少しずつやっていますので徐々に変わっていきます。
hyperspace.hatenablog.jp

次は、nav-panel に入れるコンテンツ作りです。javascript で動的に DOM要素をつくって入れるしかないですね。プログラミングを系統的に学んだことはなく、見よう見まねで始めたことですので、間違いや他に良い方法があればツッコミ歓迎です。

コードは Github で公開しています。

スムーススクロールの実現には、to-R さんが MITライセンスで公開されているスクリプトを再利用させていただいています。
smoothScroll.js

01ページによる振り分け

var page = document.body.className;
if (page.match(/page-index/)) {
    alert('トップページです');
} else if (page.match(/page-entry/)) {
    alert('記事ページです');
} else if (page.match(/page-archive/)) {
    alert('カテゴリー、アーカイブペイジです');
} else if (page.match(/page-about/)) {
    alert('プロフィールです。');
}

こんな感じでいけそうですが、今チェックしましたら、日付をクリックした時に page-entries-year-month-day というクラス属性が付きますので、これも追加しなくてはいけませんが、扱いは page-archive と同じでいいでしょう。

02動的に DOM要素を作る

element = document.createElement(tagName);
element : 生成される element オブジェクト
tagName : 生成される要素の型を特定する文字列。生成される要素の nodeName は tagName の値で初期化されます。

動的に要素を作るには、createElement を使うことになりますが、今回のように何度も DOM操作を繰り返す場合のパフォーマンスが気になります。たとえば、トップページに５つの記事を表示している場合は、li を５個作成し、その度に setAttribute して、ul に入れ、さらに div に入れるといったことを行うことになります。

この方法が正しいのかどうかははっきりしませんが、とりあえず、２個以上作ることになる要素は template をつくっておいて cloneNode で複製を作り、DOM要素へのアクセスが繰り返される場合は DocumentFragment を使うことにします。

たとえば、こんな感じです。

var tmplLi = document.createElement(‘li’);
elementLi = tmplLi.cloneNode(true);

03動的に作成されたナビパネル（nav-panel）の html

<div id="nav-panel">
<input id="trigger" type="checkbox">
<div id="panel">
    <label for="trigger"></label>
    <div id="panel-inner">
        <div class="hatena-module-title">最新記事</div>
        <div class="pager-top"><a href="javascript:void(0)" rel="#container">トップ</a></div>
        <ul>
            <li><a href="javascript:void(0)" rel="#entry-10328537792371582580">記事１１あのイーハトヴォのすきとおった風</a></li>
            <li><a href="javascript:void(0)" rel="#entry-10328537792371582549">記事１０夏でも底に冷たさをもつ青いそら、</a></li>
            <li><a href="javascript:void(0)" rel="#entry-10328537792371582527">記事９うつくしい森で飾られたモーリオ市、</a></li>
            <li><a href="javascript:void(0)" rel="#entry-10328537792371582519">記事８郊外のぎらぎら光る草の波。</a></li>
            <li><a href="javascript:void(0)" rel="#entry-10328537792371582510">記事７</a></li>
        </ul>
        <div class="pager autopagerize_insert_before">
            <span class="pager-next"><a href="http://hyperspace.hatenablog.jp/?page=1460941965" rel="next">次のページ</a></span>
        </div>
    </div>
</div>
</div>

次は、「前のページに戻る」をどう実現するか？です。なぜ、はてなブログには「次のページ」があるのに「前のページ」はないのでしょう？