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

getdocs

2年前

序章

スケルトンスクリーンは、 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アプリケーションは、次の2つのコミュニティオプションを検討できます。 react-native-svg-animated-linear-gradient と react-native-shimmer.

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ラベリングの使用を提案しています。 aria-disabled={true} また aria-label="loading"、これらの要素を無視するのに役立ちます。

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