ブラウザで表示するページを作るとき、つい作り込むのが面倒でサボりがちなのが 「エラーが発生した際にユーザに通知する画面表示」
特に私はインフラエンジニアなので、普段CLI経由での操作が多いため、ちょっとしたコードのエラーハンドリングなどは 「最悪コンソールに表示すればいいや」くらいの感覚であまり「エラーをユーザに通知する部分」の実装に力を入れた経験がありませんでした
この記事ではこちらで紹介したOSSに「サーバで実行したShellScriptと、その実行結果をブラウザに表示する」という機能を追加する際に「ShellScriptがエラー終了したときの画面」を作る必要があったので、その実装方法を紹介します
実際の画面
まずは実際に作った画面を見てみましょう
背景には実際にエラーが発生した際に catchされるオブジェクトをJSONに変換して表示しています
画面の中央で点滅しているのがエヴァ感を演出するメッセージになります
エラーメッセージが英語なので「警告」の文字だけ日本語にするのも統一感がないかと思い、英語でERRORと表示することにしました
エヴァ感について
エラー画面を作る際に、デザインの経験が全くない私が「エラーのような異常事態が発生したときに表示される画面」で、最初に思いついたのが、エヴァの「警告」画面でした
丸パクりするわけにはいかないので、エヴァのあの画面の「警告」感とは、いったいどういった要素で構成されているのか、というのを私なりに考え、以下のポイントをおさえて実装するようにしました
- 赤or黄のような警戒色 + 黒で画面を埋める
- 文字(メッセージ)が際立つようになっている(ここでは太くした)
- 点滅などの比較的動きが早く、注意を引くアニメーションがある
実際の HTML / CSS を見てみる
HTMLタグは単に div要素を使っています。内側の文字は h2pです
<divid="error_baner"><h2>ERROR</h2><p>Something wrong occurred</p></div>cssは少し長いです。 flex-boxで文字をレイアウトしていますが、CSSアニメーションとはあまり関係ないので、説明は割愛します
<style>#error_baner{display:flex;flex-direction:column;justify-content:center;align-items:center;position:fixed;padding:17px17px17px17px;border-style:solid;border-width:4px;border-color:rgba(255,0,0,1.0);border-radius:17px17px17px17px;background-color:rgba(0,0,0,1.0);...(続く)...ここからが CSSアニメーションにかかわる部分です
...(続く)...animation:flicker0.85slinear0sinfinitealternatenonerunning;}@keyframesflicker{0%{opacity:0.0;}50%{opacity:0.34;}100%{opacity:0.85;}}#errorh2{font-size:34px;}#errorp{font-size:17px;}@keyframe flickerの中で時間変化(%で表現)にともなって opacity (要素の不透明度)を変化させるように定義しておいて、それを実際の要素に適用するときには animation: flicker ...と指定します
そしてアニメーションのスピードや開始時間の遅延などをのパラメータを設定すれば、完成です
CSSアニメーションの使い方の説明は、探せばより詳しい記事が出てきますので、こちらでは簡単に説明します
animation:<animation-nameアニメーションの名前(@keyframesで指定した名前)><animation-durationアニメーション開始から終了までの時間><animation-delayアニメーション開始までの遅延時間><animation-iteration-countアニメーションを繰り返す回数><animation-directionアニメーションの再生方向(0%->100%,100%->0%など)><animation-timing-functionアニメーションの緩急の付け方><animation-fill-modeアニメーション終了後にもcssを適用したままにするか><animation-play-stateアニメーションを実行するか>おわりに
CSSアニメーションが登場したおかげで、デザイナーでもフロントエンドエンジニアでもない私でも、JavaScriptをこねくり回すことも無く、凝った表現を実現する敷居がかなり下がったように思います
今後エラー画面を実装する方に、何らかのインスピレーションになればと思います