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

HTML5 UP で公開されているテンプレートのデザインイメージをはてなブログに移植（？）しています。

デモサイト
ソース

ほぼ構想通りにできてきました。あとは、index ページの「前のページ」なんですが、そもそもなぜ「前のページに戻る」がないのでしょう？ などと愚痴ていても仕方ありませんので、なにか方法を考えましょう。どこかに設定があったりして…、なんてことはないと思います。

「次のページ」のリンク先は、「http://ドメイン/?page=10桁の数字」となっているのですが、規則性がよく分かりませんし、どこかに埋め込まれていないかとソースを見ても見当たりません。

で、Web Storage を使ってみることにします。Web Storage は HTML5 から使えるようになった機能で、クッキーのようにローカルにデータを保存出来る仕様です。詳しくは、web storage, local storage, session storage などで検索してください。

今回の場合、セッションごとにデータが削除される session storage を使います。

このテーマの nav-panel ではなく、メインコンテンツに「前のページ」を入れるコードを書いてみました。

(function(){
    function setPrevUrl(){
        arr.unshift(window.location.href);
        sessionStorage.setItem('prevUrl', JSON.stringify( arr ));
        location.href = document.getElementById('pager-next').getAttribute('rel');
    }
    
    function getPrevUrl() {
        var href = arr.shift();
        (arr.length === 0) ? sessionStorage.removeItem('prevUrl') : sessionStorage.setItem('prevUrl', JSON.stringify( arr ));
        location.href = href;
    }


    if (document.body.className.match(/page-index/)) {
        var prevUrl = sessionStorage.getItem('prevUrl'),
            arr = new Array(),
            noPrev = true;
        (prevUrl === null) ? prevUrl = '[]' : noPrev = false;
        arr = JSON.parse(prevUrl);


        if (document.querySelector('.autopagerize_insert_before') !== null) {
            var elementDiv = document.querySelector('.autopagerize_insert_before');
        } else {
            var elementDiv = document.createElement('div');
            elementDiv.classList.add('pager');
        }


        if (!noPrev) {
            var elementSpan = document.createElement('span'),
                elementAnchor = document.createElement('a');
            elementAnchor.textContent = '前のページ';
            elementAnchor.setAttribute('href', 'javascript:void(0)'),
            elementAnchor.addEventListener('click', getPrevUrl, false);
            elementSpan.classList.add('pager-prev');
            elementSpan.appendChild(elementAnchor);
            elementDiv.appendChild(elementSpan);
        }
        if (document.querySelector('.autopagerize_insert_before') !== null) {
            var elementSpan = elementDiv.querySelector('.pager-next'),
                elementAnchor = elementSpan.getElementsByTagName('a')[0];
            elementAnchor.setAttribute('rel', elementAnchor.getAttribute('href'));
            elementAnchor.setAttribute('href', 'javascript:void(0)');
            elementAnchor.addEventListener('click', setPrevUrl, false);
            elementAnchor.id = 'pager-next';
            elementDiv.appendChild(elementSpan);
        }
        document.getElementById('main-inner').appendChild(elementDiv);
    }
})();