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

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

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

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

成長推移 

技術スタック  ・フロント：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版必要だよねとなった。  ◦ 必然的にクロスプラットフォームのフレームワークを選択 

クロスプラットフォームについて  一つのコードベースから、複数のプラットフォームへ展開可能。初期はプログラマーも、デザイナーも１人で済む（ことが多い）プログラマー 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... 

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

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

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

scrpgil

More Decks by scrpgil

Other Decks in Programming

Featured

Transcript

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

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

成長推移

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

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

ph1：PMF期（2018年）

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

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

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

Ionic / Angularを採用

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

ph2：グロース期  （2019年1月~2020年8月頃）

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

CircleCIの導入  • ローカルで行っていたビルドをCircleCIに置き換え • 複数のプラットフォームへ同時リリースが可能になった。

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

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

結果として  • スケールに耐えられるインフラ環境が構築 • 開発メンバーが増えても煩雑にならないCI環境ができた ◦ エンジニアが増員。3人から10人へ

Ph3：チーム拡大期  （2020〜2021年）

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

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

パフォーマンス指標の導入「LeanとDevOpsの科学」より、ハイパフォーマンスなチームの定義ハイパフォーマーキネカ開発チームミディアムパフォーマーローパフォーマー

KPIを追う仕組み  • Slackへ投稿したリリース数を自動カウント    • 1日7リリース。    • 主要KPIをモニターに写して座席近い場所に表示。  ◦

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

振り返ってみて・・・

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

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

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

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

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