チュートリアル実装の『そこどうしてる?』 Poiboyではこうしてる!

チュートリアル実装の『そこどうしてる?』 Poiboyではこうしてる!

2018年9月28日に株式会社Diverseにて行われた「マッチングサービス開発の裏側Night」での登壇資料になります。
https://diverse.connpass.com/event/100488/

1a74617b91d2757b839b9cf3614648ce?s=128

Tomohiro Imaizumi

September 28, 2018
Tweet

Transcript

  1. 4.

    ‣ 今泉 智博 @imaizume ‣ 2017年株式会社ミクシィ新卒入社 ‣ 現在株式会社 所属 ‣

    iOS利用経験0から iOS版開発担当に ‣ (ほぼ)毎日健康COMP生活はもうすぐ1周年
  2. 13.

    A. なるべく共通化する • 男女/登録経路で共通のVCを使用 • 内部Viewの表示切替え • 共通化が有効そうな場所 • ログイン画面

    • プロフィール登録画面 • 見た目が似ているUI // 画像切り替え self.banner.image = isMale ? maleBannerImg : femaleBannerImg self.user.image = isMale ? maleUserImg : femaleUserImg self.example.image = isMale ? maleExampleImg : femaleExampleImg // 制約切り替え self.maleContraint.priority = isMale ? .defaultHigh : .defaultLow self.femaleContraint.priority = !isMale ? .defaultHigh : .defaultLow 男⼥共通のVC
  3. 14.

    B. なるべく分離する // MARK: ViewController出し分け if isMale { // 男性

    let vc = MaleRegisterViewController() self.present(vc, animated: true) } else { // 女性 let vc = FemaleRegisterViewController() self.present(vc, animated: true) } • 男女/登録経路毎のVCを定義 • VC自体を表示制御 • 完全分離が有効そうな場所 • 性別に固有の体験 • Viewや状態数が多い • UIや仕様変更が見込まれる 男性VC ⼥性VC
  4. 15.

    共通化 VS 分離メリデメ A. 共通化 B. 分離 ✂ メリット •

    DRYな実装がしやすい • Viewの構築時間を短縮可 • ロジックの可読性が向上 • 画面単位の仕様変更に強い デメリット • VC内のロジックが複雑化 • コードでの状態変更 • UIのバグ発見・再現が困難 • WETな実装になることがある • ファイル数が増える • 同一変更でも複数箇所修正 場面毎に考えて方針を選んでも良いが 原則の方針は決めておきたい
  5. 16.

    Poiboyではこうしている! VC内ロジックの簡素化を重視 (以前は共通化したVCで条件分岐が増え 男女間の表示バグが多発していた) VC単位で分離するケースが増加 self.view1.hidden = false if isMale

    { // 男性 self.view2.hidden = false self.view.text = " " } else { // 女性 self.view2.hidden = true self.view.text = " " if isOk { self.view3.height = 80 } } 男⼥共通VC self.view1.hidden = false self.view2.hidden = false self.view.text = " " 男性⽤VC self.view1.hidden = false self.view2.hidden = true self.view.text = " " if isOk { self.view3.height = 80 } ⼥性⽤VC
  6. 17.

    UI上のバグの発⾒/再現性 片方に実装を忘れる → バグの発見・再現が容易 コードでの状態変更 → バグの発見・再現が困難 現在の課題: VCの名前に統一性がないため、新メンバーが把握に時間がかかる 画⾯遷移テストの書きやすさ

    /// 性別選択で女性を選択後に女性用ウォークスルー画面が表示される func testNavigationToFemaleWalkThrough() { let navigator = NavigatorMock() let isBetaUser = false let vc = GenderRegisterViewController( navigator: navigator, genderStore: GenderStoreStub(isFemale: true) ) ) vc.tapFemaleViewAction() XCTAssertTrue(navigator.viewControllerStack.first is FemaleWalkThroughViewController) }
  7. 22.

    チュートリアル⽤ライブラリ • ライブラリもかなり充実 (調べて初めて知った) • 複雑なウォークスルーはRazzleDazzleがよさそう • UIがテンプレベースのため既視感が強い • 比較/詳解はtakatattaさんのスライドもご参考に

    • ephread/Instructions • aleksandrshoshiashvili/ AwesomeSpotlightView • ruipfcosta/SwiftyWalkthrough • teodorpatras/EasyTipView • ariok/BWWalkthrough • hyperoslo/Presentation • ealeksandrov/EAIntroView • MatthewYork/MYBlurIntroductionView • IFTTT/RazzleDazzle ウォークスルー コーチマーク
  8. 23.

    ライブラリ VS ⾃前メリデメ ライブラリへ完全依存したくないが完全自前も厳しい… A. ライブラリ B. 自前 メリット •

    導入・メンテの工数少ない • OS/端末ごとの動作保証あり • 複雑な仕様やUIにも対応可 • アクション制御も自在 デメリット • アプリへの最適化に限度 • テンプレ的なUI/UX • デザイン次第で工数大 • メンテコストも大
  9. 24.

    Poiboyではこうしている! ライブラリ:自前 = 2:8 くらいのハイブリッド • ウォークスルー: 完全自前実装 • 仕様変更が多い

    • ボタン配置やUIも最適化したい • チュートリアル: 自前 + 一部吹出しにCMPopTipView • 指定の矩形をくり抜くカスタムViewで実装 • CMPopTipViewの吹出しを加えてコーチング • CMPopTipViewは画像等を含むことができない CMPopTipViewの吹き出し 画像の吹き出し
  10. 25.

    単純なコーチングの実装例 • コーチマークVCを定義、各ステップでpresent • UIBezierPathでマスクを切り抜き ベースのVC コーチングのVC チュートリアル var rects:

    [CGRect] = [self.rect1, self.rect2, self.rect3] self.setupMaskView(rects: &rects, isCircle: true) // 複数矩形の切り抜きにも対応できるよう配列で定義 let paths: [UIBezierPath] = rects.map { Helper.rectToSquarePath($0) } let maskLayer: CALayer = self.maskView.generateLayer(paths) self.maskView.layer.addSublayer(maskLayer) CGRect ↓ UIBezierPath この3つの合計で スコアが変動するよ タップして次へ self.present
  11. 34.

    Firebase Auth でSMS認証にデバッグ⽤ FacebookやTwitter認証はログインが面倒 • PoiboyではSMS認証に Firebase Authを使用 • 任意の電話/PIN番号を

    登録可能 • 最大10件まで登録可能 • なので番号を専有して も大丈夫 • 入力がかなり楽になる