Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angularで作るモバイルアプリ開発〜スタートアップの開発事情〜
Search
scrpgil
August 29, 2021
Programming
0
490
Angularで作るモバイルアプリ開発〜スタートアップの開発事情〜
こちらのイベントで登壇したときの資料です。
https://voicy.connpass.com/event/220158/
scrpgil
August 29, 2021
Tweet
Share
More Decks by scrpgil
See All by scrpgil
ChatGPTとLangChain さわってみた
scrpgil
0
46
久しぶりに ionic startしてみた
scrpgil
0
170
Ionic 6でWeb3やってみた
scrpgil
0
140
Ionic×Angularで作る ストーリーズ風UI
scrpgil
0
310
夢のクロスプラットフォーム開発
scrpgil
0
310
Stencil JSについて
scrpgil
0
360
PWA_Toolkitについて.pdf
scrpgil
0
1.5k
Stencil.js触ってみた
scrpgil
0
550
時間管理術_ポモドーロテクニック_について
scrpgil
0
92
Other Decks in Programming
See All in Programming
Git Lint
bkuhlmann
4
750
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
180
Hanami and htmx
bkuhlmann
0
200
VS Code をプロダクトにどう取り込むか
onomax
1
340
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
Git Rebase
bkuhlmann
11
1.6k
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
640
データアナリストが行うDatabricksを活用したETLの自動化事例
shinoa
0
260
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.1k
SwiftUI Performance 不要なViewの再描画と更新を抑える
bigamitiongit
1
160
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
190
使ってみよう Azure AI Document Intelligence
kosmosebi
2
270
Featured
See All Featured
Facilitating Awesome Meetings
lara
41
5.6k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
RailsConf 2023
tenderlove
2
530
Git: the NoSQL Database
bkeepers
PRO
422
63k
A Philosophy of Restraint
colly
196
16k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
Thoughts on Productivity
jonyablonski
57
3.8k
We Have a Design System, Now What?
morganepeng
42
6.7k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Making the Leap to Tech Lead
cromwellryan
123
8.5k
How to Ace a Technical Interview
jacobian
272
22k
Bash Introduction
62gerente
604
210k
Transcript
Angularで作るモバイルアプリ開発 〜スタートアップ開発事情〜 榊原宏祐 株式会社キネカ
経歴紹介 榊原宏祐/@scrpgil ・2012年、NECのグループ会社に組み込みエンジニアとして新卒入社。 ・2016年、美容系スタートアップにジョインしてWebエンジニアに転向。 ・2018年、現職のキネカにジョインしてIonic/Angularでアプリ開発。 ・2019年、創業CTOより、キネカの開発チームを引き継ぎ。
経歴紹介 榊原宏祐/@scrpgil ・2012年、NECのグループ会社に組み込みエンジニアとして新卒入社。 ・2016年、美容系スタートアップにジョインしてWebエンジニアに転向。 ・2018年、現職のキネカにジョインしてIonic/Angularでアプリ開発。 ・2019年、創業CTOより、キネカの開発チームを引き継ぎ。
会社概要 ・株式会社キネカ ・2017年1月設立 ・代表者:平塚満 ・平均年齢:23~24歳 ・事業内容:エンタメマッチングアプリ「pato」の開発、運営
None
成長推移
技術スタック ・フロント:Angular、Ionic ・バックエンド:Ruby on Rails ・インフラ:GCP ・その他 Cloud SQL(MySQL)、Elasticsearch、Fluentd、BigQuery、Redash、New Relic、
Stackdriver、CircleCI、esa、Slack、GitHub、Asana
フェーズ • ph1:PMF期(2018年) ◦ 技術選定、コア機能の磨き込み。 • ph2:グロース期(2019年1月~2020年8月頃) ◦ サービス成長に伴うインフラ強化。 CircleCI導入、ビルド時間削減
• ph3:チーム拡大期(2020年9月〜2021年) ◦ 人員増に対応するためにビジョン作成、開発 KPI導入
ph1:PMF期(2018年)
PMF期で意識したこと • スピードが命! ◦ 検証を素早く回し、PMFまで最速でたどり着くかが勝負 ◦ コア機能以外へはコストかけられない ▪ 特にpatoのようなサービスは世になかった。
• マルチプラットフォーム対応は必須 ◦ マッチングアプリという特性上、Web版必要だよねとなった。 ◦ 必然的にクロスプラットフォームのフレームワークを選択
クロスプラットフォームについて 一つのコードベースから、複数のプラットフォームへ展開可能。 初期はプログラマーも、デザイナーも1人で済む(ことが多い) プログラマー FW プラットフォーム
Ionic / Angularを採用 • 創業CTOがIonicの知見が多かった ◦ 使い慣れたライブラリを採用 • モバイルアプリを作成するためのUIフレームワーク ◦
普通に優秀なUIライブラリ。Ionic 3までは、Angularを使って作られている。 • Live Updateの仕組みがある! ◦ 軽微な修正ならストアの審査を通さずに更新可能。 ◦ PMF期において採用の決め手になった。
Ionic / Angularを採用
PMFを果たしグロースフェーズへ
ph2:グロース期 (2019年1月~2020年8月頃)
この時期に起きた問題 • サービスの成長によりユーザー数増加 ◦ 2万→10万人以上 • インフラの強化が急務 ◦ オートスケール *
サーバー側 ◦ CI/CD環境の構築 ▪ ビルドはローカルマシンで行っていた・・・
CircleCIの導入 • ローカルで行っていたビルドをCircleCIに置き換え • 複数のプラットフォームへ同時リリースが可能になった。
ビルド時間の削減 • CI導入当初、ビルド時間は30分ほど ◦ この待ち時間は辛い・・・
ビルド時間の削減 • ビルドが遅い原因を調査 ◦ 共通モジュールの肥大化が原因だった。 ▪ 50近くまとまっていた共通モジュールを全部分割しました • 30分→15分までビルド時間短縮! ◦
Angularのバージョンアップ( 5系→6系) ▪ 15分→7分まで短縮
結果として • スケールに耐えられるインフラ環境が構築 • 開発メンバーが増えても煩雑にならないCI環境ができた ◦ エンジニアが増員。3人から10人へ
Ph3:チーム拡大期 (2020〜2021年)
ビジョンの策定 • チーム全員が持っていてほしいマインドを明文化 ◦ “圧倒的ハイパフォーマーなチームになり、ユーザー目線のプロダクトを作り続ける ”
開発KPIの導入 「LeanとDevOpsの科学」 ハイパフォーマーな開発チームを 4つのキーメトリ クスで測定。
パフォーマンス指標の導入 「LeanとDevOpsの科学」より、ハイパフォーマンスなチームの定義 ハイ パフォーマー キネカ 開発チーム ミディアム パフォーマー ロー パフォーマー
デプロイ頻度 オンデマンド (1日複数回) 1日平均8~10回 週1回から 月1回 週1回から 月1回 変更失敗率 0-15% 12.17% 0-15% 31-45% 変更の リードタイム 1時間未満 未計測 1週間から 1ヶ月 1週間から 1ヶ月 MTTR 1時間未満 未計測 1日未満 1日から1週間
KPIを追う仕組み • Slackへ投稿したリリース数を自動カウント • 1日7リリース。 • 主要KPIをモニターに写して座席近い場所に表示。 ◦
特に効果があったのはこれ。
KPIを追う仕組み DX Criteria参照: https://dxcriteria.cto-a.org/dbe77e79f1b34b0e897338693091ad99
振り返ってみて・・・
• Ionic/Angular選択してよかった。 ◦ モバイルアプリの開発をWebと同じ開発体験で続けている ◦ 現在のハイパフォーマンスな開発体制にだいぶ寄与している ◦ 初学者でも学習コスト低い 振り返ってみて・・・
• 改善点 ◦ アーキテクチャ的な所は知識不足も目立った。 ◦ ComponentModuleの分割など、最初から将来を見越していたら、やる必要ないものも多く あった。 振り返ってみて・・・
• Angular 6、Ionic 5へのバージョンアップ • 技術的負債を解消し、より堅牢なアーキテクチャへ 今後の課題
全セグメントで採用強化中 • 開発 ◦ サーバーサイド、クライアントサイド、コーポレートエンジニア、分析エンジニア • デザイナー ◦ UIデザイナー、グラフィックデザイナー
• ビジネス ◦ 営業、経営企画、カスタマーサポート/カスタマーサクセス • etc...
• ご清聴ありがとうございました。