時間のかかる非同期通信を行っている間は、通信中であることをユーザーに知らせつつユーザーによる画面操作を禁止したほうが良いことがある。Ajaxという方式でサーバと非同期で通信することで画面に表示するための情報を取得したりユーザーの入力をサーバに送信したりする。同期通信と異なり、非同期通信の場合は通信中もユーザーインターフェイスがユーザーと対話出来るため、通信中にユーザーが画面操作を行うことにより別のアクションを起こされては困る場合には特別の配慮が必要である。クレジットカードの決済画面でユーザーが送信ボタンを押しサーバとの通信が行われている数秒の間に送信ボタンが再度押されたり、メニューを操作して別の画面に飛ばれたりしてしまっては困るといった具合だ。クレジットカード決済のような重要な局面でなくても、通信が完了する前に別の画面操作が行われてしまっては困るケースは結構ある。時間のかからない通信に関しても油断は出来ない。ユーザーがモバイル端末を利用している場合、通信状況によってはサーバのレスポンスが返ってくるのに意外と時間がかかるかもしれない。Ajax通信を行う全ての場面でこの問題に配慮するのは難しいと思うが、少なくともクリティカルであることが先にわかっているものについては対処しておくべきだろう。Bootstrapのモーダルウィンドウを利用する方法を紹介しているが、表示中は元の画面の操作が禁止されるというモーダルウィンドウの性質と、Bootstrapのプログレスバーコンポーネントを利用して前述の問題へ対応する方法を紹介する。Map("result"->"通信成功")}スクリーンショット通信開始ボタンを押すとレスポンスに時間のかかるAPIを呼び出す。モーダルが表示され、プログレスバーのストライプが動く。背景がグレーになっていることから想像できるように、この間ユーザーは画面操作を行えない。本来プログレスバーといえば進捗状況を表示するものだが、サーバ側の処理が実際にどこまで進捗しているかを知る方法が無いのと、ここではユーザーに「何か時間のかかる処理をしているので待って欲しい」という意思表示を明確に出来れば良いので進捗を100%に固定している。通信が終わるとモーダルはクローズされ、ユーザーは画面操作を行うことができるようになる。$modalサービスを使ってモーダルを画面に表示する。モーダルを後でクローズできるように、開いたモーダルのインスタンスは変数に格納しておく。get/query/save/deleteのようなリクエストを実行する際には引数として通信完了時の処理を成功時・失敗時のそれぞれについて渡すことが出来るので、いずれの場合であってもモーダルを閉じるように記述する。ストライプ模様のバーをグルグルさせる。伸びるアニメーションは無し。2014年3月14日お勧めカテゴリ英語でアニメ観ようずなじみ深い日本製アニメの英語版DVDで、字幕と音声から英語を学びましょうという趣旨のシリーズ記事です。APIを実装してみましょう。嶋田大貴のブログです。