MERYのアプリができるまで

MERYのアプリができるまで

1. 1. MERYのアプリが できるまで @kazutoyo (peroli)
2. 2. 自己紹介 • @kazutoyo (東海 和豊) • 2014年9月にペロリにJOIN • 主にAndroidのアプリを担 当 • チームの朝会の声出し担当
3. 3. 約100万ダウンロード！ （iOS/Android合算）
4. 4. ストアでの評価もいい感じ！ Google Play App Store
5. 5. Q.どんなひとたちが アプリをつくっているの？
6. 6. ほぼ男性が「女の子の毎日をかわいく。やってます。 ♂ ♂ ♂ ♂ ♂ ♂
7. 7. MERYのアプリができるまで の道のり
8. 8. どれくらいの期間でつくった？
9. 9. 実は製作期間1年・・・！
10. 10. 2014.5 iOS 開発開始 Android 開発開始 2014.9 2014.10 GPさんJOIN リデザイン 2014.12 クオリティアップのため 再度つくりなおす 2015.5 iOS/Android1.0 こっそりリリース 2015.7 1.2.0のタイミングで プレスリリース MERYのアプリができるまでの 変遷
11. 11. MERYでの開発サイクル
12. 12. MERYでの開発サイクル 1. 機能の仕様を決める 2. ワイヤフレームを書く 3. デザイナーがカンプを作る 4. エンジニアが実装 5. フィードバック
13. 13. • ユーザからの要望や、 やりたいことの機能に ついての仕様を決める • 決めたものはQiitaに まとめる 1. 機能の仕様を決める MERYでの開発サイクル
14. 14. • デザイナーさんがワイヤ フレームを書き、POなど にチェックしてもらう。 • 複雑な画面の場合などは Prottとか使って遷移の確 認もしたりする 2. ワイヤフレームを書く MERYでの開発サイクル
15. 15. • ワイヤーのOKが出た らカンプを作る • 出来たらQiitaに貼り 付け＆Sketchファイ ルをエンジニアに共有 3. デザイナーがカンプを作る MERYでの開発サイクル
16. 16. • カンプを元にエンジニア が実装していく • 実装したら開発ブランチ にマージしてDeployGate にアップロードしてみん なが触れるようにしてお く 4. エンジニアが実装 MERYでの開発サイクル
17. 17. • デザイナーさんなどに フィードバックをもら う • OKだったら次のリリー スバージョンに追加す る 5. フィードバック MERYでの開発サイクル
18. 18. アプリエンジニアが 開発するときに気をつけている ３つのこと
19. 19. 1. ユーザの目線で アプリを使い倒す
20. 20. 1. ユーザの目線でアプリを使い倒す • 電車の中とか、寝る前とか、ユーザが使っていそうな利 用シーンでアプリを使う • 開発しているときはWiFi環境だからあまり気が付かないけど、電車 の中で使っているとびっくりするくらい読み込みの遅さに気がつく • 一昔前の端末を普段使ってみる • エンジニアは最新の端末を持ってるけど、ユーザは2、3年前の端 末でも普通に使っている
21. 21. 2. デザイナーさんとの コミュニケーション
22. 22. 2. デザイナーさんとの コミュニケーション • 気になることがあれば直接話しかける • わからないことがあったらすぐに聞くことで、巻き戻りす ることを少なくする • デザイナーさんとの席を隣や後ろのにしてもらって、すぐに 話しかけられるようにしている • キャプチャを撮って確認してもらうより、端末をパッと見せ て確認してもらうほうが楽
23. 23. 3. 魂を込める
24. 24. 3. 魂を込める • 細かいところまで（なるべく）手を抜か ずに作れば、全体的な使いやすさが変わっ てくる • 難しい実装のUIとかあっても、逃げずに 頑張る
25. 25. リリース前やっていること
26. 26. 1日中いろいろな端末を使いまくる • アルバイトの人にも手伝ってもらって、いろいろ な端末やOSでアプリを触る • アプリが落ちたりとか、どんどん動作が重くなっ ていかないかとか見てる • UIテストを多少書いたりしてるけど、人力でも 頑張ってやってる
27. 27. メモリリークの確認 • メモリリークをしていないかXCodeや DDMSなどを使ってチェックしている • 今のところそう大きなリークをしたこと はないが念のため
28. 28. バイナリのチェック バイナリのチェックスクリプトを作って、ビルドしたバイナリの中にデバッグ用 のデータが入っていないかを確認してる
29. 29. アプリの体験を上げるために やったこと
30. 30. 画像の読み込み高速化
31. 31. 画像の読み込みを高速化 JPEG WebP WebPを導入してファイルサイズを大きく減らすことが出来た！ だいたい 1/7
32. 32. • 実際の表示するサイズより大 きな画像を取得していたので、 巨大な画像があったりすると 読み込みが詰まっていた • 表示に必要なサイズをサーバ にリクエストし、サーバ上 でリサイズしてから表示する ようにした 画像の読み込みを高速化 画面の表示サイズに合うようにサーバ側でリサイズ
33. 33. • サクサクと読むことが できるように、画像を 先読みさせて表示前にディ スクにキャッシュさせ ておく 画像の先読み 画像の読み込みを高速化
34. 34. 初回起動の高速化
35. 35. • トップの画面で使うJSONファイルは、全てのタブ のデータを取得していたため、超巨大（１MB弱） になっていた • 取得するデータの最小化＆パース処理の最適化を した • JSONパーサにLoganSquareを使いました • 詳しくはQiitaの投稿を見てください！(http:// qiita.com/kazutoyo/items/ b3e9a1f868ec63a7ba5a) 起動時間を1/4に高速化 初回起動の高速化
36. 36. アニメーション
37. 37. • 急に切り替わったりせず、 少しずつ変化するような トランジションを入れる • ふわっとした動きになる ように、等速なアニメー ションを使わない スクロールのトランジション アニメーション
38. 38. • ハートのアニメーション はPNGのシーケンスをパ ラパラで表示 • 背景の波紋はアプリ側で Shapeを書いてアニメー ションさせている LOVEアクションのアニメーション アニメーション
39. 39. レビュー誘導 • ある程度使ってくれたタ イミングで表示するよう にして、ちゃんと使って くれているユーザにのみ 出すようにする
40. 40. レビュー誘導のダイアログも可愛く
41. 41. その他やっていること
42. 42. 静的解析/リーク検知 • 静的解析にはiOS/Android 共にInferを使っている • Inferの結果もSlackに流す • Androidの開発版ビルドで はLeakCanaryを使って、 リークしてた時もSlackに 流してる
43. 43. ストアのレビューをSlackに流す • App Store、Google Play のレビューを1日に1回 Slackに通知している • 要望をみて改善をしたり、 モチベーションアップし てる
44. 44. 以上。
45. 45. ご清聴ありがとうございました！