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
使いどころがムズかしい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
140
フロントエンド開発の落とし穴 / 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
510
Beacon API ことはじめ 〜そしてkeepalive fetchへ〜 / Beacon API The Basics
edwardkenfox
0
1.2k
Other Decks in Technology
See All in Technology
AI-DLCを活用した高品質・安全なAI駆動開発実践 / AI Driven Development
yoshidashingo
1
290
Spring AI × MCP 入門〜AIエージェントへのツール公開、境界設計から始める最小構成 〜
yuyamiyamoto
0
190
Oracle AI Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
6
1.5k
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
5
1.8k
大学生が本気でDatabricksを活用してDiscordサークルをデータ駆動させてみた
phantomjuju
1
310
海外カンファレンス「JavaOne」参加レポート ユーザー系IT企業における目的・成果/JavaOne Report Purpose and Results in the User IT Company
muit
0
120
Spring Boot における AOT Cache 活用テクニックと 起動時間改善事例
ntt_dsol_java
0
190
Oracle AI Database@AWS:サービス概要のご紹介
oracle4engineer
PRO
4
2.8k
新規ゲーム開発におけるAI駆動開発のリアル
202409e2
0
540
TypeScript Compiler APIとPHP-Parserを活用し、TypeScriptとPHPで型を共有する
shuta13
0
300
開発を止めない CI/CD ~CI Visibilityによる継続的最適化~
pensuke628
0
230
Ruby::Boxでできること、Refinementsでできること
joker1007
2
300
Featured
See All Featured
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
1
130
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.7k
Odyssey Design
rkendrick25
PRO
2
660
Designing Powerful Visuals for Engaging Learning
tmiket
1
390
A Soul's Torment
seathinner
6
2.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
A Tale of Four Properties
chriscoyier
163
24k
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
220
Chasing Engaging Ingredients in Design
codingconduct
0
200
sira's awesome portfolio website redesign presentation
elsirapls
0
270
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
3
3.5k
How to Talk to Developers About Accessibility
jct
2
210
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 ౦ژͰ ձ͍·͠ΐ͏
͋Γ͕ͱ͏͍͟͝·ͨ͠