$30 off During Our Annual Pro Sale. View Details »

CyberAgent Developer Conference(CADC) 2023 LP開発...

did0es
September 28, 2023

CyberAgent Developer Conference(CADC) 2023 LP開発の舞台裏

https://speakerdeck.com/lanberb/cyberagent-developer-conference-cadc-2023-lpkai-fa-nowu-tai-li と同じ資料です。

サイバーエージェントの技術カンファレンス「CyberAgent Developers Conference 2023」(以下、CADC2023)のLPについて、Webにおける3DCGや、リアルタイムな機能の裏側について開発者2人がお話します。 前半は佐々木から、TailwindCSSとSpindleを合わせて構築したデザインシステムについて、後半は平井から、MomentoというServerlessなサービスを用いたチャット機能についてお話します。 最後に、2人が取り組んだ3DCGの実装について、それぞれからお話します。

イベントURL:https://cyberagent.connpass.com/event/294610/

did0es

September 28, 2023
Tweet

More Decks by did0es

Other Decks in Technology

Transcript

  1. CyberAgent Developer Conference 2023ʹ͍ͭͯ Πϕϯτͷ֓ཁ 01 ɾ2023 06/28 - 06/29ͷ2೔ؒ։࠵


    ɹΦϯϥΠϯܗࣜɹYouTubeͰ഑৴ ɾDAY 1 - NEXT DAY
 ɹ࣍ੈ୅Λ୲͏एखʹΑΔ2 ~ 30෼ͷ࿥ըηογϣϯ ɾDAY 2 - EXPERT DAY
 ɹ֤෼໺ͷϕςϥϯࣾһʹΑΔ໿1࣌ؒͷϥΠϒηογϣϯ
  2. CyberAgent Developer Conference 2023ʹ͍ͭͯ LPͷ࢖༻ٕज़ ɾج൫ɿNext.js
 ɹLPɾ؅ཧ໘ڞʹNext.jsͷSGͰӡ༻ ɾUIɿThree.js, TailwindCSS, daisyUI


    ɹLP໘͸Three.js, TailwindCSSɹAdmin໘͸daisyUIͰ࣮૷ ɾΠϯϑϥɿS3, CloudFront, Momento
 ɹSGͷ੒Ռ෺ΛS3, CFͰ഑৴ɹϥΠϒνϟοτػೳ͸ Momento Λར༻ 02
  3. TailwindͱSpindleΛ૊Έ߹Θͤͨ։ൃޮ཰Խ ࠓ೥౓ͷ։ൃମ੍ ɾϝϯόʔ
 ɹࣾһΤϯδχΞ2໊ + 24ଔ಺ఆऀόΠτ2໊ ɾεέδϡʔϧ
 ɹ։ൃظؒ: 1ϲ݄ ɾཁ݅

    ɹNEXTͱEXPERTͦΕͧΕͷϒϥϯυԋग़ɺӡ༻νʔϜʹΑΔLP಺ϦϯΫͷࠩ͠ସ͑ ɹ഑৴தͷϦΞϧλΠϜνϟοτػೳɺΤϯυϩʔϧɺϦΞϧλΠϜͷLIVEදࣔɺ౳ʑ… 02
  4. σβΠϯ੒Ռ෺ TailwindͱSpindleΛ૊Έ߹Θͤͨ։ൃޮ཰Խ 02 CSS Token ࣮૷ଆͷ౎߹Ͱ ࣗ༝ʹ࡞ΕΔτʔΫϯ color-white font-xs font-avenir

    leading-20 bg-red ɾ ɾ ɾ ։ൃ σβΠϯ Semantic Token FigmaͰ࢖ΘΕΔ ༻్ɾจ຺Λ࣋ͬͨτʔΫϯ color font font line-height background จ຺ͷཧղʹ Ϧιʔε͕ඞཁ
  5. σβΠϯ੒Ռ෺ TailwindͱSpindleΛ૊Έ߹Θͤͨ։ൃޮ཰Խ 02 Tailwind ηϚϯςΟοΫʹ ໋໊͞ΕͨτʔΫϯ܈ color-white font-xs font-avenir leading-20

    bg-red ɾ ɾ ɾ ։ൃ σβΠϯ Spindle Design Token ༻్ɾจ຺͕ߟྀ͞ΕͨτʔΫϯ Primitive Token จ຺Λ࣋ͨͳ͍τʔΫϯ Color Font-Size ɾ ɾ ɾ จ຺ʹμΠϨΫτʹ ΞΫηεͰ͖Δ
  6. 3DCG in LP 3DCGಋೖͷഎܠ 04 ɾٕज़త௅ઓ ɹαΠόʔΤʔδΣϯτ಺Ͱϒϥ΢βͰ3DCGΛϨϯμϦϯά͢ΔLP։ൃͷલྫ͕ͳ͔ͬͨ ɾલճͱͷҧ͍Λग़͢ ɹDeveloper Conference

    + CA BASE NEXT = ࠓճ ɹΠϯλϥΫγϣϯΛ૿΍͢ʁձ৔ʹ͍Δ͔ͷΑ͏ͳྟ৔ײΛग़͢ʁ ɾ2DCGͷύϥύϥອըͷ࢓૊ΈΛྲྀ༻ ɹʢ୅ʑҾ͖ܧ͕Ε͍ͯͨʣεΫϩʔϧΠϯλϥΫγϣϯ͸׆͔͢ ɹεΫϩʔϧͰมԽ͢Δ3DCG