【ヒカラボ 2018/02/01】iOS LIFULL HOME'Sアプリリニューアルの裏側

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

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

アジェンダ
• アプリリニューアル
• ARKit

アプリリニューアル

リニューアルが必要になった背景
アプリのメンテナンス性の低下
メンバー入れ替わりによるコードのブラックボックス化
•新機能追加のコスト増加
•仕様把握漏れによるバグの発生

リニューアルに求めること
LIFULL HOME’S開発の特徴
•開発メンバーが多い（現在 5人）
•外部要因（Web側など）で仕様変更が発生することがある
•UIは頻繁にチューニングされる
メンバーによる設計差異の低減
外部要因による変更の柔軟さ
UIチューニングのしやすさ
リニューアルの設計に求めること

アーキテクチャ

© 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

iOS HOME’S Architecture
View
Presenter
UseCase
Repository
画面表示やイベント検知を主に行う
表示する情報取得と加工を行う
アプリケーション共通の処理を行う
サーバやデータベースへのアクセス
を抽象化する

レイヤ間の関連（RxSwiftの利用）
View
Presenter
UseCase
Repository
UseCaseはデータの問い合わせや
取り出し方について意識しない
Variable
Observable
RepositoryProtocol
Observableを返すことで複数
UseCaseの連携などを容易に
PresenterのVariableとViewは同期
が取れた状態にする

スレッドの管理
PresenterのVariableの値は
常にメインスレッドで更新
処理は極力バックグラウンドで実行
View
Presenter
UseCase
Repository
スレッドの境界

型の命名規則の統一
• 用語の整理
• 物件: Property
• 保存条件: SavedSearch
• 原則、主に扱うデータに対応する用語 + レイヤ名
• PropertiesPresenter: 物件情報の表示（物件一覧画面の表示）
• PropertiesUseCase: 物件に関する処理（物件検索）
• PropertiesRepository: 物件情報の取得（物件検索クライアント呼び出
し）

新アーキテクチャでできるようになったこと
コードの見通しが良くなった
型名の整理、レイヤごとの役割の分類によりどこを修正すべきか分かるよう
になった。
サーバ側の変更に強くなった
サーバアクセス部分がアプリのメインロジックと分離されている。
UIの変更に強くなった
Viewがアプリのメインロジックと分離されている。
PresenterによりViewControllerが肥大化しない。

ユーザインタフェース

デザインの一貫性
配色
形状
フィードバック

デザインガイドライン
default色 highlight色
（黒8%かけ）
disabled色
（白60%かけ）
Background #f7f7fa なしなし
Line #bdc8ca なしなし
Orange #ed6103 #da5903 #f8c09a
White #ffffff #ebebeb #ffffff
ベースとなる色や画面パーツを整理
状態別の色の変更も考慮

ハイライト
方法
• UIView#drawで背景画像に黒をブレンドする。
• isHighlightedのwillSetで半透明の黒のlayerを被せる。この
とき背景画像でlayerをmaskする。
UIButtonやUITableViewCellのデフォルトハイライトは色や範囲がうまく指定できない。

ローディングの使い分け
Shimmer
UITableViewの初回ロード
3点ローディング
ここから下に追加される場合
全画面ロード
操作をブロックしたい場合

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

デザインの一貫性見直し効果
デザインのブレを低減
実装共通化による開発効率のアップ

無事リニューアルリリース
ぜひ使ってみてください

ARKit

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に必要な「床を認識させる」の意味がそもそも分からない。
ユーザに優しいイントロダクションを提供する必要がある。

LIFULL HOME’SアプリのARKit機能の特徴
ホームズくんとコミュニケーションしながらユーザを誘導
専門用語による説明ではなくホームズくんとの対話
床認識操作の誘導
認識完了の通知

実装要素
• タップした床に点を置いて線で結ぶ
• ホームズくんを動かす
• 結果画面を生成する

床の上に線を引く
実装方法
• ARSCNView#hitTestで画面中央の床上の座標を取得
• 取得した座標に点Nodeを追加
• 隣り合う点同士を繋ぐ線Nodeを追加
線を引く実装例
• https://github.com/shu223/ARKit-Sampler
• https://github.com/levantAJ/Measure

ホームズくんを動かす
Blenderで作成したホームズくんモデルを取り込み
Android Tangoのノウハウを流用
動きのパターンを決めてモデルの差し替えに対応
クリスマス特別機能に利用

結果画面の表示
面積の計算
多角形の面積は各点の座標を使って計算可能
間取り図の生成
• 最初の2点が水平になるよう座標を回転させることで見やすくする
• 床画像で塗りつぶして間取りっぽく

まとめ
文脈を使ってユーザにARKitの使い方をガイド
• なるべく説明書的なガイドをしない。
• 専門用語を使わない。

【ヒカラボ 2018/02/01】iOS LIFULL HOME'Sアプリリニューアルの裏側

【ヒカラボ 2018/02/01】iOS LIFULL HOME'Sアプリリニューアルの裏側

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Semelhante a 【ヒカラボ 2018/02/01】iOS LIFULL HOME'Sアプリリニューアルの裏側

Semelhante a 【ヒカラボ 2018/02/01】iOS LIFULL HOME'Sアプリリニューアルの裏側 (20)

Mais de 庸介高橋

Mais de 庸介高橋 (10)