Slide 1
Slide 1 text
Angularで作るモバイルアプリ開発
〜スタートアップ開発事情〜
榊原宏祐
株式会社キネカ
Slide 2
Slide 2 text
経歴紹介
榊原宏祐/@scrpgil
・2012年、NECのグループ会社に組み込みエンジニアとして新卒入社。
・2016年、美容系スタートアップにジョインしてWebエンジニアに転向。
・2018年、現職のキネカにジョインしてIonic/Angularでアプリ開発。
・2019年、創業CTOより、キネカの開発チームを引き継ぎ。
Slide 3
Slide 3 text
経歴紹介
榊原宏祐/@scrpgil
・2012年、NECのグループ会社に組み込みエンジニアとして新卒入社。
・2016年、美容系スタートアップにジョインしてWebエンジニアに転向。
・2018年、現職のキネカにジョインしてIonic/Angularでアプリ開発。
・2019年、創業CTOより、キネカの開発チームを引き継ぎ。
Slide 4
Slide 4 text
会社概要
・株式会社キネカ
・2017年1月設立
・代表者：平塚満
・平均年齢：23~24歳
・事業内容：エンタメマッチングアプリ「pato」の開発、運営
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
成長推移
Slide 7
Slide 7 text
技術スタック
・フロント：Angular、Ionic
・バックエンド：Ruby on Rails
・インフラ：GCP
・その他
Cloud SQL（MySQL）、Elasticsearch、Fluentd、BigQuery、Redash、New Relic、
Stackdriver、CircleCI、esa、Slack、GitHub、Asana
Slide 8
Slide 8 text
フェーズ
● ph1：PMF期（2018年）
○ 技術選定、コア機能の磨き込み。
● ph2：グロース期（2019年1月~2020年8月頃）
○ サービス成長に伴うインフラ強化。 CircleCI導入、ビルド時間削減
● ph3：チーム拡大期（2020年9月〜2021年）
○ 人員増に対応するためにビジョン作成、開発 KPI導入
Slide 9
Slide 9 text
ph1：PMF期（2018年）
Slide 10
Slide 10 text
PMF期で意識したこと
● スピードが命！
○ 検証を素早く回し、PMFまで最速でたどり着くかが勝負
○ コア機能以外へはコストかけられない
■ 特にpatoのようなサービスは世になかった。
● マルチプラットフォーム対応は必須
○ マッチングアプリという特性上、Web版必要だよねとなった。
○ 必然的にクロスプラットフォームのフレームワークを選択
Slide 11
Slide 11 text
クロスプラットフォームについて
一つのコードベースから、複数のプラットフォームへ展開可能。
初期はプログラマーも、デザイナーも１人で済む（ことが多い）
プログラマー FW プラットフォーム
Slide 12
Slide 12 text
Ionic / Angularを採用
● 創業CTOがIonicの知見が多かった
○ 使い慣れたライブラリを採用
● モバイルアプリを作成するためのUIフレームワーク
○ 普通に優秀なUIライブラリ。Ionic 3までは、Angularを使って作られている。
● Live Updateの仕組みがある！
○ 軽微な修正ならストアの審査を通さずに更新可能。
○ PMF期において採用の決め手になった。
Slide 13
Slide 13 text
Ionic / Angularを採用
Slide 14
Slide 14 text
PMFを果たしグロースフェーズへ
Slide 15
Slide 15 text
ph2：グロース期
（2019年1月~2020年8月頃）
Slide 16
Slide 16 text
この時期に起きた問題
● サービスの成長によりユーザー数増加
○ 2万→10万人以上
● インフラの強化が急務
○ オートスケール * サーバー側
○ CI/CD環境の構築
■ ビルドはローカルマシンで行っていた・・・
Slide 17
Slide 17 text
CircleCIの導入
● ローカルで行っていたビルドをCircleCIに置き換え
● 複数のプラットフォームへ同時リリースが可能になった。
Slide 18
Slide 18 text
ビルド時間の削減
● CI導入当初、ビルド時間は30分ほど
○ この待ち時間は辛い・・・
Slide 19
Slide 19 text
ビルド時間の削減
● ビルドが遅い原因を調査
○ 共通モジュールの肥大化が原因だった。
■ 50近くまとまっていた共通モジュールを全部分割しました
● 30分→15分までビルド時間短縮！
○ Angularのバージョンアップ（ 5系→6系）
■ 15分→7分まで短縮
Slide 20
Slide 20 text
結果として
● スケールに耐えられるインフラ環境が構築
● 開発メンバーが増えても煩雑にならないCI環境ができた
○ エンジニアが増員。3人から10人へ
Slide 21
Slide 21 text
Ph3：チーム拡大期
（2020〜2021年）
Slide 22
Slide 22 text
ビジョンの策定
● チーム全員が持っていてほしいマインドを明文化
○ “圧倒的ハイパフォーマーなチームになり、ユーザー目線のプロダクトを作り続ける ”
Slide 23
Slide 23 text
開発KPIの導入
「LeanとDevOpsの科学」
ハイパフォーマーな開発チームを 4つのキーメトリ
クスで測定。
Slide 24
Slide 24 text
パフォーマンス指標の導入
「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週間
Slide 25
Slide 25 text
KPIを追う仕組み
● Slackへ投稿したリリース数を自動カウント
● 1日7リリース。
● 主要KPIをモニターに写して座席近い場所に表示。
○ 特に効果があったのはこれ。
Slide 26
Slide 26 text
KPIを追う仕組み
DX Criteria参照：
https://dxcriteria.cto-a.org/dbe77e79f1b34b0e897338693091ad99
Slide 27
Slide 27 text
振り返ってみて・・・
Slide 28
Slide 28 text
● Ionic/Angular選択してよかった。
○ モバイルアプリの開発をWebと同じ開発体験で続けている
○ 現在のハイパフォーマンスな開発体制にだいぶ寄与している
○ 初学者でも学習コスト低い
振り返ってみて・・・
Slide 29
Slide 29 text
● 改善点
○ アーキテクチャ的な所は知識不足も目立った。
○ ComponentModuleの分割など、最初から将来を見越していたら、やる必要ないものも多く
あった。
振り返ってみて・・・
Slide 30
Slide 30 text
● Angular 6、Ionic 5へのバージョンアップ
● 技術的負債を解消し、より堅牢なアーキテクチャへ
今後の課題
Slide 31
Slide 31 text
全セグメントで採用強化中
● 開発
○ サーバーサイド、クライアントサイド、コーポレートエンジニア、分析エンジニア
● デザイナー
○ UIデザイナー、グラフィックデザイナー
● ビジネス
○ 営業、経営企画、カスタマーサポート/カスタマーサクセス
● etc...
Slide 32
Slide 32 text
● ご清聴ありがとうございました。