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
640
Angularで作るモバイルアプリ開発〜スタートアップの開発事情〜
こちらのイベントで登壇したときの資料です。
https://voicy.connpass.com/event/220158/
scrpgil
August 29, 2021
Tweet
Share
More Decks by scrpgil
See All by scrpgil
Firebase Realtime DB から ActionCable 移行のマネジメントの話
scrpgil
0
98
フレーム問題で考えてみるやる夫スレViewer
scrpgil
0
30
ChatGPTとLangChain さわってみた
scrpgil
0
100
久しぶりに ionic startしてみた
scrpgil
0
250
Ionic 6でWeb3やってみた
scrpgil
0
220
Ionic×Angularで作る ストーリーズ風UI
scrpgil
0
440
夢のクロスプラットフォーム開発
scrpgil
0
380
Stencil JSについて
scrpgil
0
450
PWA_Toolkitについて.pdf
scrpgil
0
1.8k
Other Decks in Programming
See All in Programming
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
550
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
110
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
0
280
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
Team operations that are not burdened by SRE
kazatohiei
1
310
Hack Claude Code with Claude Code
choplin
0
120
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
700
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
430
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.2k
XP, Testing and ninja testing
m_seki
3
240
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
810
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
150
Featured
See All Featured
Embracing the Ebb and Flow
colly
86
4.7k
GraphQLとの向き合い方2022年版
quramy
49
14k
KATA
mclloyd
30
14k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Stop Working from a Prison Cell
hatefulcrawdad
270
21k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Navigating Team Friction
lara
187
15k
Optimizing for Happiness
mojombo
379
70k
Code Reviewing Like a Champion
maltzj
524
40k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
YesSQL, Process and Tooling at Scale
rocio
173
14k
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...
• ご清聴ありがとうございました。