1.
iOSアプリリニューアルの裏側
LIFULL HOME’S事業本部 新UX開発部 デバイスソリューションユニッ
ト
高橋庸介（2018年2月1日）

2.
© LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。2
自己紹介
高橋庸介
• iOS / アプリ用API担当
• テニス
• ゼルダ
• 子供1人 (もうすぐ1歳)

3.
© LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。3
アジェンダ
• アプリリニューアル
• ARKit

4.
© LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。4
アプリリニューアル

5.
© LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。5
リニューアルが必要になった背景
アプリのメンテナンス性の低下
メンバー入れ替わりによるコードのブラックボックス化
•新機能追加のコスト増加
•仕様把握漏れによるバグの発生

6.
© LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。6
リニューアルに求めること
LIFULL HOME’S開発の特徴
•開発メンバーが多い（現在 5人）
•外部要因（Web側など）で仕様変更が発生することがある
•UIは頻繁にチューニングされる
メンバーによる設計差異の低減
外部要因による変更の柔軟さ
UIチューニングのしやすさ
リニューアルの設計に求めること

7.
© LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。7
アーキテクチャ

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が肥大化しない。

14.
© LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。14
ユーザインタフェース

15.
© LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。15
デザインの一貫性
配色
形状
フィードバック

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
ユーザの操作を邪魔しないエラー
どこにでも表示可能
• 画面の下領域からせりだす
ユーザの操作を邪魔しすぎない
• 画面の一部しか占有しない
• 「閉じる」か「再試行」か

20.
© LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。20
デザインの一貫性見直し効果
デザインのブレを低減
実装共通化による開発効率のアップ

21.
© LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。21
無事リニューアルリリース
ぜひ使ってみてください

22.
© LIFULL Co.,Ltd. 本書の無断転載、複製を固く禁じます。22
ARKit

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の使い方をガイド
• なるべく説明書的なガイドをしない。
• 専門用語を使わない。