2007年1月 4日

JavaScript でトップページへのリンクを追加する

最近のサイトの多くは、ページの左上にあるリンク画像から、どのページからもトップページに戻れるようになっています。一方、私のブログ以外のページではそうなっていなかったので、 JavaScript を使ってトップページへのリンクを追加してみました。

 

私のブログ以外のページは歴史的事情によりすべてただの HTMLファイルで構成されています。これらをすべて書き換えてトップページへのリンクを追加するのは大変です。perl -i -pe などの方法で一括置換してリンク画像を挿入する方法もありますが、今後のメンテナンスを考えると考えものです。

そこでもっと楽な方法はないかと考えたところ、都合のいいことに、これらのページでは、右側のサイドバー (サイト共通のリンクなどが並んでいる領域) 用に共通の JavaScript ファイルを読み込んでいることに気づきました (参考: CSI)。

この JavaScript ファイルにトップページへのリンクを追加するコードを追加すれば、すべてのページに反映されるはずです。そこで、次のようなコードを書きました。 

// グッドラッパー
function addOnLoadEvent(func) {
  if (window.addEventListener) {
    window.addEventListener("load", func, false);
  } else if (window.attachEvent) {  // IE
    window.attachEvent("onload", func);
  } else  {
    window.onload = func;
  }
}

function insertLinkToTopPage() {
  var elements = document.getElementsByTagName("h1");
  if (elements.length == 0) {
    return;
  }
  // 一番最初の h1 エレメントを対象にする
  var h1 = elements[0];
  // 画像のエレメントを作る
  var img = document.createElement("img");
  img.src = "http://0xcc.net/images/0xcc.png";
  // 画像のスタイルを適当に設定する
  img.style.verticalAlign = "middle";
  img.style.paddingRight = "6px";
  // トップページへのリンクを作る
  var link = document.createElement("a");
  link.href = "http://0xcc.net";
  link.appendChild(img);
  // h1 の先頭にリンク画像を追加
  h1.insertBefore(link, h1.firstChild);
}
addOnLoadEvent(insertLinkToTopPage);

やっていることは単純です。ページの最初に登場する h1 エレメントの先頭にトップページへのリンク画像を追加しているだけです。私のサイトでは、すべてのページの先頭に h1 でタイトルをつけていたためこのような方法でできました。このようなエレメントがない場合は body エレメントの先頭に追加してしまうこともできると思います。

上のスクリプトの効果は、 バッドノウハウのページ などで確認できます。

結局、上のスクリプトはサイドバー用の JavaScript ファイルの一部ではなく、サイト共通の JavaScript ファイル site.js として分離することにしました。

まとめ

JavaScript でトップページへのリンクを追加する方法を紹介しました。テンプレートシステムを使ってサイトを構築していれば、このような応急処置的な方法に頼る必要はありませんが、レガシーなサイトでは役立つテクニックではないかと思います。

ところで、レガシーサイトに限らず、今回紹介した方法は、CSS ではやりづらいデザインの調整やギミックの追加といったことに応用できそうです。たとえば、すべての h2 エレメントの中身を【...】で囲むとか、すべての img エレメントに mouseover イベントを追加するといったことは、 JavaScript を使えば簡単にできます。

サイト全体で共通の CSS ファイルを使うのと同様に、サイト全体で共通の JavaScript ファイルを使うようにすると、クライアントサイドでのちょっとした後処理がいろいろできて便利そうです。