ReactおよびReactNativeでスケルトンスクリーンを使用する方法

序章

スケルトンスクリーンは、 Luke Wroblewski によって造られた用語で、コンテンツをコンテナに徐々にロードしながらニュートラルな要素を表示するためのユーザーエクスペリエンスパターンを表します。

このパターンは、知覚パフォーマンスの改善に焦点を当てています。空白の画面や従来のスピナーと比較すると、スケルトン画面の持続時間は短くなります。

モーションおよび線形グラデーションアニメーションは、静止または脈動するロードアニメーションよりも高速であると認識されます。画像の場合、プレースホルダー要素で主要な色を使用することも効果的です。

この記事では、ReactおよびReactNativeアプリケーションにスケルトン画面を実装するためのいくつかのソリューションを紹介します。

Reactでのスケルトンスクリーンの使用

Reactでは、componentDidMountと線形グラデーションでスケルトンスクリーン効果を実現することができます。

ただし、独自のソリューションを実装する代わりに、スケーラビリティを促進するために作成された、より堅牢なコミュニティオプションのいくつかを検討することをお勧めします：react-content-loader、react-skeletor、およびreact-loading-skeleton。

react-content-loader には、リスト、コード、FacebookスタイルおよびInstagramスタイルのローディングカードのプリセットがロードされています。また、カスタムSVG、要素、および色を使用できます。

react-content-loaderの例を次に示します。

import ContentLoader, { Facebook } from 'react-content-loader';

const MyFacebookLoader = () => <Facebook />

const MyLoader = () => (
  <ContentLoader>
    {/* Pure SVG */}
    <rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
    <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
    <rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
  </ContentLoader>
)

あるいは、react-placeholderとSVG-Skeletonは、プレースホルダーコンポーネントとスタイリングを提供する他の2つの人気のあるすぐに使えるソリューションです。

react-skeletor は、高次コンポーネントに負荷条件への直接接続を提供することにより、完全なカスタマイズを可能にします。

react-skeletorの例を次に示します。

import { createSkeletonProvider, createSkeletonElement } from '@trainline/react-skeletor';

const H1 = createSkeletonElement('h1');
const H2 = createSkeletonElement('h2');

const NameCard = ({ firstName, lastName }) => (
  <div>
    <H1 style={style}>{ firstName }</H1>
    <H2 style={style}>{ lastName }</H2>
  </div>
)

const UserDetailPage = ({ user }) => (
  <div>
    ...
    <NameCard user={user} />
    ...
  </div>
)

export default createSkeletonProvider(
  // Dummy data with a similar shape to the component's data.
  {
    user: {
      firstName: '_____',
      lastName: '_____'
    }
  },

  // Predicate that returns true if the component is in a loading state.
  ({ user }) => user === undefined,

  // Define the placeholder styling for the children elements.
  () => ({
    color: 'grey',
    backgroundColor: 'grey'
  })
)(UserDetailPage)

このブログ投稿では、react-skeletorを使用することの利点についてさらに詳しく説明します。

react-loading-skeleton は、スタイル自体からスケルトンスクリーンを自動的に作成するため、専用のスケルトンスクリーンコンポーネントを作成する必要がありません。

react-loading-skeletonの例を次に示します。

import Skeleton from 'react-loading-skeleton';

const Blogpost = () => <div style={{ fontSize: 20, lineHeight: 2 }}>
  <h1>{this.props.title || <Skeleton />}</h1>
  {this.props.body || <Skeleton count={10} />}
</div>

これで、Reactでスケルトン画面を使用することはできます。

ReactNativeでのスケルトンスクリーンの使用

React Nativeアプリケーションは、react-native-svg-animated-linear-gradientとreact-native-shimmerの2つのコミュニティオプションを検討できます。

react-native-svg-animated-linear-gradient は、アニメーション化された線形グラデーション効果を作成できます。

react-native-svg-animated-linear-gradientの例を次に示します。

import SvgAnimatedLinearGradient from 'react-native-svg-animated-linear-gradient';

// Instagram style.
<SvgAnimatedLinearGradient height={300}>
    <Circle cx="30" cy="30" r="30"/>
    <Rect x="75" y="13" rx="4" ry="4" width="100" height="13"/>
    <Rect x="75" y="37" rx="4" ry="4" width="50" height="8"/>
    <Rect x="0" y="70" rx="5" ry="5" width="400" height="200"/>
</SvgAnimatedLinearGradient>

react-native-shimmer は、iOSおよびAndroidに実装されたFacebookのShimmerのReactNative実装です。

react-native-shimmerの例を次に示します。

import Shimmer from 'react-native-shimmer';

<Shimmer>
  <Text>Loading...</Text>
</Shimmer>

これで、ReactNativeでスケルトン画面を使用することはできます。

代替案の探求

React以外では、JavaScriptコミュニティもこの問題を解決しています。 Placeload.jsは人気のあるソリューションです。 jquery.skeleton.loaderはjQueryプラグインです。

また、セマンティックUI には、独自のPlaceholder要素が組み込まれています。

画像とドミナントカラーの使用

グラデーションでキラキラ光る効果を作成する代わりに、画像の主な色は、コンテンツが読み込まれる前にユーザーにガイダンスとコンテキストを与えることができます。

画像から原色を抽出するためのいくつかのリソース： color-thief 、 node-vibrant 、およびcolor-loader。

結論

この記事では、ReactおよびReactNativeアプリケーションにスケルトン画面を実装するためのいくつかのソリューションを紹介しました。

Luke Wroblewski によるこのプレゼンテーションでは、スケルトンスクリーンを紹介します。

これらの記事では、スケルトンスクリーンの使用について詳しく説明しています。スケルトンスクリーンについて知っておくべきこととスピナーの読み込みの使用をやめる、何か良いものがあります。

サーバーサイドレンダリング（SSR）は、ユーザーのページ読み込みエクスペリエンスの管理の大きな部分を占めています。関連するスケルトン画面は、「AppShell」と初期ページロードに含まれている必要があります。 Addy Osmaniが、これがReactでどのように機能するかを説明しています。

スクリーンリーダーや補助ソフトウェアが機能しなくなり、スケルトン画面などの余分なページ要素に関して混乱を招く可能性があるため、アクセシビリティを考慮する必要があります。 Ray Romanは、これらの要素を無視するために、aria-disabled={true}やaria-label="loading"などのARIAラベリングを使用することを提案しています。

スケルトンスクリーンを実装する前に、スケルトンスクリーンで選択するボーンの反論を検討することをお勧めします。