ローディングアニメーションを1回のみ表示しユーザビリティを向上させましょう #2/2

はじめに

概要

ローディングアニメーションは、初めて訪れるユーザーに強い印象を与えるためのものです。しかし、2回目以降はロード時間が長くなり、逆にユーザーに不満を与える可能性があります。そこで、Javascriptでブラウザのキャッシュをコントロールし、ローディングアニメーションを1回のみ表示する方法を実装します。サンプルコードを配布してますのでぜひ活用してください。実装には前回のコードを使用しますのでそちらも参考ください。

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

読者

ローディングアニメーションを1回のみ表示しユーザーアビリティを向上…は、最初にどこを理解するとよいですか？

木村

対象要素を取得する処理、動作を始める条件、見た目を変える処理の三つに分けると、コードの流れを追いやすくなります。

読者

実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか？

木村

はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。

実装動画

実装動画では、ローディングアニメーションを1回のみ表示しユーザーアビリティを向上させましょう #2/2を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

実装する内容は以下の動画を参照ください。

実装動画で押さえたいポイント

実装動画は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

実装動画の確認方法

ブラウザーのコンソールにエラーがないかを確認し、クリックやスクロールを繰り返してもイベントが重複しないかを試します。スマートフォン幅とキーボード操作も確認してください。

サンプルコード

サンプルコードでは、ローディングアニメーションを1回のみ表示しユーザーアビリティを向上させましょう #2/2を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

こちらが上記の動画のサンプルコードです。

Javascript

class Main {
  constructor() {
    this._loading();
  }

  _loading() {
    document.addEventListener("DOMContentLoaded", () => {
      var webStorage = function () {
        if (sessionStorage.getItem("access")) {
          /*
            2回目以降アクセス時の処理
          */
          // ここに記述します
        } else {
          /*
            初回アクセス時の処理
          */
          sessionStorage.setItem("access", "true"); // sessionStorageにデータを保存

          // ここに記述します
        }
      };
      webStorage();
    });
  }
}

new Main();

ブラウザのキャッシュを活用したコードはこちらです。上部に2回目のコードを記述し、下部に初回のコードを記述します。

サンプルコードで押さえたいポイント

サンプルコードは、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

コードの解説

コードの解説では、ローディングアニメーションを1回のみ表示しユーザーアビリティを向上させましょう #2/2を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

初回のコード

// ここに記述します
const loading = gsap.timeline();
loading
  .to(".loading", {
    // ロード時のチラつきの対策
    display: "block",
  })
  .from(
    ".js_1",
    1,
    {
      opacity: 0,
      y: 50,
    },
    2
  )
  .to(".js_1", 1, {
    delay: 0.5,
    opacity: 0,
    y: 50,
  })
  .to(".js_2", 1, {
    display: "none",
  })
  .to(".js_3", 1, {
    display: "block",
    opacity: 1,
    visibility: "visible",
    y: -10,
    delay: 1,
  });

ローディングアニメーションチラつきの対策こちらは前回実装したコードを添付しております。１点変更したのは、loadingアニメーションのチラつきが発生していたため、CSSで調整しGsapでdisplay:blockで対応しております。

２回目のコード

// ここに記述します
          const mv = gsap.timeline();

          mv.to("#global-container", 1, {
            opacity: 1,
            visibility: "visible",
            display: "block",
          }).from(
            "#global-container",
            {
              y: 50,
            },
            "<"
          );

こちらもシンプルで、Gsapのtimelineを使用して記述しております。timelineについてはこちらを参照ください。

以上です。お疲れ様でした。実装はできましたでしょうか？何か疑問点やご質問がございましたらお気軽にご連絡ください。お問い合わせフォームはこちら

実装前に確認しておきたいこと

ここでは、ローディングアニメーションを1回のみ表示しユーザーアビリティを向上…を実際の制作へ取り入れる前に、準備しておきたい内容を整理します。先に作業範囲と確認方法を決めておくと、既存ページへの影響を抑えながら進められます。

作業の目的と変更範囲を決める

対象要素を取得する処理、動作を始める条件、見た目を変える処理の三つに分けると、コードの流れを追いやすくなります。サンプルをそのまま貼り付ける前に、どのページ、どの要素、どの利用者へ影響するのかを書き出してください。目的が明確であれば、必要以上にコードや設定を増やさずに済みます。

元の状態へ戻せるようにする

テーマや設定を変更するときは、対象ファイルや設定値のコピーを残します。複数の変更を一度に行わず、一つ反映するたびに表示と動作を確認すると、問題が起きても原因を切り分けやすくなります。

よくあるつまずきと確認方法

ローディングアニメーションを1回のみ表示しユーザーアビリティを向上…が期待どおりに動かない場合は、コードを追加し続ける前に、読み込み順、対象要素、設定値、キャッシュの順で確認します。小さな入力ミスや確認条件の違いが原因になることも少なくありません。

変更が反映されない場合

保存したファイルと表示中のページが対応しているかを確認し、キャッシュを消して再読み込みします。ブラウザーの開発者ツールやWordPressのエラーログを確認すると、読み込み失敗や記述ミスを見つけやすくなります。

公開前の最終確認

まとめ

ブラウザのキャッシュを活用し、アニメーションを１回のみとする
Javascriptのコードを使用する
初回のコード並びに2回目のコードそれぞれ記述する
アニメーションにはGsapが便利

ローディングアニメーションを1回のみ表示しユーザーアビリティを向上させましょう #2/2

目次

実装動画

実装動画で押さえたいポイント

実装動画の確認方法

サンプルコード

Javascript

サンプルコードで押さえたいポイント

コードの解説

初回のコード

２回目のコード

実装前に確認しておきたいこと

作業の目的と変更範囲を決める

元の状態へ戻せるようにする

よくあるつまずきと確認方法

変更が反映されない場合

公開前の最終確認

まとめ

コメント（0件）

会員ログイン後にコメントできます

目次

実装動画

実装動画で押さえたいポイント

実装動画の確認方法

サンプルコード

Javascript

サンプルコードで押さえたいポイント

コードの解説

初回のコード

２回目のコード

実装前に確認しておきたいこと

作業の目的と変更範囲を決める

元の状態へ戻せるようにする

よくあるつまずきと確認方法

変更が反映されない場合

公開前の最終確認

まとめ

関連する記事

【Gsap】SVGテキストアニメーション

【Gsap】でSVGをアニメーション

【Gsap】スクロールアニメーション

会員ログイン後にコメントできます