• このエントリーをはてなブックマークに追加
ユーザのケアレスミスを防止しよう。業務で使えるオープンソース(136)「ローディングアイコン」
閉じる
閉じる

新しい記事を投稿しました。シェアして読者に伝えましょう

×

ユーザのケアレスミスを防止しよう。業務で使えるオープンソース(136)「ローディングアイコン」

2014-10-14 09:25

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

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

    ステータス表示

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

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

    ローディングアイコン

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

    ボタンの無効化

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

     
    この記事は有料です。記事を購読すると、続きをお読みいただけます。
    ニコニコポイントで購入

    続きを読みたい方は、ニコニコポイントで記事を購入できます。

    入会して購読

    この記事は過去記事の為、今入会しても読めません。ニコニコポイントでご購入下さい。

    コメントを書く
    コメントをするにはログインして下さい。