立 命 館 守 山 高 校 土 曜 講 座 Ajaxを 用 いた 電 子 掲 示 板 の 作 成 こう こうけん 黄 宏 軒 立 命 館 大 学 情 報 理 工 学 部 情 報 コミュニケーション 学 科 准 教 授 2014 年 7 月 5 日
実 験 の 目 的 対 話 型 Webアプリケーション 構 築 のアプローチである Ajax (Asynchronous JavaScript and XML) の 考 え 方 にそって 簡 単 なWebアプリケーションを 作 成 し,その 動 作 を 調 べ ることにより,Ajaxの 基 本 的 な 仕 組 みを 理 解 する. 実 験 は3つの 例 題 と5つの 演 習 問 題 から 構 成 される 例 題 はそのまま 実 行 できて, 結 果 を 確 認 できる. 演 習 問 題 は 一 部 のソースコードが 欠 けていて, 所 定 の 機 能 を 満 たすようにAjaxプログラミングの 練 習 とし て 決 まっているソースファイルにある 穴 を 埋 める. 演 習 問 題 の 正 解 も 提 供 されているが, 極 力 読 まな いようにしてください.
実 験 環 境 の 構 築 1. http://hhhuang.homelinux.com/lectures/moriyama_high/ フォルダに 本 実 験 で 必 要 なファイルが 置 いてある のでそれらを 適 宜 なフォルダにダウロード (マウスの 右 ボタン 名 前 を 付 けて 保 存 ) 140705_moriyama.pdf: このスライド moriyama.zip: 実 験 に 必 要 なプログラム ap_text2013.pdf: 山 西 先 生 の 教 材 2. moriyama.zipを 解 凍 (マウスの 右 ボタン 全 てを 展 開 ) 3. moriyama というフォルダが 解 凍 されるはず
実 験 環 境 のディレクトリ 構 造 ホームディレクトリ base プログラム 起 動 用 の バッチ(bat)ファイル 群 が 入 っている moriyama 260000. apps webapps %CATALINA_BASE% ans 演 習 の 解 答 用 ファイルはここに 作 成 apps_ emacs exp3 ans_correct 演 習 の 解 答 用 ファイルはここに 作 成 apps_jdk html 課 題 の 説 明 用 html ページが 入 っている
実 験 で 使 用 するソフトウェア Webサーバ サーブレットコンテナ Tomcat Webブラウザ Firefox テキスト エディター Emacs, 秀 丸
Tomcat 起 動 画 面 例 サーブレットの 標 準 出 力 の ウィンドウになる ホームディレクトリで start_tomcat.bat をクリックすることで 起 動, 終 了 させるには stop_tomcat.bat をクリックする
Windowsセキュリテイ 警 告 Tomcatを 起 動 した 時 にファイアウォールでブロックされて いるという 警 告 がでる 場 合 がある. キャンセルを 選 択 同 一 PC 内 のみで 実 験 をする 場 合 は, キャンセル を 選 択 する(アクセスを 許 可 する 必 要 はない).
ブラウザ(Firefox) 以 下 の2 種 類 の 方 法 のいずれかで 利 用 できる ホームディレクトリにある Firefox.bat をクリック する パソコンにインストールされているFirefoxを 利 用 する. 以 下 のアドレスを 開 く: http://localhost:8080/exp3/index.html
エディタ 本 実 験 では, 文 字 コードをUTF-8 に 統 一 する. 必 ずUTF-8 のファイルを 編 集 できるエディタを 使 うこと. 実 験 環 境 ではEmacsのWindows 版 を 用 意 してある. apps_emacs.exe を 展 開 する その 他 : 秀 丸 など 多 くのエディタが 対 応 している. ( 注 ) 文 字 コードとしてUTF-8 と UTF-8N が 選 択 で きる 場 合 はUTF-8N (BOM (Byte Order Mark)を 付 加 しない)を 選 択 すること. Windows 付 属 の メモ 帳 はNG 一 見, 編 集 できるよ うに 見 えるが, 先 頭 にBOM が 付 加 され,Javaのソー スコードの 場 合,Javaのコンパイルエラーになる.
Ajaxとは Ajax: Asynchronous JavaScript and XML 対 話 型 のWebアプリケーションを 構 築 するテクニック 例 ) Google Maps
典 型 的 なWebアプリケーションの 動 作 ユーザ ブラウザ サーバ 操 作 リクエスト ( 待 ち) 画 面 書 き 換 え レスポンス 処 理 操 作 リクエスト ( 待 ち) 画 面 書 き 換 え レスポンス 処 理 ユーザの 操 作 により,サーバにリクエストが 送 られ, サーバからのレスポンスにより 画 面 が 書 き 換 えられる.
AjaxによるWebアプリケーションの 動 作 ユーザ ブラウザ サーバ 操 作 リクエスト 操 作 レスポンス 処 理 操 作 操 作 操 作 リクエスト レスポンス リクエスト レスポンス 処 理 処 理 ユーザの 操 作 とは 非 同 期 にサーバにリクエストを 送 り, 画 面 をアップデートできる.
Ajaxの 要 素 技 術 JavaScript:ブラウザ 上 のプログラミング 言 語 DOM (Document Object Model) HTML 文 書 やXML 文 書 をプログラムから 操 作 するAPI Webアプリケーションでは,DOMに 基 づいて, JavaScriptからHTML 文 書 を 操 作 することで, 画 面 を 書 き 換 える (DHTML: Dynamic HTML) XMLHttpRequest JavaScriptプログラムからWebサーバにリクエストを 送 るJavaScriptの 関 数 JSON (JavaScript Object Notation) JavaScriptのオブジェクト 記 法 に 基 づくデータ 記 述 形 式
演 習 問 題 の 解 答 の 作 成 基 本 的 には,HTMLとJavaScriptの 二 つのファイルを 作 成 することになる. 作 成 場 所 は 以 下 のフォルダ: %CATALINA_BASE% webapps exp3 ans ファイル 自 体 は 既 に 作 成 されているので,そのファイ を 編 集 すればよい.ファイルの 内 容 は 自 由 に 修 正 し て 構 わない( 雛 形 にしたがう 必 要 はない). なお, 解 答 例 も 提 供 されているので, どうしてもわからない 場 合 は 参 照 する. 解 答 例 にこだわらず, 自 由 に 工 夫 することを 推 奨 自 分 で 工 夫 することにより 理 解 が 深 まる
演 習 問 題 の 解 答 の 作 成 (つづき) JavaScriptはJavaとは 異 なり, 実 行 前 にコンパイルする 必 要 はない.Webアプリケーションの 再 ロードも 必 要 はない. JavaScriptのプログラムはブラウザ 上 で 実 行 される. JavaScriptプログラムを 修 正 した 場 合 は,ブラウザで 再 読 込 する 必 要 がある. ただし,ブラウザでHTMLをファイルとして 読 み 込 む (ブラウザのアドレスバーが,file:// で 始 ま る 表 示 になっている)と, 実 験 の 例 題 では,Ajaxで 中 心 的 な 役 割 を 果 たすXMLHttpRequest 関 数 が うまく 動 作 しないので, 要 注 意.
演 習 問 題 の 構 成 Webページの 表 示 : HTMLとして 記 述 ユーザの 入 力 の 処 理 /Webサーバへのアクセス: JavaScriptのプログラムを 記 述 したファイルを 作 成 HTMLファイル HTML 記 述 (HTML 要 素 に id を 付 与 ) JavaScriptファイルへのリンクを 記 述 JavaScriptファイル 関 数 の 定 義 初 期 化 (ロード 時 に 実 行 される 部 分 ) HTML 要 素 のidをもとにJavaScript 関 数 と 対 応 づけ
HTML 文 書 中 のJavaScriptプログラム HTMLの 中 で <script> </script>で 囲 んで, JavaScriptプログラムを 直 接 記 述 することも 可 能. 本 実 験 では, 原 則 としてHTMLとJavaScript とを 別 々 のファイルに 作 成 し,HTMLの 中 ではJavaScriptファイ ルを 指 定 するだけにする. 画 面 表 示 と 動 作 ロジックを 分 離 して 定 義 すること により, 修 正, 拡 張 を 容 易 にするため. <script type="text/javascript" src="../js/helloworld.js"></script> JavaScriptファイルを 指 定 する
Webアプリケーション(Ajax) Ajaxの 基 本 リスナー XMLHttpRequest JSON 簡 易 掲 示 板 を 作 成 するためのWeb APIが 用 意 されてい るので,それを 活 用 して 簡 単 な 掲 示 板 を 作 成 する.
JavaScriptのプログラムの 骨 格 イベント と イベントリスナー (JavaScriptの 関 数 と して 記 述 )とを 対 応 づける. イベント の 例 ページが 読 み 込 まれた (load) ボタンをクリックした (click) addeventlistener 関 数 を 用 いて,イベントリス ナーを 登 録 する. 一 つのHTML 要 素 に 複 数 のイベントリスナーを 登 録 できる.
イベントリスナーを 追 加 する 関 数 addeventlistener 関 数 target.addeventlistener(type,listener, usecapture) target: リスナーが 登 録 されるHTML 要 素 type: イベントタイプ mousedown, mouseup, mousemove, mouseout, load, click など listener: イベントが 発 生 した 時 に 通 知 を 受 ける オブジェクト(EventListenerのインタフェースを 実 装 しているオブジェクト),あるいは, 処 理 を 行 う 関 数 ( 本 実 験 では 関 数 を 設 定 する). usecapture: イベントリスナーが 起 動 されるタイミ ングを 指 定 ( 本 実 験 では false を 指 定 ).
参 考 addeventlistenerの 第 3 引 数 <html> <body> <p> <button>a</button> <button>b</button> </p> </body> </html> buttonがクリックされた 時 のフロー capture フェーズ window document html body 参 考 : http://www.w3.org/tr/dom-level-3-events/ p bubble フェーズ イベントはDOMツリー 上 を 伝 搬 していく. 途 中 の 要 素 にイベントリスナーが 付 加 button button されている 時 には,そのイベントリス ナーが 呼 ばれる. targetフェーズ 第 3 引 数 がtrueの 時 は,captureフェーズでイベントリスナーが 呼 ばれ る.falseの 時 は,bubbleフェーズでイベントリスナーが 呼 ばれる.
例 題 1 XMLHttpRequest JavaScriptプログラムから,HTTPリクエストを 発 行 var request = new XMLHttpRequest(); request.open("get", "../data/sample.txt", false); メソッド request.send(null); リクエストの 発 行 ( 本 文 は 空 ) URL オブジェクトを 生 成 同 期 モード(false)/ 非 同 期 モード(true) の 指 定 if (request.status == 200) { result.innerhtml = request.responsetext; } HTTPステータスが 成 功 (200)かチェック 同 期 モードと 非 同 期 モード 同 期 モード: Webサーバからレスポンスが 返 ってくるまで 待 つ 非 同 期 モード: Webサーバからのレスポンスを 待 たない
例 題 1 XMLHttpRequest( 続 き) 同 期 モードを 使 用 して,ファイルをGETする. 成 功 すれば,ファイルの 内 容 を 表 示 する. 同 期 モードを 使 用 しているので,HTTPリクエストに 対 するレスポンスが 返 ってくるまで,JavaScriptのプ ログラムの 実 行 は 止 まる. JavaScriptでは 複 数 の 関 数 が 同 時 には 実 行 でき ない(マルチスレッドではない). 非 同 期 モードを 使 用 した 場 合 はレスポンスが 返 って くるのを 待 たず,JavaScriptの 次 の 文 が 実 行 される.
演 習 問 題 1 XMLHttpRequestの 使 用 例 XHMLHttpRequestの 使 用 例 として おみくじ を 作 成 する. おみくじの 結 果 を 模 したファイル5つが 用 意 されて いる. omikuji0.txt, omikuji1.txt, omikuji2.txt, omikuji3.txt, omikuji4.txt ファイル 名 をランダムに 選 び,ファイルをGETして, その 内 容 を 表 示 する. ファイル 名 を 決 める 時 には, 乱 数 を 利 用 すると いい.
乱 数 を 発 生 させる Math.random() 関 数 を 使 うことで0 以 上,1 未 満 の 乱 数 を 取 得 できる Math.floor() 関 数 を 使 うことで 小 数 点 以 下 の 部 分 を 切 り 捨 てることができる 例 (0~9の 整 数 をランダムに 取 得 する): var random_num = Math.random(); var intnum = Math.floor(10 * random_num);
例 題 2 XMLHttpRequest ( 同 期 と 非 同 期 ) 非 同 期 の 呼 び 出 しの 場 合 はコールバック 関 数 を 設 定 する. var request = new XMLHttpRequest(); コールバック 関 数 request.open("get", "../data/sample.txt", true); // コールバック 関 数 を 設 定 する request.onreadystatechange = function() { if ((request.readystate == 4) && (request.status == 200)) { result.innerhtml = request.responsetext; } }; request.send(null); 状 態 が 変 わった 時 にコールバック 関 数 が 呼 ばれる. 通 信 が 終 了 通 信 の 結 果 が 成 功
例 題 2 XMLHttpRequest ( 同 期 と 非 同 期 ) 非 同 期 と 同 期 の 違 いを 確 認 するために,レスポン スを 返 すまでの 遅 延 時 間 を 指 定 できるWeb APIを 用 意 している. 現 在 の 時 刻 を 表 す 文 字 列 を 返 す. 結 果 を 返 すま での 時 間 をミリ 秒 で 指 定 できる. /CurrentTime?delay=1000 同 期 呼 び 出 しの 場 合 は,レスポンスが 返 ってくるま で,JavaScriptのプログラムは 止 まる. 非 同 期 呼 び 出 しの 場 合 は,レスポンスが 返 ってくる までの 間 もJavaScriptのプログラムは 動 作 する.
参 考 readystate 0 (UNSENT) まだopenメソッドが 呼 ばれていない 状 態 1 (OPENED) openメソッドが 呼 ばれたがsendメソッドは 呼 ばれていない 状 態 2 (HEADER_RECEIVED) sendが 呼 ばれた 後 HTTPヘッダを 全 て 受 信 し 終 えた 状 態 この 状 態 からstatusプロパティやgetResponseHeaderメソッドな どが 利 用 可 能 まだデータ 本 体 は 受 信 していない 3 (LOADING) 本 文 のデータを 受 信 中 である 状 態 4 (DONE) 受 信 完 了 したか リクエストに 失 敗 して 終 了 した 状 態
演 習 問 題 2 非 同 期 呼 び 出 し/カウントダウン 例 題 2 を 拡 張 して, 非 同 期 呼 び 出 しの 場 合 にレスポ ンスが 返 ってくるまでの 残 り 時 間 を 逐 次 表 示 できる ようにせよ. ヒント ユーザが 入 力 した 遅 延 時 間 からスタートして,レ スポンスが 返 ってくるまでの 間, 残 り 時 間 の 表 示 を 順 次 更 新 する. 残 り 時 間 がゼロになったら,カウントダウンはス トップする. settimeout 関 数 が 使 用 できる( 例 題 1-3 参 照 ).
ブラ ウザ 例 題 3 簡 易 掲 示 板 用 のWeb API Ajaxを 活 用 したアプリケーション 例 として, 簡 易 掲 示 板 を 取 り 上 げる.ここでの 掲 示 板 は,メッセージのリ ストを 持 っているものとする. 個 々のメッセージには IDが 自 動 的 に 付 与 される. HTTPプロトコルのGET, POSTの 他 にPUT, DELETEの メソッドを 使 用 する. メッセージ 一 覧 を 取 得 (GET) idのメッセージを 取 得 (GET) 新 しいメッセージを 追 加 (POST) idのメッセージの 内 容 を 更 新 (PUT) idのメッセージを 削 除 (DELETE) /bbs 掲 示 板 メッセージ(id=1) メッセージ(id=2) メッセージ(id=n)
簡 易 掲 示 板 用 のWeb API 一 覧 URL メソッド 内 容 リクエスト レスポンス HTTPステータスコード /bbs /bbs/id /bbs /bbs/id /bbs/id GET GET POST PUT DELETE 掲 示 板 のメッセー ジの 一 覧 を 取 得 する IDがid のメッセー ジを 取 得 する 掲 示 板 に 新 しい メッセージを 追 加 する IDがid のメッセー ジの 内 容 を 更 新 する IDがid のメッセー ジを 削 除 する 追 加 するメッ セージ(JSON 形 式 ) 新 しい 内 容 の メッセージ (JSON 形 式 ) メッセージの 一 覧 (JSON 形 式 の 配 列 ) IDがid のメッセージ (JSON 形 式 ) (レスポンスの Locationヘッダーに 追 加 されたメッセー ジのURLが 返 る) 200 (OK) 200 (OK) 404 (Not Found) (id のメッ セージが 存 在 しない 場 合 ) 201 (Created) 204 (No Content) ( 更 新 が 成 功 した 場 合 ) 409 (Conflict) ( 更 新 の 競 合 があった 場 合 ) 204 (No Content) ( 削 除 が 成 功 した 場 合 ) 404 (Not Found) (id のメッ セージが 存 在 しない 場 合 )
メッセージの 属 性 属 性 名 (Javaの) 型 内 容 id int メッセージのid. 掲 示 板 の 中 で 自 動 的 に 一 意 にふられる. date java.util.date メッセージの 作 成 日 時.JSON 形 式 では, 起 点 となる 時 刻 から のミリ 秒 の 整 数 で 表 現 する.( 値 は 自 動 的 に 付 与 される) name String 投 稿 者 の 名 前. body String メッセージの 本 体. 例 題 ではメッセージ 追 加 時 に, この 二 つを 指 定 している. revision modified Date int java.util.date メッセージの 内 容 が 修 正 された 回 数 ( 生 成 時 には1).メッセー ジの 内 容 更 新 時 に, 修 正 回 数 が 同 じでない 場 合 は, 競 合 が 起 きたと 判 断 し,エラーになる.( 値 は 自 動 的 に 付 与 される) メッセージの 最 終 修 正 日 時.JSON 形 式 では, 起 点 となる 時 刻 からのミリ 秒 の 整 数 で 表 現 する.( 値 は 自 動 的 に 付 与 される) 楽 観 的 ロックを 実 装 するために 使 用
JSON(JavaScript Object Notation) JavaScriptのオブジェクト 表 記 法 のサブセットをもとにし たデータ 記 述 言 語 JavaScriptとの 親 和 性 からXMLの 代 わりに 使 用 される ことが 多 い.XMLより 簡 略 化 されている. オブジェクト: 属 性 名 と 属 性 値 のペア 配 列 値 {"name": "John Smith", "age": 33} ["milk", "bread", "eggs"] 文 字 列, 数 値,true, false, null 簡 易 掲 示 板 の 例 題 では,Webサーバとブラウザ 間 の データの 交 換 にはJSONを 使 用 している.
JSONの 例 [{"name":" 立 命 太 郎 ", "id":1, "date":1302070302483, "body":"メッセージ 1", "revision":1, "modifieddate":null}, {"name":" 衣 笠 次 郎 ", "id":2, "date":1302070302483, "body":"メッセージ 2", "revision":1, "modifieddate":null}] オブジェクトの 配 列 として 表 現 メッセージの 一 覧 の 例 (メッセージを 表 すオブジェ クトの 配 列 として 表 現 ). ここでは, 二 つのメッセージ が 存 在. ( 見 やすいように 適 宜 改 行 をいれている) ここでは 日 付 はミリ 秒 の 数 字 で 表 現 している オブジェクトは, 属 性 名 ( 文 字 列 )と 属 性 値 ( 文 字 列 あるいは 数 値 )のペアで 表 現
JSON 形 式 への 変 換 JavaScriptオブジェクトからJSON 形 式 の 文 字 列 への 変 換 JSON.stringify(JavaScriptオブジェクト) JSON 形 式 の 文 字 列 からJavaScriptオブジェクトへの 変 換 JSON.parse(JSON 形 式 の 文 字 列 ) JSON 形 式 の 文 字 列 は,JavaScriptのeval 関 数 を 用 いて,JavaScriptのオブジェクトに 変 換 すること もできるが, 任 意 のJavaScriptプログラムが 実 行 されるので,セキュリティ 上 好 ましくない. eval("(" + JSON 形 式 の 文 字 列 + ")")
JSON 形 式 のデータ 送 る 際 の 注 意 PUTやPOSTメソッドでは, 掲 示 板 のメッセージの データがリクエストの 本 体 に 書 かれる. 今 回 の 実 験 では 送 信 するデータの 形 式 は,JSONを 前 提 としている. JSON 形 式 で 送 る 場 合 は,リクエストのヘッダに Content-Typeを 指 定 する 必 要 がある. リクエストヘッダに var request = new XMLHttpRequest(); Content-Typeを 指 定 する request.open(method, url, true); // リクエストの 本 体 はJSON 形 式 を 前 提 if ((method == "PUT") (method == "POST")) { request.setrequestheader("content-type","application/json"); }
Web APIの 試 用 例 題 3のサンプルでは,HTTPリクエストを 出 して,そ の 結 果 を 表 示 する 簡 単 なインタフェースを 用 意 して ある. この 実 験 ではデータベースを 使 用 していないので, アプリケーションをリロードするたびに 掲 示 板 の 内 容 はリセットされる.なお,リセット 時 にはテスト 用 に メッセージが 二 つ 自 動 的 に 追 加 されるようにしてい る.
idを 指 定 してメッセージの 取 得 メソッドを 指 定 URL 中 にidを 指 定 レスポンスの 表 示 (メッセージのオブジェクトが 返 る) (JSON 形 式 ) 200はOK ( 成 功 )を 示 す
メッセージの 一 覧 の 取 得 URLを 指 定 メソッドを 指 定 レスポンスの 表 示 (JSON 形 式 でデータが 返 る) 200はOK ( 成 功 )を 示 す
レスポンスのLocationヘッダに 新 たに 作 成 された リソース(メッセージ)のURLが 返 る. メッセージの 追 加 メソッドを 指 定 URLを 指 定 追 加 するメッセージの 内 容 をJSON 形 式 で 与 える. name と bodyが 必 要. レスポンスのデータはない 201はCreated( 新 しいリソースが 作 成 されたことを 示 す)
追 加 されたメッセージの 確 認 URLを 指 定 (idを 指 定 ) メソッドを 指 定 追 加 されたメッセージの 内 容
メッセージの 内 容 の 更 新 URLを 指 定 (idを 指 定 ) メソッドを 指 定 204はNo Content (レスポンスのボディ がないことを 示 す).200 番 台 であり, リクエスト 自 体 は 成 功 している. 更 新 するメッセージの 内 容 をJSON 形 式 で 与 える.メッセージの 内 容 として 返 っ てきたデータをコピーし, 変 更 するとこ ろのみ 修 正 する.
更 新 されたメッセージの 確 認 URLを 指 定 (idを 指 定 ) メソッドを 指 定 メッセージが 書 き 換 えられている revisionをカウント アップしている modifieddataを 更 新 している
メッセージの 削 除 URLを 指 定 (idを 指 定 ) メソッドを 指 定 204はNo Content (レスポンスのボディ がないことを 示 す).200 番 台 であり, リクエスト 自 体 は 成 功 している.
削 除 の 確 認 URLを 指 定 メソッドを 指 定 id=3のメッセージは 無 いことに 注 意
演 習 問 題 3 簡 易 掲 示 板 ( 一 覧 表 示 ) 簡 易 掲 示 板 Web APIを 使 用 して,まずメッセージの 一 覧 を 表 示 するプログラムを 作 成 する. HTMLファイルの 作 成 (bbs_list.html) %CATALINA_BASE% webapps exp3 ans bbs_list.html JavaScriptファイルの 作 成 (bbs_list.js) %CATALINA_BASE% webapps exp3 ans bbs_list.js
演 習 問 題 4 簡 易 掲 示 板 ( 投 稿 機 能 ) 演 習 問 題 3 に 投 稿 機 能 を 追 加 する. HTMLファイルの 作 成 (bbs_submit.html) %CATALINA_BASE% webapps exp3 ans bbs_submit.html JavaScriptファイルの 作 成 (bbs_submit.js) %CATALINA_BASE% webapps exp3 ans bbs_submit.js
演 習 問 題 4 簡 易 掲 示 板 ( 削 除 機 能 ) 演 習 問 題 3 に 投 稿 機 能 を 追 加 する. HTMLファイルの 作 成 (bbs_submit.html) %CATALINA_BASE% webapps exp3 ans bbs_submit.html JavaScriptファイルの 作 成 (bbs_submit.js) %CATALINA_BASE% webapps exp3 ans bbs_submit.js
演 習 問 題 5 簡 易 掲 示 板 ( 削 除 機 能 ) 演 習 問 題 4 簡 易 掲 示 板 に 削 除 機 能 を 追 加 する. 実 装 例 それぞれのメッセージの 横 に 削 除 ボタンを 追 加. 削 除 ボタンそれぞれには, 対 応 するメッセージを 削 除 する 関 数 をイベントリスナーとして 紐 付 ける.
演 習 問 題 5 ( 続 き) %CATALINA_BASE% webapps exp3 ans bbs_delete.jsより var makedeletefunction = function() { // 変 数 のidを 格 納 する 変 数 を 定 義 var id = message[i].id; return function() { deletemessage(url, id, table); }; }; // 上 記 で 定 義 した 関 数 を 呼 び 出 して, // ボタンにイベントリスナーとして 紐 付 ける deletebutton.addeventlistener( "click", makedeletefunction(), false); 関 数 の 環 境 の 変 数 (id)も 補 足 している クロージャと 呼 ばれる 関 数 が 呼 び 出 される ごとに 新 しく 変 数 idの 領 域 が 確 保 される. 新 たに 関 数 を 作 成 して, その 関 数 を 返 す. 変 数 idは, 関 数 ごとに 異 なる 値 が 保 持 できる. それぞれのボタンには 異 なったidを 持 った 関 数 を 紐 付 けられる.
参 考 資 料
掲 示 板 をチャットシステムにするには プルのみ (ポーリング) Cometを 利 用 する (プッシュ) 詳 しくは 以 下 のページを 参 照 ( 図 もここから) http://itpro.nikkeibp.co.jp/article/column/20080220/294242/
Emacs Emacsはカスタマイズ 性 が 高 いエディタ. 実 験 環 境 のEmacsでは %HOME%.emacs.d init.el に 設 定 ファイルをおいている. ファイルの 文 字 コードの 設 定 (UTF-8) 行 番 号 の 表 示 全 角 の 空 白 文 字,タブ, 行 末 の 表 示 HTML 編 集 モード LaTeX 編 集 モード(YaTeX) などのカスタマイズをしている.
Emacsの 主 なコマンド コマンド ファイルを 開 く ファイルを 保 存 ファイルを( 名 前 を 付 けて) 保 存 文 字 コードを 指 定 してコマンドを 実 行 する キーバインド C-x C-f C-x C-s C-x C-w C-x RET c ( 文 字 コードを 聞 かれるので 入 力 する) ( 例 ) 文 字 コードを 指 定 してファイルを 開 く C-x RET c ( 文 字 コードを 聞 かれるので 入 力 する) C-x C-f ( 例 ) 文 字 コードを 指 定 してファイルの 名 前 を 付 けて 保 存 する バッファの 文 字 コードを 指 定 する 処 理 をキャンセルする Emacsを 終 了 する C-x M-x RET Ctrlキーを 押 しながらxを 押 す Altキーを 押 しながらxを 押 す Enterキー C-x RET c ( 文 字 コードを 聞 かれるので 入 力 する) C-x C-w C-x RET f ( 文 字 コードを 聞 かれるので 入 力 する) C-g C-x C-c 文 字 コードの 例 utf-8, sjisなど
その 他 のEmacsのモード dired (ディレクトリ 編 集 モード) M-x dired ディレクトリの 一 覧 を 表 示 ファイルのコピー,ファイル 名 の 変 更 などの 操 作 が 可 能 shell (シェルモード) M-x shell Windowsの コマンドプロンプトが Emacsの 中 で 実 行 できる. shell モード
参 考 Web APIの 定 義 実 験 環 境 では,Javaのソースコードは, %CATALINA_BASE% webapps WEB-INF classes のディレクトリにおいてある. (classファイルと 同 じ ディレクトリ) 用 意 してあるantのスクリプトは, 上 記 の 場 所 にJava のソースコードがあることを 前 提 にしている. サーブレットを 追 加 する 場 合 は, CurrentTimeServlet.java を 参 考 にしてほしい. なお, 今 回 の 実 装 では,Servlet API 3.0を 使 用 し ており,URLへのマッピングはアノテーションを 使 用 している.( 実 験 IIの 場 合 と 同 様 )
参 考 JSON 形 式 への 変 換 リソースは,Messageクラスのインスタンスとして 実 装 される MessageクラスのインスタンスからJSON 形 式 への 変 換 は,ライ ブラリが 行 なう( 実 験 環 境 では,Jackson JSON Processor (http://jackson.codehaus.org/) を 使 用 している) Message -id -date -name -body -revision -modifieddate +getid() +setid(id) JSON 形 式 の 表 現 例 {"name":" 立 命 太 郎 ", "id":1, "date":1327713822783, "modifieddate":null, "body":"メッセージ1", "revision":1} インスタンス 変 数 名 がJSON 形 式 における 属 性 名 に 対 応. インスタンス 変 数 とgetter, setterを 追 加 すれば 自 動 的 に JSON 形 式 に 反 映 される.
参 考 WebAPIの 簡 単 なカスタマイズ 例 Messageに 新 たな 属 性 を 追 加 したい 例 えば image Messageクラスにインスタンス 変 数 の 定 義 とgetterと setterを 追 加 して,リコンパイルする private String image; public String getimage() { return image; } 変 数 名 は 小 文 字 で 始 める getterの 定 義 : メソッド 名 は, get + 変 数 名 の 最 初 の 文 字 を 大 文 字 にしたもの public void setimage(string image) { this.image = image; } setterの 定 義 : メソッド 名 は, set + 変 数 名 の 最 初 の 文 字 を 大 文 字 にしたもの さらなるカスタマイズはApache Winkのドキュメントを 参 照 のこと
参 考 同 時 編 集 時 の 競 合 解 消 実 験 環 境 のWebAPIでは,メッセージを 編 集 ( 修 正 ) する 機 能 を 実 装 している. 複 数 人 が 同 じメッセージを 同 時 に 編 集 しようとする と 競 合 が 発 生 する. Aさんがメッセージを 読 み 込 み Bさんがメッセージを 読 み 込 み Bさんがメッセージを 更 新 Aさんがメッセージを 更 新 時 間 Bさんの 更 新 した 内 容 は 上 書 きされてしまう!
参 考 同 時 編 集 時 の 競 合 解 消 ( 続 き) 競 合 を 防 ぐために ロック をかける 悲 観 的 ロック:メッセージを 編 集 中 は 他 人 が 更 新 できないようにする Aさんがメッセージを 読 み 込 み Bさんがメッセージを 読 み 込 み Bさんがメッセージを 更 新 Aさんがメッセージを 更 新 ここでロックをかけ, 他 の 人 がメッ セージを 編 集 できないようにする 時 間 更 新 後 にロックを 解 除 する
参 考 同 時 編 集 時 の 競 合 解 消 ( 続 き) 悲 観 的 ロックの 問 題 点 Aさんがロックをかけたあと,そのまま 放 置 され ると, 他 の 人 が 編 集 できなくなる ここでロック をかける Aさんがメッセージを 読 み 込 み Bさんがメッセージを 読 み 込 み Bさんがメッセージを 更 新 ロックが 解 除 されない 限 り 他 の 人 は 編 集 できなくなる 時 間 Webアプリケーションでは 特 に 問 題 ( 例 : 編 集 を 開 始 し た 後, 何 もせずブラウザを 終 了 してしまう 場 合 など)
参 考 同 時 編 集 時 の 競 合 解 消 ( 続 き) 楽 観 的 ロック 同 時 に 複 数 人 の 編 集 を 許 す. 競 合 の 検 出 のみ 行 い, 競 合 の 対 処 はユーザに 任 せる Aさんがメッセージを 読 み 込 み Bさんがメッセージを 読 み 込 み Bさんがメッセージを 更 新 Aさんがメッセージを 更 新 時 間 Bさんの 更 新 した 内 容 と 競 合 が 起 きることを 検 出
参 考 同 時 編 集 時 の 競 合 解 消 ( 続 き) 楽 観 的 ロックの 実 装 例 ( 実 験 環 境 での 実 装 ) データ(この 場 合 メッセージ)にバージョン 番 号 を 付 与 する.メッセージを 更 新 時 に 現 在 のバージョ ン 番 号 と 比 較 して, 異 なっていれば 競 合 が 発 生 1 バージョン 番 号 1 2 現 在 のバージョン 番 号 と 比 較. 同 じ であればデータを 更 新 し,バージョン 番 号 を 増 やす. 時 間 1 1 2 1 1 1 Aさんがメッセージを 読 み 込 み Bさんがメッセージを 読 み 込 み Bさんがメッセージを 更 新 更 新 時 に 読 み 込 み 時 のバージョン 番 号 を 通 知 Aさんがメッセージを 更 新 更 新 時 に 読 み 込 み 時 のバージョン 番 号 を 通 知 現 在 のバージョン 番 号 と 比 較.バージョン 番 号 が 異 なるので, 競 合 が 検 出 できる. 競 合 の 発 生 が 検 出 された 時 は,ユーザに 警 告 を 出 す(どのように 競 合 を 解 消 するかはユーザに 任 せる)