Muddy Web Podcast

■ JSConf JP

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

トークテーマ

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

ゲスト

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

ーーー

コンポーザー

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

トークテーマ

・Web Speed Hackathon 2023の裏側

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

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

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

・より高まった競技性

ゲスト

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

参考リンク

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

質問とトークテーマ

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

ゲスト

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

トークテーマ

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

ゲスト

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

参考リンク

• The Chromium Projects The Privacy Sandbox

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

トークテーマ

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

ゲスト

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

参考リンク

• The Chromium Projects The Privacy Sandbox

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

トークテーマ

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

参考リンク

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

トークテーマ

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

参考リンク

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

トークテーマ

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

参考リンク

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

トークテーマ

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

参考リンク

ABEMA の「試合データ」機能をアプリ内 WebView で動かすために行った WebView の内部環境の調査方法や、品質を担保するために整えた開発基盤などについて話しました。

トークテーマ

• 試合データ機能を WebView で提供することになった経緯
• 既存のアプリサポート範囲をカバーできる WebView ブラウザバージョンの調査
• レガシーブラウザで動作しない実装を弾く Linter を自作
• Storybook / Visual Regression Testing をレガシーブラウザで動かす環境を Docker 上に構築
• Node.js 上でもブラウザ上でも同じ単体テストを動かせる仕組み
• モダンブラウザには JavaScript を最適化して出しわけ

参考リンク

Web パフォーマンス改善のコンテスト「Web Speed Hackathon」について、開催の背景や作問時に考えていたこと、次回開催などについて話しました。

トークテーマ

• 「Web Speed Hackathon」とは？
• 意図的に「重いサイト」を作る苦労と工夫
• 出題者も知らない満点解答を出してくる強者たち
• GitHub Actionsを活用したリーダーボード
• 第4回の開催に向けて

音声書き起こし

記念すべき第一回は、ABEMA, WINTICKET, SIROKより各プロダクトのリリース事情についてお話ししています。

トークテーマ

• リリースの頻度やタイミング、一回に含まれる差分の量はどれぐらい？
• リリースの品質を担保するために、QAや自動テストをどうしているか
• ビルドやデプロイ、CI/CDで工夫していること
• インシデントが起きた時の hotfix の対応フロー
• 問題を見逃さないためのエラー収集の難しさ

音声書き起こし