Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

使いどころがムズかしい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
130
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
830
Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Canary release using Lamdba@Edge
Avatar for Edward Fox edwardkenfox
0
150
AWS re:Invent 2019 / Hackathon for Good 参加録
Avatar for Edward Fox edwardkenfox
2
640
Repro basketball club
Avatar for Edward Fox edwardkenfox
0
310
Introduction to UX Optimizer
Avatar for Edward Fox edwardkenfox
0
160
フロントエンド開発の落とし穴 / Fallacies of Client Side Programming (2019ver)
Avatar for Edward Fox edwardkenfox
0
380
僕とprototypeとJSONで / Me and prototype down by the JSON
Avatar for Edward Fox edwardkenfox
0
200
クライアントサイド開発の落とし穴 / Fallacies of Client Side Programming
Avatar for Edward Fox edwardkenfox
0
530
Beacon API ことはじめ 〜そしてkeepalive fetchへ〜 / Beacon API The Basics
Avatar for Edward Fox edwardkenfox
0
1.2k

Other Decks in Technology

See All in Technology
ファミコンでPHPを動かす / PHP on the Famicom side b
Avatar for HASEGAWA Tomoki tomzoh
0
140
Loop Engineering これくらいでいい
Avatar for mikan mikanichinose
0
200
転んだ話が背中を預ける理由になる / A_story_about_falling_down_gives_you_a_reason_to_watch_each_other_s_backs.pdf
Avatar for Pauli pauli
3
350
全人類（ほぼ）AWS Organizations の上でAWSを利用している、その世界を知る話
Avatar for Hayato Tan htan
1
130
AI時代だからこそ推したい！Gitコマンド再入門
Avatar for ムナカタ munakata
0
170
ハードウェアコンペでもAI駆動開発が進んでいる話
Avatar for misoji engineer iotengineer22
1
670
OSC2026on_the-world-is-waiting-for-your-voice.pdf
Avatar for Naruhiko Ogasawara naruoga
0
370
無理せず続ける、子育てエンジニアの学び
Avatar for コドモン開発チーム codmoninc
PRO
0
620
自作バイナリを動かす「入口」8選
Avatar for Takumi Sueda puhitaku
2
1.2k
Datadog の学び方 - あるいは、オブザーバビリティを学ぶとは何か
Avatar for iwa mananyuki
1
530
SDDの運用にめげずに向き合った話
Avatar for SansanTech sansantech
PRO
1
140
予測不能な実行エージェントを安全にサクッと試せるサンドボックス環境の話
Avatar for SansanTech sansantech
PRO
1
140

Featured

See All Featured
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
590
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.6k
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
510
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
41k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
69
67k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
2.7k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
280
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
3
1.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
232
55k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k

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