推し活を支えるAngularアプリ 量産体制

https://2025.tskaigi.org/talks/twogate

Transcript

1. 推 し 活 を 支 え る A n g u l a r ア プ リ 量 産 体 制 2025年05月23日 株式会社TwoGate 取締役CTO 奥本 隼
2. 奥本 隼 (Hayato OKUMOTO) @falcon_8823 株式会社TwoGate 取締役CTO チーム組成から12年 / 創業9年 高専出身 TypeScript / Angular歴8年 自己紹介
3. TwoGateのキーワード ライブエンタメ向けサービスを提供 売上総利益3年連続200%成長 外部株主ゼロ 高専出身エンジニアチーム エンジニア中心の会社経営
4. TwoGateの主要なソリューション SlashGift オンラインくじサイト CRAYON ファンクラブアプリ TRIPLE ライブチケット販売サイト Caravan ライブイベント向け モバイルオーダーアプリ 音楽アーティストやYouTuber, タレントの 収益装置を提供している会社です。
5. Caravan - イベント物販に特化したアプリ
6. 事例 ＴwoGate inc. のApp Storeで一部配信されています。 累計220万DL / 100万ユーザ登録 エンタメ業界、事例を公開しにくい… TwoGateのブースでこっそりお教えします。 累計50アプリほど提供
7. 技術スタック サーバサイド インフラ フロントエンド
8. ピークトラフィック CDN 50,000 RPS ALB / Rails 8,000 RPS 決済エンドポイント 660 RPS
9. 特徴 アプリはOEM型 1アーティスト＝1アプリ サーバサイドはマルチテナント 短納期での提供 内製向けローコード化
10. (自称)日本一のAngular活用実績 モバイルアプリ：約100 Webアプリ：約150 おそらく、日本一のAngularアプリリリース会社 みなさんも、どこかでユーザになっているかも…？
11. Angular Schematicsを利用した Low codeアプリ量産体制
12. 背景 アーティスト向けの個別サイト/アプリ 大物ほど複数のアーティストと同居したサイト は好まれにくい 多少の個別要求に対応が必要なケースがある 上記を満たしつつ小チームで開発・保守をしていくには、工夫が必要
13. アーキテクチャ サイトごとに共通部分と個別部分を作成できるようなプロ ジェクト構成を実現したい 方法 A. 元のコードをforkして個別コードにする B. テンプレート化して個別コードにする C. ライブラリ化して部分的に個別コードにする D. ノーコード化して共通コードにする
14. アーキテクチャ サイトごとに共通部分と個別部分を作成できるようなプロ ジェクト構成を実現したい 方法 A. 元のコードをforkして個別コードにする B. テンプレート化して個別コードにする C. ライブラリ化して部分的に個別コードにする D. ノーコード化して共通コードにする
15. Angular Schematics https://angular.jp/tools/cli/schematics A schematic is a template-based code generator that supports complex logic.
16. Angular Schematics Angularライブラリ向けのコードジェネレータ ng add / ng updateなどでフックされるスクリプト パッケージを追加したとき、NgModuleなどに定義 を入れてくれるやつ ライブラリのアップデートでインターフェースが変 わったときに、自動置換してくれる仕組みの裏側
17. ng add用テンプレート 初期状態のテンプレートファイル群 ng addすると自動で追加される その他ファイル配置や変更のためのスクリ プトも実装可能 テンプレートエンジンも用意されており、 変数タグを埋めるとプロジェクト固有の値 に合わせて自動設定できる
18. ng update向けschematics 新機能追加や改修後には、各プロジェクトのコアライブラリのアッ プデートが必要 既に動いているコードでは、コードごとに加工されている部分 が生じてくる 差分パッチの適用が必要 これを解決する仕組みもSchematicsでは考慮されている（優 秀）
19. ng update向けschematics アップデート前後のバージョンから、必要な パッチスクリプトが実行される
20. 使い方イメージ Angular Project ng new awesome-gacha-site 空っぽのAngularプロジェクトを作成
21. 使い方イメージ Angular Project ng add @twogate/slashkit-plus コア機能の入ったAngular Libraryを追加 Schematicsにより周辺設定が全て自動 セットアップ Firebase Project作成＋環境変数設定 標準CSSテーマファイル設置 GitLab CI定義ファイル設置 Angular Library コア機能 Config CSS Assets ここから、サイト固有のアセットや設定を変えるだけ。
22. 使い方イメージ Angular Project git commit ... && git push … GitLab + GitLab CIで自動ビルド＆リリース 社内では一連の流れをデザイナーなど非エ ンジニアがリリースまでできる状態に git push Deploy
23. 使い方イメージ GitLab CIの定期実行で、ng updateをGitLab内のリポジトリに適 用するスクリプトを実装。 バージョンが最新でなかったら、Merge Requestを自動作成。 一斉アップデート
24. まとめ 日本一のAngularアプリリリース会社 Angular Schematicsをフル活用したコード生成によりエンジ ニアレスでのアプリリリースを実現 少人数でアプリを手早くリリースできる体制を実現 月間2-3アプリをストアにリリース 月間3-4サイトをリリース
25. We are Hiring! まずは、弊社メンバーとお知り合いになりませんか？ 推し活を支えるソリューションを TypeScriptでより良い体験をつくる 仲間を探しています スポンサーブースまでお越しください！
26. 日時 会場 内容 アフターイベントを開催します！ 2025/06/06 (Fri) 19:00~ 下北沢 TwoGate TwoGate RubyKaigi × TSKaigi After Talk RubyKaigi × TSKaigi After Talk TwoGateプロダクトを支える技術 lacolacoさんによるゲストトーク 懇親会