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
0
110
使いどころがムズかしいChromeの機能オリンピック
20180221 @社内LT会
Edward Fox
February 21, 2018
Tweet
Share
More Decks by Edward Fox
See All by Edward Fox
Priorityを制するものはローディングを制す
edwardkenfox
4
700
Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Canary release using Lamdba@Edge
edwardkenfox
0
89
AWS re:Invent 2019 / Hackathon for Good 参加録
edwardkenfox
2
570
Repro basketball club
edwardkenfox
0
240
Introduction to UX Optimizer
edwardkenfox
0
97
フロントエンド開発の落とし穴 / Fallacies of Client Side Programming (2019ver)
edwardkenfox
0
310
僕とprototypeとJSONで / Me and prototype down by the JSON
edwardkenfox
0
130
クライアントサイド開発の落とし穴 / Fallacies of Client Side Programming
edwardkenfox
0
430
Beacon API ことはじめ 〜そしてkeepalive fetchへ〜 / Beacon API The Basics
edwardkenfox
0
1.1k
Other Decks in Technology
See All in Technology
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
18k
asken AI勉強会(Android)
tadashi_sato
0
170
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.5k
作曲家がボカロを使うようにPdMはAIを使え
itotaxi
0
430
怖くない!はじめてのClaude Code
shinya337
0
360
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
320
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
1
13k
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.3k
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
790
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
180
KiCadでPad on Viaの基板作ってみた
iotengineer22
0
280
AI導入の理想と現実~コストと浸透〜
oprstchn
0
180
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Building an army of robots
kneath
306
45k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
KATA
mclloyd
30
14k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
810
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
4 Signs Your Business is Dying
shpigford
184
22k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
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 ౦ژͰ ձ͍·͠ΐ͏
͋Γ͕ͱ͏͍͟͝·ͨ͠