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
650
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
110
フレーム問題で考えてみるやる夫スレViewer
scrpgil
0
42
ChatGPTとLangChain さわってみた
scrpgil
0
110
久しぶりに ionic startしてみた
scrpgil
0
250
Ionic 6でWeb3やってみた
scrpgil
0
220
Ionic×Angularで作る ストーリーズ風UI
scrpgil
0
450
夢のクロスプラットフォーム開発
scrpgil
0
380
Stencil JSについて
scrpgil
0
450
PWA_Toolkitについて.pdf
scrpgil
0
1.9k
Other Decks in Programming
See All in Programming
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
670
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
230
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
160
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
2.7k
チームの境界をブチ抜いていけ
tokai235
0
160
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
1.2k
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
1.2k
All About Angular's New Signal Forms
manfredsteyer
PRO
0
110
Devoxx BE - Local Development in the AI Era
kdubois
0
120
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
280
Advance Your Career with Open Source
ivargrimstad
0
470
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
220
Featured
See All Featured
How to Ace a Technical Interview
jacobian
280
24k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Writing Fast Ruby
sferik
629
62k
Automating Front-end Workflow
addyosmani
1371
200k
Agile that works and the tools we love
rasmusluckow
331
21k
Producing Creativity
orderedlist
PRO
347
40k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
How GitHub (no longer) Works
holman
315
140k
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...
• ご清聴ありがとうございました。