Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angularで作るモバイルアプリ開発〜スタートアップの開発事情〜

8673a339e4002704b42bc66c43c65445?s=47 scrpgil
August 29, 2021

 Angularで作るモバイルアプリ開発〜スタートアップの開発事情〜

こちらのイベントで登壇したときの資料です。
https://voicy.connpass.com/event/220158/

8673a339e4002704b42bc66c43c65445?s=128

scrpgil

August 29, 2021
Tweet

Transcript

  1. Angularで作るモバイルアプリ開発 〜スタートアップ開発事情〜 榊原宏祐 株式会社キネカ


  2. 経歴紹介
 榊原宏祐/@scrpgil ・2012年、NECのグループ会社に組み込みエンジニアとして新卒入社。 ・2016年、美容系スタートアップにジョインしてWebエンジニアに転向。 ・2018年、現職のキネカにジョインしてIonic/Angularでアプリ開発。 ・2019年、創業CTOより、キネカの開発チームを引き継ぎ。

  3. 経歴紹介
 榊原宏祐/@scrpgil ・2012年、NECのグループ会社に組み込みエンジニアとして新卒入社。 ・2016年、美容系スタートアップにジョインしてWebエンジニアに転向。 ・2018年、現職のキネカにジョインしてIonic/Angularでアプリ開発。 ・2019年、創業CTOより、キネカの開発チームを引き継ぎ。

  4. 会社概要
 ・株式会社キネカ
 ・2017年1月設立
 ・代表者:平塚満
 ・平均年齢:23~24歳
 ・事業内容:エンタメマッチングアプリ「pato」の開発、運営
 


  5. None
  6. 成長推移


  7. 技術スタック
 ・フロント:Angular、Ionic ・バックエンド:Ruby on Rails ・インフラ:GCP ・その他 Cloud SQL(MySQL)、Elasticsearch、Fluentd、BigQuery、Redash、New Relic、

    Stackdriver、CircleCI、esa、Slack、GitHub、Asana
  8. フェーズ
 • ph1:PMF期(2018年) ◦ 技術選定、コア機能の磨き込み。 • ph2:グロース期(2019年1月~2020年8月頃) ◦ サービス成長に伴うインフラ強化。 CircleCI導入、ビルド時間削減

    • ph3:チーム拡大期(2020年9月〜2021年) ◦ 人員増に対応するためにビジョン作成、開発 KPI導入
  9. ph1:PMF期(2018年)


  10. PMF期で意識したこと
 • スピードが命!
 ◦ 検証を素早く回し、PMFまで最速でたどり着くかが勝負
 ◦ コア機能以外へはコストかけられない
 ▪ 特にpatoのようなサービスは世になかった。
 


    • マルチプラットフォーム対応は必須
 ◦ マッチングアプリという特性上、Web版必要だよねとなった。
 ◦ 必然的にクロスプラットフォームのフレームワークを選択

  11. クロスプラットフォームについて
 一つのコードベースから、複数のプラットフォームへ展開可能。 初期はプログラマーも、デザイナーも1人で済む(ことが多い) プログラマー FW プラットフォーム

  12. Ionic / Angularを採用
 • 創業CTOがIonicの知見が多かった ◦ 使い慣れたライブラリを採用 • モバイルアプリを作成するためのUIフレームワーク ◦

    普通に優秀なUIライブラリ。Ionic 3までは、Angularを使って作られている。 • Live Updateの仕組みがある! ◦ 軽微な修正ならストアの審査を通さずに更新可能。 ◦ PMF期において採用の決め手になった。
  13. Ionic / Angularを採用


  14. PMFを果たしグロースフェーズへ


  15. ph2:グロース期
 (2019年1月~2020年8月頃)


  16. この時期に起きた問題
 • サービスの成長によりユーザー数増加 ◦ 2万→10万人以上 • インフラの強化が急務 ◦ オートスケール *

    サーバー側 ◦ CI/CD環境の構築 ▪ ビルドはローカルマシンで行っていた・・・
  17. CircleCIの導入
 • ローカルで行っていたビルドをCircleCIに置き換え • 複数のプラットフォームへ同時リリースが可能になった。

  18. ビルド時間の削減
 • CI導入当初、ビルド時間は30分ほど ◦ この待ち時間は辛い・・・

  19. ビルド時間の削減
 • ビルドが遅い原因を調査 ◦ 共通モジュールの肥大化が原因だった。 ▪ 50近くまとまっていた共通モジュールを全部分割しました • 30分→15分までビルド時間短縮! ◦

    Angularのバージョンアップ( 5系→6系) ▪ 15分→7分まで短縮
  20. 結果として
 • スケールに耐えられるインフラ環境が構築 • 開発メンバーが増えても煩雑にならないCI環境ができた ◦ エンジニアが増員。3人から10人へ

  21. Ph3:チーム拡大期
 (2020〜2021年)


  22. ビジョンの策定
 • チーム全員が持っていてほしいマインドを明文化 ◦ “圧倒的ハイパフォーマーなチームになり、ユーザー目線のプロダクトを作り続ける ”

  23. 開発KPIの導入 「LeanとDevOpsの科学」 ハイパフォーマーな開発チームを 4つのキーメトリ クスで測定。

  24. パフォーマンス指標の導入 「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週間
  25. KPIを追う仕組み
 • Slackへ投稿したリリース数を自動カウント
 
 • 1日7リリース。
 
 • 主要KPIをモニターに写して座席近い場所に表示。
 ◦

    特に効果があったのはこれ。

  26. KPIを追う仕組み
 DX Criteria参照: https://dxcriteria.cto-a.org/dbe77e79f1b34b0e897338693091ad99

  27. 振り返ってみて・・・


  28. • Ionic/Angular選択してよかった。
 ◦ モバイルアプリの開発をWebと同じ開発体験で続けている
 ◦ 現在のハイパフォーマンスな開発体制にだいぶ寄与している
 ◦ 初学者でも学習コスト低い
 振り返ってみて・・・


  29. • 改善点
 ◦ アーキテクチャ的な所は知識不足も目立った。
 ◦ ComponentModuleの分割など、最初から将来を見越していたら、やる必要ないものも多く あった。
 振り返ってみて・・・


  30. • Angular 6、Ionic 5へのバージョンアップ
 
 • 技術的負債を解消し、より堅牢なアーキテクチャへ
 今後の課題


  31. 全セグメントで採用強化中
 • 開発
 ◦ サーバーサイド、クライアントサイド、コーポレートエンジニア、分析エンジニア
 
 • デザイナー
 ◦ UIデザイナー、グラフィックデザイナー

    
 
 • ビジネス
 ◦ 営業、経営企画、カスタマーサポート/カスタマーサクセス
 
 • etc...

  32. • ご清聴ありがとうございました。