<a href="http://www.dimages.jp/"><img alt="dimages_v3.png" src="/legacy/images/dimages_v3.png" width="450" height="359" /></a>

<a href="http://www.dimages.jp/">ディマージュ【Dimages】鈴木真由美ドライフラワー教室</a>



思えば、２年前（３年前か？）バイト時代に業務時間外で作ったのが最初でした。当時のデザイン、コーディングを見ると、自分も進歩したなあとつくづく感じます。Dimages さんのサイトは僕のマイルストーンのようです。

# JavaScript によるロールオーバー

<a href="http://css-happylife.com/log/javascript/000157.shtml">CSS Happy Life</a> さんのスクリプトを使わせて頂きました。

ロールオーバーの方法はいろいろあって、最近はCSSの画像置換法が主流なんでしょうか。僕も一時期、画像置換法に染まっていたんですが、この方法は特定の環境でアクセシブルでないこともあって、疑問を唱える人（ブログ）も出てきています。

かといって、Dreamweaver のビヘイビアはイベントハンドラをHTMLに直接書いてしまったり、画像のソースを１つずつプリロードしたり、使い勝手がよろしくない。

その点、このスクリプトはHTMLを汚さないし、１個１個プリロードする必要もありません。画像の名前を管理する必要がありますが、その点はまったく気になりません。JavaScript のない環境でもロールオーバーしなくなるだけで表示に問題はありません。

また、イベントリスナーの仕組みを使っているので、他の JavaScript との競合も避けられます。すばらしい。

# <a href="http://www.livevalidation.com/">LiveValidation</a>

今回、<a href="http://www.futomi.com/">futomi's CGI Cafe</a> さんのフォームを導入しました（お金払わなきゃ）。「入力＞確認＞完了」のプロセスが踏めて、必須事項も自由に設定でき、管理者宛メールとサンキューメールが送信できる、かなり理想に近いCGIフォームです。

１点だけ欲を言えば、エラーメッセージは入力画面で表示したい、しかも入力事項の直近に表示したい、というのがあって、その部分を LiveValidation という JavaScript ライブラリを使って実装してみました。

LiveValidation には、入力値の有無、完全一致、正規表現でのフィルタリング、メールアドレスチェックや、フォーム全体の判定などの関数が組み込まれていて、JavaScript が動作する環境でさえあれば、CGI側のエラーページが必要なくなってしまいました（もちろんそれ以外の環境では必要ですが）。

エラーメッセージの表示位置はコンストラクタで id（ドキュメントオブジェクト） を指定することで可能です（コメントを見ると `insertAfterWhatNode {Int}` って書いてあるけど integer じゃないよね？？？）。

<img alt="dimages_v3_inquiry.png" src="/legacy/images/dimages_v3_inquiry.png" width="450" height="364" />

# はじめての正規表現

ちなみに、今回初めて正規表現を使いました。これが僕のはじめての正規表現です。

```
^[-\d]+$
```

「数字かハイフンで１文字以上」を表します。

日本の電話番号を正規表現で表すとこうなるそうです。
<a href="http://blog.livedoor.jp/nipotan/archives/50634795.html">二度目の公開！電話番号の正規表現</a>
うは！！！電話番号はハイフンの位置が一定でないのでこんなになるんですね。

Archive for 2007.09

Dimages ２回目のリニューアル