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

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

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

Other Decks in Technology

See All in Technology
あなたの『Site』はどこですか？ — xREという考え方
Avatar for miyamu miyamu
0
1.2k
LLMやAIエージェントをソフトウェアに組み込むプラクティス
Avatar for shibuiwilliam shibuiwilliam
2
420
Amplify Gen2でbackend.tsにCDKを定義する/しない事によるCDKの挙動の違いとユースケース
Avatar for Makky12 smt7174
1
400
穢れた技術選定について
Avatar for watany watany
17
5.5k
ヘルスケア領域における AI 活用と その安全性担保のための取り組み (Leveraging AI in Healthcare and Our Efforts to Ensure Its Safety) - Google I/O Extended Tokyo 2026, July 11, 2026
Avatar for Akira Tameoka zettaittenani
0
420
カードゲーム作りが教えてくれた プロダクトオーナーシップ
Avatar for Sammy(MoritaMasami) moritamasami
0
110
CIで使うClaude
Avatar for TomoyaIwata iwatatomoya
0
290
壊して学ぶAWS CDK: そのcdk deployで消えるもの、残るもの
Avatar for Kazuki Adachi k_adachi_01
1
390
OPENLOGI Company Profile for engineer
Avatar for OPENLOGI hr01
1
74k
ZOZOTOWNの進化と信頼性を両立する負荷試験
Avatar for ZOZO Developers zozotech
PRO
2
190
Terraform共通モジュールをチーム横断で“変えられる”運用へ ― リリースと適用の分離
Avatar for kekke-n kekke_n
1
3.3k
ruby.wasmとPicoRuby.wasmに対応した仮想DOMライブラリを作ってる話 #kaigieffect_kaigi
Avatar for sue445 sue445
PRO
0
150

Featured

See All Featured
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.8k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
450
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
220
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
590
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
72
40k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.6k
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
330
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.4k
Abbi's Birthday
Avatar for Violet Bock coloredviolet
3
8.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.3k

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