今回は、replaceメソッドと正規表現で画像の切り替え！について、実際にサンプルコードを用いて、詳しく記載していこうと思います。
前回記載しました、画像の切り替え：ロールオーバーの設定では、あまりに汎用性がないためJavaScriptのreplace()メソッドと正規表現を用いて、前回と同じような画像の切り替え方法を詳しく記載してみようと思います。
という事で、それでは今回はッ、
上記について記載していこうと思います...。
JavaScriptのメソッド、replace()は、文字列を置き換えることができるメソッドです。下記のサンプルは、「テスト」という文字列を「test」に置き換えています。
このreplace()メソッドを利用すれば、前回使用したサンプルソースを下記のようにファイル名の部分だけ置き換えることができます。
文字列を置き換えるreplaceを記載しましたが、これが前回のロールオーバーのコードと深く関係します。上記のように、ただ文字列を置き換えるだけでは、前回同様、色々なファイル名に対応できるわけではありません。そこで正規表現というものを利用して、文字列を置き換える仕組みを記載してみます。
正規表現とは、文字列の文字の並び方（パターン）を表現するもの。例えばある文字列が「小文字の半角英数のみ」で記述されていた場合、これをプログラムの中で表現するために、以下のように記号を使って表現します。
沢山の記号やアルファベットが並んでいて、意味不明な記述にも見えますが、この記号1つひとつには意味があり、/^[a-z]+$/は「小文字の半角英数のみ」という文字列の並びを表しています。そしてこのように記号を使って文字列のパターンを表現することを正規表現といいます。
それでは少し詳しく記載します。まず大前提として、正規表現は「/」の間に記述します。
記号の意味を少しだけですが一覧で記載してみます。
| ^ | 行頭を表します。 |
|---|---|
| [a-z] | a～zまで（小文字のアルファベット）を表します。 |
| + | 直前の1文字の1回以上の繰り返し。 |
| $ | 行の末尾を表します。 |
/^[a-z]+$/ を言葉で表現してみると、 行頭（^)が小文字のアルファベット（[a-z]）で、それを1回以上、行の終わり（$）まで繰り返す（+）。
そして正規表現で利用できる記号は、まだまだたくさんありますが、今回は割愛して、コードの中で使用する記号のみ記載していきます。
それでは、ロールオーバーのコードを正規表現を利用して作成してみます。ロールオーバーで使うファイル名が違ってもコードが適用されているのが分かるように、HTMLに3つの画像を用意してみました。
まずはそれぞれの画像に対応させるため、全体をeach()メソッドで囲みます。続いて①の部分では、デフォルトのsrc属性の値を、変数defaultSrcに代入しておきます。 正規表現を利用した文字列置き換えの部分が②です。
デフォルトのsrc属性の値（変数defaultSrc)を、replace()メソッドで文字列置き換えをおこなっています。置き換えたい文字列の正規表現から細かく記載してみます。
順番に説明します。まず、()でくくられた部分がふたつあります。正規表現では、この()で囲んだ部分をひとつのグループとして見なします。ですから、この正規表現には、以下のふたつのグループがあることになります。
| (.+) | グループ1 |
|---|---|
| (\.[a-zA-Z]+) | グループ2 |
まずはグループ1の(.+)を説明します。使われている記号は、ピリオド（.）と+になります。+は「直前の1文字の1回以上の繰り返し」ですから、ピリオドが意味する文字を、1文字以上繰り返すということになります。それではピリオドは意味は下記になります。
| ピリオド(.) | 任意の1文字を表します。 |
|---|
ピリオドは特に制約もなく任意の1文字を表します。なので(.+)は、任意の文字の繰り返しということになります。
続いてグループ2の(\.[a-zA-Z]+)部分です。まず\.とありますが、これは先ほどのピリオド（任意の1文字）とは違い、文字としてもピリオドになります。先ほどのピリオドと混同しないように、\.としてエスケープしている部分です。そして[a-zA-Z]+の部分は、アルファベットの繰り返しになります。 ピリオドで始まるアルファベットの繰り返しの文字列というのは拡張子のことになります。つまりグループ2は画像の拡張子（.jpgや.gif、.pngなど）の部分を、そしてグループ1はそれ以前を表しています。 緑色の部分が、グループ1：青色の部分がグループ2になります。 次に後半部分の置き換えたい文字列のほうの正規表現、$1_hover$2を記載してみます。まず、$1、$2の部分ですが、これは行の終わりを表す$マークではなく、()でグループ化した部分の内容になります。つまり$1はグループ1、$2はグループ2の内容になります。それぞれグループの内容をあてはめてみると、下記のような内容が完成します。 これが正規表現を使った文字列置き換えになります。入れ替える画像ファイル名は、〇〇_hover.jpgや〇〇_hover.pngのように、_hoverを末尾に付けるようにすることをオススメします。 上記、サンプルHTML2のコードで、ロールオーバーの機能としては問題なく動作するものができました。しかし少し問題がないわけではありません。コードを良く見ると、マウスがのったとき（hover時）に初めて画像のsrc属性を変更しています。つまりマウスがのったときに、画像を新たに読み込むわけになります。その結果、環境によってはマウスをのせてもすぐに画像が表示されずに、タイムラグが発生してしまう場合があります。 それを防止するために、ページが読み込まれた時点（マウスがのる前）で画像を読み込んでおく、プリロード機能を付けておく必要があります。 実際にどのように記述するか記載してみます。$("<img >")とすれば、img要素を作成することができます。そしてこの作成した画像のsrc属性に、_hover画像のパスを記載しておけばOKになります。
では、分かりやすいようにサンプルを記載してみます。 上記では①と②で、画像のパスを事前に変数にしてあります。そして③ではimg要素を作成しておきます。append()メソッドなどでHTMLに挿入していないため、HTML上には存在しないimg要素となりますが、要素としては読み込まれ作成されるので実質プリロード機能となります。 ということで今回は、replaceメソッドと正規表現で画像の切り替えについて、サンプルコードを交え記載いたしました。 正規表現、初心者の方には少し難しいことと思います。しかしながらプログラミングを行ううえで、複雑になればなるほどプログラムに必要になってくる正規表現、文字列の表現方法を覚える必要はなく、その都度、調べれば済む事ですが、プログラムにおける記載方法の考え方を、今回のサンプルコードなどを参考にして頂ければ、幸かと思います。 とりあえず、今回はここまで...。 お仕事のご依頼は下記より...、それではまた次回...。
images/button.jpg
replace("images/button.jpg", "images/button_hover.jpg")
プリロード機能を付ける
サンプルHTML3<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Sample html</title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$(".rollover").each(function(){
var defaultSrc = $(this).attr("src");----------①
var hoverSrc = defaultSrc.replace(/^(.+)(\.[a-zA-Z]+)$/, "$1_hover$2")----------②
$("<img >").attr("src",hoverSrc);----------③
$(this).hover(function(){
$(this).attr("src", hoverSrc);
},
function(){
$(this).attr("src",defaultSrc);
});
});
});
</script>
</head>
<body>
・・省略・・
<ul>
<li><a href="#"><img class="rollover" src="images/button.jpg" alt="お問い合わせ" width="220" height="65"></a></li>
<li><a href="#"><img class="rollover" src="images/button2.jpg" alt="ダウンロード" width="220" height="65"></a></li>
<li><a href="#"><img class="rollover" src="images/button3.jpg" alt="follow me" width="220" height="65"></a></li>
</ul>
・・省略・・
</body>
</html>
