【ヒカ☆ラボ】「HOME'S」の開発スタッフが語るスマートデバイスアプリ開発秘話 ～住まい探しアプリ、使いやすさNo.1への道～ https://at-agent.jp/service/event/92/ 上記イベントで小屋敷が発表した資料になります

1. HOME’S アプリ
の
裏側
株式会社 ネクスト
小屋敷 圭史
2014 / 6 / 3

2. 自己紹介
• 2007年 ネクスト入社
• 以下を担当
• HOME’S賃貸 クライアント用マネージャー
• HOME’S賃貸 PCサイト
• HOME’S賃貸 スマホサイト
• HOME’S PCサイト
• HOME’S スマホサイト
• HOME’S iOSアプリ ← 今ココ！
2
小屋敷 圭史 (こやしき よしふみ)
@minihouse

3. アプリをダウンロードしてお聞き下さい
3
1. AppStoreにて「ホームズ」で検索
2. HOME’Sアプリをインストール

4. アジェンダ
• HOME’S iOSアプリの歴史
• HOME’S iOSアプリの表側
• HOME’S iOSアプリの裏側
• HOME’S アプリのチーム開発
4

5. HOME’S iOSアプリの歴史
5
2009年12月 2013年12月2012年8月
V1.0 V2.0 V3.0
業界初のiOSアプリ
クリエイターの日
を活かして開発
全員がiOSアプリ
開発未経験者
UIも内部ロジック
もすべてゼロから
作りなおした
横断検索
棟寄せ・戸寄せ
に対応
ユニバーサル対応
iOS7対応
見学メモ機能

6. 6
HOME’S iOSアプリの表側

7. iPhoneとiPadに最適なUIを提供
7

8. 機能紹介
• 物件検索
• 物件のお気に入り、閲覧履歴
• 検索条件の保存、履歴
• 家賃相場 (※1)
• 見学メモ (※1)
※1 iPhoneのみ
8

9. 物件検索
9
アプリだから
素早く簡単に物件チェック
できた方がいいよね

10. 最新物件がチェックしやすい物件検索
10
1度条件を入力して検索すれば、
それ以降は起動するだけで最新物件がチェックできる
起動
初回 2回目

11. 見学メモ
11
内見でよく写真とるけど、
どの物件か分からなくなるから
整理して見れるといいよね

12. 自動で整理してくれる見学メモ
12
物件の見学時に写真とテキストでメモが簡単にできる
物件ごとにメモが自動的に整理される

13. iPadでの物件検索
13
iPadは画面大きいから
それを活かして見やすく
比較しやすい方がいいよね

14. 比較しやすい横レイアウト
14

15. 遷移なしで条件変更できる
15

16. 全画面を使った物件詳細
16

17. エイプリルフールやってまし
た
17
Gigazineのまとめに取り上げられた
http://gigazine.net/news/20140401-aprilfool/
余談ですが・・・

18. 18
HOME’S iOSアプリの裏側

19. HOME’S iOSアプリの特徴
• 内製
• ネイティブアプリ
• ユニバーサルアプリ
• HOME’S APIを使っている
19

20. なぜユニバーサルにしたか
• インストールしている人はアップデートで
使えるようになる
• ダウンロード数がiPhoneと合算になる
• View以外のプログラムが使いまわせる
20

21. アーキテクチャ
21
HOME’S
API
API
接続
物件
検索
物件
一覧
条件
設定
条件
管理
マスタ
管理
キャッシュ
お気に入
り
閲覧
履歴
お気に入り
管理
閲覧履歴
管理
DB

22. 物件一覧の表示の作り
22
物件の種類だけ表示パターンが存在する
・賃貸マンション(棟寄せ)
・賃貸アパート(棟寄せ)
・賃貸一戸建て
・新築分譲マンション(棟寄せ)
・中古マンション(棟寄せ)
・新築分譲一戸建て
・中古一戸建て
・土地

23. 物件一覧のTableViewの作り
23
物件タイトル
棟概要
部屋件数
部屋情報(x1〜3)
他の部屋表示
物件タイトル
物件情報
×物件の種類
×物件の種類
物件概要セル
物件情報セル
棟表示
戸表示
物件タイトルセル
部屋件数セル
×1
×1
他の部屋表示 ×1
セクション セル物件種別
・賃貸マンション
・賃貸アパート
・新築マンション
・中古マンション
・賃貸一戸建て
・新築一戸建て
・中古一戸建て
・土地

24. iPadの物件一覧の表示の仕組み
24
TableViewを回転し横にしている
開閉は両方の
TableViewCellを用意し、
入れ替えている

25. iPhone画面の再利用で工数削減
25
再利用

26. 26
HOME’S iOSアプリのチーム開発

27. チーム開発で使用しているもの
27
バージョン管理
Git
コミュニケーション
ツール ChatWork
タスク管理
Redmine
情報共有
Wiki
アプリ配布
TestFlight

28. 開発体制
28
企画 x2 詳細仕様作成
デザイナー x2 デザイン作成
画像パーツ作成
エンジニア x5 実装

29. 開発フロー
29
施策
出し
全員
仕様
決め
企画
デザイン
↓
パーツ
作成
デザイナー
設計
↓
設計レビュー
↓
実装
↓
ソースレビュー
↓
テスト仕様書作成
↓
テスト
エンジニア
開発版
配信
↓
最終
テスト
全員
リ
リ|
ス

30. 密なコミュニケーション
• 企画、デザイナー、エンジニアが同じ組織
かつ席が近いので、密にコミュニケーショ
ンが取れる
• 朝会やアプリレビューランチといった仕組
みでコミュニケーションとる機会も作って
いる
30

31. 朝会
• 進捗確認
• 問題点の解決
• 情報共有
• KPIの達成状況確認
31

32. アプリレビューランチ
• 隔週で実施
• 各自がいいと思ったアプリを紹介しあう
• アプリの改善につなげる
32

33. Redmineによるチケット管理
• アイデアの管理
• タスクの管理
• バグの管理
33

34. Crashlyticsによるクラッシュ情報収
集
• クラッシュの統計情報
→対応の緊急性が可視化される
• クラッシュの発生箇所が確認できる
→解決までの時間が大幅短縮
• クラッシュした端末の情報が確認できる
→iOSバージョン、メモリ状態など
34

35. 実機デバッグ機能
• Debugビルド時だけ使用可能
• メモリ確認
• ワーニング発生
• API接続先変更
• 検索条件リセット
• 物件ID指定
• デバッグ出力確認
35

36. 36
さいごに

37. ネクストにおけるエンジニアの醍醐
味
• 自ら考え自ら作ることができる
• チャレンジできる環境が用意されている
37
ユーザーを第一に考え、仕様やUI/UXまで落とし込み、
自分の手で作り上げることは醍醐味であり幸せなことである
クリエイターの日、クリエイティブアワード、新規事業制度
といった仕組みだけでなく、
積極的に動くメンバーをフォローする風土がある

38. アプリエンジニア募集
• iOS または Androidのネイティブアプリ開発
ができる方
• PHPやRubyができるとさらにありがたいです
38

39. 39
今後のHOME’Sアプリにご期待下さい！！

40. ご清聴ありがとうございました