はてなブログ：【決定版】記事一覧に「前のページ」ボタンを実装

そろそろこのサイトのデザインを変えようかと思い始めての tips チップス（7）。

はてなブログではトップページから「次のページ」をクリックして進みますと、「前のページ」に戻るためのリンクがありません。この「前のページ」のリンクを作ろうという話です。

ただし、このボタンが必要と感じられるのは自分で自サイトを見る時くらいと思われます。通常、他のサイトの記事一覧を行ったり来たりすることはあまりないと思いますし、履歴でことは足ります。

• 過去の試み
• sessionStorage
• Javascript
• ライセンス等

過去の試み

なのに、なぜこんなにこだわるのか？ 自分でもよくわかりません（笑）が、多分前回失敗したからですね。

• 
  はてなブログ：トップページに「前に戻る」を実装する（やや失敗）
• はてなブログのトップページに「前のページ」を実装する
• はてなブログに SessionStorage で「前のページ」を実装する

sessionStorage

やはり、どんどんと次のページへ進んでいくこともあるわけですから、その場合には前のページの URL をスタックにしてローカルに保存しておくしかなさそうです。

上の「過去の試み」の最初の sessionStorage を使う方法です。

developer.mozilla.org

Javascript

書き直しました。

• ご使用になる場合は「ライセンス等」をお読みください
• バグフィクスや改変に対応できなくなりますのでスクリプトは転載しないでください

(function(){
    if(document.body.classList.contains('page-index')){   // トップページ
        let pager = document.getElementsByClassName('pager')[0];
        if(pager !== undefined){    // pagerがあれば
            if(document.referrer.indexOf(location.hostname) !== -1){    // 自サイト内の移動なら
                let prevArray = [];
                if(location.search === ''){ // クエリなしトップページ
                    sessionStorage.removeItem('prevUrl');
                }else{ // クエリありトップページ
                    prevArray = JSON.parse(sessionStorage.getItem('prevUrl'));
                    const elemSpan = document.createElement('span'),
                        elemA = document.createElement('a');
                    elemSpan.classList.add('pager-prev');
                    elemA.textContent = '前のページ';
                    elemSpan.appendChild(elemA);
                    pager.insertBefore(elemSpan, pager.firstChild);
                    elemA.addEventListener('click', function(e){
                        e.preventDefault();
                        const href = prevArray.shift();
                        sessionStorage.setItem('prevUrl', JSON.stringify( prevArray ));
                        location.href = href;
                    }, false);
                }
        
                const next = document.getElementsByClassName('pager-next')[0];
                if (next !== undefined) {   // 次のページがあれば
                    const nextA = next.getElementsByTagName('a')[0];
                    const href = nextA.getAttribute('href');
                    nextA.addEventListener('click', function(e){
                        e.preventDefault();
                        prevArray.unshift(window.location.href);
                        sessionStorage.setItem('prevUrl', JSON.stringify( prevArray ));
                        location.href = href;
                    }, false);
                }                    
            }else{  // 検索やリンクできた場合は pager を消す
                pager.style.display = 'none'; 
            }
        }
    }
})();

ライセンス等

ご使用の場合は以下の注意事項をお守りください。

• ライセンスは IMUZA.com にあります。
• 当記事の Javascript を使用してのはてなブログ用テーマの制作、公開は商用以外は自由です。ただし、記事内、あるいは紹介サイト内に IMUZA.com へのリンクを挿入してください。
• 当記事の CSS への改変、公開は自由です。
• 特別問題が発生することはありませんが自己責任でお使いください。
  問題が発生した場合は削除すればもとに戻ります。
• お問い合わせ、バグの報告、仕様変更のご要望等は Contact Us までお願いします。