エヴァ感のあるエラー画面をCSSアニメーションで作った話

ブラウザで表示するページを作るとき、つい作り込むのが面倒でサボりがちなのが 「エラーが発生した際にユーザに通知する画面表示」

特に私はインフラエンジニアなので、普段CLI経由での操作が多いため、ちょっとしたコードのエラーハンドリングなどは 「最悪コンソールに表示すればいいや」 くらいの感覚であまり「エラーをユーザに通知する部分」の実装に力を入れた経験がありませんでした

この記事ではこちらで紹介したOSSに「サーバで実行したShellScriptと、その実行結果をブラウザに表示する」という機能を追加する際に「ShellScriptがエラー終了したときの画面」を作る必要があったので、その実装方法を紹介します

実際の画面

まずは実際に作った画面を見てみましょう

背景には実際にエラーが発生した際に catch されるオブジェクトをJSONに変換して表示しています

画面の中央で点滅しているのがエヴァ感を演出するメッセージになります

エラーメッセージが英語なので「警告」の文字だけ日本語にするのも統一感がないかと思い、英語でERRORと表示することにしました

エヴァ感について

エラー画面を作る際に、デザインの経験が全くない私が「エラーのような異常事態が発生したときに表示される画面」で、最初に思いついたのが、エヴァの「警告」画面でした

丸パクりするわけにはいかないので、エヴァのあの画面の「警告」感とは、いったいどういった要素で構成されているのか、というのを私なりに考え、以下のポイントをおさえて実装するようにしました

• 赤or黄のような警戒色 + 黒で画面を埋める
• 文字(メッセージ)が際立つようになっている(ここでは太くした)
• 点滅などの比較的動きが早く、注意を引くアニメーションがある

実際の HTML / CSS を見てみる

HTMLタグは単に div 要素を使っています。内側の文字は h2 p です

error.html

<div id="error_baner">
  <h2>ERROR</h2>
  <p>Something wrong occurred</p>
</div>

cssは少し長いです。 flex-box で文字をレイアウトしていますが、CSSアニメーションとはあまり関係ないので、説明は割愛します

error.css

  <style>
    #error_baner {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      position: fixed;

      padding: 17px 17px 17px 17px;

      border-style: solid;
      border-width: 4px;
      border-color: rgba(255,0,0,1.0);
      border-radius: 17px 17px 17px 17px;

      background-color: rgba(0,0,0,1.0);
      ...(続く)...

ここからが CSSアニメーション にかかわる部分です

error.css

      ...(続く)...
      animation: flicker 0.85s linear 0s infinite alternate none running;
    }
    @keyframes flicker {
      0% {
        opacity: 0.0;
      }
      50% {
        opacity: 0.34;
      }
      100% {
        opacity: 0.85;
      }
    }

    #error h2 {
      font-size: 34px;
    }
    #error p {
      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をこねくり回すことも無く、凝った表現を実現する敷居がかなり下がったように思います

今後エラー画面を実装する方に、何らかのインスピレーションになればと思います