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
VS Code Update for GitHub Copilot
74th
2
630
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
240
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
640
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
670
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
210
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
210
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
効率的な開発手段として VRTを活用する
ishkawa
0
130
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
78
25k
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Producing Creativity
orderedlist
PRO
346
40k
How STYLIGHT went responsive
nonsquared
100
5.6k
Rails Girls Zürich Keynote
gr2m
94
14k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
KATA
mclloyd
30
14k
How to Ace a Technical Interview
jacobian
277
23k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
52k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
The World Runs on Bad Software
bkeepers
PRO
69
11k
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...
• ご清聴ありがとうございました。