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
40
ChatGPTとLangChain さわってみた
scrpgil
0
110
久しぶりに 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.9k
Other Decks in Programming
See All in Programming
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
220
1から理解するWeb Push
dora1998
6
1.6k
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
20
4.9k
More Approvers for Greater OSS and Japan Community
tkikuc
1
110
AIコーディングAgentとの向き合い方
eycjur
0
250
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
470
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
240
OSS開発者という働き方
andpad
5
1.7k
コンテキストエンジニアリング Cursor編
kinopeee
1
750
Testing Trophyは叫ばない
toms74209200
0
670
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
Claude Codeで挑むOSSコントリビュート
eycjur
0
190
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Bash Introduction
62gerente
615
210k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
The Cult of Friendly URLs
andyhume
79
6.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
It's Worth the Effort
3n
187
28k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Raft: Consensus for Rubyists
vanstee
140
7.1k
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...
• ご清聴ありがとうございました。