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
Cordova開発者が知っておきたいレンダリングエンジンの話 / HTML5 Conferen...
Search
久保田光則
July 04, 2015
Technology
4
1.7k
Cordova開発者が知っておきたいレンダリングエンジンの話 / HTML5 Conference 2015 in Kagoshima
HTML5カンファレンス2015in鹿児島での発表資料です。
久保田光則
July 04, 2015
Tweet
Share
More Decks by 久保田光則
See All by 久保田光則
サーバサイドだけでReact使う / React as Template Engine
anatoo
1
710
requestIdleCallback()による協調的バックグラウンド処理の実現 / requestIdleCallback()
anatoo
0
3.6k
Mastodonとその脱中央集権の仕組み
anatoo
11
21k
大量の要素を高速に表示するためのバーチャルレンダリング入門 / Virtual Rendering Introduction
anatoo
8
11k
PHPに型推論を実装する ~入門編~ / Type inference on PHP
anatoo
6
9.8k
PHPで学ぶVM型正規表現エンジンの仕組み
anatoo
8
7k
チームで作る!イケてるデザイン
anatoo
16
14k
Cordovaで作るHTML5ハイブリッドアプリ 〜開発ベストプラクティスを学ぶ〜
anatoo
27
18k
最新SPA開発を学ぼう! ウェブエンジニアのための AngularJS入門
anatoo
20
20k
Other Decks in Technology
See All in Technology
Automated Promptingを目指すその前に / Before we can aim for Automated Prompting
rkaga
0
110
visionOSでの空間表現実装とImmersive Video表示について / ai-immersive-visionos
cyberagentdevelopers
PRO
1
110
生成AIと知識グラフの相互利用に基づく文書解析
koujikozaki
1
140
Forget efficiency – Become more productive without the stress
ufried
0
110
現地でMeet Upをやる場合の注意点〜反省点を添えて〜
shotashiratori
0
520
ガバメントクラウド先行事業中間報告を読み解く
sugiim
1
1.2k
事業者間調整の行間を読む 調整の具体事例
sugiim
0
1.3k
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.6k
AIを駆使したゲーム開発戦略: 新設AI組織の取り組み / sge-ai-strategy
cyberagentdevelopers
PRO
1
130
30万人が利用するチャットをFirebase Realtime DatabaseからActionCableへ移行する方法
ryosk7
5
330
Figma Dev Modeで進化するデザインとエンジニアリングの協働 / figma-with-engineering
cyberagentdevelopers
PRO
1
430
CAMERA-Suite: 広告文生成のための評価スイート / ai-camera-suite
cyberagentdevelopers
PRO
3
270
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
296
20k
Faster Mobile Websites
deanohume
304
30k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Optimizing for Happiness
mojombo
376
69k
For a Future-Friendly Web
brad_frost
175
9.4k
Rails Girls Zürich Keynote
gr2m
93
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Thoughts on Productivity
jonyablonski
67
4.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
Statistics for Hackers
jakevdp
796
220k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Transcript
$PSEPWB։ൃऀ͕͓͖͍ͬͯͨ ϨϯμϦϯάΤϯδϯͷ )5.-ΧϯϑΝϨϯεJOࣛࣇౡ
‣ ٱอాޫଇ!BOBUPP ‣ 6*69σβΠφʔɺ ιϑτΣΞΤϯδχΞ ‣ ΞγΞϧגࣜձࣾ"TQFDUJWF--$ ࣗݾհ
None
ධൃചதʂ
None
IUUQPOTFOJP
ࠓ͢͜ͱ
͢͜ͱ ‣ ͳͥ$PSEPWB͔ ‣ Α͘ى͖Δ ‣ ϨϯμϦϯάͷྲྀΕ ‣ ΠϯλϥΫγϣϯͷߴԽ
‣ ΞχϝʔγϣϯͷߴԽ
ͳͥ$PSEPWB͔
‣ )5.-ϋΠϒϦουΞϓϦ։ൃ ͢ΔͨΊͷϑϨʔϜϫʔΫ
)5.-ϋΠϒϦουΞϓϦ ‣ ΞϓϦͱͯ͠ಈ࡞ ‣ ෦ͷ࣮ʹ)5.-Λར༻ ΞϓϦ ωΠςΟϒ )5.-
Έ ΞϓϦ HTML ಡΈࠐΈ WebView
)5.-ϋΠϒϦουΞϓϦ ͷԿ͕ྑ͍ͷ͔
ΫϩεϓϥοτϑΥʔϜੑ Android iOS
Σϒͷ͕ࣝ׆͔ͤΔ
ετΞͰͷ ‣ ֎ݟී௨ͷΞϓϦͳͷͰɺετΞͰ Մೳ
ωΠςΟϒͷػೳͷݺͼग़͠ ‣ +BWB4DSJQU͔Β04ͷ"1*Λݺͼग़͠Մೳ Android / iOS OS API
$PSEPWBͷఏڙ͢ΔϓϥάΠϯ ‣ ͞Βʹ$PSEPWBϓϥάΠϯͷ ΈΛ͑͜ΕҎ֎ͷ͜ͱՄೳ ϑΝΠϧετϨʔδɺΧϝϥɺίϯύε ՃηϯαʔɺίϯλΫτϦετɺ ҐஔใऔಘɺωοτϫʔΫɺ#MVFUPPUI௨৴ɺ "OESPJEͷΠϯςϯτɺΞϓϦϒϥβɺ (14ɺ/'$ɺFUDʜ
Α͘ى͜Δ
‣ ύϑΥʔϚϯε͕ѱ͍ ‣ ωΠςΟϒΞϓϦͬΆ͘ͳΒͳ͍ ‣ ಈ͖͕ͬ͞Γ͍ͯ͠Δ
ղܾࡦ
‣ ࠷ॳ͔Β͘ಈ͘Α͏ʹॻ͘ ‣ ॻ͍ͨޙʹνϡʔχϯά͢Δ PS
࠷ॳ͔Β͘ॻ͘ ‣ ࠷ॳ͔Β͍ʹͨ͜͜͠ͱແ͍ ‣ τϨʔυΦϑ͕͋·Γແ͍ ϕετϓϥΫςΟεΛ౿ऻ͢Δ
ॻ͍ͨޙʹνϡʔχϯά͢Δ ‣ ͕ग़͔ͯΒղܾ͢Δ ‣ ܭଌͯ͠ϘτϧωοΫΛಛఆɺ࠷దԽ
‣ "OESPJEͰ$ISPNFɺJ04Ͱ4BGBSJͷΠϯεϖ ΫλΛར༻ ‣ ϘτϧωοΫΛಛఆͯ͠࠷దԽ
‣ ͲͪΒΛΔʹͯ͠ ϨϯμϦϯάͷྲྀΕͷѲඞਢ
XFCLJUܥΤϯδϯͷ ϨϯμϦϯάͷྲྀΕ
ϨϯμϦϯάͷఔ }GSBNF ඳը͕࢝·ͬͯऴΘΔ·Ͱ͕GSBNF Loading Scripting Rendering Painting
Loading Scripting Rendering Painting
Loading ϦιʔεͷಡΈࠐΈ Ϧιʔεͷύʔε {
ϦιʔεͷಡΈࠐΈ ‣ )5.- $44 +4 ը૾ͳͲ ϑΝΠϧΛϩʔυ͢Δ ‣ ௨ৗͷΣϒͰωοτϫʔΫӽ͠ͷ Ϧιʔεͷऔಘ
Ϧιʔεͷύʔε ‣ ಡΈࠐΈ͕ऴΘͬͨΒɺύʔε͢Δ ‣ ϒϥβͷ෦දݱม
‣ )5.-%0.πϦʔʹม͞ΕΔ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> IUUQXXXIUNMSPDLTDPNFOUVUPSJBMTJOUFSOBMTIPXCSPXTFSTXPSL )5.-
$44 ‣ $44$440.πϦʔʹม͞ΕΔ body { color: black; } .container {
width: 920px; IUUQXXXIUNMSPDLTDPNFOUVUPSJBMTJOUFSOBMTIPXCSPXTFSTXPSL
+BWB4DSJQU ‣ +BWB4DSJQU࣮ߦՄೳͳදݱʹίϯύΠϧ ‣ +*5ίϯύΠϧͰػցޠʹม͞ΕͨΓ
௨ৗͷΣϒͷ߹ ‣ ϦιʔεͷಡΈࠐΈ͕ѹతʹ͍ ‣ ը૾ͷ࠷దԽ ‣ )5.-$44+4ͷѹॖ ‣ ಡΈࠐΈॱংͷ࠷దԽ
ϋΠϒϦουΞϓϦͷ߹ ‣ ϦιʔεಡΈࠐΈ͋·ΓʹͳΒͳ͍ ‣ ͢ͰʹϚγϯʹϦιʔε͕͋Δ͔Β ‣ ύʔεϘτϧωοΫʹͳΒͳ͍
Loading Scripting Rendering Painting
‣ +BWB4DSJQU͍ɻ جຊతʹͦΕ΄ͲʹͳΒͳ͍ɻ
‣ ܭࢉྔͷଟ͍ॲཧ ‣ DBOWBTͷඳը ‣ MBZPVUΛಉظతʹڧ੍͢Δίʔυ ʹͳΔέʔε
4DSJQUJOH͕ϘτϧωοΫͩͬͨΒ ‣ ؆୯ 1SPpMFTλϒͰ͞Βʹܭଌ
‣ #PUUPN6Qͷ4FMGཝɻॏ͍ͨؔΛಛఆ
ಉظతͳ-BZPVUͷڧ੍Λආ͚Δ ‣ UJNFMJOFͰ͜Ε͕ग़ͨΒҙ IUUQTEFWFMPQFSDISPNFDPNEFWUPPMTEPDTEFNPTUPPNVDIMBZPVU
ಉظతͳMBZPVUͷڧ੍ͷྫ ‣ ཁૉͷҐஔαΠζΛઃఆͭͭ͠P⒎TFU5PQ HFU#PVOEJOH$MJFOU3FDU Λࢀর͢Δͱى͜Δ for(var m = 0; m
< movers.length; m++) { movers[m].style.left = movers[m].offsetTop + 'px'; }
Loading Scripting Rendering Painting
Rendering ϦιʔεͷಡΈࠐΈ Ϧιʔεͷύʔε Calculate Style Layout {
$BMDVMBUF4UZMF ‣ ݸผͷ%0.ཁૉʹରͯ͠ɺͨΔελΠ ϧΛܭࢉ͢Δ ‣ $440.πϦʔͱ%0.πϦʔΛࢀরͯ͠ɺ ϚονϯάॲཧΛߦ͏
$44ϧʔϧͷϚονϯά %0.ཁૉ ʷ $44ϧʔϧ ॲཧճ ‣ ૯ΓͰॲཧ͍ͯ͘͠ ‣ %0.ཁૉͱϧʔϧͷ
গͳ͚Εগͳ͍΄Ͳྑ͍
ྑ͘ͳ͍ηϨΫλͷॻ͖ํ ‣ ࢠ ଙ ηϨΫλආ͚Δ ‣ %0.ཁૉͷΛḷ͍ͬͯ͘ඞཁ͕༗ΔͨΊ body .foo .bar
.hoge { … }
ྑ͍ηϨΫλͷॻ͖ํ ‣ %0.ཁૉΛճݟΔ͚ͩ ‣ อकੑͷͰྑ͍ .foo-bar-hoge { … }
نʹ#&.Λ͓͏ ‣ ࢠ ଙ ηϨΫλ͕ࣗಈతʹແ͘ͳΓߴʹ
$44ϧʔϧͷϚονϯάॲཧ അࣛʹͳΒͳ͍ ‣ %0.ૢ࡞͢Δͨͼʹॲཧ͕ΔͨΊ ‣ ΠϯλϥΫγϣϯΛ͘͢ΔͨΊʹ͜ ͷॲཧ͘͢Δඞཁ͋Γ
-BZPVU ‣ ͦΕͧΕͷ%0.ཁૉͷϨΠΞτใΛ ܭࢉ͢ΔϑΣʔζ
-BZPVUͷ࠷ѱͷγφϦΦ ‣ %0.ૢ࡞$44ϓϩύςΟΛมߋͨ࣌͠ ‣ -BZPVUॲཧ͕Ҿ͖ى͜͞Εɺશͯͷ%0. ཁૉͷϨΠΞτܭࢉ͕࠶ߦΘΕΔ
ཁૉͷαΠζΛͳΔ͘ݻఆ͢Δ ‣ ϨΠΞτܭࢉΛͳΔ͘গͳ͘͢ΔͨΊ .foobar { width: 100px; height: 200px; }
BCTPMVUFϨΠΞτΛੵۃతʹ͏ ‣ ϨΠΞτܭࢉΛͳΔ͘গͳ͘͢ΔͨΊ .piyo { position: absolute; top: 200px; left:
400px; }
ը૾ͷαΠζඞͣࢦఆ͢Δ ‣ -BZPVUͷΓͳ͓͠Λ͙ͨΊ <img src=“foo.png” width=“300” height=“299”>
Loading Scripting Rendering Painting
ϦιʔεͷಡΈࠐΈ Ϧιʔεͷύʔε Paint Rasterize { Painting Composite Layers
1BJOU ‣ %JTQMBZ-JTU $ISPNJVNͩͱ4LJBͷ໋ྩ ͷੜ͢ΔϑΣʔζ ‣ جຊʹͳΒͳ͍
3BTUFSJ[F ‣ ੜͨ͠%JTQMBZ-JTUΛ࣮ߦ࣮ͯ͠ࡍʹϐΫη ϧԽ͢ΔϑΣʔζ ‣ ॏ͍ͨ$44ϓϩύςΟ͕͔͔ͬͯΔͱ͕࣌ؒ ͔͔Δ ‣ CPYTIBEPXCPSEFSSBEJVT ‣
$ISPNJVNͩͱ4LJB%FCVHHFSͰ֬ೝͰ͖Δ
$PNQPTJUF-BZFST ‣ 3BTUFSJ[F֤ͨ͠ϨΠϠʔΛ߹͢ΔϑΣʔ ζ ‣ [JOEFYpYFEQPTJUJPOͳͲʹԠͯ͡Ұຕ ֆʹ͢Δ
Ҏ্ ‣ ϨϯμϦϯάͷఔ͜ͷ̐ͭ Loading Scripting Rendering Painting
ΠϯλϥΫγϣϯΛ ͘͢Δ
ΠϯλϥΫγϣϯͱ ‣ ϢʔβͷΞΫγϣϯʹԠͯ͡ը໘্ʹ ද͞ΕΔϨεϙϯε ‣ GSBNFΛNTఔҎԼʹ͑Δ Button
جຊతͳߟ͑ํ ‣ 4DSJQUJOHҎԼͷఔΛ͘͢Δ Rendering Painting { Paint Rasterize Composite Layers
Calculate Style Layout { Scripting
ΞχϝʔγϣϯΛ ͘͢Δ
ΞχϝʔγϣϯΛ͘͢Δ ‣ $445SBOTJUJPOSFRVFTU"OJNBUJPO'SBNF ͰͷΞχϝʔγϣϯ ‣ GSBNFΛNTҎԼʹ͑Δ '14
جຊతͳߟ͑ํ ‣ 4DSJQUJOHҎ֎$PNQPTJUF-BZFSTͷΈΛ ΒͤΔΑ͏ʹ͢Δ Paint Rasterize { Composite Layers Painting
ΞχϝʔγϣϯγϏΞ ‣ %0.ૢ࡞ͨ͠Γɺ-BZPVUΛҾ͖ىͨ͜͠ Γ͢ΔͱϞόΠϧͩͱશ͍͘ͷʹͳ Βͳ͍ ‣ ΞχϝʔγϣϯதUSBOTGPSNͱPQBDJUZ͠ ͔͍͡Βͳ͍ͷ͕٢
(16Λ׆༻͢Δ ‣ USBOTGPSNελΠϧଐੑʹɺ USBOTMBUFE ΛؚΊ͓ͯ͘ ‣ $PNQPTJUF-BZFSTॲཧ࣌ʹ(16Ͱ߹͞
ΕΔΑ͏ʹͳΔ
ิ$44ϓϩύςΟͷมߋ
$44ϓϩύςΟͷมߋ͢Δͱ Կ͕ى͜Δ ‣ $44ϓϩύςΟʹΑͬͯҧ͏ ‣ XJEUINBSHJOͳͲཁૉͷେ͖͞Ґஔͷมߋ ‣ -BZPVU͔Βॲཧ͕࢝·Δ ‣ USBOTGPSNPQBDJUZΛมߋ
‣ $PNQPTJUF-BZFSTͷΈΔ
$445SJHHFSTͷհ ‣ $44ϓϩύςΟͷมߋ͕ ԿΛҾ͖ى͔͜͢ཏ IUUQDTTUSJHHFSTDPN
·ͱΊ
ϨϯμϦϯάͷఔ Loading Scripting Rendering Painting ‣ ͦΕͧΕׂ͕͋Γνϡʔχϯάํ๏ҧ͏
ΠϯλϥΫγϣϯΛ͘͢Δ Rendering Painting ‣ 4DSJQUJOHҎԼΛ͘͢Δ Scripting
ΞχϝʔγϣϯΛ͘͢Δ ‣ $PNQPTJUF-BZFSTͷΈΒͤΔ Paint Rasterize { Composite Layers Painting
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠