브라우저로 표시하는 페이지를 만들 때, 마침내 만드는 것이 번거롭고 어설프기 쉬운 것이 「에러가 발생했을 때에 유저에게 통지하는 화면 표시」

특히 저는 인프라 엔지니어이므로 평소 CLI 경유에서의 조작이 많기 때문에, 약간의 코드의 에러 핸들링 등은 「최악의 콘솔에 표시하면 좋겠다」 정도의 감각으로 너무 「에러를 유저에게 통지하는 부분」의 구현 에 힘을 쏟은 경험이 없었습니다.

이 기사에서는 여기 에서 소개한 OSS에 「서버에서 실행한 ShellScript와 그 실행 결과를 브라우저에 표시한다」라는 기능을 추가할 때 「ShellScript가 에러 종료했을 때의 화면」을 할 필요가 있다 그래서 그 구현 방법을 소개합니다.

실제 화면

먼저 실제로 만든 화면을 살펴 보겠습니다.



배경에는 실제로 오류가 발생했을 때 catch 되는 객체를 JSON으로 변환하여 표시합니다.

화면의 중앙에서 점멸하고 있는 것이 에바감을 연출하는 메시지가 됩니다

에러 메세지가 영어이므로 「경고」의 문자만 일본어로 하는 것도 통일감이 없을까 생각해, 영어로 ERROR라고 표시하기로 했습니다

에바감에 대해서

에러 화면을 만들 때, 디자인 경험이 전혀 없는 내가 「에러와 같은 이상 사태가 발생했을 때에 표시되는 화면」으로, 최초로 생각해 온 것이, 에바의 「경고」화면이었습니다

둥근 팩을 할 수는 없기 때문에, 에바의 그 화면의 「경고」감이란, 도대체 어떤 요소로 구성되어 있는지, 라는 것을 나 나름대로 생각해, 이하의 포인트를 억제해 구현하도록(듯이) 했습니다.

빨간색 또는 노란색 같은 경계색 + 검정으로 화면을 채우기

문자 (메시지)가 돋보이는 (여기서는 두껍게)

깜박임과 같은 비교적 움직임이 빠르고주의를 끄는 애니메이션이 있습니다

실제 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를 반죽하는 것도 없고, 정교한 표현을 실현하는 문턱이 꽤 내려간 것 같아요

앞으로 에러 화면을 구현하는 분들에게 어떤 영감이 되길 바랍니다.