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
130
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
820
Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Canary release using Lamdba@Edge
edwardkenfox
0
140
AWS re:Invent 2019 / Hackathon for Good 参加録
edwardkenfox
2
640
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
190
クライアントサイド開発の落とし穴 / 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
老害フォレンジッカーはAI羊の夢を見るか?
tadmaddad
0
310
20260807_第6回_関東kaggler会LT_claw系bot xangiと始める、"寂しくない" kaggle
sugupoko
0
220
Service Connect 上のサービスに ECS Service の外側から到達できなかった話
ota1022
1
190
TypeScript入門 2026
recruitengineers
PRO
3
500
モバイルアプリ開発概論2026
recruitengineers
PRO
5
510
【CEDEC2026】『GRANBLUE FANTASY: Relink - Endless Ragnarok』のバトル制作事例 ~最高のキャラゲーを目指して~
cygames
PRO
0
230
Goでデータパイプラインを作ろう
sansantech
PRO
1
360
Digitization部 紹介資料
sansan33
PRO
2
7.7k
AI時代の強いチームの作り方
yuukiyo
26
16k
社内の7割が使うデータ基盤を、 データチーム2人で回すためにやったこと
koh_yoshi
4
1.2k
トヨタ⽣産⽅式(TPS)⼊⾨
recruitengineers
PRO
3
660
Data Hubグループ 紹介資料
sansan33
PRO
0
3.2k
Featured
See All Featured
Color Theory Basics | Prateek | Gurzu
gurzu
0
410
Into the Great Unknown - MozCon
thekraken
41
2.7k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
2
450
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
2k
Impact Scores and Hybrid Strategies: The future of link building
tamaranovitovic
0
370
Visualization
eitanlees
152
17k
Ethics towards AI in product and experience design
skipperchong
2
340
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
chikuwait
0
690
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
tomoyanonymous
3
1.1k
The Spectacular Lies of Maps
axbom
PRO
1
890
Everyday Curiosity
cassininazir
0
270
Context Engineering - Making Every Token Count
addyosmani
9
1k
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 ౦ژͰ ձ͍·͠ΐ͏
͋Γ͕ͱ͏͍͟͝·ͨ͠