Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
Search
Ryohei Shirai
February 11, 2025
Technology
7
3.1k
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
Ryohei Shirai
February 11, 2025
Tweet
Share
Other Decks in Technology
See All in Technology
OCI IAM Identity Domains Entra IDとの認証連携設定手順 / Identity Domain Federation settings with Entra ID
oracle4engineer
PRO
2
1.4k
大人の学び - マイクの持ち方について
kawaguti
PRO
3
630
入社半年で PTE に! 元海外在住者が語る Google Cloud × G-genで 成長する秘訣
risatube
PRO
0
120
OCI Oracle Database Services新機能アップデート(2024/12-2025/02)
oracle4engineer
PRO
2
140
単一の深層学習モデルによる不確実性の定量化の紹介 ~その予測結果正しいですか?~
ftakahashi
PRO
3
400
Autonomous Database サービス・アップデート (FY25)
oracle4engineer
PRO
1
540
AppSheet タスク管理アプリ 中級編
comucal
PRO
0
230
Cline を知ると世界が広がった(だが、俺は Claude for Desktop で行く)
nassy20
3
170
AWSサービスアップデート2025年2月分
yuobayashi
2
120
AIxIoTビジネス共創ラボ紹介_20250311.pdf
iotcomjpadmin
0
220
Agent Mode とは?GitHub Copilot の新機能を探る
lescoggi
1
130
組織のスケールを見据えたプロジェクトリードエンジニア制度の実践 / Project Lead Engineer for Scaling Engineering Organization
ohbarye
9
2.6k
Featured
See All Featured
How to Ace a Technical Interview
jacobian
276
23k
A designer walks into a library…
pauljervisheath
205
24k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Automating Front-end Workflow
addyosmani
1369
200k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
11
580
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.2k
Why Our Code Smells
bkeepers
PRO
336
57k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Statistics for Hackers
jakevdp
797
220k
Transcript
飲⾷店予約台帳を⽀える インタラクティブ UI 設計と実装 ⼀休 Frontend Meetup 2025/02/10
⽩井 亮平 / Shirai Ryohei @siropaca 新規事業本部 RESZAIKO 台帳事業部 RESZAIKO
台帳開発チーム 2022年に株式会社⼀休に⼊社。 飲⾷店向け SaaS の RESZAIKO 予約台帳の フロントエンド開発や UI デザインを担当。
🙆 話すこと RESZAIKO で実装している以下のようなインタラクティブな UI の設計と実装の⼯夫した点 や設計のポイント はじめに
はじめに 🙅話さないこと • React や使⽤しているライブラリの基本的な使い⽅ • 実装の細かいコードや技術的な詳細
01 RESZAIKO について 02 インタラクティブ UI の基礎 03 Canvas の使いどころを考える
04 レイヤーで考える 05 まとめ もくじ
01 RESZAIKO について
RESZAIKO とは? 01 RESZAIKO について サイトコントローラー RESZAIKO は、飲⾷店向けの予約管理を DX する
SaaS です 現在、以下の 3 つのサービスを提供しています
RESZAIKO サイトコントローラー 01 RESZAIKO について 複数の予約サイトの在庫(予約)を⼀括で管理できる飲⾷店⽤サイトコントローラーです
RESZAIKO Web 予約 01 RESZAIKO について 飲⾷店の店舗公式予約ページを作成できるサービスです
RESZAIKO 予約台帳 01 RESZAIKO について 飲⾷店の予約や顧客情報を管理するデジタル台帳です
予約台帳の機能 01 RESZAIKO について 予約管理機能 (チャート) 予約管理機能 (レイアウト) 印刷機能 在庫管理機能
(カレンダー) 顧客管理機能 在庫管理機能 (チャート) and more...
各種予約サイトと連携して飲⾷店の在庫数の全体像(物理席)とリアルタイムな在庫を把握す ることで、「Web 在庫の最⼤化」を⽬指しています RESZAIKO シリーズの⽬標 01 RESZAIKO について 飲⾷店 その他
予約サイト サイトコントローラー
02 インタラクティブ UI の基礎
⽇々の予約を管理する「チャート」と「レイアウト」機能は、飲⾷店の⽅が⾃由に直感的に 操作できるインタラクティブな UI となっています チャートとレイアウト 02 インタラクティブ UI の基礎 チャート機能
レイアウト機能
チャートとレイアウト 02 インタラクティブ UI の基礎 どちらの機能も、⼀⾒すると複雑な UI に⾒えますが、基礎の部分の作り⽅は共通しています 今回の発表では、このようなインタラクティブ UI
を作る際のポイントを説明します 1. インタラクティブ UI の基礎 2. Canvas の使いどころを考える 3. レイヤーで考える Points
インタラクティブ UI の基礎 02 インタラクティブ UI の基礎 Web の UI
は、ブラウザのレンダリングエンジンによって div などの要素が⾃動的にレイアウ トされるようになっています
インタラクティブ UI の基礎 02 インタラクティブ UI の基礎 ⾃由度の⾼い UI では、配置するオブジェクトを
position: absolute で指定して配置します オブジェクトにサイズと位置 を指定する
インタラクティブ UI の基礎 02 インタラクティブ UI の基礎 ⾓度や拡⼤率を変更したい場合は、transform プロパティを使⽤します 回転:rotate()
拡大縮小:scale()
インタラクティブ UI の基礎 02 インタラクティブ UI の基礎 インタラクティブな UI では、ドラッグなどの
ユーザー操作によって、オブジェクトの配置を ⾃由に操作できるのが特徴です ここでも特別な処理をする必要はなく、マウス や指の移動量を取得し、それをオブジェクトの 位置 (top, left) に反映するだけで実現できます (x, y) (x + deltaX, y + deltaY) 連続する移動量を 座標 (top, left)に反映する
インタラクティブ UI の基礎 02 インタラクティブ UI の基礎 移動量は基本的に PointerEvent から取得します
取得⾃体は容易ですが、処理が冗⻑になったり計算が増えたりするため、台帳では以下のライ ブラリを使⽤しています @use-gesture
まとめ 02 インタラクティブ UI の基礎 • 位置は position: absolute で合わせる
• 回転や拡⼤縮⼩は transform プロパティを使う • オブジェクトの移動は連続する移動量(delta)を使⽤する • 移動量の取得はライブラリを使⽤すると便利(@use-gesture)
03 Canvas の使いどころを考える
Canvas の使いどころ 03 Canvas の使いどころを考える インタラクティブな UI を作る際、まず Canvas の使⽤を考えるかもしれません
しかし、すべてを Canvas で実装すると、管理が複雑になり、負担が⼤きくなるだけでなく、 アクセシビリティの対応も難しくなります
アクセシビリティを意識する 03 Canvas の使いどころを考える button タグを用いると フォーカスがデフォルトで効くため キーボードのみで操作できる
そこで、Canvas と通常の DOM を組み合わせ ることで、メンテナンス性とアクセシビリティ の両⽅を向上させることができます たとえば、テーブルオブジェクトなどの操作対 象は、アクセシビリティを考慮し、button タ グを使⽤して表現するとよいです
Canvas とその他の DOM の使い分けに関しては、以下のように考えています Canvas と その他 DOM の使い分け 03
Canvas の使いどころを考える Canvas :描画コストの⾼いもの(グリッドなど)や背景、複雑な図形など その他 DOM:操作対象のオブジェクトなどアクセシビリティを確保したいもの CSS でもグリッドや背景を表現できますが、複雑な計算や位置合わせが必要になると、後々 の管理が⼤変になります そのため、計算処理と相性の良い JavaScript を活⽤し、Canvas に寄せることでメンテナン ス性を⾼めることができます。
計算ロジックの共通化 03 Canvas の使いどころを考える App の設定値 レスポンス (予約データ等) 座標計算 サイズ計算
(純粋関数) 背景 (Canvas) オブジェクト (button タグなど) テーブルや時間の 情報を座標に変換 データ 計算 描画 Canvas とその他の DOM を組み合わせる場合は、座標計算やサイズ計算のロジックを共通化 することが重要です 描画に関する計算ロジックを純粋関数として切り出すことで、Canvas(背景など)とオブ ジェクトの操作を統⼀し、⼀貫した処理が可能になります
まとめ 03 Canvas の使いどころを考える • 描画コストが⾼いものには Canvas を使う • アクセシビリティを確保したいものは
button タグを使う • 座標やサイズの計算ロジックは、純粋関数として切り出して共通して使う
04 レイヤーで考える
レイヤーについて 04 レイヤーで考える 突然ですが、右のようなイラストを描いてくださ いと⾔われたとき、皆さんはどのように描きます か? まず線を描いてから、塗り絵のように⾊を塗って いく⼈もいるかと思います https://comic.smiles55.jp/guide/8090/
レイヤーについて 04 レイヤーで考える https://comic.smiles55.jp/guide/8090/ デジタルでイラストを描いたことやデザインツールを使ったことがある⼈にとっては、以下 のようにレイヤーごとに分けて描く⽅が効率的だと感じるかもしれません
レイヤーについて 04 レイヤーで考える 今回の話と何の関係があるのかと思う⽅もいるかもしれません しかし、複雑な UI を実現するインタラクティブ UI では、このレイヤー構造の考え⽅を取り ⼊れ、コンポーネントを設計することが⼤切になります
https://comic.smiles55.jp/guide/8090/
予約台帳の UI も、⼀⾒すると同じコンポーネント上にさまざまな要素が描画されているよう に⾒えます しかし、レイヤーごとにコンポーネントを重ねる設計にすることで、複雑な UI でもメンテナ ビリティの⾼いソースコードにすることができています コンポーネントでレイヤーを表現 04
レイヤーで考える
コンポーネントでレイヤーを表現 04 レイヤーで考える テーブルレイアウトの機能も同じ感じ
コンポーネントでレイヤーを表現 04 レイヤーで考える 最終描画 レイヤ−1 レイヤ−3 レイヤ−2 レイヤ−5 レイヤ−4 データの表示や各種イベントはそれぞ
れのレイヤーに責務を持たせる
コンポーネントでレイヤーを表現 04 レイヤーで考える ドラッグ時などに関係するレイヤー以外 はロックするのも容易 レイヤーを責務ごとに分けていくことにより、重なりの表現や表⽰の切り替え、操作の可否な どをレイヤーごとに制御することもできるようになります
まとめ 04 レイヤーで考える • コンポーネントをレイヤーと捉えて、責務ごとに分けて重ねる
05 まとめ
まとめ インタラクティブ UI の基礎 • 位置は position: absolute で合わせる •
回転や拡⼤縮⼩は transform プロパティを使う • オブジェクトの移動は連続する移動量(delta)を使⽤する • 移動量の取得はライブラリを使⽤すると便利(@use-gesture) Canvas の使いどころを考える • 描画コストが⾼いものには Canvas を使う • アクセシビリティを確保したいものは button タグを使う • 座標やサイズの計算ロジックは、純粋関数として切り出して共通して使う レイヤーで考える • コンポーネントをレイヤーと捉えて、責務ごとに分けて重ねる
エンジニア募集中! ⼀休ではフロントエンドにとどまらず、よりよいサービスを届ける仲間を募集しています 💪 カジュアル⾯談からでもどうぞ! https://www.ikyu.co.jp/recruit/engineer