Avsnitt

  • 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

  • Saknas det avsnitt?

    Klicka här för att uppdatera flödet manuellt.

  • ベテラン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/