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
52
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
Ryohei Shirai
February 11, 2025
Tweet
Share
Other Decks in Technology
See All in Technology
クラウドネイティブ時代を乗り越えるためのオブザーバビリティ(可観測性)ことはじめ_CloudNative-Observability
tkhresk
0
110
AWSエンジニアに捧ぐLangChainの歩き方
tsukuboshi
2
450
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
6
56k
開発者が自律的に AWS Security Hub findings に 対応する仕組みと AWS re:Invent 2024 登壇体験談 / Developers autonomously report AWS Security Hub findings Corresponding mechanism and AWS re:Invent 2024 presentation experience
kaminashi
0
120
アーキテクチャわからん、の話
shirayanagiryuji
0
270
Creative Pair
kawaguti
PRO
1
150
地方企業がクラウドを活用するヒント
miu_crescent
PRO
1
120
Women in Agile
kawaguti
PRO
3
190
【弥生】20250130_AWSマルチアカウント運用セミナー登壇資料
yayoi_dd
1
160
CNAPPから考えるAWSガバナンスの実践と最適化
yuobayashi
5
740
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
1
540
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
410
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Designing for humans not robots
tammielis
250
25k
The Language of Interfaces
destraynor
156
24k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
Docker and Python
trallard
44
3.2k
Writing Fast Ruby
sferik
628
61k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k
Embracing the Ebb and Flow
colly
84
4.6k
Visualization
eitanlees
146
15k
A Philosophy of Restraint
colly
203
16k
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