ストーリー コンポーネントの作成

ウェブ上の Instagram ストーリーに似たエクスペリエンスを構築する方法の基本的な概要。

Adam Argyle

この投稿では、Stories（ストーリー）コンポーネントを レスポンシブでキーボード ナビゲーションをサポートし できます。

このストーリー コンポーネントをご自分で構築する実践的なデモをご希望の場合は、 ストーリー コンポーネントの Codelab をご覧ください。

動画で視聴したい場合は、この投稿の YouTube バージョンをご利用ください。

概要

ストーリーの UX の 2 つの人気例として、Snapchat ストーリーと Instagram ストーリー（言うまでもなく）があります。 UX の一般的な用語で言えば、ストーリーは通常、モバイル専用のタップ中心のパターンで、 複数のサブスクリプションに対応できますたとえば、Instagram でユーザーが友だちのストーリーを開いた場合 写真を見てみます一般的に、同じ職場で多くの友だちを あります。ユーザーはデバイスの右側をタップすると、その友だちの 説明します。右にスワイプすると、別の友だちにスキップします。 ストーリー コンポーネントはカルーセルとよく似ていますが、 多次元配列を使用しますまるでメリーゴーラウンドみたいな 表示されます🤯

</ph> <ph type="x-smartling-placeholder">

ジョブに適したツールの選択

まとめると このコンポーネントは 簡単にビルドできたと思います 重要なウェブ プラットフォーム機能を提供します。それらについて見ていきましょう。

CSS グリッド

CSS グリッドにはいくつかの機能が搭載されているため、このレイアウトでは縦に並んで配置されていませんでした。 コンテンツをラングリングするための強力な方法です。

フレンドのレイアウト

メインの .stories コンポーネント ラッパーは、モバイルファーストの水平スクロールビューです。

.stories {
  inline-size: 100vw;
  block-size: 100vh;

  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}

/* desktop constraint */
@media (hover: hover) and (min-width: 480px) {
  max-inline-size: 480px;
  max-block-size: 848px;
}

grid レイアウトを詳しく見ていきましょう。

• モバイルでは明示的にビューポートを 100vh と 100vw で埋め、デスクトップではサイズを制限します。
• 行テンプレートと列テンプレートを区切る / 文字
• auto-flowはgrid-auto-flow: columnに変換されます
• 自動フローのテンプレートは 100% です。この場合は、スクロール ウィンドウの幅です。

スマートフォンでは行のサイズをビューポートの高さとし、 各列がビューポートの幅になります。引き続き Snapchat のストーリーと Instagram のストーリーの例では、各コラムが友人のストーリーになります。友だちが欲しい スクロールの手間を省くために グリッドは、各友人の HTML をレイアウトするために必要な数の列を作成します。 動的でレスポンシブなスクロールコンテナが 作成されますグリッド 効果全体を一元的に把握できるようになりました。

積み重ね

友だちごとに、ページネーションに対応した状態のストーリーが必要です。 アニメーションやその他の楽しいパターンを準備するため、スタックを選択しました。 スタックというと 横から見ると違います

CSS グリッドでは、1 つのセルのグリッド（正方形など）を定義できます。このグリッドでは、 列はエイリアス（[story]）を共有し、それぞれの子がそのエイリアスに割り当てられます エイリアスの単一セルスペース:

.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.story {
  grid-area: story;
  background-size: cover;
  …
}

これにより、HTML が重ね順を制御し、すべての要素が保持されるようにします。 できます。absolute の配置や z-index については何もする必要がないことに注目してください。 height: 100% または width: 100% でボックスを正しくボックス化する必要はありません。親グリッド ストーリー画像のビューポートのサイズが定義されているため、これらのストーリー コンポーネントはいずれも指定しない 指示が必要だ！

CSS のスクロール スナップ ポイント

CSS のスクロール スナップ ポイントの仕様に従うと、 スクロール時にも要素をビューポートに固定できます。これらの CSS プロパティが登場する前は JavaScript を使用する必要があり、控えめに言っても難しかったです。チェックアウト CSS のスクロール スナップ ポイントのご紹介 Sarah Drasner による解説をご覧ください。

.stories {
  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}

.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

スクロール スナップ ポイントを選んだ理由はいくつかあります。

• 無料アクセシビリティ。スクロール スナップ ポイントの仕様では、 ← キーと→キーでスナップ ポイント間を移動できる できます。
• 仕様の拡大。スクロール スナップ ポイントの仕様の新機能と改善 つまり ストーリーコンポーネントの改善は 見てみましょう
• 実装の容易さ。スクロール スナップ ポイントは、 タップ中心の水平方向ページネーションのユースケースです
• 自由なプラットフォーム スタイルの慣性。どのプラットフォームも、従来のブラウザとは異なる独自のスタイルで 正規化された慣性で、不思議なスクロールや安静時のスタイルを持つことができます。

ブラウザ間の互換性

テスト対象は、Opera、Firefox、Safari、Chrome、Android、iOS です。こちらが 機能やサポートに違いが見つかったウェブ機能について簡単に説明します。

ただし、一部の CSS は適用されないため、一部のプラットフォームは現在 UX を満たしていません 役立ちますこれらの機能を管理する必要がないことが楽しかったし、自信がある やがて他のブラウザやプラットフォームにも展開するようになります

scroll-snap-stop

UX の主なユースケースの 1 つがカルーセルです。 CSS のスクロール スナップ ポイントの仕様ストーリーとは異なり、カルーセルは必ずしも停止する必要がない ユーザーが操作した後の各画像に表示されます。場合によっては、 カルーセルをすばやく切り替えて表示できます。一方、ストーリーは 1 つずつ進めていくのがおすすめです。 これを実現するのが scroll-snap-stop です。

.user {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

この投稿の執筆時点では、scroll-snap-stop は Chromium ベースでのみサポートされています できます。チェックアウト ブラウザの互換性 をご覧ください。ただし、これは阻害要因ではありません。サポートされていないブラウザで ユーザーが誤って友だちをスキップする可能性があります。ユーザーはもっと注意を払うか、 スキップした友達が閲覧済みとしてマークされないように、JavaScript を記述する必要があります。

詳しくは、 spec: 関心があります。

overscroll-behavior

モーダルをスクロールしたときに、 スクロールを開始するか overscroll-behavior スクロールすると デベロッパーが 退出します。どんな場面にも適しています。マイ ストーリー コンポーネントでは、 それ以外のスワイプやスクロール操作が 説明します。

.stories {
  overflow-x: auto;
  overscroll-behavior: contain;
}

Safari と Opera は 2 種類のブラウザで サポートすること、そしてそれが まったく問題ありませんユーザーは、使い慣れたオーバースクロールで操作できます 見落とされがちです個人的には大ファンで、 私が実装したほぼすべてのオーバースクロール機能にこれが含まれています。Google ユーザー エクスペリエンスの向上にしかつながりません。

scrollIntoView({behavior: 'smooth'})

ユーザーがタップまたはクリックし、友だちの一連の記事の最後に到達すると、 スクロールのスナップ ポイント セット内の次の友だちに移動します。あり 次の友人を参照し、それを ビューにスクロールしましたこれらに関する基本的なサポートは非常に有用です。すべてのブラウザ スクロールしましたしかし、すべてのブラウザが 'smooth' したわけではありません。これは単に スナップされるのではなくビューにスクロールされます

element.scrollIntoView({
  behavior: 'smooth'
})

Safari は behavior: 'smooth' に対応していない唯一のブラウザです。チェックアウト ブラウザの互換性 をご覧ください。

ハンズオン

私のやり方わかったな、どうやって？！多様なデータで さまざまなアプローチを学び、ウェブで構築するあらゆる方法を学べます。Glitch を作成します。 あなたのバージョンをツイートしていただければ、 以下のコミュニティ リミックス セクションをご覧ください。

コミュニティ リミックス

• @geoffrich_（Svelte）: デモ、コード
• @GauteMeekOlsen と Vue: デモ + コード
• @AnaestheticsApp（Lit）: デモ、コード