Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
使いどころがムズかしいChromeの機能オリンピック
Search
Edward Fox
February 21, 2018
Technology
120
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
使いどころがムズかしいChromeの機能オリンピック
20180221 @社内LT会
Edward Fox
February 21, 2018
More Decks by Edward Fox
See All by Edward Fox
Priorityを制するものはローディングを制す
edwardkenfox
4
810
Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Canary release using Lamdba@Edge
edwardkenfox
0
130
AWS re:Invent 2019 / Hackathon for Good 参加録
edwardkenfox
2
630
Repro basketball club
edwardkenfox
0
290
Introduction to UX Optimizer
edwardkenfox
0
150
フロントエンド開発の落とし穴 / Fallacies of Client Side Programming (2019ver)
edwardkenfox
0
370
僕とprototypeとJSONで / Me and prototype down by the JSON
edwardkenfox
0
180
クライアントサイド開発の落とし穴 / Fallacies of Client Side Programming
edwardkenfox
0
520
Beacon API ことはじめ 〜そしてkeepalive fetchへ〜 / Beacon API The Basics
edwardkenfox
0
1.2k
Other Decks in Technology
See All in Technology
「ビジネスがわかるエンジニア」とは何か?
ryooob
0
130
【Snowflake Summit 2026 Recap!!】Snowflake Summit Deep Dive: Security & Governance
civitaspo
1
280
SONiCのLinuxベースを活かしたZabbix監視
sonic
0
260
アジャイルな経理と Claude Code と経営の未来
kawaguti
PRO
3
170
気軽に使える"情報のハブ"としてのNotion活用 〜フロー情報の集積点 と、 Claude Code × Notion AI〜
syucream
1
160
入門!AWS Blocks
ysuzuki
1
170
螺旋型キャリアの生存戦略 / kinoko-conf2026
rakus_dev
0
490
ザ・データベース、MySQL ~ OSC 2026 Sendai ~
sakaik
0
160
マルチアカウント環境での コーディングエージェントを使った障害調査が大変なので AIエージェントにReadOnly権限を付与してみた / ReadOnly AI Agents for Multi-Account AWS Incident Response
yamaguchitk333
2
120
Oracle Cloud Infrastructure:2026年6月度サービス・アップデート
oracle4engineer
PRO
0
180
“詰む”前に仕組みを作れ 〜技術の波に溺れないためのキャッチアップ術〜
takasyou
5
2.3k
新しいUbuntu/GNOMEが使いたいからXからWaylandへ移行頑張ってるの巻 2026-06-20
nobutomurata
0
160
Featured
See All Featured
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
340
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
marcoroth
1
210
Darren the Foodie - Storyboard
khoart
PRO
3
3.4k
Abbi's Birthday
coloredviolet
2
8.1k
The agentic SEO stack - context over prompts
schlessera
0
820
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
56k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
190
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
750
The Curious Case for Waylosing
cassininazir
1
400
Building Applications with DynamoDB
mza
96
7.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
201
75k
For a Future-Friendly Web
brad_frost
183
10k
Transcript
͍Ͳ͜Ζ͕ Ϝζ͔͍͠ Chromeͷػೳ ΦϦϯϐοΫ Edward Fox 2018/02/21 @Repro ࣾLTձ
@edwardkenfox Edward Fox ɾΤϯδχΞ@Reproגࣜձࣾ ɾʑͷํ͔Βདྷ·ͨ͠ ɾRuby, JavaScript, AWS ɾϒϥβٕज़શൠ, PWA,
Vue.js
ੈؒΦϦϯϐοΫͰ Γ্͕ͬͯ·͕͢
࣮ͦͷཪͰ ͜ΜͳΦϦϯϐοΫ͕ ։࠵͞Ε͍ͯͨͷΛ ͍ͬͯ·͔ͨ͠ʁ
͍Ͳ͜Ζ͕ Ϝζ͔͍͠ Chromeͷػೳ ΦϦϯϐοΫ
ͨ͘͞Μͷڝٕͱ छ͕͋Γ·͕͢
͜͜Ͱ͍͔ͭ͘ͷछ ͔ΒಔʙۚϝμϧΛ ϐοΫΞοϓͯ͠͝հ
ಔϝμϧ
ಔϝμϧ ʮconsole.logΕΔʯ
console.logҙͷ ΦϒδΣΫτจࣈྻΛ ίϯιʔϧʹग़ྗ͢Δͨ ΊͷϒϥβAPIͱ ࢥΘΕ͍ͯ·͕͢
Ε·͢
None
None
ʮ͓લͷconsole.log ͭ·ΒΜʯ
None
None
ΕͯΔ
ಔϝμϧडͷཧ༝: ։ൃ࣌ʹ͏͜ͱͳ͍
ۜϝμϧ
ۜϝμϧ ʮChrome(Desktop)͔Β Chrome(Android)ΛૢΔʯ
DesktopʹChrome͕ೖͬͨ AndroidΛͭͳ͍Ͱ USBσόοάΛΦϯʹ͢Δͱɺ Desktop ChromeͰ Android Chromeͷ ϦϞʔτσόοά͕Ͱ͖Δػೳ
ۜϝμϧड࣌ͷ༷ࢠΛ ݟͯΈ·͠ΐ͏ ʢσϞʣ
ۜϝμϧडͷཧ༝: ศར͚ͩͲ ϨΠΞτܥͷσόοά ΄΅DesktopͰ·͔ͳ͑Δ
JSͷΤϯδϯجຊಉ͚ͩ͡Ͳɺ Android ChromeʹͷΈϙʔτ͞Ε ͍ͯΔػೳΛσόοά͢Δͱ͖ ʹॏๅͦ͠͏
ۚϝμϧ
ۚϝμϧ ʮLayersʯ
DOMߏΛ 3DͰϏδϡΞϥΠζͯ͠ άϦάϦͰ͖Δػೳ
ۚϝμϧडͷԋٕΛ ݟͯΈ·͠ΐ͏ ʢσϞʣ
None
ۚϝμϧडͷཧ༝: ͓͠Ζ͍͚Ͳ ʙʙͬͯோΊΔ͘Β͍ ͔͠Θͳ͔ͬͨ
z-indexΛௐࠪͨ͠Γ parallaxͱ͔ͷࢹ֮ޮՌ ΛΰϦΰϦ͏ͱ͖ʹ ศར͔
ͱ͍͏Θ͚Ͱ
ΦϦϯϐοΫดձ
࣍2020 ౦ژͰ ձ͍·͠ΐ͏
͋Γ͕ͱ͏͍͟͝·ͨ͠