Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CA BASE NEXT でスクロールに 連動したUIを構築した話

CA BASE NEXT でスクロールに 連動したUIを構築した話

kubo-hide-kun

October 11, 2022
Tweet

More Decks by kubo-hide-kun

Other Decks in Programming

Transcript

  1. [名前] 窪田 秀哉 / クボ太郎 (2021年入社) 
 [専門] React /

    TypeScript 
 [仕事] Marougeなどの複数の占いサービスを運用 
 [趣味] 知人にオススメされた漫画を読むこと。 
    今月、読み始めた作品:
    「忘却バッテリー」「ハイパーインフレーション」「ドリフターズ」

  2. “CA BASE NEXT” (以下, ”CABN”) とは、 2022.7.27 ~ 2022.7.28 に開催に開催された

    サイバーエージェントの 技術カンファレンス です。
  3. 【パラパラ漫画機能を実現するために①】 このスクロール連動処理を行う上で大事になるのが、 スクロールの進捗状況 を インデックス番号(パラパラ漫画における何番目か) に変換する処理です. 例)進捗状況が全体の 10% であれば、 30枚目

    の画像を表示する。 スクロール可能領域を基点としたブラウザの位置 = 表示領域のトップの位置を基点としたスクロール可能領域となるDOMの相対距離 * -1   window.addEventListener('scroll', () => { // ターゲットの上部から見た、スクロール量を取得 const positionTop = targetElm.getBoundingClientRect().top * -1; // スクロール可能領域の高さを取得 const scrollableHeight = targetElm.getBoundingClientRect().height; // スクロール可能領域を何%スクロールしたかを計算 const scrollFraction = positionTop / scrollableHeight; const frameIndex = Math.min( frameCount - 1, Math.floor(scrollFraction * frameCount) ); });
  4. 【パラパラ漫画機能を実現するために②】 取得したインデックス番号をもとに画像を描画します。 画像の描画は canvas の drawImage を使うことで実現します。 別案: ・videoタグの動画を進み具合にJSで操作する  →

    動画サイズが大きいと後半の内容の画質が悪くなる   (再生しないとフレームをちゃんと読み込まない?) ・DOMを操作する  → サイト自体がJSですごく重くなったので、見送り。 const img = await loadImage(framePaths[index]); const canvas = canvasRef.current; const context = canvas.getContext('2d'); // 中央寄せするための計算 (object-fix: cover; をJSで再現) const { offset, size } = calcCoverRect( { width: canvas.clientWidth, height: canvas.clientHeight }, { width: img.width, height: img.height } ); // 画質を落とさないための拡大率の計算 const scale = calcCanvasScale(canvas); requestAnimationFrame(() => { context.drawImage( img, offset.left * scale.x, offset.top * scale.y, size.width * scale.x, size.height * scale.y ); });
  5. ← 「青色」がウィンドウ。   「オレンジ」がスクロール可能領域。   「茶色」が表示されているDOM (ウィンドウ)   これを駆使することで、  

    スクロールしてもパラパラ画面に相当するDOMを表示可能。 【パラパラ漫画機能を実現するために③】 次にスクロールしてもパラパラ漫画を表示し続けるためのCSSについて説明します。 やり方は表示したい要素(動画で言うと「茶色」のDOM)を画面目一杯に広げて、 position: fixed; もしくは position: sticky; をつけることで、 スクロールしても、特定の要素を表示し続けることができます。
  6. 【画像の軽量化のための工夫①】 パラパラ漫画のUIには必要となる画像枚数が多すぎるので、 avif , webP などの軽量な画像フォーマットにも対応しました。 html側であれば簡単に実現できますが、canvasで画像を表示しているので 、 JS側で「実行しているブラウザが各フォーマットに対応しているか」を確認するようにしています。 const

    checkAvifSupport = (): Promise<boolean> => { return new Promise((resolve) => { const avif = new Image(); avif.src = 'data:image/avif;base64,...'; avif.onload = function () { const result = avif.width > 0 && avif.height > 0; resolve(result); }; avif.onerror = function () { resolve(false); }; }); }; const checkWebPSupport = (): Promise<boolean> => { return new Promise((resolve) => { const webP = new Image(); webP.src = 'data:image/webp;base64,...'; webP.onload = function () { const result = webP.width > 0 && webP.height > 0; resolve(result); }; webP.onerror = function () { resolve(false); }; }); }; ▼ webPが使えるか確認するメソッド ▼ avifが使えるか確認するメソッド この対応で jpg: 107MB → avif: 59MB (45%減)
  7. 既にpublish済みですが、READMEが未整備です。 (進展があったら Twitter で告知するので、ぜひフォローお願いします🙏 → 今回のイベントのCompass から飛べます) デモサイトも開発中です。 (こちらも完成したら Twitter

    で告知します) 【開発中のライブラリ】 ライブラリ①: スクロールの進捗状況を計算するカスタムフック。 ライブラリ②: 画像を渡すだけでパラパラ漫画機能を実現可能なコンポーネント。 window.addEventListener('scroll', () => { // ターゲットの上部から見た、スクロール量を取得 const positionTop = targetElm.getBoundingClientRect().top * -1; // スクロール可能領域の高さを取得 const scrollableHeight = targetElm.getBoundingClientRect().height; // スクロール可能領域を何%スクロールしたかを計算 const scrollFraction = positionTop / scrollableHeight; }); ▼ カスタムフックで提供するロジック