Muddy Web Podcast

【今回のトーク内容】 ・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

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) コンポーザー @kirillovlov

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) ゲスト 株式会社AbemaTV 野口 直寛 (@nodaguti) 株式会社AbemaTV 宮代 理弘 (@3846masa) 株式会社WinTicket 竹内 実 (@dora1998) コンポーザー @kirillovlov

記念すべき第一回は、ABEMA, WINTICKET, SIROKより各プロダクトのリリース事情についてお話ししています。 トークテーマ リリースの頻度やタイミング、一回に含まれる差分の量はどれぐらい？ リリースの品質を担保するために、QAや自動テストをどうしているか ビルドやデプロイ、CI/CDで工夫していること インシデントが起きた時の hotfix の対応フロー 問題を見逃さないためのエラー収集の難しさ 音声書き起こし https://github.com/CyberAgent/muddy-web/tree/main/podcast/%231 ※Whisper を使った書き起こしを配布しています。校正を行なっていないため、誤認識や表記ミスが存在する可能性があります。あらかじめご了承ください。 ファシリテーター 株式会社シロク 石井 勇生 (@YukiIshii10) ゲスト 株式会社AbemaTV 野口 直寛 (@nodaguti) 株式会社WinTicket 竹内 実 (@dora1998) 株式会社シロク 開發 功太郎 (@hotsukai) コンポーザー @kirillovlov プロダクト ABEMA https://abema.tv/ WINTICKET https://www.winticket.jp/ SIROK https://sirok.jp/