Slide 1

Slide 1 text

飲⾷店予約台帳を⽀える インタラクティブ UI 設計と実装 ⼀休 Frontend Meetup 2025/02/10

Slide 2

Slide 2 text

⽩井 亮平 / Shirai Ryohei @siropaca 新規事業本部 RESZAIKO 台帳事業部 RESZAIKO 台帳開発チーム 2022年に株式会社⼀休に⼊社。 飲⾷店向け SaaS の RESZAIKO 予約台帳の フロントエンド開発や UI デザインを担当。

Slide 3

Slide 3 text

🙆 話すこと RESZAIKO で実装している以下のようなインタラクティブな UI の設計と実装の⼯夫した点 や設計のポイント はじめに

Slide 4

Slide 4 text

はじめに 🙅話さないこと ● React や使⽤しているライブラリの基本的な使い⽅ ● 実装の細かいコードや技術的な詳細

Slide 5

Slide 5 text

01 RESZAIKO について 02 インタラクティブ UI の基礎 03 Canvas の使いどころを考える 04 レイヤーで考える 05 まとめ もくじ

Slide 6

Slide 6 text

01 RESZAIKO について

Slide 7

Slide 7 text

RESZAIKO とは? 01 RESZAIKO について サイトコントローラー RESZAIKO は、飲⾷店向けの予約管理を DX する SaaS です 現在、以下の 3 つのサービスを提供しています

Slide 8

Slide 8 text

RESZAIKO サイトコントローラー 01 RESZAIKO について 複数の予約サイトの在庫(予約)を⼀括で管理できる飲⾷店⽤サイトコントローラーです

Slide 9

Slide 9 text

RESZAIKO Web 予約 01 RESZAIKO について 飲⾷店の店舗公式予約ページを作成できるサービスです

Slide 10

Slide 10 text

RESZAIKO 予約台帳 01 RESZAIKO について 飲⾷店の予約や顧客情報を管理するデジタル台帳です

Slide 11

Slide 11 text

予約台帳の機能 01 RESZAIKO について 予約管理機能 (チャート) 予約管理機能 (レイアウト) 印刷機能 在庫管理機能 (カレンダー) 顧客管理機能 在庫管理機能 (チャート) and more...

Slide 12

Slide 12 text

各種予約サイトと連携して飲⾷店の在庫数の全体像(物理席)とリアルタイムな在庫を把握す ることで、「Web 在庫の最⼤化」を⽬指しています RESZAIKO シリーズの⽬標 01 RESZAIKO について 飲⾷店 その他 予約サイト サイトコントローラー

Slide 13

Slide 13 text

02 インタラクティブ UI の基礎

Slide 14

Slide 14 text

⽇々の予約を管理する「チャート」と「レイアウト」機能は、飲⾷店の⽅が⾃由に直感的に 操作できるインタラクティブな UI となっています チャートとレイアウト 02 インタラクティブ UI の基礎 チャート機能 レイアウト機能

Slide 15

Slide 15 text

チャートとレイアウト 02 インタラクティブ UI の基礎 どちらの機能も、⼀⾒すると複雑な UI に⾒えますが、基礎の部分の作り⽅は共通しています 今回の発表では、このようなインタラクティブ UI を作る際のポイントを説明します 1. インタラクティブ UI の基礎 2. Canvas の使いどころを考える 3. レイヤーで考える Points

Slide 16

Slide 16 text

インタラクティブ UI の基礎 02 インタラクティブ UI の基礎 Web の UI は、ブラウザのレンダリングエンジンによって div などの要素が⾃動的にレイアウ トされるようになっています

Slide 17

Slide 17 text

インタラクティブ UI の基礎 02 インタラクティブ UI の基礎 ⾃由度の⾼い UI では、配置するオブジェクトを position: absolute で指定して配置します オブジェクトにサイズと位置 を指定する


Slide 18

Slide 18 text

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


Slide 19

Slide 19 text

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


Slide 20

Slide 20 text

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


Slide 21

Slide 21 text

まとめ 02 インタラクティブ UI の基礎 ● 位置は position: absolute で合わせる ● 回転や拡⼤縮⼩は transform プロパティを使う ● オブジェクトの移動は連続する移動量(delta)を使⽤する ● 移動量の取得はライブラリを使⽤すると便利(@use-gesture)

Slide 22

Slide 22 text

03 Canvas の使いどころを考える

Slide 23

Slide 23 text

Canvas の使いどころ 03 Canvas の使いどころを考える インタラクティブな UI を作る際、まず Canvas の使⽤を考えるかもしれません しかし、すべてを Canvas で実装すると、管理が複雑になり、負担が⼤きくなるだけでなく、 アクセシビリティの対応も難しくなります

Slide 24

Slide 24 text

アクセシビリティを意識する 03 Canvas の使いどころを考える button タグを用いると 
 フォーカスがデフォルトで効くため 
 キーボードのみで操作できる 
 そこで、Canvas と通常の DOM を組み合わせ ることで、メンテナンス性とアクセシビリティ の両⽅を向上させることができます たとえば、テーブルオブジェクトなどの操作対 象は、アクセシビリティを考慮し、button タ グを使⽤して表現するとよいです

Slide 25

Slide 25 text

Canvas とその他の DOM の使い分けに関しては、以下のように考えています Canvas と その他 DOM の使い分け 03 Canvas の使いどころを考える Canvas :描画コストの⾼いもの(グリッドなど)や背景、複雑な図形など その他 DOM:操作対象のオブジェクトなどアクセシビリティを確保したいもの CSS でもグリッドや背景を表現できますが、複雑な計算や位置合わせが必要になると、後々 の管理が⼤変になります そのため、計算処理と相性の良い JavaScript を活⽤し、Canvas に寄せることでメンテナン ス性を⾼めることができます。

Slide 26

Slide 26 text

計算ロジックの共通化 03 Canvas の使いどころを考える App の設定値 レスポンス (予約データ等) 座標計算 サイズ計算 (純粋関数) 背景 (Canvas) オブジェクト (button タグなど) テーブルや時間の 情報を座標に変換 データ 計算 描画 Canvas とその他の DOM を組み合わせる場合は、座標計算やサイズ計算のロジックを共通化 することが重要です 描画に関する計算ロジックを純粋関数として切り出すことで、Canvas(背景など)とオブ ジェクトの操作を統⼀し、⼀貫した処理が可能になります

Slide 27

Slide 27 text

まとめ 03 Canvas の使いどころを考える ● 描画コストが⾼いものには Canvas を使う ● アクセシビリティを確保したいものは button タグを使う ● 座標やサイズの計算ロジックは、純粋関数として切り出して共通して使う

Slide 28

Slide 28 text

04 レイヤーで考える

Slide 29

Slide 29 text

レイヤーについて 04 レイヤーで考える 突然ですが、右のようなイラストを描いてくださ いと⾔われたとき、皆さんはどのように描きます か? まず線を描いてから、塗り絵のように⾊を塗って いく⼈もいるかと思います 󰳒 https://comic.smiles55.jp/guide/8090/ 


Slide 30

Slide 30 text

レイヤーについて 04 レイヤーで考える https://comic.smiles55.jp/guide/8090/ 
 デジタルでイラストを描いたことやデザインツールを使ったことがある⼈にとっては、以下 のようにレイヤーごとに分けて描く⽅が効率的だと感じるかもしれません

Slide 31

Slide 31 text

レイヤーについて 04 レイヤーで考える 今回の話と何の関係があるのかと思う⽅もいるかもしれません しかし、複雑な UI を実現するインタラクティブ UI では、このレイヤー構造の考え⽅を取り ⼊れ、コンポーネントを設計することが⼤切になります https://comic.smiles55.jp/guide/8090/ 


Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

コンポーネントでレイヤーを表現 04 レイヤーで考える テーブルレイアウトの機能も同じ感じ 


Slide 34

Slide 34 text

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


Slide 35

Slide 35 text

コンポーネントでレイヤーを表現 04 レイヤーで考える ドラッグ時などに関係するレイヤー以外 はロックするのも容易 
 レイヤーを責務ごとに分けていくことにより、重なりの表現や表⽰の切り替え、操作の可否な どをレイヤーごとに制御することもできるようになります

Slide 36

Slide 36 text

まとめ 04 レイヤーで考える ● コンポーネントをレイヤーと捉えて、責務ごとに分けて重ねる

Slide 37

Slide 37 text

05 まとめ

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

エンジニア募集中! ⼀休ではフロントエンドにとどまらず、よりよいサービスを届ける仲間を募集しています 💪 カジュアル⾯談からでもどうぞ! https://www.ikyu.co.jp/recruit/engineer