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

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

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

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

Other Decks in Technology

See All in Technology
セキュアな社内Dify運用と外部連携の両立 ~AIによるAPIリスク評価~
Avatar for ZOZO Developers zozotech
PRO
0
120
AI Ready API ─ AI時代に求められるAPI設計とは？/ AI-Ready API - Designing MCP and APIs in the AI Era
Avatar for Yoichi Kawasaki yokawasa
8
2.3k
組織内、組織間の資産保護に必要なアイデンティティ基盤と関連技術の最新動向
Avatar for Naohiro Fujie fujie
0
280
Transformerを用いたアイテム間の 相互影響を考慮したレコメンドリスト生成
Avatar for Recruit recruitengineers
PRO
2
440
サイバーエージェントグループのSRE10年の歩みとAI時代の生存戦略
Avatar for shotaTsuge shotatsuge
4
1k
“日本一のM&A企業”を支える、少人数SREの効率化戦略 / SRE NEXT 2025
Avatar for GENDA genda
1
270
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
Avatar for jackal5647 aaguide
0
500
ClaudeCode_vs_GeminiCLI_Terraformで比較してみた
Avatar for t-kikuchi tkikuchi
1
1.2k
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
Avatar for VTRyo vtryo
3
1.9k
CDK Vibe Coding Fes
Avatar for tomoki10 tomoki10
1
630
SREのためのeBPF活用ステップアップガイド
Avatar for Sohei Iwahori egmc
2
1.3k
20250718_ITSurf_“Bet AI”を支える文化とコストマネジメント
Avatar for helosshi helosshi
0
100

Featured

See All Featured
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
695
190k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
48
2.9k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
58
9.5k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
2.9k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
30
5.9k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
A better future with KSS
Avatar for Kyle Neath kneath
238
17k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
331
22k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3.1k

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