Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
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
760
Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Canary release using Lamdba@Edge
edwardkenfox
0
110
AWS re:Invent 2019 / Hackathon for Good 参加録
edwardkenfox
2
590
Repro basketball club
edwardkenfox
0
250
Introduction to UX Optimizer
edwardkenfox
0
120
フロントエンド開発の落とし穴 / Fallacies of Client Side Programming (2019ver)
edwardkenfox
0
340
僕とprototypeとJSONで / Me and prototype down by the JSON
edwardkenfox
0
150
クライアントサイド開発の落とし穴 / Fallacies of Client Side Programming
edwardkenfox
0
460
Beacon API ことはじめ 〜そしてkeepalive fetchへ〜 / Beacon API The Basics
edwardkenfox
0
1.2k
Other Decks in Technology
See All in Technology
AI時代の新規LLMプロダクト開発: Findy Insightsを3ヶ月で立ち上げた舞台裏と振り返り
dakuon
0
230
「図面」から「法則」へ 〜メタ視点で読み解く現代のソフトウェアアーキテクチャ〜
scova0731
0
370
2025-12-18_AI駆動開発推進プロジェクト運営について / AIDD-Promotion project management
yayoi_dd
0
120
会社紹介資料 / Sansan Company Profile
sansan33
PRO
11
390k
生成AI活用の型ハンズオン〜顧客課題起点で設計する7つのステップ
yushin_n
0
250
AlmaLinux + KVM + Cockpit で始めるお手軽仮想化基盤 ~ 開発環境などでの利用を想定して ~
koedoyoshida
0
120
re:Invent2025 コンテナ系アップデート振り返り(+CloudWatchログのアップデート紹介)
masukawa
0
390
チーリンについて
hirotomotaguchi
6
2.1k
品質のための共通認識
kakehashi
PRO
4
380
1人1サービス開発しているチームでのClaudeCodeの使い方
noayaoshiro
2
440
Amazon Quick Suite で始める手軽な AI エージェント
shimy
0
570
生成AI時代におけるグローバル戦略思考
taka_aki
0
210
Featured
See All Featured
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
400
SEO for Brand Visibility & Recognition
aleyda
0
4.1k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
2
2.7k
What does AI have to do with Human Rights?
axbom
PRO
0
1.9k
Applied NLP in the Age of Generative AI
inesmontani
PRO
3
1.9k
How to Talk to Developers About Accessibility
jct
1
81
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
29
Stop Working from a Prison Cell
hatefulcrawdad
273
21k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
0
110
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
1.6k
Done Done
chrislema
186
16k
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 ౦ژͰ ձ͍·͠ΐ͏
͋Γ͕ͱ͏͍͟͝·ͨ͠