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
52
推し活を支える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.5k
推し活の ハイトラフィックに立ち向かう Railsとアーキテクチャ - Kaigi on Rails 2024
falcon8823
8
6.1k
Angular x Auth0 複数サービス展開での認証基盤を考える
falcon8823
0
600
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
クマ×共生 HACKATHON - 熊対策を『特別な行動」から「生活の一部」に -
pharaohkj
0
230
From Live Coding to Vibe Coding with Firebase Studio
firebasethailand
1
320
AI駆動開発 with MixLeap Study【大阪支部 #3】
lycorptech_jp
PRO
0
270
複数のGemini CLIが同時開発する狂気 - Jujutsuが実現するAIエージェント協調の新世界
gunta
13
3.8k
AI工学特論: MLOps・継続的評価
asei
10
2.1k
スプリントレビューを効果的にするために
miholovesq
9
1.7k
KCD Lima: eBee in Peru!
lizrice
0
110
claude codeでPrompt Engineering
iori0311
0
530
Vision Language Modelと自動運転AIの最前線_20250730
yuyamaguchi
2
800
FAST導入1年間のふりかえり〜現実を直視し、さらなる進化を求めて〜 / Review of the first year of FAST implementation
wooootack
1
200
「手を動かした者だけが世界を変える」ソフトウェア開発だけではない開発者人生
onishi
15
7.8k
2025-07-25 NOT A HOTEL TECH TALK ━ スマートホーム開発の最前線 ━ SOFTWARE
wakinchan
0
180
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Automating Front-end Workflow
addyosmani
1370
200k
Fireside Chat
paigeccino
37
3.5k
For a Future-Friendly Web
brad_frost
179
9.8k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Side Projects
sachag
455
43k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
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さんによるゲストトーク 懇親会