Guard とDeep Link を活用したナビゲーション管理
WINTICKETのはなし
auto_route
2021/3のFlutterリプレース当初から使っている
auto_route_generatorで自動生成もできる
つかいかた
AppRouter
route宣言の中に、guard, metaを設定できる
guardとは
インターセプター
例えば、認証状態を見て遷移をrejectするとか
VIP向けのページを公開するとか
ユースケースごとにguardを宣言しておいて、それを適切な画面に設定していくイメージ
実際の例
feature flagを見るguard
keyboardを閉じるまで待つguard
開発者モードかどうかの判定を行う
Kurogoma4D.icon 画面を表示する前に情報を取りきってから表示する、みたいなのも集約できそう
Deep Link
Dynamic Linksのハンドラでrouterのパスとマッチするかどうかを判定、マッチする場合は遷移する
auto_routeを選んだ理由は?
リプレース当初にauto_routeで遷移が全て賄えると判断された
現状でも特に問題は起きていない
feature flagのデメリットは?
即時性に少し課題がある
How To Improve UI Quality And Performance
UIの品質とは
異なる状況でUIが崩れないかどうか、操作を阻害しないか
エラーハンドリングできているか
etc
手動で見ると大変なので自動化しよう
VRT導入
playbook-ui, reg-suit, GCS
Kurogoma4D.icon やっぱreg-suitなんだなぁ
Widget Testを書く
CIを回す
差分の検証
運用について考える
異なるデバイスでもUIが崩れないか
SE対応するためにテスト対象の端末を増やす
異なる状況でもUIが崩れないか
Integration test
パフォーマンス計測をしてみる
bindingから traceAction を呼ぶ
reportKey を設定して、結果を取り出してファイルに保存する
結果の分析
平均フレームビルド時間
平均CPU使用率
平均メモリ使用率
現実的に活用できる方法
パフォーマンス計測したいときに回す
PRのpushごとに実行するなどは効率が悪い
基本チームの状況によって変わる
小売アプリのためのアクセシビリティ
アプリ運用カンパニー
小売企業と協業
デジタルでの購買体験の実現
Accessibility
ウェブサイトをなるべく多くの人が利用できるようにすること
Kurogoma4D.icon ユニバーサルデザイン的な概念
モバイルにおけるアクセシビリティ
Talkback
文字サイズのカスタマイズ
Assistive Touch
なぜ必要なのか
今回の案件は既存のリニューアル
すでに様々な世代のユーザーが居る
日本向け、日本における身体障害者の割合は3%
この人たちも対象になりうる
Flutterにおけるアクセシビリティ対応
公式ドキュメント
スクリーンリーダー
フォントサイズ
充分なコントラスト
スクリーンリーダー
Semantics Widget
Widgetの説明を追加する
標準Widgetの多くはラップされている
Tips
画像は特に対応しなければ Image と読み上げられてしまう
Image WidgetであればsemanticsLabelを設定できる
RowでTextを並べるパターン
別々で読み上げられてしまう
対応
MergeSemantics を使う
囲み忘れに注意
RichText を使う
textScaleFactorのデフォルトが1なので、別途渡してやる必要がある
アイコン付きのボタンで、アイコン部分は読み上げたくない
ExcludeSemantics Widget
Textに別途読み上げ用の文章を渡す
ListView
childrenに渡したWidgetで一つのSemantics Treeが構築される
SingleChildScrollViewでかいけつ
addSemanticsIndexes: false にして、子WidgetをそれぞれSemanticsでラップする
Snackbar
コンテンツが表示されたことに気づけない
Semantics.liveRegion
タップ領域
最低でも40px以上
HIDだと44, Materialだと48
フォントサイズ
Text を使っていれば、基本的には自動で対応してくれる
Tips
textScaleFactor
Layout Overflowを防ぐ
SizedBoxでwidth, heightを固定しない
Columnの子は画面端で改行されるようにする
GridView
flutter_layout_grid packageで可変なグリッドを作る
レイアウト崩れのない、かつ違和感のない画面を作る
ellipsis
FittedBox
同じようなUIを並べる場合は不向き
Kurogoma4D.icon たしかに
textScaleFactorの上限設定