リンク
インターシステムズ(日) └日本語ドキュメント インターシステムズ(US) (有)エムブイビイ ダイナシステム(株) Googleグループ(英語) Googleグループ(日本語) George James Software cache'infoアーカイブ 【広告】
|
ページの動的更新「ハイパーイベント」Web pages dynamic updating, HYPER-EVENT.
CSPの機能の一つとして、ハイパーイベントというものがあります。 このハイパーイベントはブラウザがJavaScript等のスクリプトを使ってページ遷移なしにCache'サーバに要求を出し、応答を受け取ることができる機能のことです。
ページ遷移によるデータ取得の例ユーザの入力に対応した内容を表示する場合、Webページでは通常ページの遷移が必要です。これはユーザの入力した内容をサーバに送信する一般的な方法が、form内に入力された内容をsubmitボタンを押すことでサーバーに送信するという古くからある方法だからです。
JavaScriptによる動的な計算の例このような静的なWebページの操作性を向上させるために、Webブラウザは様々な機能が追加されてきました。その中で最も広く使われているものの1つがJavaScriptです。 JavaScriptによるページ内容の動的更新の例として次のようなものがあげられます。もしこれをページ遷移によるデータ取得の方法で行うと、商品または個数を変更するたびに『送信』ボタンを押して、ページが再表示されるまで待たなければなりません。これは操作感を大きく下げてしまうことになります。 JavaScriptからDOM (Document Object Model)を操作することにより、今ではWebページ内のほとんど全ての要素を動的に操作することが可能になっています。
ハイパーイベントによるデータ取得の例このように、ページはそのままに必要な部分だけ書き換えることは、Webページの操作感を向上させるのにとても有効な方法です。 ハイパーイベントはこのJavaScriptからCache'サーバにアクセスする方法です。 ユーザが入力した情報をJavaScriptを利用してCache'サーバーに送信し、Cache'上でデータベースに格納したり、取り出したり様々な操作を行ってその結果を返すことができます。ハイパーイベントの例として、ユーザが郵便番号を入力すると、それに対応する住所が表示されるCSPページを作成してみます。 よくある住所入力画面です。郵便番号を入力すると、対応する住所をデータベースから取得して都道府県・市区町村番地欄に自動的にセットするものとします。
ハイパーイベントの実装このように動作するページは次のようになります。
郵便番号が入力され、その入力欄からフォーカスが外れると、onChangeイベントが発生して定義されている関数zipChangeが呼び出されます。zipChange関数には引数として、入力された郵便番号(this.value)が渡されます。 zipChange関数は#server(..)#構文で<csp:method>を呼び出しています。ここではZipGet関数を呼んでいます。 <csp:method>内はMのコーディングです。この部分はCache'サーバー上で処理されます。ここではグローバルの値を返しています。 ハイパーイベントのキモとなるのは、#server(..)# と、それから呼ばれる <csp:method>です。
ハイパーイベント実行時の動作実はハイパーイベントは、JavaScriptだけで動いているのではありません。先程作ったページのソースを見ると、作成したものとは微妙に異なるページが出力されているのが分かります。 赤い太字が実行時に置き換えられたり追加されたりしている部分です。
よって、先のハイパーイベントによるデータ取得の図は、正しくはこのようになります。 しかし、このような裏側の部分は全く意識することなくハイパーイベントを利用したページは作成できます。 ハイパーイベントを利用したページは、利用者だけでなく開発者にとっても便利なものとなるのではないでしょうか。 |