Upgrade to Pro — share decks privately, control downloads, hide ads and more …

使いどころがムズかしいChromeの機能オリンピック

Avatar for Edward Fox Edward Fox
February 21, 2018
Technology
0
120

 使いどころがムズかしいChromeの機能オリンピック

20180221 @社内LT会

Avatar for Edward Fox

Edward Fox

February 21, 2018
Tweet

More Decks by Edward Fox

See All by Edward Fox
Priorityを制するものはローディングを制す
Avatar for Edward Fox edwardkenfox
4
770
Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Canary release using Lamdba@Edge
Avatar for Edward Fox edwardkenfox
0
120
AWS re:Invent 2019 / Hackathon for Good 参加録
Avatar for Edward Fox edwardkenfox
2
590
Repro basketball club
Avatar for Edward Fox edwardkenfox
0
260
Introduction to UX Optimizer
Avatar for Edward Fox edwardkenfox
0
120
フロントエンド開発の落とし穴 / Fallacies of Client Side Programming (2019ver)
Avatar for Edward Fox edwardkenfox
0
340
僕とprototypeとJSONで / Me and prototype down by the JSON
Avatar for Edward Fox edwardkenfox
0
150
クライアントサイド開発の落とし穴 / Fallacies of Client Side Programming
Avatar for Edward Fox edwardkenfox
0
470
Beacon API ことはじめ 〜そしてkeepalive fetchへ〜 / Beacon API The Basics
Avatar for Edward Fox edwardkenfox
0
1.2k

Other Decks in Technology

See All in Technology
Everything As Code
Avatar for わいわい yosuke_ai
0
510
AWS re:Invent 2025 を振り返る
Avatar for kazzpapa3 kazzpapa3
2
110
AI Agent Standards and Protocols: a Walkthrough of MCP, A2A, and more...
Avatar for Guillaume Laforge glaforge
0
220
[PR] はじめてのデジタルアイデンティティという本を書きました
Avatar for ritou ritou
1
800
Contract One Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
12k
Redshift認可、アップデートでどう変わった？
Avatar for daiki.handa handy
1
140
Digitization部 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
6.5k
Keynoteから見るAWSの頭の中
Avatar for NRI Netcom nrinetcom
PRO
1
180
#22 CA × atmaCup 3rd 1st Place Solution
Avatar for yumizu yumizu
1
160
RALGO : AIを組織に組み込む方法 -アルゴリズム中心組織設計- #RSGT2026 / RALGO: How to Integrate AI into an Organization – Algorithm-Centric Organizational Design
Avatar for kyonmm kyonmm
PRO
3
1.1k
技術選定、下から見るか？横から見るか？
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
0
190
研究開発部メンバーの働き⽅ / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
4
21k

Featured

See All Featured
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
75
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
290
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
61
48k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.3k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
97
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
64
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k

Transcript

  1. ࢖͍Ͳ͜Ζ͕ Ϝζ͔͍͠ Chromeͷػೳ ΦϦϯϐοΫ Edward Fox 2018/02/21 @Repro ࣾ಺LTձ

  2. @edwardkenfox Edward Fox ɾΤϯδχΞ@Reproגࣜձࣾ ɾ୅ʑ໦ͷํ͔Βདྷ·ͨ͠ ɾRuby, JavaScript, AWS ɾϒϥ΢βٕज़શൠ, PWA,

    Vue.js

  3. ੈؒ͸ΦϦϯϐοΫͰ ੝Γ্͕ͬͯ·͕͢

  4. ࣮͸ͦͷཪͰ ͜ΜͳΦϦϯϐοΫ͕ ։࠵͞Ε͍ͯͨͷΛ ஌͍ͬͯ·͔ͨ͠ʁ

  5. ࢖͍Ͳ͜Ζ͕ Ϝζ͔͍͠ Chromeͷػೳ ΦϦϯϐοΫ

  6. ͨ͘͞Μͷڝٕͱ छ໨͕͋Γ·͕͢

  7. ͜͜Ͱ͸͍͔ͭ͘ͷछ໨ ͔ΒಔʙۚϝμϧΛ ϐοΫΞοϓͯ͠͝঺հ

  8. ಔϝμϧ

  9. ಔϝμϧ ʮconsole.log͸੝ΕΔʯ

  10. console.log͸೚ҙͷ ΦϒδΣΫτ΍จࣈྻΛ ίϯιʔϧʹग़ྗ͢Δͨ Ίͷϒϥ΢βAPIͱ ࢥΘΕ͍ͯ·͕͢

  11. ੝Ε·͢

  12. None
  13. None

  14. ʮ͓લͷconsole.log͸ ͭ·ΒΜʯ

  15. None
  16. None

  17. ੝ΕͯΔ

  18. ಔϝμϧड৆ͷཧ༝: ։ൃ࣌ʹ࢖͏͜ͱ͸ͳ͍

  19. ۜϝμϧ

  20. ۜϝμϧ ʮChrome(Desktop)͔Β Chrome(Android)ΛૢΔʯ

  21. DesktopʹChrome͕ೖͬͨ AndroidΛͭͳ͍Ͱ USBσόοάΛΦϯʹ͢Δͱɺ Desktop ChromeͰ Android Chromeͷ ϦϞʔτσόοά͕Ͱ͖Δػೳ

  22. ۜϝμϧड৆࣌ͷ༷ࢠΛ ݟͯΈ·͠ΐ͏ ʢσϞʣ

  23. ۜϝμϧड৆ͷཧ༝: ศར͚ͩͲ ϨΠΞ΢τܥͷσόοά͸ ΄΅DesktopͰ·͔ͳ͑Δ

  24. JSͷΤϯδϯ΋جຊಉ͚ͩ͡Ͳɺ Android ChromeʹͷΈϙʔτ͞Ε ͍ͯΔػೳΛσόοά͢Δͱ͖ ʹ͸ॏๅͦ͠͏

  25. ۚϝμϧ

  26. ۚϝμϧ ʮLayersʯ

  27. DOMߏ଄Λ 3DͰϏδϡΞϥΠζͯ͠ άϦάϦͰ͖Δػೳ

  28. ۚϝμϧड৆ͷԋٕΛ ݟͯΈ·͠ΐ͏ ʢσϞʣ

  29. None

  30. ۚϝμϧड৆ͷཧ༝: ͓΋͠Ζ͍͚Ͳ ΁ʙʙͬͯோΊΔ͘Β͍ ͔͠࢖Θͳ͔ͬͨ

  31. z-indexΛௐࠪͨ͠Γ parallaxͱ͔ͷࢹ֮ޮՌ ΛΰϦΰϦ࢖͏ͱ͖ʹ͸ ศར͔΋

  32. ͱ͍͏Θ͚Ͱ

  33. ΦϦϯϐοΫดձ

  34. ࣍͸2020೥ ౦ژͰ ձ͍·͠ΐ͏

  35. ͋Γ͕ͱ͏͍͟͝·ͨ͠