Holmes開発者ブログ

契約マネジメントシステム「ホームズクラウド」の開発者ブログです

Facebookライクなローディング、スケルトンスクリーンをVue.js、Reactで簡単に実装する

こんにちは!株式会社Holmesでエンジニアをしている平田です。

みなさんスケルトンスクリーンをご存知ですか?
FacebookYouTubeなどで使われているローディングのことをスケルトンスクリーンと言ったりします。
今では様々なWEBサイトでも使われているため、よく目にするのではないでしょうか

f:id:k-hirata:20200604162130g:plain
YouTubeローディング

ケルトンスクリーンを採用することで、以前よく使われていたスピナー等に比べて、
ローディング後に表示される情報を推測できるようになるため、待たされている時間を短く感じさせることができます。
そんなスケルトンスクリーンをVue.jsで簡単に実装できるvue-content-loaderの使い方を紹介します。
これはReact用のreact-content-loaderのvue版みたいなもののため、Reactを使われている方にも参考になると思います。

vue-content-loader使い方

インストール

# yarnを利用している方
yarn add vue-content-loader
# npmを利用している方
npm i vue-content-loader

使い方

使い方はいたって簡単で、下記のようにコンポーネントをif文で切り替えて表示したいコンテンツと差し替えるだけです。

<template>
  <content-loader v-if="isLoading"></content-loader>
</template>

<script>
import { ContentLoader } from 'vue-content-loader'

export default {
  components: {
    ContentLoader
  },
  data: {
    isLoading: true
  }
}
</script>

また、FacebookLoaderやInstagramLoaderなど5種類のローディングがパッケージに含まれているため、簡単に使ってみることもできます。

カスタムローディングの作り方

vue-content-loaderはSVGを使って作成されています。
そのため、先ほどの<content-loader>の子要素に表示したいローディングのSVGを指定するだけで、カスタムローディングが作成できます。

<content-loader width="130" height="40">
    <circle cx="20" cy="20" r="10" />
    <rect x="40" y="15" rx="4" ry="4" width="80" height="10"/>
</content-loader>

これをtemplateとして登録すればいつでも使えるようになります。

f:id:k-hirata:20200604162224g:plain
見本1:アイコン+ユーザー名

注意点としては、fill="none"を使って枠線のみの図形を表示しようとしても、塗りつぶされた図形が表示されます。
これは内部的にはユーザーが指定したSVGをclipPath要素で指定することで表示しているためです。

SVGなので、ellipse(楕円)やpolygon(多角形)、text(文字)も使えます。lineやpolylineなどの線分は、表示されないか、内側が塗りつぶされるためご注意ください。

f:id:k-hirata:20200604162311g:plain
<ellipse cx="60" cy="20" rx="50" ry="10" />
f:id:k-hirata:20200604162352g:plain
<polyline points="40,0 40,80 80,80" />
⬆︎L字を指定していますが三角に塗りつぶされています
f:id:k-hirata:20200604162417g:plain
<polygon points="150,75 179,161 269,161 197,215 223,301 150,250 77,301 103,215 31,161 121,161" />
f:id:k-hirata:20200604162439g:plain
<text x="20" y="20" font-size="30px">Hello World!</text>

また、こちらのオンラインツールを使うと、コーディングせずに図形を配置するだけでローダーを自作することもできます。活用してみてください。

プロパティ

プロパティを指定することでもローディングをカスタムできます。

Prop Type Default Description
width number 400 viewBoxの幅および、ビューポート(表示領域)の幅
height number 130 viewBoxの高さおよび、ビューポート(表示領域)の高さ
speed number 2 アニメーション効果の速度
preserveAspectRatio string 'xMidYMid meet' svgのpreserveAspectRatio属性
primaryColor string '#f9f9f9' 表示ローディングの基本色です
secondaryColor string '#ecebeb' 線形グラデーション(linearGradient)の中間色です。アニメーションでこちらの色が駆け抜けて見えます。
uniqueKey string randomId() SSRをしている場合、こちらを指定しないと、randomIdが2度生成されてしまい、ローディングが一瞬で消えてしまいます。
animate boolean true アニメーションさせるかを指定できます
baseUrl string empty string <head /><base url />を指定している場合、同様に指定する必要があります。
primaryOpacity number 1 primaryColorのopacityを指定できます。
secondaryOpacity number 1 secondaryColorのopacityを指定できます。

<content-loader width="130" height="40" primaryColor="red" secondaryColor="blue" :speed="5">
    <circle cx="20" cy="20" r="10" />
    <rect x="40" y="15" rx="4" ry="4" width="80" height="10"/>
</content-loader>

f:id:k-hirata:20200604162510g:plain
見本2

おわりに

いかがでしたでしょうか。
図形の組み合わせで簡単に実装できると思いますので、ぜひコンテンツにあったオリジナルなローディングを作って活用してください。

株式会社Holmesではエンジニア・デザイナーを募集しています 。
興味がある方はこちらからご連絡ください!

lab.holmescloud.com

lab.holmescloud.com