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
76
推し活を支える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
4.4k
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
7
1.9k
推し活の ハイトラフィックに立ち向かう Railsとアーキテクチャ - Kaigi on Rails 2024
falcon8823
8
6.7k
Angular x Auth0 複数サービス展開での認証基盤を考える
falcon8823
0
640
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
ヘンリー会社紹介資料(エンジニア向け) / company deck for engineer
henryofficial
0
380
Databricks AI/BI Genie の「値ディクショナリー」をAmazonの奥地(S3)まで見に行く
kameitomohiro
1
410
「最速」で Gemini CLI を使いこなそう! 〜Cloud Shell/Cloud Run の活用〜 / The Fastest Way to Master the Gemini CLI — with Cloud Shell and Cloud Run
aoto
PRO
1
180
HonoとJSXを使って管理画面をサクッと型安全に作ろう
diggymo
0
180
AI AgentをLangflowでサクッと作って、1日働かせてみた!
yano13
1
160
NLPコロキウム20251022_超効率化への挑戦: LLM 1bit量子化のロードマップ
yumaichikawa
3
450
知覚とデザイン
rinchoku
1
580
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
180
現場の壁を乗り越えて、 「計装注入」が拓く オブザーバビリティ / Beyond the Field Barriers: Instrumentation Injection and the Future of Observability
aoto
PRO
1
540
生成AI時代のPythonセキュリティとガバナンス
abenben
0
140
RemoteFunctionを使ったコロケーション
mkazutaka
1
110
ハノーファーメッセ2025で見た生成AI活用ユースケース.pdf
hamadakoji
1
460
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Docker and Python
trallard
46
3.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
The Language of Interfaces
destraynor
162
25k
Git: the NoSQL Database
bkeepers
PRO
431
66k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Scaling GitHub
holman
463
140k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
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さんによるゲストトーク 懇親会