読者です 読者をやめる 読者になる 読者になる

B side of Ichiro S.

Ichiro S's photologのB面

はてなブログのページャーの表記がおかしいならJavaScriptで弄っちゃえばいいんじゃない?という話(一部修正して再掲)

Ritsurin park / Kagawa, Coolpix A, Dec 2013

 

明けましておめでとうございます。年末年始の暴飲暴食も一段落し、やっと通常運行に移行したid:ichiro_sです。今年もよろしく御願いします。

 

ところで、だいぶ更新間隔が空いてしまいました。実はその間に写真観が色々変わった話、沖縄の離島に弾丸日帰り旅行に行った話、カメラを買い換えたよ~っていう話など、ここに書綴りたかったネタは色々あるのですが、その辺は後回しで今回は人助けです。

 

 きっかけはケニーさん(id:kenny1991)のこのエントリ↓

東京スクエアガーデン

 

はてなブログをご利用の皆様の大半はお気づきだと思いますが、はてなブログが標準で用意しているページャー(ページ遷移のリンク)が滅茶苦茶で気持ち悪いよねぇ~という話。

 

具体的にどうおかしいかと言うと、

  • 記事単体のページでは"前の記事"/"次の記事"という表記
  • リストページでは過去に遡るのに"次のページ"という表記
  • 更にリストページでは新しい記事リストのページへ戻るリンクが無い

 

まあケニーさんの指摘の通りなので引用します。

 

これさー、トップページに出る[次のページ]と個別ページに出る[次の記事]のclass定義が両方ともpager-nextで同じなんだよ。おかしくない?[次のページ]は古い方に遡っていくのに、[次の記事]は新しい方に進むって時制がめちゃくちゃ。

 

そうなんですよね。表示モードで時系列が統一されていない気持ち悪さ。これに尽きます。

 

 [新しい(newer)][古い(older)]とかのほうが良くない?

 

じゃあ言葉を変えればいいじゃん、ってやり方分かんないし。誰か教えて。

 

ですよね、じゃあやってみようって事でやってみました。成功しました。

まずはトップページに戻って頂き左下のページャーリンクを見て下さい。

(このブログからは撤去しました)

 

やり方ですが、まずはソースを貼っておきます。

※指摘を承けて1/7 17:18に加筆修正しました。

function KennyMeguro(){
    if (!document.getElementsByTagName) return;
	var anchors	= document.getElementsByTagName("a");
	var ListPage = document.getElementsByClassName("pager autopagerize_insert_before")[0];
	var EntryPage = document.getElementsByClassName("permalink pager")[0];
	if(ListPage){
			for (var i=0; i<anchors.length; i++) {
			var anchor = anchors[i];
			if (anchor.getAttribute("href") && ((anchor.getAttribute("rel") == "next")))
			{anchor.innerText = "古い記事に飛ぶぜハニー";}
			if (anchor.getAttribute("href") && ((anchor.getAttribute("rel") == "prev")))
			{anchor.innerText = "新しい記事に飛ぶよベイベ";}
		}
	}
	if(EntryPage){
			for (var i=0; i<anchors.length; i++) {
			var anchor = anchors[i];
			if (anchor.getAttribute("href") && ((anchor.getAttribute("rel") == "next")))
			{anchor.innerText = "新しい記事はこちら";}
			if (anchor.getAttribute("href") && ((anchor.getAttribute("rel") == "prev")))
			{anchor.innerText = "古い記事も見てね~";}
		}
	}
}
KennyMeguro();

 

ソースを見て貰えれば分かる人には分かると思うのですが、簡単に解説すると 

  • JavaScriptのdocument.getElementsByTagNameで全aタグを取得する
  • aタグ内にhrefが含まれ(リンクである)、rel="next"と書いてあるアンカーテキストを入れ替える
  • リストページ内のページャーを形成しているdiv="pager autopagerize_insert_before"内の全aタグを取得する
  • rel="next" 及び "prev"のアンカーテキストを入れ替える
  • 記事ページ内のページャーを形成しているdiv="permalink pager"内の全aタグを取得する
  • rel="next" 及び "prev"のアンカーテキストを入れ替える

というやや強引なやり方です。

 

ポイントはページャーのリンクには必ずrel="next"という属性が存在する所でしょうか。一覧ページと記事ページで同様のrel(next/prev)が含まれており、前者と後者では意味合いが異なる(=これが混乱の元凶)ので、それぞれのdivで変換が必要という点です。

※ケニーさん、すっかり見落としてました。コメントありがとうございます! 

 

尚、注意点ですが、はてなブログは構造上head内にJavaScriptが書き込めないのとbodyにonLoadイベントが設定できないので、ページ内に存在する全aタグを抽出するにはページ後方にスクリプトを仕込む必要があります。

なので、このブログではスクリプトをフッダ内に書き込んでいます。

 

もっと良いやり方があるよ~っていう人は教えて下さい。

以上、id:ichiro_sが昼休みよりお送り致しました。