jQueryでティッカー

jQueryでティッカーを作ってみました。動作はリストの内容を順番にフェードアウト・フェードインしながら表示していくという単純な仕様です。

jQueryでティッカー

ソースは以下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8" />
<title>jQueryでティッカー</title>
<script type="text/javascript" src="../jquery-1.2.6.min.js"></script>
<script language="JavaScript">
$(function(){
	var dispNum = 0;
	$('#ticker ul, #ticker ul li').hide();
	dispList();
	function dispList() {
		$('#ticker span').fadeOut(
			700,
			function(){
				var liNum = $("#ticker ul li").size();
				if(dispNum > (liNum-1)) {
					dispNum = 0;
				}
				$(this).html($("#ticker ul li:eq("+dispNum+")").html()).fadeIn(700);
				dispNum++;
				if(1 <  liNum) {
					setTimeout(dispList,7000);
				}
			}
		);
	}
});
</script>
<style type="text/css">
#ticker {
	width: 500px;
	border: 3px double #000000;
	color: #ffffff;
}
#ticker .msg {
	padding: 5px;
	background: #000000;
}
#ticker .msg a {
	color: #ffffff;
}
</style>
</head>
<body>
<h1>jQueryでティッカー</h1>
<div id="ticker">
<div class="msg">NEWS : <span></span></div>
<ul>
<li><a href="#1">■■■■■■■■■■■■■■■■</a></li>
<li><a href="#2">○○○○○○○○○○○○○○○○</a></li>
<li><a href="#3">▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲</a></li>
<li><a href="#4">□□□□□□□□□□□□□□□□</a></li>
<li><a href="#5">●●●●●●●●●●●●●●●●</a></li>
</ul>
</div>
</body>
</html>

表示の切り替えスピードは「setTimeout(dispList,7000);」の数字で調整できます。

リストはjQueryのhideで隠すようにしていますが、ページの容量があると読み込み時にリストが表示されてしまいます。それが嫌な場合はulに「display: none;」を指定しておけば表示されません。

次は何作ろうかな?

iiyama 19型ワイド液晶ディスプレイ ProLite E1902WS-B1(ブラック) PLE1902WS-B1

iiyama 19型ワイド液晶ディスプレイ ProLite E1902WS-B1(ブラック) PLE1902WS-B1 [不明]

価格¥ 40,937

出版社マウスコンピューター

商品カテゴリーエレクトロニクス

特徴液晶, HDMI端子(入)数:0 / USB機能:なし / スピーカ内蔵 / TV機能無し, 光沢加工:ノングレア / 輝度(cd/m2):400 / バックライト:CCFL / 3D映像:非対応 / タッチパネル:非対応

Supported by amazon Product Advertising API

Westinghouse 22インチワイドモニター 液晶モニター ブラック L2210NW

Westinghouse 22インチワイドモニター 液晶モニター ブラック L2210NW [不明]

価格¥ 40,937

出版社ウェスティングハウスデジタルエレクトロニクスジャパン

商品カテゴリーPersonal Computers

特徴液晶, HDMI端子(入)数:0 / USB機能:なし / スピーカ内蔵 / TV機能無し, 光沢加工:ノングレア / 輝度(cd/m2):300 / バックライト:CCFL / 3D映像:非対応 / タッチパネル:非対応

Supported by amazon Product Advertising API

jQueryでAjaxチャット

jQueryの$.ajax触りがてら、$.getJSONも使ってAjaxチャットを作ってみました。

jQueryでAjaxチャット

チャットは今まで一回も作ったことがなかったので今イチやりかたがわからなかったんですが、やっぱりがつがつデータをとりにいくしかないようでsetTimeoutを使いました。一応IBMのページに書いてあったように更新されたデータだけを取りにいくようにしたけど、PHP側を修正する必要があるな…。

しかしチャットは結構難しいですね。今回はめっちゃ簡単なものにしているので完成度はかなり低いですが、インタフェイスや仕様を本気で考えるとなかなか骨が折れそうなかんじです。

今回は簡易チャットということで仕様もあまり決めず適当に作ってしまったので、動作不良が多々あるやもしれませんが、まあせっかく作ったので公開してみます。(今回も初心者まるだしのソースなので見たい方は直接ソースをのぞいてやってください。)

参考ページ
Ajax と XML: チャットのための Ajax

jQueryで楽天検索

先日の「jQueryでAmazon検索」に引き続き楽天検索ページを作ってみました。

jQueryで楽天検索

【楽天ウェブサービス】RAKUTEN WEBSERVICE」を利用し、PHPでデータを取得しjQueryで処理をさせています。

前回のAmazon検索では「xml形式」でデータを取得していましたが、今回は「json形式」でデータを取得しています。ついでに「timeout:3000」のパラメータを追加し、3秒以内に結果が返ってこない場合はエラーになるようにしてみました。

$.ajax、それにしても便利ですね!成功、エラー、タイムアウト等の処理もパラメータを設定することで簡単にできてしまいます。

Amazonか楽天APIを利用して、なんかサイトつくってみようかな?

参考ページ
$.ajax(options) [ jQuery ] – StackTrace
[Think IT] 第1回:JSONってなにもの? (1/3)