jQueryとgifアニメ画像を使って、
簡易的な処理中メッセージを表示する方法
を紹介していきます。
(※画像のロード処理に関するものについては、
既に一般的で簡易的な方法がいくつもありますのでここでは触れません。)Webサイトにおける
リクエスト処理中のシーンはいろいろあります。
ロード中、送信中、検索中、登録中、ダウンロード中...etcこれらの処理が完了するまで、
ユーザーには待ってもらわなければいけないわけですが、
処理が完了するまで、この「・・・中」といったメッセージの表示が、
ナビゲートの役目を果たし、無表示に比べてユーザーの不安やいらだちが
育ちにくくなる可能性はあると思います。
この
「ウェイティングメッセージ」で、
最近Webで特に目にするようになったのは「ロード中」ですが、
先述したように、この画像のロード処理に関するものについては、
既に一般的で簡易的な方法がいくつもありますのでここでは触れません。
ここでは、それ以外の処理におけるウェイティングメッセージの表示方法
について紹介していきます。
[ 一般的な実装方法 ]例えば、一般的なウェイティングメッセージの実装方法としては、
1). いったんテンプレートだけレスポンスし、
処理中メッセージを表示させながら、Ajax などで
サーバーサイド処理を完了させてデータを表示させる方法。
2). サーバーサイドで、処理の段階に応じてバッファを flush させる方法。
などが挙げられます。
1) については Ajax 処理用のビジネスロジックが必要になる。
2) についてはヘッダー出力周りに気を使い、
またフレームワーク、テンプレートエンジンなどの環境との相性も影響する。
ビジネス仕様ならまだしも何気に面倒くさい。
そこで、Ajax 操作もバッファ操作もせず、
もっと簡易的にウェイティングメッセージを表示する方法を紹介していきます。
ここでは、わかり易くするために以下の条件を元に例を挙げていきます。
[ 条件 ]1. 空きドメイン検索アプリケーションとした場合
2. 1st.html で入力し 2nd.html へリクエストする。
( 1st.html から 2nd.html へ遷移 )
3. 2nd.html では 1st.hmtl での入力値を元に
WhoisサーバDBよりWhoisサーバを探しあて、
そのWhoisサーバに登録状況を問合せ、
レスポンスの内容により登録の有無を判断、
入力の内容ごとに繰り返し処理を実行し、
その結果を成型して返す。
4. Whoisサーバによりたまにソケット Timeout が発生する。
5. これらの処理に約5秒間かかったとする。
このような処理の場合に、
簡易的にウェイティングメッセージを表示させる方法の1つとして、
Javascript と
gifアニメーション画像を使い、
それらを
「1st.htmlページ上で表示する」方法
が挙げられます。
実装の仕方次第では、ページ遷移しなくても実現可能です。
[ 流れ ]では、流れに移ります。
1). 1st.html でユーザーが入力し、検索ボタンでサブミットする。
2). サブミットのクリックイベントを検知する。
3). 誤操作防止用にウィンドウ全体にマスクをかけページ内操作を無効にする。
4). クルクル画像などのgifアニメを用意し
1st.hmtl ページ上で処理中メッセージとして表示させる。
5). 2nd.htmlへリクエストが実行され、
処理が完了するまで 1st.html上 で処理中メッセージが表示される。
6. 処理が完了したら、2nd.html へ遷移され結果が表示される。
たったのこれだけ。
これを jQuery、jQueryプラグイン、gifアニメ画像だけで実装します。
[ コード例.1 ]そのコード例が以下です。
$(":submit").click(function()
{
/* ウィンドウ全体にマスクをかける */
var masker = $(window).maskAll("#FFFFFF", 0.6);
/* 処理メッセージ画像を追加 */
masker.append("<img src='/image_url' alt='検索中' />");
/* 処理メッセージ画像をウィンドウ中央に表示 */
$("img").centerView();
/* リクエスト開始。処理完了まで処理中メッセージが表示される */
});
上記の
$(window).maskAll() と
$("img").centerView() については、
オリジナルのjQueryプラグインです。
当ブログで公開していますので、必要な方はどうぞ。
jQuery プラグイン maskAll - jquery.mask.jsjQuery プラグイン centerView - jquery.centerView.js要するに、マスキングとセンタリングをしてるだけです。
ただし、Firefox 25 については、
リクエストされた段階で gifアニメが停止します。
(Firefoxの他バージョンでは検証してないので分かりません。)
[ 検証ブラウザ ]Firefox 25
Chrome 30
Opera 12
Safari 5
IE 8
Firefox 25 上で動かすためには、gifアニメをセットした後、
一度 comfirm()ダイアログなど出力系を表示する必要があります。
[コード例.2]上記コード例を改善したコード例が以下になります。
$(":submit").click(function()
{
/* ウィンドウにマスクをかける */
var masker = $(window).maskAll("#FFFFFF", 0.6);
/* 処理メッセージ画像を追加 */
masker.append("<img src='/image_url' alt='検索中' />");
/* 処理メッセージ画像をウィンドウ中央に表示 */
$("img").centerView();
/* ブラウザ判定 */
if (-1 !== navigator.userAgent.indexOf("Firefox")) {
if (! window.confirm("検索しますか？")) {
masker.unmask(true);
return false;
}
}
/* リクエスト開始。処理完了まで処理中メッセージが表示される */
});
この方法なら、Ajax処理もバッファ処理も必要なく簡単に実装可能です。
実装の仕方次第では、ページ遷移の必要もありません。
ブラウザツールバーのクルクルイメージだけでなく、
サイト側から処理中の意思表示が簡単にできるわけですから、
これらが少しでもユーザビリティの向上につながれば幸いです。
