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

飲食店予約台帳を支えるインタラクティブ UI 設計と実装

飲食店予約台帳を支えるインタラクティブ UI 設計と実装

Ryohei Shirai

February 11, 2025
Tweet

Other Decks in Technology

Transcript

  1. ⽩井 亮平 / Shirai Ryohei @siropaca 新規事業本部 RESZAIKO 台帳事業部 RESZAIKO

    台帳開発チーム 2022年に株式会社⼀休に⼊社。 飲⾷店向け SaaS の RESZAIKO 予約台帳の フロントエンド開発や UI デザインを担当。
  2. インタラクティブ UI の基礎 02 インタラクティブ UI の基礎 Web の UI

    は、ブラウザのレンダリングエンジンによって div などの要素が⾃動的にレイアウ トされるようになっています
  3. インタラクティブ UI の基礎 02 インタラクティブ UI の基礎 ⾃由度の⾼い UI では、配置するオブジェクトを

    position: absolute で指定して配置します オブジェクトにサイズと位置 を指定する

  4. インタラクティブ UI の基礎 02 インタラクティブ UI の基礎 インタラクティブな UI では、ドラッグなどの

    ユーザー操作によって、オブジェクトの配置を ⾃由に操作できるのが特徴です ここでも特別な処理をする必要はなく、マウス や指の移動量を取得し、それをオブジェクトの 位置 (top, left) に反映するだけで実現できます (x, y)
 (x + deltaX, y + deltaY) 
 連続する移動量を
 座標 (top, left)に反映する 

  5. インタラクティブ UI の基礎 02 インタラクティブ UI の基礎 移動量は基本的に PointerEvent から取得します

    取得⾃体は容易ですが、処理が冗⻑になったり計算が増えたりするため、台帳では以下のライ ブラリを使⽤しています @use-gesture

  6. まとめ 02 インタラクティブ UI の基礎 • 位置は position: absolute で合わせる

    • 回転や拡⼤縮⼩は transform プロパティを使う • オブジェクトの移動は連続する移動量(delta)を使⽤する • 移動量の取得はライブラリを使⽤すると便利(@use-gesture)
  7. Canvas の使いどころ 03 Canvas の使いどころを考える インタラクティブな UI を作る際、まず Canvas の使⽤を考えるかもしれません

    しかし、すべてを Canvas で実装すると、管理が複雑になり、負担が⼤きくなるだけでなく、 アクセシビリティの対応も難しくなります
  8. アクセシビリティを意識する 03 Canvas の使いどころを考える button タグを用いると 
 フォーカスがデフォルトで効くため 
 キーボードのみで操作できる

    
 そこで、Canvas と通常の DOM を組み合わせ ることで、メンテナンス性とアクセシビリティ の両⽅を向上させることができます たとえば、テーブルオブジェクトなどの操作対 象は、アクセシビリティを考慮し、button タ グを使⽤して表現するとよいです
  9. Canvas とその他の DOM の使い分けに関しては、以下のように考えています Canvas と その他 DOM の使い分け 03

    Canvas の使いどころを考える Canvas :描画コストの⾼いもの(グリッドなど)や背景、複雑な図形など その他 DOM:操作対象のオブジェクトなどアクセシビリティを確保したいもの CSS でもグリッドや背景を表現できますが、複雑な計算や位置合わせが必要になると、後々 の管理が⼤変になります そのため、計算処理と相性の良い JavaScript を活⽤し、Canvas に寄せることでメンテナン ス性を⾼めることができます。
  10. 計算ロジックの共通化 03 Canvas の使いどころを考える App の設定値 レスポンス (予約データ等) 座標計算 サイズ計算

    (純粋関数) 背景 (Canvas) オブジェクト (button タグなど) テーブルや時間の 情報を座標に変換 データ 計算 描画 Canvas とその他の DOM を組み合わせる場合は、座標計算やサイズ計算のロジックを共通化 することが重要です 描画に関する計算ロジックを純粋関数として切り出すことで、Canvas(背景など)とオブ ジェクトの操作を統⼀し、⼀貫した処理が可能になります
  11. まとめ 03 Canvas の使いどころを考える • 描画コストが⾼いものには Canvas を使う • アクセシビリティを確保したいものは

    button タグを使う • 座標やサイズの計算ロジックは、純粋関数として切り出して共通して使う
  12. まとめ インタラクティブ UI の基礎 • 位置は position: absolute で合わせる •

    回転や拡⼤縮⼩は transform プロパティを使う • オブジェクトの移動は連続する移動量(delta)を使⽤する • 移動量の取得はライブラリを使⽤すると便利(@use-gesture) Canvas の使いどころを考える • 描画コストが⾼いものには Canvas を使う • アクセシビリティを確保したいものは button タグを使う • 座標やサイズの計算ロジックは、純粋関数として切り出して共通して使う レイヤーで考える • コンポーネントをレイヤーと捉えて、責務ごとに分けて重ねる