今回のテーマはローディングアイコンです。最近はWebアプリケーション化が進んでおり、JavaScript/Ajaxを多用した開発が多くなっています。アプリのように画面遷移しないケースも増えており、スピーディーになっているものの、処理状態がわかりづらくもなっています。

そこで使っていきたいのがローディングアイコンをはじめとするステータス、二重処理の防止策です。手法およびオープンソース・ソフトウェアを紹介します。

ステータス表示

最近多いタイプです。YouTubeなどで別画面に切り替わる際に画面上部に読み込み中のステータスが表示されます。元々アプリには多かったので、それをWebにも持ち込んだ仕組みといえます。

視認性はあまり高くないので、使い慣れたWebサービスでないと気づかないことも多そうです。

ローディングアイコン

最も多い手法で、従来であればアニメーションGIFを使うことが多かったように思います。最近ではSVGアニメーションであったり、CSS3アニメーションを使って実現するものもあります。画像は多少なりともリソース読み込みに時間がかかるので、あらかじめ読み込んでおくか、SVG/CSS3でリソース読み込みのロスがない仕組みのが良いでしょう。

ボタンの無効化

もっともシンプルですが確実な方法です。ボタンをdisableにしておくことで、二回押せないようにします。ただしJavaScriptの内部的エラーがあった時に無効状態のまま止まってしまうことがあるので注意が必要です。