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
Hayato OKUMOTO
May 27, 2025
Technology
0
68
推し活を支えるAngularアプリ 量産体制
https://2025.tskaigi.org/talks/twogate
Hayato OKUMOTO
May 27, 2025
Tweet
Share
More Decks by Hayato OKUMOTO
See All by Hayato OKUMOTO
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
2.9k
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
7
1.8k
推し活の ハイトラフィックに立ち向かう Railsとアーキテクチャ - Kaigi on Rails 2024
falcon8823
8
6.6k
Angular x Auth0 複数サービス展開での認証基盤を考える
falcon8823
0
630
Angular Schematicsを利用した アプリ量産体制
falcon8823
0
230
iOSとIonicとHEIF画像
falcon8823
0
370
Ionicアプリのビルド自動化
falcon8823
0
37
Firebase Authentication - Ionic Meetup #12 Tokyo
falcon8823
0
310
IonicアプリをAuth0で認証する - Ionic Meetup #16 in Online
falcon8823
0
430
Other Decks in Technology
See All in Technology
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題!?
databricksjapan
0
130
Trust as Infrastructure
bcantrill
0
290
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
pfn
PRO
2
940
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
3
290
コンテキストエンジニアリングとは? 考え方と応用方法
findy_eventslides
4
880
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
From Prompt to Product @ How to Web 2025, Bucharest, Romania
janwerner
0
110
「Verify with Wallet API」を アプリに導入するために
hinakko
1
220
ZOZOのAI活用実践〜社内基盤からサービス応用まで〜
zozotech
PRO
0
160
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
3
320
いまさら聞けない ABテスト入門
skmr2348
1
190
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
130
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Building Adaptive Systems
keathley
43
2.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Fireside Chat
paigeccino
40
3.7k
Balancing Empowerment & Direction
lara
4
670
Code Review Best Practice
trishagee
72
19k
Typedesign – Prime Four
hannesfritz
42
2.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
What's in a price? How to price your products and services
michaelherold
246
12k
Done Done
chrislema
185
16k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
A designer walks into a library…
pauljervisheath
209
24k
Transcript
推 し 活 を 支 え る A n g
u l a r ア プ リ 量 産 体 制 2025年05月23日 株式会社TwoGate 取締役CTO 奥本 隼
奥本 隼 (Hayato OKUMOTO) @falcon_8823 株式会社TwoGate 取締役CTO チーム組成から12年 / 創業9年
高専出身 TypeScript / Angular歴8年 自己紹介
TwoGateのキーワード ライブエンタメ向けサービスを提供 売上総利益3年連続200%成長 外部株主ゼロ 高専出身エンジニアチーム エンジニア中心の会社経営
TwoGateの主要なソリューション SlashGift オンラインくじサイト CRAYON ファンクラブアプリ TRIPLE ライブチケット販売サイト Caravan ライブイベント向け モバイルオーダーアプリ
音楽アーティストやYouTuber, タレントの 収益装置を提供している会社です。
Caravan - イベント物販に特化したアプリ
事例 TwoGate inc. のApp Storeで一部配信されています。 累計220万DL / 100万ユーザ登録 エンタメ業界、事例を公開しにくい… TwoGateのブースでこっそりお教えします。
累計50アプリほど提供
技術スタック サーバサイド インフラ フロントエンド
ピークトラフィック CDN 50,000 RPS ALB / Rails 8,000 RPS 決済エンドポイント
660 RPS
特徴 アプリはOEM型 1アーティスト=1アプリ サーバサイドはマルチテナント 短納期での提供 内製向けローコード化
(自称)日本一のAngular活用実績 モバイルアプリ:約100 Webアプリ:約150 おそらく、日本一のAngularアプリリリース会社 みなさんも、どこかでユーザになっているかも…?
Angular Schematicsを利用した Low codeアプリ量産体制
背景 アーティスト向けの個別サイト/アプリ 大物ほど複数のアーティストと同居したサイト は好まれにくい 多少の個別要求に対応が必要なケースがある 上記を満たしつつ小チームで開発・保守をしていくには、工夫が必要
アーキテクチャ サイトごとに共通部分と個別部分を作成できるようなプロ ジェクト構成を実現したい 方法 A. 元のコードをforkして個別コードにする B. テンプレート化して個別コードにする C. ライブラリ化して部分的に個別コードにする
D. ノーコード化して共通コードにする
アーキテクチャ サイトごとに共通部分と個別部分を作成できるようなプロ ジェクト構成を実現したい 方法 A. 元のコードをforkして個別コードにする B. テンプレート化して個別コードにする C. ライブラリ化して部分的に個別コードにする
D. ノーコード化して共通コードにする
Angular Schematics https://angular.jp/tools/cli/schematics A schematic is a template-based code generator
that supports complex logic.
Angular Schematics Angularライブラリ向けのコードジェネレータ ng add / ng updateなどでフックされるスクリプト パッケージを追加したとき、NgModuleなどに定義 を入れてくれるやつ
ライブラリのアップデートでインターフェースが変 わったときに、自動置換してくれる仕組みの裏側
ng add用テンプレート 初期状態のテンプレートファイル群 ng addすると自動で追加される その他ファイル配置や変更のためのスクリ プトも実装可能 テンプレートエンジンも用意されており、 変数タグを埋めるとプロジェクト固有の値 に合わせて自動設定できる
ng update向けschematics 新機能追加や改修後には、各プロジェクトのコアライブラリのアッ プデートが必要 既に動いているコードでは、コードごとに加工されている部分 が生じてくる 差分パッチの適用が必要 これを解決する仕組みもSchematicsでは考慮されている(優 秀)
ng update向けschematics アップデート前後のバージョンから、必要な パッチスクリプトが実行される
使い方イメージ Angular Project ng new awesome-gacha-site 空っぽのAngularプロジェクトを作成
使い方イメージ Angular Project ng add @twogate/slashkit-plus コア機能の入ったAngular Libraryを追加 Schematicsにより周辺設定が全て自動 セットアップ
Firebase Project作成+環境変数設定 標準CSSテーマファイル設置 GitLab CI定義ファイル設置 Angular Library コア機能 Config CSS Assets ここから、サイト固有のアセットや設定を変えるだけ。
使い方イメージ Angular Project git commit ... && git push …
GitLab + GitLab CIで自動ビルド&リリース 社内では一連の流れをデザイナーなど非エ ンジニアがリリースまでできる状態に git push Deploy
使い方イメージ GitLab CIの定期実行で、ng updateをGitLab内のリポジトリに適 用するスクリプトを実装。 バージョンが最新でなかったら、Merge Requestを自動作成。 一斉アップデート
まとめ 日本一のAngularアプリリリース会社 Angular Schematicsをフル活用したコード生成によりエンジ ニアレスでのアプリリリースを実現 少人数でアプリを手早くリリースできる体制を実現 月間2-3アプリをストアにリリース 月間3-4サイトをリリース
We are Hiring! まずは、弊社メンバーとお知り合いになりませんか? 推し活を支えるソリューションを TypeScriptでより良い体験をつくる 仲間を探しています スポンサーブースまでお越しください!
日時 会場 内容 アフターイベントを開催します! 2025/06/06 (Fri) 19:00~ 下北沢 TwoGate TwoGate
RubyKaigi × TSKaigi After Talk RubyKaigi × TSKaigi After Talk TwoGateプロダクトを支える技術 lacolacoさんによるゲストトーク 懇親会