#22 新規プロダクト開発に期間限定でレンタル移籍した2人で対談してみた
・新規プロダクトにレンタル移籍ってどういうこと？ ・エンジニアリングマネージャーからエンジニアにミッションチェンジ ・基盤整備、Panda CSS、モニタリング、いちから土台を作る ・AI Agentic Codingの実践とメリット・デメリット ・メディアとゲームのWebフロント開発の違い ・レンタル移籍で自分のキャリアを見つめ直した ・バックエンド開発へのチャレンジ
Jul 30, 2025•29 min
Muddy Web Podcast
Muddy Web Podcastは、"Muddiness: 泥臭さ" をテーマにしたWebフロントエンドエンジニアのポッドキャストです。開発現場での具体的な体験やケーススタディなど、明日から使えるかもしれない泥臭さのある話題でトークをします。それぞれの現場で遭遇したできごとから得られた知見や技術を学び合い、フロントエンド開発の糧になるポッドキャストを目指しています。
ご意見・ご感想は、Xのハッシュタグ #muddy_web にお寄せください。
また、登壇イベント「Muddy Web Meetup」のアーカイブもYouTubeで公開中です。是非こちらもご覧ください。
https://www.youtube.com/playlist?list=PLBsO-IAhmMUU-wG85J87HB4p7KNB034M-
■ テックブログ
https://developers.cyberagent.co.jp/blog/
■ 公式オウンドメディア
https://www.cyberagent.co.jp/way/
theme song "Muddy Web Conversations".
composed by kirillovlov.
Last refreshed: ⓘ
Follow this podcast in the Metacast mobile app to refresh it and see new episodes.
Podcasts are better in Metacast mobile app
Don't just listen to podcasts. Learn from them with transcripts, summaries, and chapters for every episode. Skim, search, and bookmark insights. Learn more
Episodes
#21 新卒研修をふりかえってみる
・2025年の新卒研修を受けてみて ・チーム開発研修で開発したプロダクト ・フロントエンド以外の開発環境やクラウド環境について ・コストやセキュリティについて気をつけたこと ・フレームワークやビューの活用について ・新卒研修を受けてみての学び [新卒研修のnote] https://note.com/ca_tech/n/n93703e9e1e0a
Jul 10, 2025•39 min
#20 TSKaigi 2025に参加してみてのふりかえり
■ トーク内容 ・TSKaigi 2025に参加してみた ・TSKaigi 2025で印象的だったセッションや技術的なポイント ・TSKaigi 2025にブースを出展してみた https://2025.tskaigi.org/ ■ トーク 平井 柊太 (サイバーエージェント グループIT推進本部 CIU) 松本 拓人 (株式会社AbemaTV) 水野 響 (株式会社AI Shift)
Jun 09, 2025•49 min
#19 サービス特性に応じた Local Storage の使い方
■ トーク内容 ・ローカルストレージのユースケースについて ・古いバージョンにおけるサーバー側との整合性のもたせかた ・ローカルストレージ以外のストレージの選定基準 ■ トーク 野口 直寛 (株式会社AbemaTV) 竹内 実 (株式会社WinTicket) 吉田 純基 (株式会社AI Shift)
Jan 28, 2025•25 min
#18 JSConf JP 2024 にてプロダクト視点・登壇者視点で気になったセッションは？
■ JSConf JP https://jsconf.jp/2024/ ■ トーク内容 ・React への依存を最小にするフロントエンドの設計 ・LINEヤフーにおけるPrerender技術の導入とその効果 ・React CompilerとFine Grained Reactivityと宣言的UIのこれから ・Storybook との上手な向き合い方を考える ・登壇してみてのふりかえり ■ トーク 野口 直寛 (株式会社AbemaTV) 安井 大晟 (株式会社AI Shift) 糸川 倫太朗 (株式会社WinTicket)
Jan 14, 2025•34 min
#17 当たり前水準を上げていくAmebaのアクセシビリティ文化
・7月に開催した「アクセシビリティ入門会」ってどんなイベント？ ・Figmaをフル活用した抜き打ちテストの話 ・デザインシステムを使えば誰でもアクセシブルになる状態を目指して ・ユーザーが自由にカスタムできる領域のアクセシビリティはどうしてる？ ・「モバイルアプリアクセシビリティ入門」の出版背景 ■ ゲスト ・本田 雅人 (サイバーエージェント AmebaLIFE事業本部) ・土岐 真里奈 (サイバーエージェント AmebaLIFE事業本部) ■ パーソナリティ ・竹内 実 (株式会社WinTicket)
Dec 16, 2024•35 min
#16 フォームライブラリ選定とBFF, プログレッシブエンハンスメントについてトークしてみた
【今回のトーク内容】 ・SIROK・AI Shift・CAMそれぞれのフォームライブラリと選択理由 ・BFFで作るセマンティックなフォーム ・プログレッシブエンハンスメントの現実的な用途 ・DX(Developer Experience)観点からのフォームライブラリ ・Web標準に寄ってきたJSフレームワークとRails, CakePHPの比較 ・選択肢が広いのでチームでしっかり認識を揃える。逆に選択肢を狭めたライブラリTanStack Form ・Server Actionsの名前が変わる！ ・まとめ 【スピーカー】 江尻 幸生 (株式会社CAM) 開發 功太郎 (株式会社シロク) 栗崎 一真 (株式会社AI Shift)
Nov 13, 2024•26 min
#15 新卒1年目のWebフロント業務を、半期を終えて振り返ってみた
・新卒1年目でどんな仕事やタスクをしてきたか ・新卒期間中に触れた技術について深堀り ・次の半期でチャレンジしてみたい技術について
Nov 01, 2024•37 min
#14 Visual Regression Testのプロダクト導入事例
1. 各プロダクトでの具体的な利用方法 Storybookを用いたコンポーネントやページ全体のキャプチャー デバイスごとにキャプチャーを行い、ユーザー向けサービスにVRTを導入 変更が思わぬ箇所に影響を与えていることを発見 手動確認では見逃しがちな問題を検出 実行コストが高く、メンテナンスが大変 ページの読み込み完了のタイミングが不安定 安定性の向上と実行時間の短縮が必要 Flaky なテストのスキップや閾値の調整 Dockerを使った環境構築や実行対象の絞り込み Storybook Test Runner を使ったインタラクションテストの検討 2. 導入効果 3. 直面している課題 4. テストの安定化やメンテナンスの工夫...
Jul 31, 2024•28 min
#13 TanstackRouterの導入事例についてトークしてみた
TanstackRouterの導入事例についてトークしてみた トークテーマ TanStackRouterの導入理由 TanStackRouterのメリット TanStackQueryを含めた運用方法 今後のReactのルーティングについて ゲスト ・安井 大晟 /（たいせー） ・dora ・開發 功太郎 /ほっつー ーーー コンポーザー @kirillovlov
Jul 08, 2024•31 min
#12 Flutter × Web の可能性
Web開発におけるFlutterの導入事例についてトークしました。 トークテーマ ・自己紹介とFlutter導入について ・Flutterとチーム開発 ・API通信まわりについて ・Flutterとアーキテクチャ ・Flutterチームへのオンボーディング ・キャリアパスの中のFlutter ・FlutterWeb活用の可能性 ・Flutter開発に入っていくには？ ・UIライブラリについて ・コードレビューについて ゲスト 森田 勝駿 (AI事業本部 AIクリエイティブディビジョン) 池田 海斗 (AI事業本部 協業リテールメディアディビジョン) 加藤 零 (株式会社WinTicket) ーーー コンポーザー @kirillovlov...
Mar 01, 2024•41 min
#11 Web Speed Hackathon 2023の裏側
「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...
Feb 05, 2024•28 min
#10 ベテラン x 新卒で技術討論してみた
ベテランWebフロントエンジニアherablogさんをゲストにお招きし、新卒Webフロントエンジニアからの質問にいろいろ答えてもらいつつ、みんなで技術的な議論をしてみました。 質問とトークテーマ どうすれば技術を先読みできる？ 生成系AI時代に求められるスキルセットは？ もし今新卒だったらどんな成長戦略を描く？ ベテランはLighthouseの指標を意識する？ Webパフォーマンス改善で大事なことは？ 最新技術のキャッチアップ方法は？ ゲスト 原 一成 @herablog (株式会社サイバーエージェント AmebaLIFE事業本部) 池田 海斗 (株式会社サイバーエージェント AI事業本部) 吹金原 榛耶 (株式会社AbemaTV 開発本部) 参考リンク Webが日常に溶け込んだ新時代で、Webフロントエンドのキャリアの未来を考えてみる 僕らが20年たっても成長しつづけるエンジニアでいるために 原 一成のキャリアパス ーーー コンポーザー @kirillovlov...
Oct 30, 2023•33 min
#9 (後編) Privacy Sandboxについて広告配信プロダクトDynalyst・Amebaブログにおける現場のリアルな話
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-sa...
Oct 18, 2023•27 min
#8 (前編) Privacy Sandboxについて広告配信プロダクトDynalyst・Amebaブログにおける現場のリアルな話
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...
Oct 10, 2023•23 min
#7 エッジを活用した WRESTLE UNIVERSE の多言語・GDPR対応
プロレス動画配信サービス「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 を使った書き起こしを配布しています。校正を行なっていないため、誤認識や表記ミスが存在する可能性があります。あらかじめご了承ください。 ファシリテーター...
Aug 29, 2023•29 min
#6 Figmaから自動生成したコードは実用的か？３つの生成ツールを使ってみて分かったこと
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 を使った書き起こしを配布してい...
Jul 07, 2023•29 min
#5 スムーズに開発を進めるために、CI/CDやリリースワークフローはどうしてる？
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://twitt...
Jun 19, 2023•30 min
#4 新卒で1年目を振り返ってみた話
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...
May 10, 2023•30 min
#3 レガシーブラウザは IE だけじゃない！？ABEMA 試合データ機能で培った WebView 開発ノウハウ
ABEMA の「試合データ」機能をアプリ内 WebView で動かすために行った WebView の内部環境の調査方法や、品質を担保するために整えた開発基盤などについて話しました。 トークテーマ 試合データ機能を WebView で提供することになった経緯 既存のアプリサポート範囲をカバーできる WebView ブラウザバージョンの調査 レガシーブラウザで動作しない実装を弾く Linter を自作 Storybook / Visual Regression Testing をレガシーブラウザで動かす環境を Docker 上に構築 Node.js 上でもブラウザ上でも同じ単体テストを動かせる仕組み モダンブラウザには JavaScript を最適化して出しわけ 参考リンク fireos-archive/fireos-archive: https://github.com/fireos-archive/fireos-archive #ABEMA で試合のデータをアクセシブルに！デザインと色調整技術 | CyberAgent Developers Blog: https://develope...
Feb 15, 2023•26 min
#2 これまでの作問者たちが語る！Web Speed Hackathonの舞台裏
Web パフォーマンス改善のコンテスト「Web Speed Hackathon」について、開催の背景や作問時に考えていたこと、次回開催などについて話しました。 トークテーマ 「Web Speed Hackathon」とは？ 意図的に「重いサイト」を作る苦労と工夫 出題者も知らない満点解答を出してくる強者たち GitHub Actionsを活用したリーダーボード 第4回の開催に向けて 音声書き起こし https://github.com/CyberAgent/muddy-web/tree/main/podcast/%232 ※Whisper を使った書き起こしを配布しています。校正を行なっていないため、誤認識や表記ミスが存在する可能性があります。あらかじめご了承ください。 Web Speed Hackathon 2023 開催日: 2023/3/4(土) ~ 3/5(日) 開催場所: オンライン, Abema Towers(学生のみ) 応募締切: 2023/3/2/(木) 23:59 応募フォーム (学生の方) https://www.cyberagent.co.jp/careers/s...
Jan 18, 2023•39 min
#1 サービス開始から数年経ったプロダクトのリリースフローとは？
記念すべき第一回は、ABEMA, WINTICKET, SIROKより各プロダクトのリリース事情についてお話ししています。 トークテーマ リリースの頻度やタイミング、一回に含まれる差分の量はどれぐらい？ リリースの品質を担保するために、QAや自動テストをどうしているか ビルドやデプロイ、CI/CDで工夫していること インシデントが起きた時の hotfix の対応フロー 問題を見逃さないためのエラー収集の難しさ 音声書き起こし https://github.com/CyberAgent/muddy-web/tree/main/podcast/%231 ※Whisper を使った書き起こしを配布しています。校正を行なっていないため、誤認識や表記ミスが存在する可能性があります。あらかじめご了承ください。 ファシリテーター 株式会社シロク 石井 勇生 ( @YukiIshii10 ) ゲスト 株式会社AbemaTV 野口 直寛 ( @nodaguti ) 株式会社WinTicket 竹内 実 ( @dora1998 ) 株式会社シロク 開發 功太郎 ( @hotsukai ) コンポーザー @...
Nov 16, 2022•34 min
Hosted on Spotify for Creators (Anchor)
For the best experience, listen in Metacast app for iOS or Android