複雑な画面構成でのページ離脱ガード​_替え玉.web

342 Views

September 11, 26

スライド概要

profile-image
スライド一覧

サイボウズでプロダクトエンジニアしています。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

関連スライド

slide-thumbnail

猫でも分かるUnreal Engineの学び方 - 超初心者向け編 - 2023 v1.0
ue4 ue5 ue-beginner
user-img エピック ゲームズ ジャパン 1.7M
slide-thumbnail

Unreal Engine5 Lumenの仕組みと肝心なところ
ue5 ue-rendering ue-lumen
user-img エピック ゲームズ ジャパン 1.5M
slide-thumbnail

UE5レンダリングフロー総おさらい(2024) 基礎編！[CEDEC+KYUSHU 2024]
ue5 unreal engine ue-rendering
user-img エピック ゲームズ ジャパン 1.4M
slide-thumbnail

Meta XR SDK(V66-74)でQuestアプリを開発
spatial anchor unity quest pro shaperecognizeractivatestate oculus integration transformfeaturestateprovider building blocks transformrecognizeractivestate ovrsemanticclassification jointdeltaprovider ovrscenemanager jointvelocityactivestate オクルージョン sequenceactivestate scene manager ambisonic depth api metaxraudiosource playerlocomotor meta xr sdk quest3 ovrplayercontroller マルチモーダル meta haptics studio direct touch ui meta xr haptics sdk ovrspatialanchor ovrtrackedkeyboard hapticclipplayer fingerfeaturestateprovider hapticclip ワイドモーションモード wmm mruk mr utility kit voice sdk jointrotationactivestate meta horizon os ui set asw application spacewarp ovr metrics tool unityscene manager colocation discovery コロケーション mx ink passthrough camera api hand tracking microgestures webcamtexturemanager passthroughcamerautils cameraviewermanager hand pose selector recorder
user-img あうぜん 1.2M
slide-thumbnail

猫でも分かる UE5.0, 5.1 におけるアニメーションの新機能について【CEDEC+KYUSHU 2022】
ue5 cedec+kyushu ue-animation ue-optimize ue-bp ue-physics ue-sequencer
user-img エピック ゲームズ ジャパン 1M
slide-thumbnail

【DeNA】新卒エンジニア向け 会社説明資料
user-img DeNA新卒採用 1M
各ページのテキスト
1.

複雑な画面構成でのページ離脱ガード 2026.09.11 替え玉.web 1

2.

自己紹介 江﨑 政堅（えざき しょうけん） あだ名: えざきち • サイボウズ株式会社 • kintone開発 • 趣味: カメラ、猫と遊ぶ • 福岡で美味しかったラーメン→ らぁめん いちむじん 2

3.

目次 01 過去の発表 02 Navigation APIとは？ 03 プロダクトの仕様 04 実装 05 Navigation APIがあったら？ 3

4.

過去の発表 4

5.

Navigation APIとは？ ブラウザのナビゲーションアクションやアプリケーションの履歴を管理する機能を 提供するAPIで、History APIの後継として設計されました。 5

6.

Navigation APIの細かい機能の話はしません SPAにおける入力中のページ離脱ガードについて話します 6

7.

プロダクトの仕様 7

8.

画面構成 kintone（MPA） ├── 画面A ├── 画面B ├── 画面C └── SPA ├── 画面D ├── 画面E └── 画面F 8

9.

ハッシュルーターを使用（react-router） URL のハッシュ部分 (#) を使ってクライアント側のルーティングを 管理する仕組み • #以降が変わるとreact-routerがそれを見て画面を切り替える • aタグを使ってもSPA遷移ができる 例 https://example.com/app #/home https://example.com/app #/settings 9

10.

ヘッダーと SPA は別の React アプリ ヘッダー SPA画面 10

11.

どう実装する？ 11

12.

遷移の種類で分担する SPAの外への遷移・ リロード・タブ閉じ beforeunloadでブラウザに止めてもらう SPA内の画面遷移 useBlockerでreact-routerに止めてもらう 12

13.

SPA内の遷移がうまくいかない SPAの外への遷移・ リロード・タブ閉じ beforeunloadでブラウザに止めてもらう SPA内の画面遷移 useBlockerでreact-routerに止めてもらう useBlocker が止められるのは ・Link / navigate による遷移 ・その遷移で作られた履歴への 戻る / 進む 13

14.

Link使ってないの？ 14

15.

aタグでのSPA遷移を避けられないリンクがある 別のReactアプリのため、SPAのRouterを共有できない 投稿に含まれるリンクは HTML の a タグとして保存され、そのまま描画される Linkに揃えることができないため、aタグに統一する 15

16.

popstateイベントで検知し、URLを書き戻す # が変わったあとにブラウザが window に投げるイベント クリック / 戻る → URL が変わる → popstate → 画面を切り替える 16

17.

URLを書き戻すことの課題 URL を変える操作は、すべて新しい遷移になる 戻る をキャンセル [A][B*][C] → 戻る → [A*][B][C] → 書き戻し(push) → [A][B'*] 進む先のCが消えた リンク をキャンセル [A][B*] → a タグ → [A][B][C*] * : 現在位置 → 書き戻し(push) → [A][B][C][B'*] 戻ると、断ったCに着く 17

18.

URLを書き戻さずに位置を戻す 戻る をキャンセル [A][B*][C] → 戻る → [A*][B][C] → go(+1) → [A][B*][C] 履歴は無傷 リンク をキャンセル [A][B*] → a タグ → [A][B][C*] → go(-1) → [A][B*][C] * : 現在位置 進む先にCが残るだけ 18

19.

deltaを知るために popstateは遷移を検知してくれるが「何歩動いたか」は教えてくれない URLも位置の代わりにならない [A][B][A] ← 同じURLが2回並ぶ そのため、履歴ひとつひとつに番号を書く pushStateを差し替えて、履歴を積むたびに番号を付ける aタグで積まれた履歴には、着地時にreplaceStateで番号をつける 着地した番号 − 直前の番号 ＝ delta 履歴は無傷 番号のない履歴に着いたら、フォールバックとしてURLを書き戻す 進む先にCが残るだけ 19

20.

Navigation APIなら navigate イベントは URL が変わる前に発火し、遷移そのものを止められる 履歴は無傷 URL書き戻し、deltaの算出、履歴への番号付与が不要になる 進む先にCが残るだけ 20

21.

Navigation APIを使えるようになるまでの道のり kintoneのフロントエンドは「Baseline Widely Available」を採用している 履歴は無傷 Navigation APIがNewly availableになったのは今年初めのため、kintoneで 使えるのはまだ先の話... 進む先にCが残るだけ 21

22.

22