> Blog > 技術 > サスケ Works｜ローディング画面を作成する方法

小原 達也/ 2023年 12月 5日/ 技術

こんにちは！小原です。

今回はサスケWorksでローディング画面を表示させる方法をご紹介します。
ローディング画面は、重めの処理をさせている最中にユーザーに処理中であることを伝えます。

ユーザーがクリックなどの操作をした後に反応がないと、ユーザーは「アプリが正常に動作しているのだろうか…？」と不安を感じてしまうもの。
そのため、UI/UXの観点からローディング画面を設置したいシーンは多くあると思います。

あらかじめJavaScriptとCSSコードをご用意しましたので、本カスタマイズについてもコピペ + α で実装いただけます。

※1. 本カスタマイズにはサスケWorksプレミアムプランへの加入が必要です。
※2. 基礎的なJavaScriptの知識が必要です。

>> その他のサスケWorksカスタマイズ記事はこちら

完成イメージ

下の例では、ボタンクリックから情報が表示されるまでの間に「ローディング画面」を表示させています。

今回はこの画面を表示するためのコードと、具体的な手順を解説します。

実装の概要

まずはざっくりとローディング画面が表示されるまでの仕組みを解説します。

実装後、アプリ上の画面は次のようなレイヤー構造になります。

最低面にある青色の部分が、もともとのサスケWorksアプリの画面です。

ユーザーからみて手前側に、次の二つのレイヤーを重ねます。

  1. 読み込み中を伝えるため、アニメーションを表示させるレイヤー
  2. 要素を選択できないことを伝えるため、画面全体をグレーアウトさせるレイヤー

このようなレイヤー構造にするため、CSSのz-indexプロパティというものを使っています。

ただしこれでは常にローディング画面が表示されてしまい、不都合です。
そのため、通常は隠しておいて必要な時だけJavaScriptで表示させるようにします。

つまり、通常は次のような状態にしておきます。

隠したり表示したり、といった切り替えはJavaScriptで制御します。
つまり、ユーザーの何らかの動作に応じて、ON / OFF を切り替えていく方針です。

実装の流れ

実装の流れは次の通りです。

  1. JavaScriptコードの貼り付け
  2. CSSコードの貼り付け
  3. ローディング画面の表示・非表示にする部分にコードを追加
  4. 動作確認

順番に解説していきます。

1.JavaScriptコードの貼り付け

アプリの右上のスパナマークをクリックします。

続いて、サイドバーから「カスタムコード」を選択。

右上の「新規登録」ボタンをクリックして、設定画面に進みます。

ここではJavaScriptコードを貼り付けるため、次の内容を入力してください。

  • 状態: 公開
  • 名称: ローディング画面（JS）
  • 適用画面: レコード登録画面
  • コード種別: JavaScript

入力が終わったら「保存」ボタンをクリックして設定を終了します。

「ソースコードの入力」を選択。

以下のようなテキストエディタが開きます。
サンプルコードが入力されているので、これを削除してまっさらな状態にしてください。

続いて、以下のJavaScriptコードをコピー＆ペーストします。

/*!
 * SaaskeSDK
 * Copyright (c) North Torch Co.,ltd. 2023
 * Released under the MIT License.
 * ライセンスの全文は以下をご参照ください
 * LICENSE: https://github.com/northtorch/saaske-sdk/blob/main/LICENSE.md
 * README: https://github.com/northtorch/saaske-sdk/blob/main/readme.md
*/

// ローディング画面を表示する
function showLoadingScreen(){
    document.getElementById('loading').style.display = 'block';
};

// ローディング画面を隠す
function hideLoadingScreen(){
    document.getElementById('loading').style.display = 'none';
};

function addLoader() {
    // HTMLコードを文字列として保存
    const htmlString = `
    <div id="loading" class="loading-screen" style="display: none;">
        <div class="loading-screen"></div>
        <div id="custom-loader" class="custom-loader">
            <div><span></span></div>
            <div><span></span></div>
            <div><span></span></div>
            <div><span></span></div>
        </div>
    </div>
    `;

    // 新しいdiv要素を作成し、HTMLコードを設定
    const newDiv = document.createElement('div');
    newDiv.innerHTML = htmlString;

    // 作成したdiv要素をbodyの最後に追加
    document.body.appendChild(newDiv);
};
window.addEventListener("DOMContentLoaded", addLoader);

上記のコードにより、ローディング画面を表示するスペースが追加されます。

ここではあくまでスペースが確保されただけなので、見た目の変化はありません。

2.CSSコードの貼り付け

ここからはCSSを使って視覚的な効果を加えます。

先ほどと同様、アプリの右上のスパナマークをクリックします。

続いて、サイドバーから「カスタムコード」を選択。

右上の「新規登録」ボタンをクリックして、設定画面に進みます。

今回はCSSコードになりますので、以下の内容を入力します。

  • 状態: 公開
  • 名称: ローディング画面（CSS）
  • 適用画面: レコード登録画面
  • コード種別: CSS

入力が終わったら「保存」ボタンをクリックして設定を終了します。

次に以下の画面に遷移するので、「ソースコードの入力」をクリックして先に進みましょう。

テキストエディタに以下のコードをコピ＆ペーストします。

/*!
 * SaaskeSDK
 * Copyright (c) North Torch Co.,ltd. 2023
 * Released under the MIT License.
 * ライセンスの全文は以下をご参照ください
 * LICENSE: https://github.com/northtorch/saaske-sdk/blob/main/LICENSE.md
 * README: https://github.com/northtorch/saaske-sdk/blob/main/readme.md
*/

.loading-screen {
    /* ポジション */
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 背景色 */
    background-color: rgba(0, 0, 0, 0.5);
    /* custom-loaderより奥に表示 */
    z-index: 3000;
}

.custom-loader {
    /* ポジション */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 選択を禁止 */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    /* loading-screenより手前に表示 */
    z-index: 3100;
}

/* ドット1つ1つが入っている箱 */
.custom-loader div {
    width: 28px;
    height: 28px;
    float: left;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    position: relative;
}

/* ドットそのもの */
#loading span {
    position: absolute;
    display: block;
    border-radius: 100px;
    animation: pulse 1.5s infinite;
    /* animation-timing-function
    以下からも選択可能
    - linear
    - ease
    - ease-in
    - ease-out
    - ease-in-out
    */
    animation-timing-function: linear;
}

/* サスケWorksロゴ色を採用 */
@keyframes pulse {
    0% {
        width: 10px;
        height: 10px;
        background: #FF83CC
    }
    10% {
        width: 20px;
        height: 20px;
        background: #5087E7
    }
    40% {
        width: 10px;
        height: 10px;
        background: #27CDBE
    }
    60% {
        width: 20px;
        height: 20px;
        background: #F49700
    }
    80% {
        width: 0px;
        height: 0px;
        background: #80BC2D
    }
}

/* 各ドットの出現周期を調整 */
#custom-loader div:nth-child(1)>span {
    animation-delay: 0.15s;
}
#custom-loader div:nth-child(2)>span {
    animation-delay: 0.30s;
}
#custom-loader div:nth-child(3)>span {
    animation-delay: 0.45s;
}
#custom-loader div:nth-child(4)>span {
    animation-delay: 0.60s;
}

上記のコードを貼り付けた段階で、アニメーションとグレーアウトの部分のレイヤーが完成します。

ただし、この段階では画面にローディング画面は表示されません。
その原因は、先ほど貼り付けたJavaScriptコードの中に以下が含まれているためです。

style="display: none;"

display: none; の場合には表示されません。

例えば次のように変更すると、ローディング画面が表示されます。

style="display: block;"

先ほどコピペしていただいたコードには、これらをON / OFFする関数を入れておきました。

次のセクションでは、これらの関数を使ってJavaScriptでこの切り替えを行い、ローディング画面を表示したり、非表示にしたりしましょう。

3.ローディング画面の表示・非表示にする部分にコードを追加

最後に、次の内容を実装します。

  1. 必要なときにローディング画面を表示させる
  2. 必要がなくなったらローディング画面を隠す

仮に、すでに以下のようなJavaScriptコードが書かれていると仮定しましょう。
あるAPIを叩きに行って、dataをコンソールに出力するだけのコードです。

someButton.addEventListener('click', function (event) {
    // APIを叩く
    const postEndpoint = `https://example.com/api/v1/post`;
    fetch(postEndpoint, {
        method: 'POST',
        mode: 'cors',
    })
        .then(response => response.json())
        .then(data => {
            console.log(data);
        })
        .catch(error => {
            console.error('Error: ', error)
        });
    event.preventDefault();
});

この場合にはfetchをする直前と、fetchが終わったタイミングでローディング画面をON / OFFすればよいことになります。

つまり、コードは以下のようになります。

someButton.addEventListener('click', function (event) {
    // ローディング画面を表示
    showLoadingScreen();

    // APIを叩く
    const postEndpoint = `https://example.com/api/v1/post`;
    fetch(postEndpoint, {
        method: 'POST',
        mode: 'cors',
    })
        .then(response => response.json())
        .then(data => {
            // ローディング画面を非表示
            hideLoadingScreen();
        })
        .catch(error => {
            console.error('Error: ', error)
            // ローディング画面を非表示
            hideLoadingScreen();
        });
    event.preventDefault();
});

以下を行いました。

  • ローディング画面を表示させたい部分に showLoadingScreen(); を設置
  • ローディング画面を隠したい部分に hideLoadingScreen(); を設置

これで、以下のような挙動になります。

  • ボタンがクリックされると、ローディング画面が有効化される
  • fetchが終わると、ローディング画面が無効化される

以上でローディング画面の実装が終わりました。

4.動作確認

最後に狙った通りの動作ができているかを確認していきます。

  • ボタンをクリックすると、ローディング画面が表示される
  • 情報取得が終わると、ローディング画面が消える

実装できていることが確認できました！

ソースコード公開中

1.記事でご紹介したコードはこちらで公開しています。
https://github.com/northtorch/saaske-sdk/tree/main/loader_1

2.別デザインもご用意しました。
https://github.com/northtorch/saaske-sdk/tree/main/loader_2

記事中でも解説しましたが、JavaScriptはJavaScriptコードとして、CSSはCSSコードとしてサスケWorks上に登録することにご注意ください。

なお2つ目のデザインの実行結果は以下の通りです。

こちらは addLoader(); の引数として文字列を渡すことで、表示される文字列を「NowLoading」から変更できます。

例えば、「読み込み中」と表示させたい場合には以下のように変更してください。

addLoader('読み込み中');

使い方は1.と同様です。
コードをコピペしていただいた上で適切な場所で style を変更してください。

サスケWorks関連記事はこちら

本ブログでは、サスケWorksのカスタマイズ系記事も順次アップ予定です。

NorthTorch - サスケWorks 関連記事

ぜひ、別記事の方もご覧ください。