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
0
51
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
Ryohei Shirai
February 11, 2025
Tweet
Share
Other Decks in Technology
See All in Technology
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
130
AIをプロダクトに実装するならAPIで分離しよう 〜タクシーアプリ『GO』のアーキテクチャ実例紹介〜
74th
2
130
Amazon GuardDuty Malware Protection for Amazon S3のここがすごい!
ryder472
1
110
private spaceについてあれこれ調べてみた
operando
1
220
日本語プログラミングとSpring Bootアプリケーション開発 #kanjava
yusuke
2
370
もし今からGraphQLを採用するなら
kazukihayase
10
4.5k
バクラクの組織とアーキテクチャ(要約)2025/01版
shkomine
13
3.3k
WAF に頼りすぎない AWS WAF 運用術 meguro sec #1
izzii
0
380
『AWS Distinguished Engineerに学ぶ リトライの技術』 #ARC403/Marc Brooker on Try again: The tools and techniques behind resilient systems
quiver
0
120
Power BI は、レポート テーマにこだわろう!テーマのティア表付き
ohata_ds
0
140
カスタムインストラクションでGitHub Copilotをカスタマイズ!
07jp27
8
1.6k
AIエージェントについてまとめてみた
pharma_x_tech
20
13k
Featured
See All Featured
Side Projects
sachag
452
42k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Building an army of robots
kneath
302
45k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
290
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
530
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
9
1.3k
4 Signs Your Business is Dying
shpigford
182
22k
Faster Mobile Websites
deanohume
306
31k
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