読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

setInterval()を使って、JavaScriptでタイマーで設定した一定時間ごとに動作を繰り返す(定期更新/実行する)サンプル

<スポンサーリンク>

今日は正月であまり食事に出る気にもならず、ピザを取ることにした。

ドミノ・ピザはネットで注文ができる。
注文してみたところ、注文完了後、「オーダー状況追跡システム」なるものが。

ドミノ・ピザはこちら↓
http://www.dominos.jp/

楽しそうだから見てみると、以下の図のように、(ほぼ)リアルタイムで、現在の注文のステータスを表示してくれるものだった。
f:id:sho322:20140103162005j:plain

このリアルタイムのブラウザ更新はどうやってやってるんだろう?
WebSocketでも使ってるのかな?
と、気になってこのドミノ・ピザのオーダー追跡システムどうやって実装してるんだろうと思ってソースを見てみると、一部にこんなソースが書いてあった(当然、丸々抜粋はできないため、興味のある人はドミノ・ピザを注文して覗いてみてほしい)

ちなみに、ピザ自体は注文して20分くらいで届いた。
ホクホクとあったかい、とても美味しいピザだった。

<script type="text/javascript">
var webOrderNo = 34983276;
$(function() {
	$('.trackimg').hide();
	update();
	check = setInterval("update()",10000);
});
function update(){
    $.ajax({
        url: '/order/webapi/tracking/orderStatus/',
        type: 'GET',
        dataType: 'json',
        cache : false,
        data: {webOrderNo:webOrderNo}
      })
      .done(function(res) {
    	  changeImage(res);
      });
}
//省略
</script>

ドミノ・ピザのサイトではsetInterval関数を使って、(リアルタイムではないが)定期的な更新処理を行っていた。
せっかく面白いものを見つけたので、実際にsetInterval()を使って、定期的に更新処理を実現するサンプルを作ってみる。
まずはサーバサイドから。とりあえず簡単なJavaで。

Eclipsetomcatプロジェクトを作成する

パッケージエクスプロータで右クリック「新規」→「その他」→「Java」→「tomcatプロジェクト」でOK。

サーブレットを作成する

package controller;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class PrintServlet extends HttpServlet {
	private int count = 0;
	public void doGet(HttpServletRequest req, HttpServletResponse res)
					throws IOException, ServletException {
		res.setContentType("text/html; charset=utf-8");
		res.setCharacterEncoding("UTF-8");
		PrintWriter out = res.getWriter();
		count++;
		out.println("リクエストを受け付けました!:" + count + "回目");
		System.out.println("リクエストを受け付けました!:" + count + "回目");
	}
}

単純に数を足して、コンソールにリクエストされた数を表示するサンプル。

web.xmlを編集する

デフォルトのTomcatプロジェクトには「web.xml」が存在しない。
なので、Tomcatからコピーして作ればいい。
どこにEclipseをインストールするかによって場所は違うが、自分の場合は「C:\pleiades\tomcat\6\conf」以下にweb.xmlがあるから、これをコピペして活用すればいい。

<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    version="2.5">
    <servlet>
        <servlet-name>count</servlet-name>
        <servlet-class>controller.PrintServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>count</servlet-name>
        <url-pattern>/count</url-pattern>
    </servlet-mapping>

</web-app>

EclipseTomcatのアイコンを表示させる方法

「ウィンドウ」→「パースペクティブのカスタマイズ」→「コマンド・グループの可用性」→「Tomcat」にチェックを入れる。
猫みたいなアイコンが出るので、こいつで起動することができる。

setInterval()を使ってJavaScriptの関数を定期実行するサンプル

これでサーバ側の準備はできたので、次にHTML&JavaScriptを作成する。
サンプルはこんな感じ。
定期的にリクエストを投げつけて、カウントを表示している。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScriptで定期更新</title>
<link rel="stylesheet" type="text/css" href="./css/sample.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
//http://localhost/sample/sample.html
var count = 0;
$(function() {
	update();
	//関数update()を2000ミリ秒間隔で呼び出す
	setInterval("update()", 2000);

});

function update() {
	$.ajax({
		url:'http://localhost:8080/tomcat-sample/count',
		type: 'GET'
	})
	.always(function(res) {
		//これはクロスオリジン制限で弾かれるため、「success」「done」ではダメ。
		//No 'Access-Control-Allow-Origin' header is present on the requested resource.
		count++;
		$('#main').append(count + " ");
	});
}
</script>
</head>
<body>
<h2>定期的に更新するサンプル</h2>
<div id="main">
</div>
</body>
</html>

実際にこのHTMLをブラウザから表示すると・・・
サーバ側のコンソールには

リクエストを受け付けました!:1回目
リクエストを受け付けました!:2回目
リクエストを受け付けました!:3回目
リクエストを受け付けました!:4回目
リクエストを受け付けました!:5回目
リクエストを受け付けました!:6回目
リクエストを受け付けました!:7回目

と表示され、ブラウザには以下の画像のように表示される。
f:id:sho322:20140103162018j:plain

【追記2014/01/05】
たくさんご指摘をいただけたので、以下の記事を追記してみました!
ブログで色々公開したら、恥をかいたけどすごく勉強になった。

参考

ドミノ・ピザのウェブサイト
http://www.dominos.jp/
一見してもソースにcopyrightの文字は見当たらなかったが、全部引用するのはまずいので、覗く程度がいいと思っている。
Chromeで右クリック→「ページのソースを表示」でソースを表示することができる。念のため。
Mサイズのマルゲリータで1800円程度。一人で食ったけど、正直二人分くらいあった。

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)

jQueryの基礎はこの本をよく見直している。
jQueryはなかなか俺好みの「硬派な教科書」が少ない気がするけど、これはどストレートの教科書。
これと「jQuery最高の教科書」がお気に入りです。