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
46
推し活を支えるAngularアプリ 量産体制
https://2025.tskaigi.org/talks/twogate
Hayato OKUMOTO
May 27, 2025
Tweet
Share
More Decks by Hayato OKUMOTO
See All by Hayato OKUMOTO
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
推し活の ハイトラフィックに立ち向かう Railsとアーキテクチャ - Kaigi on Rails 2024
falcon8823
8
5.9k
Angular x Auth0 複数サービス展開での認証基盤を考える
falcon8823
0
590
Angular Schematicsを利用した アプリ量産体制
falcon8823
0
220
iOSとIonicとHEIF画像
falcon8823
0
370
Ionicアプリのビルド自動化
falcon8823
0
37
Firebase Authentication - Ionic Meetup #12 Tokyo
falcon8823
0
300
IonicアプリをAuth0で認証する - Ionic Meetup #16 in Online
falcon8823
0
420
Other Decks in Technology
See All in Technology
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
260
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.3k
論文紹介:LLMDet (CVPR2025 Highlight)
tattaka
0
300
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
1.3k
Model Mondays S2E03: SLMs & Reasoning
nitya
0
350
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
290
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
5.9k
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
170
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
120
Tech-Verse 2025 Global CTO Session
lycorptech_jp
PRO
0
1.6k
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
210
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Six Lessons from altMBA
skipperchong
28
3.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Writing Fast Ruby
sferik
628
62k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
For a Future-Friendly Web
brad_frost
179
9.8k
Facilitating Awesome Meetings
lara
54
6.4k
Fireside Chat
paigeccino
37
3.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
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さんによるゲストトーク 懇親会