Weitere ähnliche Inhalte
Ähnlich wie 【ヒカラボ 2018/02/01】iOS LIFULL HOME'Sアプリリニューアルの裏側 (20)
【ヒカラボ 2018/02/01】iOS LIFULL HOME'Sアプリリニューアルの裏側
- 2. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。2
自己紹介
高橋庸介
• iOS / アプリ用API担当
• テニス
• ゼルダ
• 子供1人 (もうすぐ1歳)
- 5. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。5
リニューアルが必要になった背景
アプリのメンテナンス性の低下
メンバー入れ替わりによるコードのブラックボックス化
•新機能追加のコスト増加
•仕様把握漏れによるバグの発生
- 6. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。6
リニューアルに求めること
LIFULL HOME’S開発の特徴
•開発メンバーが多い(現在 5人)
•外部要因(Web側など)で仕様変更が発生することがある
•UIは頻繁にチューニングされる
メンバーによる設計差異の低減
外部要因による変更の柔軟さ
UIチューニングのしやすさ
リニューアルの設計に求めること
- 8. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。
Clean Architecture
Entities
UseCase
Interface Adapters
Frameworks & Drivers
Entities
大規模プロジェクトレベルのビジネスルール
UseCases
アプリケーション固有のビジネスルール
Interface Adapters
EntitiesやUseCases用のデータ形式から
Framework & Drivers用のデータ形式に変
換する
Frameworks & Drivers
データベースやWebフレームワークなど
円の内側にしか依存できない
https://8thlight.com/blog/uncle-bob/2012/08/13/the-clean-architect
- 9. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。
iOS HOME’S Architecture
View
Presenter
UseCase
Repository
画面表示やイベント検知を主に行う
表示する情報取得と加工を行う
アプリケーション共通の処理を行う
サーバやデータベースへのアクセス
を抽象化する
- 10. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。
レイヤ間の関連(RxSwiftの利用)
View
Presenter
UseCase
Repository
UseCaseはデータの問い合わせや
取り出し方について意識しない
Variable
Observable
RepositoryProtocol
Observableを返すことで複数
UseCaseの連携などを容易に
PresenterのVariableとViewは同期
が取れた状態にする
- 11. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。
スレッドの管理
PresenterのVariableの値は
常にメインスレッドで更新
処理は極力バックグラウンドで実行
View
Presenter
UseCase
Repository
スレッドの境界
- 12. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。12
型の命名規則の統一
• 用語の整理
• 物件: Property
• 保存条件: SavedSearch
• 原則、主に扱うデータに対応する用語 + レイヤ名
• PropertiesPresenter: 物件情報の表示(物件一覧画面の表示)
• PropertiesUseCase: 物件に関する処理(物件検索)
• PropertiesRepository: 物件情報の取得(物件検索クライアント呼び出
し)
- 13. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。13
新アーキテクチャでできるようになったこと
コードの見通しが良くなった
型名の整理、レイヤごとの役割の分類によりどこを修正すべきか分かるよう
になった。
サーバ側の変更に強くなった
サーバアクセス部分がアプリのメインロジックと分離されている。
UIの変更に強くなった
Viewがアプリのメインロジックと分離されている。
PresenterによりViewControllerが肥大化しない。
- 16. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。16
デザインガイドライン
default色 highlight色
(黒8%かけ)
disabled色
(白60%かけ)
Background #f7f7fa なし なし
Line #bdc8ca なし なし
Orange #ed6103 #da5903 #f8c09a
White #ffffff #ebebeb #ffffff
ベースとなる色や画面パーツを整理
状態別の色の変更も考慮
- 17. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。17
ハイライト
方法
• UIView#drawで背景画像に黒をブレンドする。
• isHighlightedのwillSetで半透明の黒のlayerを被せる。この
とき背景画像でlayerをmaskする。
UIButtonやUITableViewCellのデフォルトハイライトは色や範囲がうまく指定できない。
- 18. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。18
ローディングの使い分け
Shimmer
UITableViewの初回ロード
3点ローディング
ここから下に追加される場合
全画面ロード
操作をブロックしたい場合
- 19. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。19
ユーザの操作を邪魔しないエラー
どこにでも表示可能
• 画面の下領域からせりだす
ユーザの操作を邪魔しすぎない
• 画面の一部しか占有しない
• 「閉じる」か「再試行」か
- 23. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。23
ARKitで注意しなければならないこと
Human Interface Guidelines
https://developer.apple.com/ios/human-interface-guidelines/technologies/augmented-
reality/
特に気をつけた点
• Wherever possible, provide hints in context.
• If you must display instructional text, use approachable
terminology.
• Indicate when initialization is occurring and involve the user.
ユーザはARという体験に慣れていない
→ ARKitに必要な「床を認識させる」の意味がそもそも分からない。
ユーザに優しいイントロダクションを提供する必要がある。
- 24. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。24
LIFULL HOME’SアプリのARKit機能の特徴
ホームズくんとコミュニケーションしながらユーザを誘導
専門用語による説明ではなくホームズくんとの対話
床認識操作の誘導
認識完了の通知
- 25. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。25
実装要素
• タップした床に点を置いて線で結ぶ
• ホームズくんを動かす
• 結果画面を生成する
- 26. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。26
床の上に線を引く
実装方法
• ARSCNView#hitTestで画面中央の床上の座標を取得
• 取得した座標に点Nodeを追加
• 隣り合う点同士を繋ぐ線Nodeを追加
線を引く実装例
• https://github.com/shu223/ARKit-Sampler
• https://github.com/levantAJ/Measure
- 27. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。27
ホームズくんを動かす
Blenderで作成したホームズくんモデルを取り込み
Android Tangoのノウハウを流用
動きのパターンを決めてモデルの差し替えに対応
クリスマス特別機能に利用
- 28. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。28
結果画面の表示
面積の計算
多角形の面積は各点の座標を使って計算可能
間取り図の生成
• 最初の2点が水平になるよう座標を回転させることで見やすくする
• 床画像で塗りつぶして間取りっぽく
- 29. © LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。29
まとめ
文脈を使ってユーザにARKitの使い方をガイド
• なるべく説明書的なガイドをしない。
• 専門用語を使わない。