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

Transcript

1. 飲⾷店予約台帳を⽀える インタラクティブ UI 設計と実装 ⼀休 Frontend Meetup 2025/02/10
2. ⽩井 亮平 / Shirai Ryohei @siropaca 新規事業本部 RESZAIKO 台帳事業部 RESZAIKO 台帳開発チーム 2022年に株式会社⼀休に⼊社。 飲⾷店向け SaaS の RESZAIKO 予約台帳の フロントエンド開発や UI デザインを担当。
3. 🙆 話すこと RESZAIKO で実装している以下のようなインタラクティブな UI の設計と実装の⼯夫した点 や設計のポイント はじめに
4. はじめに 🙅話さないこと • React や使⽤しているライブラリの基本的な使い⽅ • 実装の細かいコードや技術的な詳細
5. 01 RESZAIKO について 02 インタラクティブ UI の基礎 03 Canvas の使いどころを考える 04 レイヤーで考える 05 まとめ もくじ
6. 01 RESZAIKO について
7. RESZAIKO とは？ 01 RESZAIKO について サイトコントローラー RESZAIKO は、飲⾷店向けの予約管理を DX する SaaS です 現在、以下の 3 つのサービスを提供しています
8. RESZAIKO サイトコントローラー 01 RESZAIKO について 複数の予約サイトの在庫（予約）を⼀括で管理できる飲⾷店⽤サイトコントローラーです
9. RESZAIKO Web 予約 01 RESZAIKO について 飲⾷店の店舗公式予約ページを作成できるサービスです
10. RESZAIKO 予約台帳 01 RESZAIKO について 飲⾷店の予約や顧客情報を管理するデジタル台帳です
11. 予約台帳の機能 01 RESZAIKO について 予約管理機能 (チャート) 予約管理機能 (レイアウト) 印刷機能 在庫管理機能 (カレンダー) 顧客管理機能 在庫管理機能 (チャート) and more...
12. 各種予約サイトと連携して飲⾷店の在庫数の全体像（物理席）とリアルタイムな在庫を把握す ることで、「Web 在庫の最⼤化」を⽬指しています RESZAIKO シリーズの⽬標 01 RESZAIKO について 飲⾷店 その他 予約サイト サイトコントローラー
13. 02 インタラクティブ UI の基礎
14. ⽇々の予約を管理する「チャート」と「レイアウト」機能は、飲⾷店の⽅が⾃由に直感的に 操作できるインタラクティブな UI となっています チャートとレイアウト 02 インタラクティブ UI の基礎 チャート機能 レイアウト機能
15. チャートとレイアウト 02 インタラクティブ UI の基礎 どちらの機能も、⼀⾒すると複雑な UI に⾒えますが、基礎の部分の作り⽅は共通しています 今回の発表では、このようなインタラクティブ UI を作る際のポイントを説明します 1. インタラクティブ UI の基礎 2. Canvas の使いどころを考える 3. レイヤーで考える Points
16. インタラクティブ UI の基礎 02 インタラクティブ UI の基礎 Web の UI は、ブラウザのレンダリングエンジンによって div などの要素が⾃動的にレイアウ トされるようになっています
17. インタラクティブ UI の基礎 02 インタラクティブ UI の基礎 ⾃由度の⾼い UI では、配置するオブジェクトを position: absolute で指定して配置します オブジェクトにサイズと位置 を指定する

18. インタラクティブ UI の基礎 02 インタラクティブ UI の基礎 ⾓度や拡⼤率を変更したい場合は、transform プロパティを使⽤します 回転：rotate()
 拡大縮小：scale()

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

20. インタラクティブ UI の基礎 02 インタラクティブ UI の基礎 移動量は基本的に PointerEvent から取得します 取得⾃体は容易ですが、処理が冗⻑になったり計算が増えたりするため、台帳では以下のライ ブラリを使⽤しています @use-gesture

21. まとめ 02 インタラクティブ UI の基礎 • 位置は position: absolute で合わせる • 回転や拡⼤縮⼩は transform プロパティを使う • オブジェクトの移動は連続する移動量（delta）を使⽤する • 移動量の取得はライブラリを使⽤すると便利（@use-gesture）
22. 03 Canvas の使いどころを考える
23. Canvas の使いどころ 03 Canvas の使いどころを考える インタラクティブな UI を作る際、まず Canvas の使⽤を考えるかもしれません しかし、すべてを Canvas で実装すると、管理が複雑になり、負担が⼤きくなるだけでなく、 アクセシビリティの対応も難しくなります
24. アクセシビリティを意識する 03 Canvas の使いどころを考える button タグを用いると 
 フォーカスがデフォルトで効くため 
 キーボードのみで操作できる 
 そこで、Canvas と通常の DOM を組み合わせ ることで、メンテナンス性とアクセシビリティ の両⽅を向上させることができます たとえば、テーブルオブジェクトなどの操作対 象は、アクセシビリティを考慮し、button タ グを使⽤して表現するとよいです
25. Canvas とその他の DOM の使い分けに関しては、以下のように考えています Canvas と その他 DOM の使い分け 03 Canvas の使いどころを考える Canvas ：描画コストの⾼いもの（グリッドなど）や背景、複雑な図形など その他 DOM：操作対象のオブジェクトなどアクセシビリティを確保したいもの CSS でもグリッドや背景を表現できますが、複雑な計算や位置合わせが必要になると、後々 の管理が⼤変になります そのため、計算処理と相性の良い JavaScript を活⽤し、Canvas に寄せることでメンテナン ス性を⾼めることができます。
26. 計算ロジックの共通化 03 Canvas の使いどころを考える App の設定値 レスポンス （予約データ等） 座標計算 サイズ計算 （純粋関数） 背景 （Canvas） オブジェクト （button タグなど） テーブルや時間の 情報を座標に変換 データ 計算 描画 Canvas とその他の DOM を組み合わせる場合は、座標計算やサイズ計算のロジックを共通化 することが重要です 描画に関する計算ロジックを純粋関数として切り出すことで、Canvas（背景など）とオブ ジェクトの操作を統⼀し、⼀貫した処理が可能になります
27. まとめ 03 Canvas の使いどころを考える • 描画コストが⾼いものには Canvas を使う • アクセシビリティを確保したいものは button タグを使う • 座標やサイズの計算ロジックは、純粋関数として切り出して共通して使う
28. 04 レイヤーで考える
29. レイヤーについて 04 レイヤーで考える 突然ですが、右のようなイラストを描いてくださ いと⾔われたとき、皆さんはどのように描きます か？ まず線を描いてから、塗り絵のように⾊を塗って いく⼈もいるかと思います 󰳒 https://comic.smiles55.jp/guide/8090/ 

30. レイヤーについて 04 レイヤーで考える https://comic.smiles55.jp/guide/8090/ 
 デジタルでイラストを描いたことやデザインツールを使ったことがある⼈にとっては、以下 のようにレイヤーごとに分けて描く⽅が効率的だと感じるかもしれません
31. レイヤーについて 04 レイヤーで考える 今回の話と何の関係があるのかと思う⽅もいるかもしれません しかし、複雑な UI を実現するインタラクティブ UI では、このレイヤー構造の考え⽅を取り ⼊れ、コンポーネントを設計することが⼤切になります https://comic.smiles55.jp/guide/8090/ 

32. 予約台帳の UI も、⼀⾒すると同じコンポーネント上にさまざまな要素が描画されているよう に⾒えます しかし、レイヤーごとにコンポーネントを重ねる設計にすることで、複雑な UI でもメンテナ ビリティの⾼いソースコードにすることができています コンポーネントでレイヤーを表現 04 レイヤーで考える
33. コンポーネントでレイヤーを表現 04 レイヤーで考える テーブルレイアウトの機能も同じ感じ 

34. コンポーネントでレイヤーを表現 04 レイヤーで考える 最終描画 レイヤ−1 レイヤ−3 レイヤ−2 レイヤ−5 レイヤ−4 データの表示や各種イベントはそれぞ れのレイヤーに責務を持たせる 

35. コンポーネントでレイヤーを表現 04 レイヤーで考える ドラッグ時などに関係するレイヤー以外 はロックするのも容易 
 レイヤーを責務ごとに分けていくことにより、重なりの表現や表⽰の切り替え、操作の可否な どをレイヤーごとに制御することもできるようになります
36. まとめ 04 レイヤーで考える • コンポーネントをレイヤーと捉えて、責務ごとに分けて重ねる
37. 05 まとめ
38. まとめ インタラクティブ UI の基礎 • 位置は position: absolute で合わせる • 回転や拡⼤縮⼩は transform プロパティを使う • オブジェクトの移動は連続する移動量（delta）を使⽤する • 移動量の取得はライブラリを使⽤すると便利（@use-gesture） Canvas の使いどころを考える • 描画コストが⾼いものには Canvas を使う • アクセシビリティを確保したいものは button タグを使う • 座標やサイズの計算ロジックは、純粋関数として切り出して共通して使う レイヤーで考える • コンポーネントをレイヤーと捉えて、責務ごとに分けて重ねる
39. エンジニア募集中！ ⼀休ではフロントエンドにとどまらず、よりよいサービスを届ける仲間を募集しています 💪 カジュアル⾯談からでもどうぞ！ https://www.ikyu.co.jp/recruit/engineer