Muddy Web Podcast
By Muddy Web
ご意見・ご感想は、Twitterのハッシュタグ #muddy_web にお寄せください。
また、登壇イベント「Muddy Web Meetup」のアーカイブもYouTubeで公開中です。是非こちらもご覧ください。
www.youtube.com/playlist?list=PLBsO-IAhmMUU-wG85J87HB4p7KNB034M-
■ テックブログ
developers.cyberagent.co.jp/blog/
■ 公式オウンドメディア
www.cyberagent.co.jp/way/
theme song "Muddy Web Conversations".
composed by kirillovlov.
Muddy Web PodcastFeb 15, 2023
#12 Flutter × Web の可能性
Web開発におけるFlutterの導入事例についてトークしました。
トークテーマ
・自己紹介とFlutter導入について
・Flutterとチーム開発
・API通信まわりについて
・Flutterとアーキテクチャ
・Flutterチームへのオンボーディング
・キャリアパスの中のFlutter
・FlutterWeb活用の可能性
・Flutter開発に入っていくには?
・UIライブラリについて
・コードレビューについて
ゲスト
- 森田 勝駿 (AI事業本部 AIクリエイティブディビジョン)
- 池田 海斗 (AI事業本部 協業リテールメディアディビジョン)
- 加藤 零 (株式会社WinTicket)
ーーー
コンポーザー
#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
#10 ベテラン x 新卒で技術討論してみた
ベテランWebフロントエンジニアherablogさんをゲストにお招きし、新卒Webフロントエンジニアからの質問にいろいろ答えてもらいつつ、みんなで技術的な議論をしてみました。
質問とトークテーマ
- どうすれば技術を先読みできる?
- 生成系AI時代に求められるスキルセットは?
- もし今新卒だったらどんな成長戦略を描く?
- ベテランはLighthouseの指標を意識する?
- Webパフォーマンス改善で大事なことは?
- 最新技術のキャッチアップ方法は?
ゲスト
- 原 一成 @herablog (株式会社サイバーエージェント AmebaLIFE事業本部)
- 池田 海斗 (株式会社サイバーエージェント AI事業本部)
- 吹金原 榛耶 (株式会社AbemaTV 開発本部)
参考リンク
ーーー
コンポーザー
#9 (後編) Privacy Sandboxについて広告配信プロダクトDynalyst・Amebaブログにおける現場のリアルな話
Chrome(Chromium)のPrivacy保護プロジェクト「Privacy Sandbox」について、広告配信プロダクトDynalyst・Amebaブログでの検討・実施内容について話しました。
トークテーマ
- リタゲ・広告効果測定とプライバシー保護を両立
- プライバシーサンドボックス環境におけるCookie共有
- Webの標準化活動に参加できることの面白さ
ゲスト
- 星 博之 (株式会社サイバーエージェント AmebaLIFE事業本部)
- 太田 浩二 (株式会社サイバーエージェント AI事業本部 アドテクディビジョン)
参考リンク
- The Chromium Projects The 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
- Chrome Platform Status
- ProtectedAudienceAPI
- AttributionReportingAPI
- 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
- 英国 CMA Investigation into Google’s ‘Privacy Sandbox’ browser changes
- WebKit Privacy
ーーー
コンポーザー
#8 (前編) Privacy Sandboxについて広告配信プロダクトDynalyst・Amebaブログにおける現場のリアルな話
Chrome(Chromium)のPrivacy保護プロジェクト「Privacy Sandbox」について、広告配信プロダクトDynalyst・Amebaブログでの検討・実施内容について話しました。
トークテーマ
- プライバシーサンドボックスとは
- サードパーティCookie廃止は2024年から段階的に
- プライバシーサンドボックス以外の動き
- 「Google有利」の懸念と公平性を保つための施策
ゲスト
- 星 博之 (株式会社サイバーエージェント AmebaLIFE事業本部)
- 太田 浩二 (株式会社サイバーエージェント AI事業本部 アドテクディビジョン)
参考リンク
- The Chromium Projects The 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
- Chrome Platform Status
- ProtectedAudienceAPI
- AttributionReportingAPI
- 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
- 英国 CMA Investigation into Google’s ‘Privacy Sandbox’ browser changes
- WebKit Privacy
ーーー
コンポーザー
#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 を使った書き起こしを配布しています。校正を行なっていないため、誤認識や表記ミスが存在する可能性があります。あらかじめご了承ください。
ファシリテーター
- 株式会社シロク 石井 勇生 (https://twitter.com/YukiIshii10)
ゲスト
- 株式会社CyberFight 久保 陽一郎 (https://github.com/kuboyoichiro)
コンポーザー
#6 Figmaから自動生成したコードは実用的か?3つの生成ツールを使ってみて分かったこと
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)
コンポーザー
#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://twitter.com/YukiIshii10)
ゲスト
- 株式会社CAM 薄井裕樹 (https://twitter.com/upimaruuu)
- AI事業本部 アプリ運用センター 森田勝駿 (https://twitter.com/texdeath)
コンポーザー
#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 を使った書き起こしを配布しています。校正を行なっていないため、誤認識や表記ミスが存在する可能性があります。あらかじめご了承ください。
ファシリテーター
- 株式会社シロク 石井 勇生 (https://twitter.com/YukiIshii10)
ゲスト
- 株式会社WinTicket 鍛冶 維吹 (https://github.com/kj455)
- 株式会社CAM 平井 柊太 (https://github.com/shuta13)
コンポーザー
#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://developers.cyberagent.co.jp/blog/archives/38640/
- amilajack/eslint-plugin-compat: https://github.com/amilajack/eslint-plugin-compat
- 3846masa/stylelint-browser-compat: https://github.com/3846masa/stylelint-browser-compat
- mdn/browser-compat-data: https://github.com/mdn/browser-compat-data
- Deploying ES2015+ Code in Production Today — Philip Walton: https://philipwalton.com/articles/deploying-es2015-code-in-production-today/
- 3846masa/babel-plugin-polyfill-custom: https://github.com/3846masa/babel-plugin-polyfill-custom
音声書き起こし
https://github.com/CyberAgent/muddy-web/tree/main/podcast/%233
※Whisper を使った書き起こしを配布しています。校正を行なっていないため、誤認識や表記ミスが存在する可能性があります。あらかじめご了承ください。
ファシリテーター
- 株式会社シロク 石井 勇生 (@YukiIshii10)
ゲスト
- 株式会社AbemaTV 宮代 理弘 (@3846masa)
コンポーザー
#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/students/career_event/detail/id=28369
(一般の方) https://cyberagent.connpass.com/event/270424/
ファシリテーター
- 株式会社シロク 石井 勇生 (@YukiIshii10)
ゲスト
コンポーザー
#1 サービス開始から数年経ったプロダクトのリリースフローとは?
記念すべき第一回は、ABEMA, WINTICKET, SIROKより各プロダクトのリリース事情についてお話ししています。
トークテーマ
- リリースの頻度やタイミング、一回に含まれる差分の量はどれぐらい?
- リリースの品質を担保するために、QAや自動テストをどうしているか
- ビルドやデプロイ、CI/CDで工夫していること
- インシデントが起きた時の hotfix の対応フロー
- 問題を見逃さないためのエラー収集の難しさ
音声書き起こし
https://github.com/CyberAgent/muddy-web/tree/main/podcast/%231
※Whisper を使った書き起こしを配布しています。校正を行なっていないため、誤認識や表記ミスが存在する可能性があります。あらかじめご了承ください。
ファシリテーター
- 株式会社シロク 石井 勇生 (@YukiIshii10)
ゲスト
コンポーザー
プロダクト
- ABEMA https://abema.tv/
- WINTICKET https://www.winticket.jp/
- SIROK https://sirok.jp/