画像置換を JavaScript (jQuery) でやってみる

お久しぶり！社会人になってしまったので，Blog 更新する暇なかった！

いま，ちょっとした Web サイトを作成中なんだよね．その制作過程で，「画像置換どうしよう？」ってことになったんで，今回はそれについて書くことにした．

Windows もメイリオが入ってから，フォントがだいぶ綺麗になったと思うけど，見出しに使うフォントとしてはいまいち．でも，Mac OS X ならヒラギノ明朝があるから，それを見出しにすればいいよなぁと思った．

また，Mac OS X の場合はフォントがあるんだから，テキストとしてコピーできるように，フォントがある場合は画像置換をしたくない．そして，見出し1つ1つに id を付けるのは嫌だったし，XHTML を汚したくない．さらに言えば，CSS に置換用画像のファイル名をいっぱい書かなければならないのもどうかなと思うわけだ．

なので，条件としては，

・ヒラギノ明朝が存在すれば，画像置換はしない
・XHTML と CSS を汚さない

ということで考えてみた．

そーなると，CSS でどーにかするっていう画像置換は無理なので，JavaScript で頑張ることにした．まあ，美しいサイトを見たいなら JavaScript くらい有効にしておいてくれということでｗアクセシビリティとしても XHTML を汚さないので大丈夫だと思うし．

んで，今回は，jQuery で，

・ヒラギノ明朝の存在判定
・h1, h2 要素のテキストのハッシュ値からの画像名計算
・h1, h2 要素のテキストの img 要素への変換

ということをすることで，画像置換を行ってみた．サンプルは次のとおり．

JavaScript による画像置換サンプル

使用したライブラリは，jquery.js と jquery.fontavailable.js，jquery.md5.js．

JavaScript を書くことがないので，こういう書き方が正しいかわからないけど，次のようなかんじで記述したら OK だった．

$(function() {
  // Image Replacement
  if (!$.fontAvailable("Hiragino Mincho Pro") &&
      !$.fontAvailable("ヒラギノ明朝 Pro W3")) {
    $("h1").each(function() {
      $(this).replaceWith(
        '<h1><img src="img/ir/h1_' + $.md5($(this).text()) +
        '.jpg" alt="' + $(this).text() + '" /></h1>');
    });

    $("h2").each(function() {
      $(this).replaceWith(
        '<h2><img src="img/ir/h2_' + $.md5($(this).text()) +
        '.jpg" alt="' + $(this).text() + '" /></h2>');
    });
  }
});

一応，Mac OS X での Safari と Firefox，Chrome，Opera，Windows での Internet Explorer 6，Internet Explorer 7，Internet Explorer 8，Firefox，Safari，Chrome，Opera での動作を確認．

それにしても jQuery って便利だねぇ．