174
146

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【Swift, Firebase】究極の瞑想アプリを作った話

Last updated at Posted at 2018-08-20

マツコの知らない世界で有名になった 「瞑想」 ですが、
今回、ヨガ教室をやっている yoggy inc. さんの新規事業ということで、
瞑想スタジオと合わせた瞑想アプリを製作し公開しました。

スクリーンショット 2018-08-17 10.39.11.png

また、先日クリエイティブの専門誌である 「ブレーン」 にもこのアプリが取り上げられました。

Dj645qSUUAAsQTF.jpg

主要機能

  • 瞑想のガイダンスを流す
  • 瞑想を続けるための進捗管理やカレンダー機能、心測定機能など
  • アプリのサブスクリプション
    • 無料期間あり
    • 月々または年額
  • HealthKitとの連携

動作

meditation_start.gifbreath.gifcalendar.gif

環境

  • XCode 9.2~
  • Swift 4.0.3~
  • Carthage 0.27.0 ~
  • Cocoapods 1.4.0 ~

開発期間

  • 3/12 ~4/23 開発
  • 4/23 ~ 4/27 テスト
  • 4/27 ~ バグ修正、チケット対応

開発体制

  • iOSメイン: おかむー + 実装サポート数名
  • サーバー: おかむー

進捗管理

  • Google Docsのスプレッドシート
  • github issue

プロトタイプ

  • prott

ソースコード管理

  • github

作戦

  • サーバーサイドとアプリの開発が両方必要だったため、スピードとコスパ重視のFirebaseを使いました
    • ライブラリにもたくさんお世話になりました
  • あとあとややこしくなりそうなのは極力使わない
    • UIWindowはつかわない
    • UserDefaultも極力使わない、もし使うのであればkeyChainを利用するが、極力使わない

主な技術や構成、使用したライブラリ

  • MVVMを採用
    • DataSourceを分離しテストしやすい構造にする
  • Firebase
    • 本番環境とstg環境を用意
  • Lottie(旧BodyMovin)
    • コアなアニメーションはAfter Effectsで書き出してもらう
`Gemfileで管理するもの`

- cocoapods
- fastlane

`podfileで管理するもの`

- swiftDate
- firebase
- fbloginkit
- fabric

`cartfile(なるべくcarthageに寄せた)で管理するもの`

- json
    - github “SwiftyJSON/SwiftyJSON”
- reactive
    - github “SwiftBond/Bond”
- setting
    - github “nickoneill/PermissionScope” ~> 1.0
- ui
    - github “ninjaprox/NVActivityIndicatorView”
    - github “SVProgressHUD/SVProgressHUD”
    - github “airbnb/lottie-ios”
    - github “xmartlabs/Eureka” ~> 4.0
    - github “danielgindi/Charts” ~> 3.0.5
    - github “kaandedeoglu/KDCircularProgress”
    - github “ChiliLabs/CHIPageControl” ~> 0.1.3
- cache
    - github “rs/SDWebImage”
- DB
    - github “realm/realm-cocoa”
- scrollView
    - github “dzenbot/DZNEmptyDataSet”
    - github “eggswift/pull-to-refresh”
- network
    - github “ashleymills/Reachability.swift” ~> 3.0
    - github “Alamofire/Alamofire”
- storekit
    - github “bizz84/SwiftyStoreKit”
- calendar
    - github “WenchaoD/FSCalendar”
- secret
    - github “evgenyneu/keychain-swift” ~> 10.0

管理画面やデータ更新

  • Firebaseを使用するので、管理画面は開発せずGoogle Sheetを管理画面としました

瞑想コンテンツの更新

  • GoogleSheetはjson形式でexportできるので、それをFirebase Storageに置いてもらうオペレーションをしてもらう
  • 音声や画像ファイルなどは、あらかじめFirebase Storageにuploadしておき、downloadURLをGoogle Sheetの管理画面へ記入してもらう

push通知

  • FCMは使わず、Cloud Messagingを利用して手動でpushします

ユーザーのDataの管理

  • Realmは、encryptionKeyで暗号化して使用する
  • ログインはFirebaseAuthenticationにまかせる
    • Email
    • Facebook
    • 匿名
  • 個人情報でないその他の情報は、Realtime Databaseにputして、Cloud Storage バケットへ定期的にバックアップする

品質管理・規約

  • お互いにプルリクを送り合う
  • 今回SwiftLintは使わなかった
  • finalとprivate修飾子の徹底
    • 三項演算子と??アンラップは今回は、使用を許可
  • interfaceはextensionにつける
  • 強制アンラップは禁止
  • Windowはつかわない
  • UserDefaultも極力使わない、もし使うのであればkeyChainを利用するが、極力使わない

などなど、まあSwifterにとっては当たりまえなことは多い

アニメーション

瞑想画面

  • 瞑想中の映像は、AfterEffectで動画として書き出して再生させる
  • 波形部分は、UIViewで毎秒drawする
  • 瞑想開始待ちローディングは、AfterEffectでSVGで書き出してもらい、Lottieで実装する

meditation_start.gifmeditation_end.gif

ホーム画面

  • 瞑想進捗 CABasicAnimationで実装
  • 画面遷移 CustomTransitionで実装

progress.gif

ツール画面

  • 呼吸カウント AfterEffectでSVGで書き出してもらい、Lottieで実装する
  • タイマー KDCircularProgressを使用して実装
  • 心測定 AfterEffectでSVGで書き出してもらい、Lottieで実装する

breath.giftimer.gifcocololo.gif

テストコード

  • XCTest
  • XCUITest

構造について

  • Clean Architectureを採用したかったが、開発期間的に慣れているMVVMにしました

めんどくさかったところ

  • 外部と提携したSDKが、x86_64に対応していなかった
    • targetをdev,stg,prodを作成し、devのみコンパイルフラグを使って、排除することでローカルでの開発できるようにした(ふつうではある)

難しかったところ

  • このアプリは、背景が有機的に動いている演出があるため、全ての画面が透明背景で、いろいろ問題があった

    • デフォルトのトランジションを使うと、背面とかぶるのでカスタムトランジションやアニメーションを工夫して書く必要があった
  • 設定画面などはEurekaを使用していたが、透明がゆえに、Eurekaも限界がきて最後は、ほとんど自前に書き換えた

大変だったところ

  • 開発期間が短く、いろいろ犠牲になった
    • 食事、自分のコミット、技術の切り売りなど
    • 将来のためにも、しっかりと時間のある案件をやりたい or 5倍のスピードで実装できるようになりたい

感想

  • まずは周りの人に感謝です。ありがとうございました。
  • 業務や趣味でもFirebaseは結構使っていたのでハマる事なく実装できた
  • アンドロイド対応などもあればチャレンジしたい
  • サブスクリプションの設定で、明らかにAppleの翻訳ミスを見つけてしまった(今後記事にする)

さいごに

rectangle_large_type_2_16f3c7118afccf85c7baac3bcebfb64b.pngrectangle_large_type_2_1d8e5847e845492d608aee545f735bda.png

などを書いています。

過去の作品などはこちら
https://www.okamu.ro/

174
146
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
174
146

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?