スケルトンスクリーン(ローディング)をJavaScriptとCSSのみで実装

この記事は GMOアドマーケティング Advent Calendar 2022 18日目の記事です。

こんにちは、22新卒のGMOアドマーケティングの天河です。
みなさん、普段スケルトンスクリーン
ローディングはどうやって実装していますか?

こういうやつ

大体の方は、ライブラリでクラスぽいっと入れ込んで、秒で実装完了!という感じですよね。
仮にそのライブラリを使用せず、生のJavaScriptとCSSのみで書けって言われたらどうでしょう。

ということでさっそく書いてみました。

完成

HTML


CSS


See the Pen skelton loading(ベース) by 10K (@10JII_K) on CodePen.


コード量は多く見えますが、スケルトンスクリーンの実現をするコード自体は少ないです。
やった〜〜〜

以上です。













えっ、解説??
はい、解説しますね。

実装

読み込み完了後にこういう画面を表示したいとします。


このベースとなるデザインのHTMLとCSSの該当部分は以下の通りです。 簡単に説明すると、画像のdivとタイトル+説明のdivをflexboxによって横並びにしています。
このベースのデザインの読み込み中の画面をこうしたいと私たちは思っています。



処理の手順としては、
  1. データ読み込み(ローディング)
  2. データをDOMに挿入
  3. ローディングを除去
です。

スケルトンスクリーン

上記のHTMLにて、最上階層にあるクラスのうち


がローディングを表示するためのクラスになります。
このクラスに関して以下のCSSを追加します。


まず ::before について説明します。

::before

疑似要素の一つです。似たものに疑似クラスというものがありますが、

疑似クラス HTML内の特定の状態(hover, 最初の行など)の要素にクラスを適用したかのように振る舞う
疑似要素 既存の要素にクラスを適用するのではなく、まったく新しい HTML 要素をDOMに追加したり、要素の特定の部分にスタイル付けをするかのように振る舞う

といった違いがあります。
ほかにも疑似クラスはコロン一つなのに対して疑似要素はコロンが二つといった違いがあります。
こいつらを使うと何が嬉しいかというと、別途JavaScriptを書いたりしなくても要素指定してスタイルを適応したりDOMを追加したっぽくできます。
この::beforeは何ができるかというと、指定した要素の直前に、疑似要素を子要素として挿入します。
また、

  1. content がないと::beforeは表示されない
  2. ::beforeはインライン要素である
ことを考慮して を指定してあげます。

linear-gradient

背景色としてこちらの見慣れないプロパティを指定しています。
これはCSSの関数で、二つ以上の色を指定して線形グラデーション画像を生成します。
以下は例です。

See the Pen Untitled by 10K (@10JII_K) on CodePen.


この例のCSSでは, linear-gradient を
と指定していますが、要約すると

「左から右へ、赤(透明) → 赤 → 赤(透明) と変化している画像つくって〜〜〜」

と言っています。
巷に溢れている例では、rgb(255, 0, 0, 0) の部分を transparent と書いているケースが多いですが、FireFoxとかでは transparentは rgb(0, 0, 0, 0) と認識されるため、白ではなく黒色っぽい色が混ざってしまいます。
なので丁寧に、ベースとなる色のtransparent値を0に設定したrgbで書いてあげましょう
つまりの最初の設定は

「左から右へ、白(透明)→ 白(ちょっと透明)→ 白(透明)と変化している画像つくって〜〜〜」

と言っています。アンミカが喜びそうな仕様ですね。

@keyframes

@keyframesは、animationの開始と終わりをカスタマイズできるおまじないです。
かなり大雑把な説明なので、もっと知りたい方はとても詳しく解説しているこちらを参考にしてください。

【CSS3】@keyframes と animation 関連のまとめ

@keyframesの直後でアニメーション名を定義できます。
0%はアニメーションの開始、100%はアニメーションの終了を意味しており、それぞれにCSSの設定ができます。
ここで設定しているtransformプロパティは、要素を移動させることができます。translateXは水平方向に移動する距離を示します。
このアニメーションを 1周期 1.2秒で一定の速さでループさせます。



しかしこれではまだ不完全です。

@keyframesで開始位置を -100% 終了位置を100%にしているため、他の要素と干渉するおそれがあります。
わかりやすく上記の例に色をつけて表示してみます。変えたのは ::before のbackgroundの色です。

See the Pen skelton ダブり by 10K (@10JII_K) on CodePen.


左のスケルトンの部分が右の要素にかぶさってしまっているのが確認できますよね。
なのでこのはみ出た部分は表示させないように、疑似要素(::before)の親要素に


を付与してあげます。

See the Pen skelton ダブらない by 10K (@10JII_K) on CodePen.


これで理想のスケルトンができあがりました。

一応これでスケルトンスクリーンの実装は完了ですが、実際のサービスっぽく読み込み終了後にスケルトンスクリーンを除去してデータを挿入するJavaScirptも実装してみましょう。

JavaScriptの実装

このスケルトンスクリーンをOFFにするには


クラスをJavaScriptで取り除いてあげるだけです。
取り除くのと同時に取得したデータも挿入してあげましょう。例では便宜的に3秒経ったらスケルトンスクリーンを取り除くようにしています。
querySelectorAll は forEach は使えても map 関数などは使えない謎仕様なので、fromで配列に変えて処理してあげましょう(前回の記事のはてブコメントで教えてくださった方、ありがとうございます😊)


これで完成です。  

See the Pen skelton loading (完成) by 10K (@10JII_K) on CodePen.


ねっ、そんなに難しくないでしょ?
(地味にベースのデザインを整えるのが一番苦労した)


また、縦バージョンはこちらになります。

変更点としては、ベースのデザインの div構造と display を変更し、width の設定を無くしました。
_article_skeltonに関するCSSで変更しているのは、::beforeの width: 100% を除去したことだけです。


See the Pen skelton column(完成) by 10K (@10JII_K) on CodePen.


おまけ(背景)

GMOアドマーケティングではTAXELというプロダクトでレコメンドウィジェットを扱っています。

こういうやつ


レコメンドウィジェットの仕組みを簡単に説明すると、

  1. メディア様が所有しているウェブサイトにこちらの用意した divタグと scriptタグを設置していただく
  2. そのdivタグが設置されたページにアクセスすると、divタグと一緒に設置したscriptタグが読み込まれ、レコメンド記事を格納しているサーバにリクエストが送られる
  3. サーバからのレスポンスの中にあるレコメンド記事のDOMが、設置した divタグ の中に配置される
という手順です。

メディア様の所有するウェブサイトには、私たちのレコメンドウィジェット以外にも、たくさんの他社のレコメンドウィジェットが設置されているケースが多いです。
そのためライブラリなどをこちらが気軽に設置してしまうと他社のウィジェットに影響を与えかねないので、生のJavaScriptでゴリゴリ書いている、という背景があります。
なのでスケルトンスクリーン一つ実装するのにも、ライブラリのクラス適応させてポンッというわけにもいかず、ゴリゴリJavaScriptを書いていくしかないのです。
ものすごくめんどくさくはありますが、定番UIの仕組みは学べていいかもしれませんね。
(ワンチャン、自分でOSS作る時の土台になるかも!?)


つくったもの

おわりに

明日はU.Yさんによる「GMO SSPのCloud(Google Cloud Platform)移行の失敗と成功のまとめ」です。
引き続き、GMOアドマーケティング Advent Calendar 2022 をお楽しみください!  


■学生インターン募集中!
https://note.gmo-ap.jp/n/nc42c8a60afaf

■エンジニア採用ページはこちら!
https://note.gmo-ap.jp/n/n02cbeb6edb0d

■GMOアドパートナーズ 公式noteはこちら!
https://note.gmo-ap.jp/