・内定者バイトで挑んだ、ABEMA CI/CD移行プロジェクト

・2000行のymlファイル。現状把握の泥臭さに向き合う

・CircleCIとGitHub Actionsの違いと工夫

・TerraformとGCPでのアクセス権設計に初チャレンジ

・並列処理・キャッシュ戦略・ESLint高速化の工夫

・新規プロダクトにレンタル移籍ってどういうこと？
・エンジニアリングマネージャーからエンジニアにミッションチェンジ
・基盤整備、Panda CSS、モニタリング、いちから土台を作る
・AI Agentic Codingの実践とメリット・デメリット
・メディアとゲームのWebフロント開発の違い
・レンタル移籍で自分のキャリアを見つめ直した
・バックエンド開発へのチャレンジ

・2025年の新卒研修を受けてみて

・チーム開発研修で開発したプロダクト

・フロントエンド以外の開発環境やクラウド環境について

・コストやセキュリティについて気をつけたこと

・フレームワークやビューの活用について

・新卒研修を受けてみての学び

[新卒研修のnote]

https://note.com/ca_tech/n/n93703e9e1e0a

■ トーク内容

・TSKaigi 2025に参加してみた

・TSKaigi 2025で印象的だったセッションや技術的なポイント

・TSKaigi 2025にブースを出展してみた

https://2025.tskaigi.org/

■ トーク

平井　柊太 (サイバーエージェント グループIT推進本部 CIU)

松本　拓人 (株式会社AbemaTV)

水野　響 (株式会社AI Shift)

■ トーク内容

・ローカルストレージのユースケースについて
・古いバージョンにおけるサーバー側との整合性のもたせかた
・ローカルストレージ以外のストレージの選定基準 

■ トーク

野口 直寛 (株式会社AbemaTV)

竹内 実 (株式会社WinTicket)

吉田 純基 (株式会社AI Shift)

■ JSConf JP

https://jsconf.jp/2024/

■ トーク内容

・React への依存を最小にするフロントエンドの設計

・LINEヤフーにおけるPrerender技術の導入とその効果

・React CompilerとFine Grained Reactivityと宣言的UIのこれから

・Storybook との上手な向き合い方を考える

・登壇してみてのふりかえり

■ トーク

野口 直寛 (株式会社AbemaTV)

安井 大晟 (株式会社AI Shift)

糸川 倫太朗 (株式会社WinTicket)

・7月に開催した「アクセシビリティ入門会」ってどんなイベント？

・Figmaをフル活用した抜き打ちテストの話

・デザインシステムを使えば誰でもアクセシブルになる状態を目指して

・ユーザーが自由にカスタムできる領域のアクセシビリティはどうしてる？

・「モバイルアプリアクセシビリティ入門」の出版背景

■ ゲスト

・本田 雅人 (サイバーエージェント AmebaLIFE事業本部)

・土岐 真里奈 (サイバーエージェント AmebaLIFE事業本部)

■ パーソナリティ

・竹内 実 (株式会社WinTicket)

【今回のトーク内容】

・SIROK・AI Shift・CAMそれぞれのフォームライブラリと選択理由
・BFFで作るセマンティックなフォーム
・プログレッシブエンハンスメントの現実的な用途
・DX(Developer Experience)観点からのフォームライブラリ
・Web標準に寄ってきたJSフレームワークとRails, CakePHPの比較
・選択肢が広いのでチームでしっかり認識を揃える。逆に選択肢を狭めたライブラリTanStack Form
・Server Actionsの名前が変わる！
・まとめ

【スピーカー】

江尻 幸生 (株式会社CAM)

開發 功太郎 (株式会社シロク)

栗崎 一真 (株式会社AI Shift)

・新卒1年目でどんな仕事やタスクをしてきたか

・新卒期間中に触れた技術について深堀り

・次の半期でチャレンジしてみたい技術について

1. 各プロダクトでの具体的な利用方法

• Storybookを用いたコンポーネントやページ全体のキャプチャー
• デバイスごとにキャプチャーを行い、ユーザー向けサービスにVRTを導入

• 変更が思わぬ箇所に影響を与えていることを発見
• 手動確認では見逃しがちな問題を検出

• 実行コストが高く、メンテナンスが大変
• ページの読み込み完了のタイミングが不安定
• 安定性の向上と実行時間の短縮が必要

• Flaky なテストのスキップや閾値の調整
• Dockerを使った環境構築や実行対象の絞り込み
• Storybook Test Runner を使ったインタラクションテストの検討

2. 導入効果
3. 直面している課題
4. テストの安定化やメンテナンスの工夫

TanstackRouterの導入事例についてトークしてみた

トークテーマ

• TanStackRouterの導入理由
• TanStackRouterのメリット
• TanStackQueryを含めた運用方法
• 今後のReactのルーティングについて

ゲスト

・安井 大晟 /（たいせー）

・dora

・開發 功太郎 /ほっつー

ーーー

コンポーザー

⁠⁠⁠⁠@kirillovlov

Web開発におけるFlutterの導入事例についてトークしました。

トークテーマ

・自己紹介とFlutter導入について
・Flutterとチーム開発
・API通信まわりについて
・Flutterとアーキテクチャ
・Flutterチームへのオンボーディング
・キャリアパスの中のFlutter
・FlutterWeb活用の可能性
・Flutter開発に入っていくには？
・UIライブラリについて
・コードレビューについて

ゲスト

• 森田 勝駿 (AI事業本部 AIクリエイティブディビジョン)
• 池田 海斗 (AI事業本部 協業リテールメディアディビジョン)
• 加藤 零 (株式会社WinTicket)

ーーー

コンポーザー

• ⁠⁠⁠@kirillovlov

「Web Speed Hackathon」は、Webアプリケーションのパフォーマンス向上を競うハッカソンで、2024年で5回目の開催です。参加者は主にWeb技術（フロントエンドおよびNode.js）に関するチューニングで、時間のかかるサービスの高速化を競います。2023年開催の運営に関わったエンジニアをゲストに、イベントの裏側をトークしました。(収録時期：2023年)

トークテーマ

・Web Speed Hackathon 2023の裏側

・新たな採点指標「Interaction to Next Paint」

・デチューニングにも流儀がある？

・スコアボードの改良とレギュレーションチェック

・より高まった競技性

ゲスト

中川 開登 (サイバーエージェント FANTECH本部)

参考リンク

Web Speed Hackathon 2024 【一般応募用】

Web Speed Hackathon 2024【学生応募用】

ーーー

コンポーザー

⁠⁠⁠⁠@kirillovlov

ベテランWebフロントエンジニアherablogさんをゲストにお招きし、新卒Webフロントエンジニアからの質問にいろいろ答えてもらいつつ、みんなで技術的な議論をしてみました。

質問とトークテーマ

• どうすれば技術を先読みできる？
• 生成系AI時代に求められるスキルセットは？
• もし今新卒だったらどんな成長戦略を描く？
• ベテランはLighthouseの指標を意識する？
• Webパフォーマンス改善で大事なことは？
• 最新技術のキャッチアップ方法は？

ゲスト

• 原 一成 @herablog (株式会社サイバーエージェント AmebaLIFE事業本部)
• 池田 海斗 (株式会社サイバーエージェント AI事業本部)
• 吹金原 榛耶 (株式会社AbemaTV 開発本部)

参考リンク

• Webが日常に溶け込んだ新時代で、Webフロントエンドのキャリアの未来を考えてみる

• 僕らが20年たっても成長しつづけるエンジニアでいるために
• 原 一成のキャリアパス

ーーー

コンポーザー

• ⁠⁠⁠@kirillovlov

Chrome(Chromium)のPrivacy保護プロジェクト「Privacy Sandbox」について、広告配信プロダクトDynalyst・Amebaブログでの検討・実施内容について話しました。

トークテーマ

• リタゲ・広告効果測定とプライバシー保護を両立
• プライバシーサンドボックス環境におけるCookie共有
• Webの標準化活動に参加できることの面白さ

ゲスト

• 星 博之 (株式会社サイバーエージェント AmebaLIFE事業本部)
• 太田 浩二 (株式会社サイバーエージェント AI事業本部 アドテクディビジョン)

参考リンク

• The Chromium Projects The Privacy Sandbox

•  ⁠https://www.chromium.org/Home/chromium-privacy/privacy-sandbox/⁠

• The Privacy Sandbox

• ⁠https://privacysandbox.com/intl/ja_jp/⁠
• ⁠https://privacysandbox.com/intl/ja_jp/open-web/#the-privacy-sandbox-timeline⁠

• Chrome for Developers

• ⁠https://developer.chrome.com/ja/docs/privacy-sandbox/⁠

• Chrome Platform Status

• ⁠https://chromestatus.com/roadmap⁠

• ProtectedAudienceAPI

• ⁠https://github.com/WICG/turtledove/blob/main/FLEDGE.md⁠

• AttributionReportingAPI

• ⁠https://github.com/WICG/attribution-reporting-api⁠

• Related Website Sets（旧First-Party Sets）

• ⁠https://developer.chrome.com/ja/docs/privacy-sandbox/first-party-sets/⁠
• ⁠https://github.com/WICG/first-party-sets⁠

• CHIPS

• ⁠https://developer.chrome.com/ja/docs/privacy-sandbox/chips/⁠

• 英国 CMA Investigation into Google’s ‘Privacy Sandbox’ browser changes

• ⁠https://www.gov.uk/cma-cases/investigation-into-googles-privacy-sandbox-browser-changes⁠

• WebKit Privacy

• ⁠https://webkit.org/blog/category/privacy/⁠

ーーー

コンポーザー

• ⁠⁠@kirillovlov

Chrome(Chromium)のPrivacy保護プロジェクト「Privacy Sandbox」について、広告配信プロダクトDynalyst・Amebaブログでの検討・実施内容について話しました。

トークテーマ

• プライバシーサンドボックスとは
• サードパーティCookie廃止は2024年から段階的に
• プライバシーサンドボックス以外の動き
• 「Google有利」の懸念と公平性を保つための施策

ゲスト

• 星 博之 (株式会社サイバーエージェント AmebaLIFE事業本部)
• 太田 浩二 (株式会社サイバーエージェント AI事業本部 アドテクディビジョン)

参考リンク

• The Chromium Projects The Privacy Sandbox

•  https://www.chromium.org/Home/chromium-privacy/privacy-sandbox/

• The Privacy Sandbox

• https://privacysandbox.com/intl/ja_jp/
• https://privacysandbox.com/intl/ja_jp/open-web/#the-privacy-sandbox-timeline

• Chrome for Developers

• https://developer.chrome.com/ja/docs/privacy-sandbox/

• Chrome Platform Status

• https://chromestatus.com/roadmap

• ProtectedAudienceAPI

• https://github.com/WICG/turtledove/blob/main/FLEDGE.md

• AttributionReportingAPI

• https://github.com/WICG/attribution-reporting-api

• Related Website Sets（旧First-Party Sets）

• https://developer.chrome.com/ja/docs/privacy-sandbox/first-party-sets/
• https://github.com/WICG/first-party-sets

• CHIPS

• https://developer.chrome.com/ja/docs/privacy-sandbox/chips/

• 英国 CMA Investigation into Google’s ‘Privacy Sandbox’ browser changes

• https://www.gov.uk/cma-cases/investigation-into-googles-privacy-sandbox-browser-changes

• WebKit Privacy

• https://webkit.org/blog/category/privacy/

ーーー

コンポーザー

• ⁠@kirillovlov

プロレス動画配信サービス「WRESTLE UNIVERSE」について、多言語で提供する上で考慮したことや GDPR 対応について話しました。

トークテーマ

• WRESTLE UNIVERSE について
• AWS x Serverless
• Web サービスの多言語対応について
• GDPR 対応について
• Lambda@Edge を使った A/B Testing
• 動画での多言語音声について

参考リンク

• OneTrust: https://www.onetrust.com/
• serverless-next.js: https://github.com/serverless-nextjs/serverless-next.js
• Localizely: https://localizely.com/

音声書き起こし

https://github.com/CyberAgent/muddy-web/tree/main/podcast/%237

※Whisper を使った書き起こしを配布しています。校正を行なっていないため、誤認識や表記ミスが存在する可能性があります。あらかじめご了承ください。

ファシリテーター

• 株式会社シロク 石井 勇生 (⁠https://twitter.com/YukiIshii10⁠)

ゲスト

• 株式会社CyberFight 久保 陽一郎 (https://github.com/kuboyoichiro)

コンポーザー

• ⁠@kirillovlov

Figmaから自動生成したコードが実際の開発で使えるかについて様々な視点で検証し、そこで得られた知見や今後の可能性について話しました。

トークテーマ

• そもそもPoCMOCKという社内イベントってなに？
• なぜその課題としてFigmaからのコード自動生成を選んだのか？
• 実際検証してみてどうだったのか？
• AIが与えてる自動生成について

参考リンク

• ネタ元記事: https://qiita.com/TakumaKurosawa/items/2db04bfd67f6e7afd3ca
• Overlay: https://overlay-tech.com/
• teleportHQ: https://teleporthq.io/
• anima: https://www.animaapp.com/
• PoCMOCK: https://www.cyberagent.co.jp/way/list/detail/id=27048

音声書き起こし

https://github.com/CyberAgent/muddy-web/tree/main/podcast/%236

※Whisper を使った書き起こしを配布しています。校正を行なっていないため、誤認識や表記ミスが存在する可能性があります。あらかじめご了承ください。

ファシリテーター

• 株式会社シロク 石井 勇生 (⁠https://twitter.com/YukiIshii10⁠)

ゲスト

• AI事業本部 黒澤拓磨 (https://twitter.com/TakumaKurosawa)

コンポーザー

• ⁠@kirillovlov

CAMやAI事業本部のエンジニアをゲストに、各プロダクトのCI/CDやリリースワークフローについて話しました。

トークテーマ

• リリースフローの紹介
• Dev環境はどう使われてる？
• テストってどうやってる？
• リリースで使ってるツールについて
• CAMのコンテンツリリースについて
• 品質どう担保していくのか

参考リンク

• Viron: https://discovery.viron.plus/
• sonarcloud: https://www.sonarsource.com/products/sonarcloud/
• Grafana: https://grafana.com/
• PipeCD: https://pipecd.dev/

音声書き起こし

⁠https://github.com/CyberAgent/muddy-web/tree/main/podcast/%235⁠ ※Whisper を使った書き起こしを配布しています。校正を行なっていないため、誤認識や表記ミスが存在する可能性があります。あらかじめご了承ください。

ファシリテーター

• 株式会社シロク 石井 勇生 (⁠https://twitter.com/YukiIshii10⁠)

ゲスト

• 株式会社CAM 薄井裕樹 (https://twitter.com/upimaruuu)
• AI事業本部 アプリ運用センター 森田勝駿 (https://twitter.com/texdeath)

コンポーザー

• ⁠@kirillovlov

2022年度新卒として入社した3名が新卒1年目を振り返って、取り組んだことやそこから得た学びについて話しました。

トークテーマ

• 各会社で何をやってきたか
• 1年を通して1番大きな学び
• 1年前に戻れるとしたら、スタートダッシュでやりたいこと
• 振り返ってみて先輩が言ってた事の意味って？
• 今後なりたいエンジニア像

参考リンク

• pde.js: https://github.com/cam-inc/pde.js
• WINTICKET QA における Autify 活用: https://speakerdeck.com/kj455/winticket-qa-niokeru-autify-huo-yong
• Technologies for developing editors / Webエディタ開発を支える技術: https://speakerdeck.com/shuta13/technologies-for-developing-editors

音声書き起こし

https://github.com/CyberAgent/muddy-web/tree/main/podcast/%234
※Whisper を使った書き起こしを配布しています。校正を行なっていないため、誤認識や表記ミスが存在する可能性があります。あらかじめご了承ください。

ファシリテーター

• 株式会社シロク 石井 勇生 (https://twitter.com/YukiIshii10)

ゲスト

• 株式会社WinTicket 鍛冶 維吹 (https://github.com/kj455)
• 株式会社CAM 平井 柊太 (https://github.com/shuta13)

コンポーザー

• @kirillovlov