ドキュメント

チュートリアル: デザイナーのための jQuery

出典: jQuery JavaScript ライブラリ

Web ページに簡単な動作を追加する控え目な JavaScript の作成例

オリジナル: http://www.ok-cool.com/posts/read/1-jquery-for-designers-part-1
作者: Mark Panay

類似のチュートリアル: SelectorsManipulationEffectsEvents

目次

パート 1

自分の場合、セマンティックマークアップについては、いささかコダワリがある。特に、あとで変えたくなるような視覚的記号のたぐいは、マークアップには入れたくない。ここで視覚的記号というのは、文の終わりや始めに入れるあの小さな記号のことだ。そういう記号は、もう文字的なシンボルとして使わないことも多い。

たとえばフォームを作るとき、label テキストの最後にコロンを埋め込むのは自分には苦痛だ。もちろん、なんでそうするかは分かっている。input ボックスの前でひと呼吸置いて、ユーザーが読みやすいように、わかりやすいようにするためだ。で、いつものことながらクライアントはクライアントで、コロンをハイフンに変えてくれないか、カンマにしてくれないか、と要求してくるわけだ。そうなると、こちらもつい頑張ってしまうのだけれど、全部のページのマークアップにコロンを埋め込んでしまっているものだから、サイト全体でコロンを検索して置換する作業は、せっかくのんびり過ごしていた時間を台無しにしてくれるのに十分だ。

CSS でラクができる?

頭のいい W3C の人たちは、“:before” と “:after” というすばらしい疑似クラスを用意してくれている。これを使うと、要素の前や後にコンテンツを追加できる。しかしすでに読者もご存じかもしれないが、ほんとうに役立つこれらのツールも、Internet Explorer では使えないのだ。では、ほかにどんな手があるだろうか。

JavaScript を使ってみる?

ノー、自分はデザイナーだ。JavaScript はわからないし、ごちゃごちゃしていて見にくいし、使いづらい。ユーザビリティの点からいってもダメだし、ページが無用に複雑になる。まあ、でもやってみようか…。

魔法の小道具

ちょっとの間だけ、とある魔法の小道具があって、マークアップに挿入できると仮定しよう。その小道具を使うと、プログラミングが得意でなくても、ありとあらゆる気の利いたことが、いとも簡単にできてしまう。それでいて、自分がきれいに書き上げたマークアップがごちゃごちゃになってしまうこともない。その魔法の小道具はこんな具合にして使う。

 <script src="http://jquery.com/src/jquery-latest.js"></script>
 <script type="text/javascript">
   $(document).ready(function(){
     $("dd label").append(":");
   });
 </script>

タネもシカケもない。もちろん魔法でも何でもない。ページのソースを見ればわかるけれど、マークアップにはコロンは書いていないんだ。

最初に jQuery JavaScript をリモートからインクルードしているけれど、これは単に便宜上そうしているだけだ。スピードのことを考えると、実行時環境ではこういうやり方はお勧めしない (ただし、このやり方を使えば、常に最新のバージョンが使えるという利点はある)。次に、ページ内のすべての dd 内で label を探し、ラベル内部の最後にコロンを追加する関数をセットアップする。この関数は、ページが “ready” になるまで何もしない。ページが “ready” になったかどうかは、script タグを閉じる前の JavaScript の最後の部分で判定される。

要素の先頭にコロンを追加したい場合には、“append” の代わりに “prepend” を使えばいい。たとえば、次のようにする。

 $("dd label").prepend(":");

これ以上どうやったって簡単にはできないし、自分が書いた美しいマークアップにもいっさい手はつけていない。

もちろん、これはサイト全体に適用したいから、この JavaScript は別のファイルに格納して、サイトのどのページでもこれをインクルードするようにする。

 <script src="http://jquery.com/src/jquery-latest.js"></script>
 <script src="scripts/myjavascript.js"></script>

これで、label を持った dd 要素があるページでは、label 要素の最後にコロンが付く。クライアントがコロンを別のものに変えてほしいと言ってきたら、ごくわずかな編集作業をするだけで、サイト全体がきちんとしかるべき状態に更新される。

このテクニックを使う場合のデメリットは、ユーザーが JavaScript を有効にしている必要があるという点だ。でも、大部分のユーザーは JavaScript を有効にしている。そうでない場合のリスクは自分で引き受ける必要があるけれど、上の例では実際に JavaScript が有効でないときのマイナスはそれほど大きくない。

以上でおわかりのとおり、jQuery の威力はすごいのだけれど、これはまだほんの序の口。jQuery の詳しいことについては、jQuery ホームページを参照してほしい。

パート 2 では、jQuery を使った例をさらにいくつか示す。コロンの代わりに画像を使うには? ラベルのテキストの代わりに画像を使うには? などなど。

パート 2

パート 1 では、jQuery を使うことで、ブラウザによる CSS の処理の違いの一部を「吸収」できることを示した。タグの内部にちょっとした情報を追加するのに jQuery を使えば、サイト全体の視覚的記号の変更もきわめてスピーディかつ容易にできてしまう。

パート 2 では、もう少しいろいろなことを試してみる。最近のほとんどの Web サイトには、“news” ページというのが用意されていて、“title” (タイトル)、“summary” (サマリー)、そして記事の “body” (本文) が表示されるようになっている。私見だけれど、こういうページでは目の前に表示されるテキストがしばしば多過ぎるように思う。もちろん、気にならないという人もいるだろう。でも自分の場合は、もしテキストがたくさん表示されたら、即座に脳が機能を停止してしまいそうだ。そして、マウスのボタンをクリックして早々と別のページに移動してしまうだろう。

こうしたらどうだろう…

こうしたらどうだろう。各記事の下に小さなボタンを用意して、必要なときだけ記事本文が表示されるようにし、それまでは記事のサマリーだけが表示されるようにするのだ。もちろん、その方がいいだろうし、jQuery を使えばそういうこともすぐにできる。たとえば、こんな具合だ。

では作業に着手

その前に、すでに作成しておいた、美しく扱いやすい、セマンティック的にもストリクトな XHTML コードについてちょっと見ておこう。作成したページには、“title”、“summary”、そして “body” がすでに表示されている。したがって、記事の本文を非表示にして、本文の下に「ボタン」を配置する必要がある。でも、ページに直接「ボタン」を配置すると、JavaScript を有効にしていないユーザーがいた場合、そのボタンは何の機能も持たないことになる。これではユーザビリティに問題アリだ。

ダメなボタンはダメ

ということで、まず JavaScript が有効になっている場合にだけ、ボタンを追加する必要がある。幸い、パート 1 で同じようなことをやっているので、何となくやり方はわかる。JavaScript の中で prepend を使って、ボタンを追加すればいい。

現物を見せて...

作成する JavaScript の最初の部分は次のようになる。

 <script src="http://jquery.com/src/jquery-latest.js"></script>
 <script>
   // ページが ready になったとき
   $(document).ready(function(){
     $(".article .thebody").hide();
     $("#container .article ul")
       .prepend("<li class='readbody'><a href='' title='Read the article'>Read Body</a></li>");
   });
 </script>

このチュートリアルのパート 1 を読んでいれば、それほどむずかしくないと思う。このスクリプトが適用される HTML マークアップの方は、次のような内容になっている。

 <div id="container">
   <div class="article">
     <h3>Title 01</h3>
     
     <p class="summary">Summary 01</p>
     <p class="thebody">Lorem ipsum....</p>
     
     <ul class="actions">
       <li><a href="">comment</a></li>
       <li><a href="">Trackback</a></li>
     </ul> 
     
   </div>
   
   <div class="article">
     <h3>Title 02</h3>
     
     <p class="summary">Summary 02</p>
     <p class="thebody">Lorem ipsum....</p>
     
     <ul class="actions">
       <li><a href="">comment</a></li>
       <li><a href="">Trackback</a></li>
     </ul>
   </div>
 </div>

したがって、上の JavaScript では、まず .thebody クラスのコンテンツがすべて非表示になり、これで “body” (本文) のテキストが隠される。次に、.article の中から UL を探し、その前に LI とリンクを追加して、UL 内に “Read Body” を表示する。

要するに、すべての記事の本文を非表示にし、記事に含まれるすべての番号なしリストに、リンクをもうひとつ挿入する。ここまでは簡単だったが(だったかな?)、ここから JavaScript の奥深くて暗い領域に踏み込んで、目的の機能を実現しなければならない。

 <script src="http://jquery.com/src/jquery-latest.js"></script>
<script> //<![CDATA[ // ページが ready になったとき $(document).ready(function(){ $(".article .thebody").hide(); $("#container .article ul") .prepend("<li class='readbody'><a href='' title='Read the article'>Read Body</a></li>"); $(".actions li.readbody a").click(function(event){ $(this).parents("ul").prev(".thebody").toggle(); // リンクをクリックしてもデフォルトの動作を行わないようにする event.preventDefault(); }); }); //]]></script>

暗くて深い領域?

どうだろう。思ったほど、暗くも深くもないのでは? でも、かなり難解かもしれない。ざっと説明すると、上のコードでは、追加したリンクを探し、.thebody クラスが見つかるまで HTML を逆にたどる。もし見つかれば、表示と非表示を切り替え、リンクのデフォルトの動作を無効にする (ほかのページに飛んだり、ページをリロードしたりする動作が行われないようにする)。

次のサンプルで、"Read Body" というリンクをクリックして、実際にどういう動作をするか確認してほしい。

Title 01

Summary 01

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla viverra aliquet mi. Cras urna. Curabitur diam. Curabitur eros nibh, condimentum eu, tincidunt at, commodo vitae, nisi. Duis nulla lectus, feugiat et, tincidunt nec, iaculis vehicula, tortor. Sed tortor felis, viverra vitae, posuere et, ullamcorper a, leo. Suspendisse euismod libero at orci. Pellentesque odio massa, condimentum at, pellentesque sed, lacinia quis, mauris. Proin ultricies risus cursus mi. Cras nibh quam, adipiscing vel, tincidunt a, consequat ut, mi. Aenean neque arcu, pretium posuere, tincidunt non, consequat sit amet, enim. Duis fermentum. Donec eu augue. Mauris sit amet ligula.

Title 02

Summary 02

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla viverra aliquet mi. Cras urna. Curabitur diam. Curabitur eros nibh, condimentum eu, tincidunt at, commodo vitae, nisi. Duis nulla lectus, feugiat et, tincidunt nec, iaculis vehicula, tortor. Sed tortor felis, viverra vitae, posuere et, ullamcorper a, leo. Suspendisse euismod libero at orci. Pellentesque odio massa, condimentum at, pellentesque sed, lacinia quis, mauris. Proin ultricies risus cursus mi. Cras nibh quam, adipiscing vel, tincidunt a, consequat ut, mi. Aenean neque arcu, pretium posuere, tincidunt non, consequat sit amet, enim. Duis fermentum. Donec eu augue. Mauris sit amet ligula.

Title 03

Summary 03

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla viverra aliquet mi. Cras urna. Curabitur diam. Curabitur eros nibh, condimentum eu, tincidunt at, commodo vitae, nisi. Duis nulla lectus, feugiat et, tincidunt nec, iaculis vehicula, tortor. Sed tortor felis, viverra vitae, posuere et, ullamcorper a, leo. Suspendisse euismod libero at orci. Pellentesque odio massa, condimentum at, pellentesque sed, lacinia quis, mauris. Proin ultricies risus cursus mi. Cras nibh quam, adipiscing vel, tincidunt a, consequat ut, mi. Aenean neque arcu, pretium posuere, tincidunt non, consequat sit amet, enim. Duis fermentum. Donec eu augue. Mauris sit amet ligula.

さて、以上でこのチュートリアルはおしまい。既存のサイトにちょこっと手を加え、気の利いた使いやすい JavaScript を使って、サイトのユーザビリティを向上させてみた。JavaScript を CDATA タグで囲んでいることにお気付きかもしれない。これは、XHTML 検証システムがエラーを返すのを防ぐためで、ページを検証すると「厳密に準拠」という結果が得られる。