0→1開発における迅速なプロダクト改善を支える技術【DeNA TechCon 2021】/techcon2021_20

Minami Baba 1

2020年11月にリリースされました 2

※0→1開発とは（今回の話では）開発スタートからローンチまでを指します今日話すこと 3

プロのによる指導をでに受けられる毎日・アプリで毎週・ビデオ通話で 4

(delight-ventures.com) ・DeNA発のベンチャーキャピタル・スタートアップへの投資・早期独立を目指した　・常時5~10プロジェクトが進行中 5

開発開始から正式版リリースまで約7ヶ月間 6

トレーナーのみなさん開発にご協力いただいてるエンジニアのみなさん Delight Venturesのみなさん and
more…! 7

今日話すこと 8

今日話すこと 9 様々な技術や開発手法をご紹介していきますが、詳細な導入手順や実装等は割愛させていただきます。専門知識がなくても理解いただける内容になっています。

今日伝えたいこと 10

導入 12

・より良いものをリリースできる・リリース後の改善サイクルに繋がる 14

・より良いものをリリースできる・リリース後の改善サイクルに繋がる・ユーザーインタビュー・オンラインでのトレーナー指導を体験・開発段階でのこまめなデモ / 試用 15

・初期要件の実装に時間がかかってしまう・機能改善案に対応することが難しい 18

・初期要件の実装に時間がかかってしまう・機能改善案に対応することが難しい "プロダクト改善を支える技術"についてバックエンド / フロントエンドの両面からご紹介 19

前編 20

※XaaSとは、情報処理に用いられるコンピューティング資源を、インターネットを通じて提供しているサービスの総称。（例：IaaS, mBaaS, SaaS） 21

データベース画像ストレージユーザー認証バックエンド処理決済機能　　　　　　　データ暗号化 APIキー管理分析データ収集
分析データ集計分析データ可視化 22

時系列に沿って各サービスの具体的な活用事例をご紹介 23

ベータ版を利用してもらいコア体験の満足度を検証したい 24

多くのプロダクトに必要な日々の取り組みをトレーナーに報告トレーナーへいつでも質問できる 25

7月に納得できる状態でリリースするためには 1ヶ月以内にはざっくり動くもの作りたいな... 実装が重そうなのはユーザー認証・画像アップロード・双方向通信あたりだな... 29

32 データベース https://firebase.google.com/docs/firestore 画像ストレージ https://firebase.google.com/docs/storage ユーザー認証 https://firebase.google.com/docs/auth

33 データベース https://firebase.google.com/docs/firestore 画像ストレージ https://firebase.google.com/docs/storage ユーザー認証 https://firebase.google.com/docs/auth

データの読み書き db.collection("users").document().setData(["name": "minami"]) db.collection("users").document("0123").getDocument {} 34 データベース https://firebase.google.com/docs/firestore 画像ストレージ https://firebase.google.com/docs/storage
ユーザー認証 https://firebase.google.com/docs/auth

画像動画のやり取りデータの読み書き db.collection("users").document().setData(["name": "minami"]) db.collection("users").document("0123").getDocument {} let riversRef = storage.reference().child("images/rivers.jpg")
riversRef.putData(data, metadata: nil) {} 35 データベース https://firebase.google.com/docs/firestore 画像ストレージ https://firebase.google.com/docs/storage ユーザー認証 https://firebase.google.com/docs/auth

会員登録・ログイン画像動画のやり取りデータの読み書き db.collection("users").document().setData(["name": "minami"]) db.collection("users").document("0123").getDocument {} let riversRef =
storage.reference().child("images/rivers.jpg") riversRef.putData(data, metadata: nil) {} Auth.auth().createUser(withEmail: email, password: password) {} Auth.auth().signIn(withEmail: email, password: password) {} 36 データベース https://firebase.google.com/docs/firestore 画像ストレージ https://firebase.google.com/docs/storage ユーザー認証 https://firebase.google.com/docs/auth

Cloud Firestore・Cloud Storage・Firebase Authentication 37

会員登録・ログイン画像動画のやり取りデータの読み書き・環境構築にかかる工数を削減できる・1つのプロジェクト内での実装に集中できるデータベース画像ストレージユーザー認証 38

・パスワード・Google ・Facebook ・Apple ・Twitter ・会員登録・ログイン・本人確認メール送信・メールアドレス再設定・パスワード再発行
・必要な実装は提供されたAPIを呼び出すのみ 39

・悪意のあるデータ操作が行われないように　データ毎にアクセス権限を制御する必要がある・NoSQLであるというだけでなく、”サブコレクション” 　といった概念やクエリの特徴を踏まえた設計が必要 41 “自分が書いたレポートはその本人のみ読み込める ” “システム設定値は管理者しか追加できない
” 例例何回も作っては壊してを繰り返しました...

・悪意のあるデータ操作が行われないように　データ毎にアクセス権限を制御する必要がある・NoSQLであるというだけでなく、”サブコレクション” 　といった概念やクエリの特徴を踏まえた設計が必要何回も作っては壊してを繰り返しました... 42 “自分が書いたレポートはその本人のみ読み込める ”
“システム設定値は管理者しか追加できない ” 例例

・悪意のあるデータ操作が行われないように　データ毎にアクセス権限を制御する必要がある・NoSQLであるというだけでなく、”サブコレクション” 　といった概念やクエリの特徴を踏まえた設計が必要何回も作っては壊してを繰り返しました... 43 “自分が書いたレポートはその本人のみ読み込める ”
“システム設定値は管理者しか追加できない ” 例例

月額課金プラン契約で指導が受けられるチケットを使ってオンラインレッスン 46

開発工数が大きくて障害発生時のリスクが高そうな機能ばかりだ ... 49 実装が重そうなのは決済処理・サブスク管理・チケット管理あたりだな...

バックエンド処理 https://ﬁrebase.google.com/docs/functions 決済機能 https://stripe.com/jp 52

バックエンド処理 https://ﬁrebase.google.com/docs/functions 決済機能 https://stripe.com/jp 53 HTTPS通信データ読み書き決済処理 Stripe

バックエンド処理 https://ﬁrebase.google.com/docs/functions 決済機能 https://stripe.com/jp 54 HTTPS通信データ読み書き決済処理 “テクノロジーファースト
” を掲げている点が採用を決定した決め手！ Stripe

Cloud Functions・Stripe 55

バックエンド処理 HTTPS通信・Stripeを始めとする外部サービスとの連携・データ整合性を安全に守ることができる　・”レッスン予約と同時にチケットを使用済みに” データベースデータ操作サーバーレスで任意処理を実行 56

・月毎に自動的に決済・複雑な料金プランに対応・有効期限や使用回数の制限・手動でもAPIからでも発行可能 59 Stripe

63 ・多様な料金プランやクーポンによる割引は　有料会員を増やすために取り得る施策の一つ Stripe

64 Stripe

・発生した全ての処理をAPIベースで閲覧できる・ほとんどの機能の操作をGUI上から行える 65 Stripe

・発生した全ての処理をAPIベースで閲覧できる・ほとんどの機能の操作をGUI上から行える 66 ※開発環境のデータ ※開発環境のデータ Stripe

・発生した全ての処理をAPIベースで閲覧できる・ほとんどの機能の操作をGUI上から行える 67 Stripe

・本番と同等機能をすぐに使い始められる・様々なパターンを想定したテスト用カード番号を用意 68 Stripe

・本番と同等機能をすぐに使い始められる・様々なパターンを想定したテスト用カード番号を用意 69 Stripe

・本番と同等機能をすぐに使い始められる・様々なパターンを想定したテスト用カード番号を用意 70 https://stripe.com/docs/testing Stripe

・複雑な処理フローも非常に理解しやすい・障害発生リスク軽減にも繋がる 71 Stripe

Cloud Functions 72

HTTPS通信・どんなデータが書き込まれているか全て把握するためには　フロントエンドとCloud Functionsの両方を追う必要がある・チーム内での分業が進んでくると開発しにくくなるデータベースデータ読み書きバックエンド処理データ読み書き 73

最近、開発チームにジョインしてくれたAさん Cloud Functions に関わる開発をお願いしましたそのデータはフロントエンドから直接Firestoreへ書き込んでいたのでした。 WITH Fitness エピソード 74

Stripe・Cloud Functions 75

お客様の名前を安全に管理したい Stripeへの権限を安全に管理したいリリース後の改善のために 77

リリースはもう目の前！限られた工数の中でもしっかりと非機能要件を実現していきたい... 78

79 データ暗号化 https://cloud.google.com/security-key-management 分析データ収集 https://ﬁrebase.google.com/docs/analytics APIキー管理 https://cloud.google.com/secret-manager 分析データ集計 https://cloud.google.com/bigquery/?hl=ja 分析データ可視化
https://datastudio.google.com/

await client.encrypt({ name: keyName, plaintext: text }) await client.decrypt({ name:
keyName, ciphertext: text }) 80 データ暗号化 https://cloud.google.com/security-key-management 分析データ収集 https://ﬁrebase.google.com/docs/analytics APIキー管理 https://cloud.google.com/secret-manager 分析データ集計 https://cloud.google.com/bigquery/?hl=ja 分析データ可視化 https://datastudio.google.com/

await client.encrypt({ name: keyName, plaintext: text }) await client.decrypt({ name:
keyName, ciphertext: text }) await client.accessSecretVersion({ name: keyName }) 81 データ暗号化 https://cloud.google.com/security-key-management 分析データ収集 https://ﬁrebase.google.com/docs/analytics APIキー管理 https://cloud.google.com/secret-manager 分析データ集計 https://cloud.google.com/bigquery/?hl=ja 分析データ可視化 https://datastudio.google.com/

分析基盤に関して詳しくは DeNA Advent Calendar 2020 24日目をご覧ください await client.encrypt({ name:
keyName, plaintext: text }) await client.decrypt({ name: keyName, ciphertext: text }) await client.accessSecretVersion({ name: keyName }) 82 データ暗号化 https://cloud.google.com/security-key-management 分析データ収集 https://ﬁrebase.google.com/docs/analytics APIキー管理 https://cloud.google.com/secret-manager 分析データ集計 https://cloud.google.com/bigquery/?hl=ja 分析データ可視化 https://datastudio.google.com/

　自前実装を始める前に”XaaS”の存在を思い出してみる　”XaaS”を使いこなすためにもスキルが必要なので　「フロントエンドさえ分かればアプリが作れる」訳ではない 84

後編 86

後編 87 WITH Fitness iOSアプリでの取り組みをご紹介します。 AndroidやWebにも応用できる内容になっています。

全ての型の基礎となる機能毎に実装を分割身に付けた型を素早く生み出す　　　　　　 89 ❶ ❷ ❸

時系列に沿って"開発の型"の具体的な導入事例をご紹介 90

急いでプロダクトを作り上げないと！設計に時間かける？すぐ手を動かす？採用するならどのアーキテクチャ？ Firebase使うとフロントエンド責務が大きくなりそう... 92

ビジネスロジック Interactor バックエンド通信 Repository 画面遷移 Router 表示ロジック Presenter UI実装 View
VIPERを基にしたアーキテクチャ 95

食事レポート保存ボタン押された VIPERを基にしたアーキテクチャ 96

食事レポート保存ボタン押された VIPERを基にしたアーキテクチャ 97

食事レポート保存ボタン押された ①ボタン押された VIPERを基にしたアーキテクチャ 98

食事レポート保存ボタン押された ①ボタン押された ②保存処理せよ VIPERを基にしたアーキテクチャ 99

食事レポート保存ボタン押された ①ボタン押された ②保存処理せよ ③データ作成せよ VIPERを基にしたアーキテクチャ 100

責務が明確なアーキテクチャ 101

View ビジネスロジック Interactor 表示ロジック Presenter UI実装 View どの粒度でメソッド分割する？
これは何をしてる実装だっけ？どういう方針で実装しよう？実装を分割する粒度も明確だな通信関連の処理はこの辺りにあるパターンに沿って実装していこう 102

View ビジネスロジック Interactor 表示ロジック Presenter UI実装 View データベースに書き込んで...
完了したら画面遷移して... 保存ボタンが押されたら... 送信処理を呼び出すデータベース処理を呼び出す保存ボタンが押された 105

・曖昧なまま実装を進めていくことは迷いを生むことに繋がる・開発が進むにつれて最適なルールが定まっていくはずビジネスロジック Interactor UI実装 View Date型のデータを文字列に変換するのはどこでやればいい...？表示ロジック
Presenter 109

VIPER導入してるけど、それでも各クラスの記述量が増えてきたな... 一画面に色んな機能があるから、どれがどの実装か分かりづらくなってきたな... 112

View Presenter Interactor View Presenter Interactor UI実装からビジネスロジックまでまるっと処理を切り出す親コンポーネントは
子コンポーネントを生成して配置するだけ 115

積極的なコンポーネント化 117

View Feature A View Feature B View Feature C Presenter
Feature A Presenter Feature B Presenter Feature C Interactor Feature A Interactor Feature B Interactor Feature C これは何をしてる実装だっけ？どういう方針で実装しよう？ View Feature A Feature B Feature C Presenter Feature A Feature B Feature C Interactor Feature A Feature B Feature C この機能のこの処理はここにある実装を分割する粒度が明確だな 118

積極的なコンポーネント化 126

VIPERやコンポーネント化は便利だけどファイル生成量やテンプレコード量が多くなってきたな... 開発の型が決まってきたおかげで似たようなコードを何度も書いているな... 128

$ generamba gen ReportList viper $ generamba gen [コンポーネント名] [テンプレート名]
generambaを利用 import UIKit import RxSwift class ReportListViewController: UIViewController { var presenter: ReportListPresenter! override func viewDidLoad() { super.viewDidLoad() } } View Presenter Interactor Router これはほんの一部で共通化できそうな部分は積極的にテンプレートに追加用途に応じてテンプレートを複数用意している 131

134 // // {{ module_info.file_name }} // {{ module_info.project_name }}
// // Created by {{ developer.name }} on {{ date }}. // Copyright © {{ year }} {{ developer.company }}. All rights reserved. // import UIKit import RxSwift import RxCocoa class {{ module_info.name }}ViewController: UIViewController { var presenter: {{ module_info.name }}Presenter! let disposeBag = DisposeBag() public static func get() -> {{ module_info.name }}ViewController { return UIStoryboard(name: "{{ module_info.name }}", bundle: nil) .instantiateInitialViewController() as! {{ module_info.name }}ViewController } override func viewDidLoad() { super.viewDidLoad() setupButtonAction() bindToPresenter() observePresenter() } // private func setupCustomComponent() { // let view = presenter.getCustomComponentCreator().create() // customComponentContainerView.addSubview(view) // view.adjustParentConstraint(parent: customComponentContainerView) // } private func setupButtonAction() {} private func bindToPresenter() {} private func observePresenter() {} }

// // Created by {{ developer.name }} on {{ date }}. // Copyright © {{ year }} {{ developer.company }}. All rights reserved. // import Foundation import RxSwift import RxCocoa class {{ module_info.name }}Presenter { private let router: {{ module_info.name }}Router private let interactor: {{ module_info.name }}Interactor init(router: {{ module_info.name }}Router, interactor: {{ module_info.name }}Interactor) { self.router = router self.interactor = interactor } // func getCustomComponentCreator() -> CustomComponentCreator { // return CustomComponentCreator() // } }

// // Created by {{ developer.name }} on {{ date }}. // Copyright © {{ year }} {{ developer.company }}. All rights reserved. // import Foundation import RxSwift class {{ module_info.name }}Interactor { }

// // Created by {{ developer.name }} on {{ date }}. // Copyright © {{ year }} {{ developer.company }}. All rights reserved. // import UIKit class {{ module_info.name }}Router: Router { static func assembleModules() -> UIViewController { let view = {{ module_info.name }}ViewController.get() let router = {{ module_info.name }}Router(viewController: view) let interactor = {{ module_info.name }}Interactor() let presenter = {{ module_info.name }}Presenter(router: router, interactor: interactor) view.presenter = presenter return view } }

自分たちに特化したコード自動生成 138

View Presenter Interactor View Presenter Interactor View Presenter Interactor Cell
Cell ViewModel DataSource あとは残り必要な部分を穴埋めしていくだけこれまで一機能2 週間かかってたところが平均3日に！コマンドを 1行打つだけで 7割は実装できている感覚 139

ユーザー視点に立つためにチームメンバーみんなでトレーナーによるオンライン指導を3週間体験してみることにでもリリース予定日まであと1ヶ月。納得いく形でベータ版リリースを迎えることできた WITH Fitness エピソード 140

自分たち特化のコード自動生成 141

　自分のサービス、自分の開発スタイルに合った　”開発の型”を作り上げていきましょう　安定するまでは一定時間がかかると思います。　3ヶ月以上開発する予定があるサービスであれば　最初1ヶ月は試行錯誤していても良いと思います。 143

バックエンド開発フロントエンド開発 145

今日伝えたいこと 146

オンライン指導に興味を持った方！無料体験レッスンでお待ちしております with-fit.com 148

プロダクト開発に興味を持った方！ご連絡お待ちしております with-fit.com 149

0→1開発における迅速なプロダクト改善を支える技術【DeNA TechCon 2021】/te...

0→1開発における迅速なプロダクト改善を支える技術【DeNA TechCon 2021】/techcon2021_20

More Decks by DeNA_Tech

Other Decks in Technology

Featured

Transcript