目次

jQueryの使用例

jQuery

jQueryはJavaScriptのライブラリです．非常に軽量で，CSSに似た方法で記述できるので，プログラミング初心者にもわかりやすいです．

jQueryの詳細は，『現場のプロから学ぶ XHTML+CSS』の「8-4 jQueryを使ってみよう」参照．

JavaScript

JavaScriptの起源は，ウェブページの処理能力を高めるためにNetscape社が開発したScript言語です．その後，いくつかの段階を経て，ヨーロッパの標準機関ECMAがJavascript 1.1をベースに，ECMAScriptとして標準化しました．

JavaScriptは非常に多くのことができるので，現在のウェブには欠かせない基本的な技術となっています．JavaScriptを適切に使えば，ユーザがウェブページをインターラクティブに利用できるようになり，ウェブのユーザビリティが向上します．しかし不適切な使い方をすると，とても使いにくいウェブページになってしまいます．

JavaScriptは，単なるScript言語ではなく，マウスがクリックされたとかボタンを押したとかのイベントを拾ったり，ウェブページの DOM(Document Object Model)を操作してダイナミックにページを書き換えたりすることもできます．最近はやりのGoogle Mapも，ユーザ側のインターラクションを実現する技術として，JavaScriptを使っています．

JavaScriptとJavaは直接関係ありませんが文法はよく似ているので，Javaを習ったことがある人なら理解しやすいと思います．

コンテンツの構造をXHTMLでマークアップし，コンテンツの表現をCSSで指定していれば，JavasScriptで動的にあるいはスマートにXHTMLとCSSを変更することができます（つまり，ユーザの操作によって或いは自動的に，コンテンツを書き換えたり表示スタイルを変更したりできます．）．豊かなインターラクションを提供するためのライブラリ（よく使う機能をまとめたプログラムの集まり）のひとつがjQueryです．

JSライブラリのアクセシビリティ

2010年度の渡辺ゼミの卒論で，代表的なJavaScriptライブラリ（Dojo,jQuery,Yahoo UI）のアクセシビリティ対応度を調査しました．「動的なウェブのアクセシビリティ―Dojo,jQuery,YUIの調査―」として一般公開しています．

目次の自動作成

「目次の自動生成を行う jQuery.exTOC.js」を利用しました．皆さんも下記手順で目次を作成できます．

  1. 下記ファイルを，XHTMLファイルの下に作成したjsフォルダーにダウンロード．
  2. XHTMLファイルのhead部に下記コードを書き込む．
    3. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="自分のURL/js/extoc_1_0.js"></script>
<link rel="stylesheet" type="text/css" href="自分のURL/js/ex_TOC.css" />
<script type="text/javascript">
  <!--
	  $(function(){
	  $('h2.TOC').exTOC({
	  contents: 'div.content',
	  headFrom : 2,
	  headTo : 4,
	  insertMethod : 'after',
	  numberinghead: true,
	  smooth: false
	  });

	  $('h2[class!="TOC"]').before('<p class="TOCBackLink"><a href="#TOC">[目次]に戻る<\/a><\/p>');
	  });
  -->
</script>

    1行目はjQueryのサイトから直接jQueryを読み込んでいます．2行目と3行目でダウンロードした目次作成用のJavaScriptとCSSを読み込んでいます．4行目からは，目次作成の細かい指定です．また，目次に戻るリンクも自動挿入しています．目次作成の指定などに関する詳細は，「目次の自動生成を行う jQuery.exTOC.js」参照．

  3. XHTMLファイルのbody部の目次を入れたい箇所に下記コードを書き込む． 
    <h2 class="TOC" id="TOC">目次</h2>
<!-- ここに下記divブロック内にある見出しを利用した目次が挿入される -->
  4. 目次に含めたいコンテンツ全部を，class属性が"content"のdiv要素で囲む．(例：<div class="content">)
  5. このページ自体がこの仕組みで目次を付けているので，上記の説明を参照しながらこのページのソースも見てみると良いと思います．

タブパネル表示

jQueryのUIタブを用いて，複数のコンテンツ（ページ）をタブパネルで表示することもできます．違うページに移動する必要がないので便利だと思います．『現場のプロから学ぶ XHTML+CSS』の271ページにも「jQueryでタブパネルを実現」で詳しく説明されていますが，下記使用例のXHTMLソースを真似すれば簡単．

タブパネルの使用例：「jQuery版：タブパネルと目次作成」

参考：「JavaScript Tips jQuery UIタブ」とか，「jQuery UI Tabs」とか．

そのほか

ストライプテーブル

テーブルの偶数行と奇数行で背景色を分ける例が，『現場のプロから学ぶ XHTML+CSS』の267ページから説明されています．

jPlayer

（XHTMLにもCSSにもJavaScriptにもマルチメディアコンテンツを再生する能力がないので裏でFlashを使っているのですが，）MP3プレーヤのような外観と操作性を持つjQueryのプラグインを見つけました．

jPlayerを使ったMP3演奏サイトのデモ

注意

jQueryは他にもいろいろできますが，残念ながらアクセシビリティ的に問題がある機能が多いです．

2011年07月07日 16:31
渡辺隆行