宮島研究室 - Since 2006.10.20
jQueryのサンプル集

JavaScriptライブラリ「jQuery（ジェイクエリ）」を使って、別ファイルからデータを取得して、自分のホームページに表示する方法を紹介します。

具体的に何が出来るの？

何はともあれ、下のテーブル（表）と、そのソースを見比べてみてください。

ソースの "tbodyタグ" 内には「JavaScriptを有効にしてください」としか書かれていないのに、画面には表データが表示されていると思います。

スコッチウイスキーの銘柄
銘柄銘柄（日本語）意味地方
ブラウザのJavaScriptを有効にしてください。

これは、このページを表示完了した後に、新たに、このページとは "別のファイル" のデータを解析（パース）して、表示しているからです。

ちなみに "別のファイル" は「これ」です。（スタイルシートで整形しています）


と言うわけで、どうやったらこんなことが出来るのか、難しいことはヌキで紹介していきたいと思います。

テスト

まずは、別ファイル（テキストファイル）を読み込み、その内容を表示してみます。


テストサンプルを表示する→■


■test.txt

Hello, world!

■test.html

<html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('body').load('test.txt');
		});
	</script>
</head>
<body>ブラウザのJavaScriptを有効にしてください。</body>
</html>

3行目がjQuery本体の読み込み、4～8行の "$" で始まる命令がjQueryの命令です。

具体的には、【5行目】ページの準備が出来たら、【6行目】"bodyタグ" 内を「test.txt」の内容（Hello, world!）に書き換える、というテストサンプルです。


余談ながら、6行目の "body" をdivやspan等、任意のhtmlタグに変更することで、任意の場所の書き換えも可能です。

（例えばホームページの「Since 1999 - 20xx」の「xx」を、毎年いちいち書き換える手間が省けるとか ^^;）

cssの要領で、タグの後ろに "class名" や "ID名" を指定することも出来ます。

サンプル その1

外部XMLファイルsample.xmlから取得したデータを、テーブル化して表示するサンプルコードです。


サンプルを表示する→■


■sample.xml

<?xml version="1.0" encoding="Shift_JIS"?>
<items>
	<item>
		<distiller>Laphroaig</distiller>
		<translation>ラフロイグ</translation>
		<mean>広い湾の美しい窪地</mean>
		<region>アイラ</region>
	</item>
	<item>
		<distiller>Lagavulin</distiller>
		<translation>ラガヴーリン</translation>
		<mean>水車小屋のある窪地</mean>
		<region>アイラ</region>
	</item>
	<item>
		<distiller>The Glenlivet</distiller>
		<translation>ザ・グレンリベット</translation>
		<mean>静かな谷</mean>
		<region>スペイサイド</region>
	</item>
	<item>
		<distiller>The Macallan</distiller>
		<translation>マッカラン</translation>
		<mean>聖フィラン氏の土地</mean>
		<region>スペイサイド</region>
	</item>
	<item>
		<distiller>Auchroisk</distiller>
		<translation>オスロスク</translation>
		<mean>赤い流れを渡る浅瀬</mean>
		<region>スペイサイド</region>
	</item>
	<item>
		<distiller>Speyburn</distiller>
		<translation>スペイバーン</translation>
		<mean>？</mean>
		<region>スペイサイド</region>
	</item>
	<item>
		<distiller>Glenfiddich</distiller>
		<translation>グレンフィディック</translation>
		<mean>鹿の谷</mean>
		<region>スペイサイド</region>
	</item>
	<item>
		<distiller>Talisker</distiller>
		<translation>タリスカー</translation>
		<mean>傾いた岩</mean>
		<region>ハイランド</region>
	</item>
	<item>
		<distiller>Glenrothes</distiller>
		<translation>グレンロセス</translation>
		<mean>丸い砦の谷</mean>
		<region>スペイサイド</region>
	</item>
	<item>
		<distiller>Glen Garioch</distiller>
		<translation>グレンギリー</translation>
		<mean>谷間の荒れた土地</mean>
		<region>ハイランド</region>
	</item>
	<item>
		<distiller>Caol Ila</distiller>
		<translation>カリラ</translation>
		<mean>アイラ海峡 (Sound of Islay)</mean>
		<region>アイラ</region>
	</item>
	<item>
		<distiller>Ardbeg</distiller>
		<translation>アードベック</translation>
		<mean>小さな岬</mean>
		<region>アイラ</region>
	</item>
	<item>
		<distiller>Bowmore</distiller>
		<translation>ボウモア</translation>
		<mean>大きな岩礁</mean>
		<region>アイラ</region>
	</item>
</items>
データ作成参考：[1][2][3][4]

■sample1.html

<html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$.get('sample.xml','xml',function(_xml){
				$('table.scotch tbody tr').remove();
				$('item',_xml).each(function(){
					var _distiller = $('distiller',this).text();
					var _translation = $('translation',this).text();
					var _mean = $('mean',this).text();
					var _region = $('region',this).text();
					var _html = '<tr><td>' + _distiller + '</td><td>' + _translation + '</td><td>' + _mean + '</td><td>' + _region + '</td></tr>';
					$('table.scotch tbody').append(_html);
				});
			});
		});
	</script>
</head>
<body>
	<table class="scotch">
		<thead>
			<tr><th>銘柄</th><th>銘柄（日本語）</th><th>意味</th><th>地方</th></tr>
		</thead>
		<tbody>
			<tr><td colspan="4">ブラウザのJavaScriptを有効にしてください。</td></tr>
		</tbody>
	</table>
</body>
</html>

【6行目】xmlファイル「sample.xml」のデータを、変数 "_xml" に読み込む。

【7行目】class名が "scotch" の "tableタグ" 内の、"tbodyタグ" 内の、"trタグ" 内の、内容（ブラウザのJavaScriptを…）を削除。

【8行目】繰り返し命令。変数_xml（sample.xmlを読み込んだもの）内の、"itemタグ" を検索してループ。

【9行目】検索中のタグ内から、"distiller" タグを検索して、内容を、変数 "_distiller" に代入。

【13行目】変数 "_html" に表データの元となるhtmlタグ群を代入。

【14行目】class名が "scotch" の "tableタグ" 内の、"tbodyタグ" 内の、末尾にhtmlタグ群を追加。

サンプル その2

先ほどとほぼ同じ。テーブルの偶数行と奇数行の背景色を変えるバージョン。


サンプルを表示する→■


■sample2.html

<html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$.get('sample.xml','xml',function(_xml){
				$('table.scotch tbody tr').remove();
				$('item',_xml).each(function(){
					var _distiller = $('distiller',this).text();
					var _translation = $('translation',this).text();
					var _mean = $('mean',this).text();
					var _region = $('region',this).text();
					var _html = '<tr><td>' + _distiller + '</td><td>' + _translation + '</td><td>' + _mean + '</td><td>' + _region + '</td></tr>';
					$('table.scotch tbody').append(_html);
				});
				$('table.scotch tbody tr:even').css('background-color','lightgrey');
				$('table.scotch tbody tr:odd').css('background-color','grey');
			});
		});
	</script>
</head>
<body>
	<table class="scotch">
		<thead>
			<tr><th>銘柄</th><th>銘柄（日本語）</th><th>意味</th><th>地方</th></tr>
		</thead>
		<tbody>
			<tr><td colspan="4">ブラウザのJavaScriptを有効にしてください。</td></tr>
		</tbody>
	</table>
</body>
</html>

【16行目】class名が "scotch" の "tableタグ" 内の、"tbodyタグ" 内の、偶数行の "trタグ" に、背景色lightgreyを指定。

【17行目】class名が "scotch" の "tableタグ" 内の、"tbodyタグ" 内の、奇数行の "trタグ" に、背景色greyを指定。

サンプル その3

応用編。

先頭データ5件のみを表示するバージョン。読み込むXMLファイルは同じ。


サンプルを表示する→■


■sample3.html

<html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$.get('sample.xml','xml',function(_xml){
				$('table.scotch tbody tr').remove();
				$('item',_xml).each(function(i){
					if(i>4){
						return false;
					}
					var _distiller = $('distiller',this).text();
					var _translation = $('translation',this).text();
					var _mean = $('mean',this).text();
					var _region = $('region',this).text();
					var _html = '<tr><td>' + _distiller + '</td><td>' + _translation + '</td><td>' + _mean + '</td><td>' + _region + '</td></tr>';
					$('table.scotch tbody').append(_html);
				});
			});
		});
	</script>
</head>
<body>
	<table class="scotch">
		<thead>
			<tr><th>銘柄</th><th>銘柄（日本語）</th><th>意味</th><th>地方</th></tr>
		</thead>
		<tbody>
			<tr><td colspan="4">ブラウザのJavaScriptを有効にしてください。</td></tr>
		</tbody>
	</table>
</body>
</html>

【8行目】ループ回数を、変数 "i" に代入。

【9～10行】ループ回数が5より大きい（0からカウントされるので判定式は "4"）場合はループ終了。それ以上itemタグを検索しない。

サンプル その4

同じXMLファイルを、テーブルではなく、リストにして表示するバージョン。


サンプルを表示する→■


■sample4.html

<html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$.get('sample.xml','xml',function(_xml){
				$('ol.scotch li').remove();
				$('item',_xml).each(function(){
					var _distiller = $('distiller',this).text();
					var _translation = $('translation',this).text();
					var _mean = $('mean',this).text();
					var _region = $('region',this).text();
					var _html = '<li>' + _distiller + '<ul><li>読み：' + _translation + '</li><li>意味：' + _mean + '</li><li>地方：' + _region + '</li></ul></li>';
					$('ol.scotch').append(_html);
				});
			});
		});
	</script>
</head>
<body>
	<ol class="scotch">
		<li>ブラウザのJavaScriptを有効にしてください。</li>
	</ol>
</body>
</html>

【14行目】class名が "scotch" の "olタグ" 内の、末尾にhtmlタグ群を追加。

サンプル その5

応用編。

先ほどのリストを「折りたたみ/展開」することが出来るバージョン。


サンプルを表示する→■


■sample5.html

<html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$.get('sample.xml','xml',function(_xml){
				$('ol.scotch li').remove();
				$('item',_xml).each(function(){
					var _distiller = $('distiller',this).text();
					var _translation = $('translation',this).text();
					var _mean = $('mean',this).text();
					var _region = $('region',this).text();
					var _html = '<li><h4>' + _distiller + '</h4><ul><li>読み：' + _translation + '</li><li>意味：' + _mean + '</li><li>地方：' + _region + '</li></ul></li>';
					$('ol.scotch').append(_html);
				});
				$('ol.scotch li h4').each(function(){
					$(this).css({'color':'blue','cursor':'pointer','text-decoration':'underline'});
					$(this).next().hide();
				});
				$('ol.scotch li h4').click(function(){
					$(this).next().toggle();
				});
			});
		});
	</script>
</head>
<body>
	<ol class="scotch">
		<li>ブラウザのJavaScriptを有効にしてください。</li>
	</ol>
</body>
</html>

【13行目】"liタグ" の直下に、"h4タグ" で「見出し」を作っているのがミソ。

【16行目】class名が "scotch" の "olタグ" 内の、"liタグ" 内の、"h4タグ" を、検索してループ。

【17行目】同タグに、文字色blue、マウスカーソルをリンクカーソルに、文字に下線、を指定。

【18行目】同タグの、"子要素" を、非表示。

【20行目】同タグがクリックされたときに呼び出される関数を作成。

【21行目】同タグの、"子要素" が、非表示なら表示に、表示なら非表示にする。


"olタグ" だけでなく、"ulタグ" も同時に折りたたみたい場合は、「ol.scotch」を「.scotch」に変更すればOK。

おわりに

今回は、jQueryを "極力簡単" に紹介することが目的だったので、プログラムリストの文字コードは "シフトJIS" なのに、実際のサンプルでは "UTF-8" になっています。ご了承くださいませ。

もひとつ、検索したいタグを、やたら丁寧に列挙しているのは、jQueryの検索処理の高速化のためです。どれ程の効果かは不明ですが。

Copyright © 2006-, Takeshi Miyajima All Rights Reserved.▲ページの先頭へ