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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Edward Fox Edward Fox
February 21, 2018
Technology
120
0

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

20180221 @社内LT会

Avatar for Edward Fox

Edward Fox

February 21, 2018

More Decks by Edward Fox

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

Other Decks in Technology

See All in Technology
AI時代 に増える データ活用先
Avatar for ono.takayuki takahal
0
230
プラットフォームエンジニアリングの実践 - AWS コンテナサービスで構築する社内プラットフォーム / AWS Containers Platform Meetup #1
Avatar for Masatoshi Hayashi literalice
1
160
小説執筆のハーネスエンジニアリング
Avatar for osushi_cr yoshitetsu
0
690
ネットワーク運用を楽にするAWS DevOps Agent活用法！！ / 20260421 Masaki Okuda
Avatar for SHIFT EVOLVE shift_evolve
PRO
2
210
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
Avatar for Sansan, Inc. sansan33
PRO
0
3.1k
ぼくがかんがえたさいきょうのあうとぷっと
Avatar for Yuuki Yamashita yama3133
0
190
Rapid Start: Faster Internet Connections, with Ruby's Help
Avatar for kazuho kazuho
2
550
自分のハンドルは自分で握れ！ ― 自分のケイパビリティを増やし、メンバーのケイパビリティ獲得を支援する ― / Take the wheel yourself
Avatar for TAKAKING22 takaking22
1
910
AgentCore×VPCでの設計パターンn選と勘所
Avatar for Har1101 har1101
3
280
Rebirth of Software Craftsmanship in the AI Era
Avatar for Lemi Orhan Ergin lemiorhan
PRO
4
2k
AIを共同作業者にして書籍を執筆する方法 / How to Write a Book with AI as a Co-Creator
Avatar for ama-ch ama_ch
2
130
Eight Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
3
7.3k

Featured

See All Featured
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3k
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
830
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
100
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
530
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
94
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
520
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
320
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
330

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. ͋Γ͕ͱ͏͍͟͝·ͨ͠