Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cordova開発者が知っておきたいレンダリングエンジンの話 / HTML5 Conference 2015 in Kagoshima

F7dd7b43a0cc6c063f7d98ba23a1d359?s=47 久保田光則
July 04, 2015
Technology
4
1.3k

Cordova開発者が知っておきたいレンダリングエンジンの話 / HTML5 Conference 2015 in Kagoshima

HTML5カンファレンス2015in鹿児島での発表資料です。

F7dd7b43a0cc6c063f7d98ba23a1d359?s=128

久保田光則

July 04, 2015
Tweet

More Decks by 久保田光則

See All by 久保田光則
F7dd7b43a0cc6c063f7d98ba23a1d359?s=48 anatoo
1
290
F7dd7b43a0cc6c063f7d98ba23a1d359?s=48 anatoo
0
2.6k
F7dd7b43a0cc6c063f7d98ba23a1d359?s=48 anatoo
11
19k
F7dd7b43a0cc6c063f7d98ba23a1d359?s=48 anatoo
8
8.4k
F7dd7b43a0cc6c063f7d98ba23a1d359?s=48 anatoo
6
8.6k
F7dd7b43a0cc6c063f7d98ba23a1d359?s=48 anatoo
8
6k
F7dd7b43a0cc6c063f7d98ba23a1d359?s=48 anatoo
16
13k
F7dd7b43a0cc6c063f7d98ba23a1d359?s=48 anatoo
27
17k
F7dd7b43a0cc6c063f7d98ba23a1d359?s=48 anatoo
20
19k

Other Decks in Technology

See All in Technology
0d29d155ce5c5a93ed46363626da3ea7?s=48 ocise
0
180
A500dfe11c36aa2912eaf33176fe129f?s=48 oyakata2438
0
200
0e20ab5db11ca70d818a4f10bfea9c9c?s=48 ymas0315
0
180
8a7e83d2e447783ab6d824f553429a09?s=48 stakaya
14
8.4k
0d29d155ce5c5a93ed46363626da3ea7?s=48 ocise
0
160
71c9ebde850996d2533c5df4df2c93c6?s=48 opdavies
0
1.6k
3f5ae6480375e527d01ee337d6c30a5f?s=48 sasakendayo
2
440
E8fe0220162ea15aab7ec96690cc437a?s=48 pinboro
0
2.4k
79c9f45e8a3cd4bfa9d7292adb3a6dc0?s=48 kraj
0
3.6k
4b2f3a64637b51e81813accbe8a98083?s=48 miura55
0
100
23f4d5d797a91b6d17d627b90b5a42d9?s=48 kentaro
1
430
03858bb7b6debdd69ea0531b0f57c612?s=48 con_mame
4
2k

Featured

See All Featured
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
27
1.9k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
780
240k
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
155
11k
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
257
17k
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
656
54k
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
220
120k
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
80
4.1k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
446
36k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
229
18k
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
652
110k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
332
29k
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
13
4.2k

Transcript

  1. $PSEPWB։ൃऀ͕஌͓͖͍ͬͯͨ ϨϯμϦϯάΤϯδϯͷ࿩ )5.-ΧϯϑΝϨϯεJOࣛࣇౡ

  2. ‣ ٱอాޫଇ!BOBUPP ‣ 6*69σβΠφʔɺ
 ιϑτ΢ΣΞΤϯδχΞ ‣ ΞγΞϧגࣜձࣾ"TQFDUJWF--$ ࣗݾ঺հ

  3. None

  4. ޷ධൃചதʂ

  5. None

  6. IUUQPOTFOJP

  7. ࠓ೔࿩͢͜ͱ

  8. ࿩͢͜ͱ ‣ ͳͥ$PSEPWB͔  ‣ Α͘ى͖Δ໰୊ ‣ ϨϯμϦϯάͷྲྀΕ ‣ ΠϯλϥΫγϣϯͷߴ଎Խ

    ‣ Ξχϝʔγϣϯͷߴ଎Խ

  9. ͳͥ$PSEPWB͔

  10. ‣ )5.-ϋΠϒϦουΞϓϦ։ൃ
 ͢ΔͨΊͷϑϨʔϜϫʔΫ

  11. )5.-ϋΠϒϦουΞϓϦ ‣ ΞϓϦͱͯ͠ಈ࡞ ‣ ಺෦ͷ࣮૷ʹ)5.-Λར༻ ΞϓϦ ωΠςΟϒ૚ )5.-

  12. ࢓૊Έ ΞϓϦ HTML ಡΈࠐΈ WebView

  13. )5.-ϋΠϒϦουΞϓϦ
 ͷԿ͕ྑ͍ͷ͔

  14. ΫϩεϓϥοτϑΥʔϜੑ Android iOS

  15. ΢Σϒͷ஌͕ࣝ׆͔ͤΔ

  16. ετΞͰͷ഑෍ ‣ ֎ݟ͸ී௨ͷΞϓϦͳͷͰɺετΞͰ഑ ෍Մೳ

  17. ωΠςΟϒͷػೳͷݺͼग़͠ ‣ +BWB4DSJQU͔Β04ͷ"1*Λݺͼग़͠Մೳ Android / iOS OS API

  18. $PSEPWBͷఏڙ͢ΔϓϥάΠϯ ‣ ͞Βʹ$PSEPWBϓϥάΠϯͷ
 ࢓૊ΈΛ࢖͑͹͜ΕҎ֎ͷ͜ͱ΋Մೳ ϑΝΠϧετϨʔδɺΧϝϥɺίϯύε Ճ଎౓ηϯαʔɺίϯλΫτϦετɺ Ґஔ৘ใऔಘɺωοτϫʔΫɺ#MVFUPPUI௨৴ɺ "OESPJEͷΠϯςϯτɺΞϓϦ಺ϒϥ΢βɺ (14ɺ/'$ɺFUDʜ

  19. Α͘ى͜Δ໰୊

  20. ‣ ύϑΥʔϚϯε͕ѱ͍ ‣ ωΠςΟϒΞϓϦͬΆ͘ͳΒͳ͍ ‣ ಈ͖͕΋ͬ͞Γ͍ͯ͠Δ

  21. ղܾࡦ

  22. ‣ ࠷ॳ͔Β଎͘ಈ͘Α͏ʹॻ͘ ‣ ॻ͍ͨޙʹνϡʔχϯά͢Δ PS

  23. ࠷ॳ͔Β଎͘ॻ͘ ‣ ࠷ॳ͔Β଎͍ʹͨ͜͜͠ͱ͸ແ͍ ‣ τϨʔυΦϑ͕͋·Γແ͍
 ϕετϓϥΫςΟεΛ౿ऻ͢Δ

  24. ॻ͍ͨޙʹνϡʔχϯά͢Δ ‣ ໰୊͕ग़͔ͯΒղܾ͢Δ ‣ ܭଌͯ͠ϘτϧωοΫΛಛఆɺ࠷దԽ

  25. ‣ "OESPJEͰ͸$ISPNFɺJ04Ͱ͸4BGBSJͷΠϯεϖ ΫλΛར༻ ‣ ϘτϧωοΫΛಛఆͯ͠࠷దԽ

  26. ‣ ͲͪΒΛ΍Δʹͯ͠΋
 ϨϯμϦϯάͷྲྀΕͷ೺Ѳ͸ඞਢ

  27. XFCLJUܥΤϯδϯͷ ϨϯμϦϯάͷྲྀΕ

  28. ϨϯμϦϯάͷ޻ఔ }GSBNF ඳը͕࢝·ͬͯऴΘΔ·Ͱ͕GSBNF Loading Scripting Rendering Painting

  29. Loading Scripting Rendering Painting

  30. Loading ϦιʔεͷಡΈࠐΈ Ϧιʔεͷύʔε {

  31. ϦιʔεͷಡΈࠐΈ ‣ )5.- $44 +4 ը૾ͳͲ
 ϑΝΠϧΛϩʔυ͢Δ ‣ ௨ৗͷ΢ΣϒͰ͸ωοτϫʔΫӽ͠ͷ
 Ϧιʔεͷऔಘ

  32. Ϧιʔεͷύʔε ‣ ಡΈࠐΈ͕ऴΘͬͨΒɺύʔε͢Δ ‣ ϒϥ΢βͷ಺෦දݱ΁ม׵

  33. ‣ )5.-͸%0.πϦʔʹม׵͞ΕΔ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> IUUQXXXIUNMSPDLTDPNFOUVUPSJBMTJOUFSOBMTIPXCSPXTFSTXPSL )5.-

  34. $44 ‣ $44͸$440.πϦʔʹม׵͞ΕΔ body { color: black; } .container {

    width: 920px; IUUQXXXIUNMSPDLTDPNFOUVUPSJBMTJOUFSOBMTIPXCSPXTFSTXPSL

  35. +BWB4DSJQU ‣ +BWB4DSJQU͸࣮ߦՄೳͳදݱʹίϯύΠϧ ‣ +*5ίϯύΠϧͰػցޠʹม׵͞ΕͨΓ

  36. ௨ৗͷ΢Σϒͷ৔߹ ‣ ϦιʔεͷಡΈࠐΈ͕ѹ౗తʹ஗͍ ‣ ը૾ͷ࠷దԽ ‣ )5.-$44+4ͷѹॖ ‣ ಡΈࠐΈॱংͷ࠷దԽ

  37. ϋΠϒϦουΞϓϦͷ৔߹ ‣ ϦιʔεಡΈࠐΈ͸͋·Γ໰୊ʹͳΒͳ͍ ‣ ͢ͰʹϚγϯ಺ʹϦιʔε͕͋Δ͔Β ‣ ύʔε΋ϘτϧωοΫʹ͸ͳΒͳ͍

  38. Loading Scripting Rendering Painting

  39. ‣ +BWB4DSJQU͸଎͍ɻ
 جຊతʹͦΕ΄Ͳ໰୊ʹͳΒͳ͍ɻ

  40. ‣ ܭࢉྔͷଟ͍ॲཧ ‣ DBOWBT΁ͷඳը ‣ MBZPVUΛಉظతʹڧ੍͢Δίʔυ ໰୊ʹͳΔέʔε

  41. 4DSJQUJOH͕ϘτϧωοΫͩͬͨΒ ‣ ࿩͸؆୯ 1SPpMFTλϒͰ͞Βʹܭଌ

  42. ‣ #PUUPN6Qͷ4FMGཝɻॏ͍ͨؔ਺Λಛఆ

  43. ಉظతͳ-BZPVUͷڧ੍Λආ͚Δ ‣ UJNFMJOFͰ͜Ε͕ग़ͨΒ஫ҙ IUUQTEFWFMPQFSDISPNFDPNEFWUPPMTEPDTEFNPTUPPNVDIMBZPVU

  44. ಉظతͳMBZPVUͷڧ੍ͷྫ ‣ ཁૉͷҐஔ΍αΠζΛઃఆͭͭ͠P⒎TFU5PQ΍ HFU#PVOEJOH$MJFOU3FDU Λࢀর͢Δͱى͜Δ for(var m = 0; m

    < movers.length; m++) { movers[m].style.left = movers[m].offsetTop + 'px'; }

  45. Loading Scripting Rendering Painting

  46. Rendering ϦιʔεͷಡΈࠐΈ Ϧιʔεͷύʔε Calculate Style Layout {

  47. $BMDVMBUF4UZMF ‣ ݸผͷ%0.ཁૉʹରͯ͠ɺ౰ͨΔελΠ ϧΛܭࢉ͢Δ ‣ $440.πϦʔͱ%0.πϦʔΛࢀরͯ͠ɺ ϚονϯάॲཧΛߦ͏

  48. $44ϧʔϧͷϚονϯά %0.ཁૉ਺ ʷ $44ϧʔϧ਺  ॲཧճ਺ ‣ ૯౰ΓͰॲཧ͍ͯ͘͠ ‣ %0.ཁૉͱϧʔϧͷ਺͸


    গͳ͚Ε͹গͳ͍΄Ͳྑ͍

  49. ྑ͘ͳ͍ηϨΫλͷॻ͖ํ ‣ ࢠ ଙ ηϨΫλ͸ආ͚Δ ‣ %0.ཁૉͷ਌Λḷ͍ͬͯ͘ඞཁ͕༗ΔͨΊ body .foo .bar

    .hoge { … }

  50. ྑ͍ηϨΫλͷॻ͖ํ ‣ %0.ཁૉΛճݟΔ͚ͩ ‣ อकੑͷ఺Ͱ΋ྑ͍ .foo-bar-hoge { … }

  51. ن໿ʹ#&.Λ࢖͓͏ ‣ ࢠ ଙ ηϨΫλ͕ࣗಈతʹແ͘ͳΓߴ଎ʹ

  52. $44ϧʔϧͷϚονϯάॲཧ͸ അࣛʹͳΒͳ͍ ‣ %0.ૢ࡞͢Δͨͼʹॲཧ͕૸ΔͨΊ ‣ ΠϯλϥΫγϣϯΛ଎͘͢ΔͨΊʹ͸͜ ͷॲཧ΋଎͘͢Δඞཁ͋Γ

  53. -BZPVU ‣ ͦΕͧΕͷ%0.ཁૉͷϨΠΞ΢τ৘ใΛ ܭࢉ͢ΔϑΣʔζ

  54. -BZPVUͷ࠷ѱͷγφϦΦ ‣ %0.ૢ࡞΍$44ϓϩύςΟΛมߋͨ࣌͠ ‣ -BZPVUॲཧ͕Ҿ͖ى͜͞Εɺશͯͷ%0. ཁૉͷϨΠΞ΢τܭࢉ͕࠶౓ߦΘΕΔ

  55. ཁૉͷαΠζΛͳΔ΂͘ݻఆ͢Δ ‣ ϨΠΞ΢τܭࢉΛͳΔ΂͘গͳ͘͢ΔͨΊ .foobar { width: 100px; height: 200px; }

  56. BCTPMVUFϨΠΞ΢τΛੵۃతʹ࢖͏ ‣ ϨΠΞ΢τܭࢉΛͳΔ΂͘গͳ͘͢ΔͨΊ .piyo { position: absolute; top: 200px; left:

    400px; }

  57. ը૾ͷαΠζ͸ඞͣࢦఆ͢Δ ‣ -BZPVUͷ΍Γͳ͓͠Λ๷͙ͨΊ <img src=“foo.png” width=“300” height=“299”>

  58. Loading Scripting Rendering Painting

  59. ϦιʔεͷಡΈࠐΈ Ϧιʔεͷύʔε Paint Rasterize { Painting Composite Layers

  60. 1BJOU ‣ %JTQMBZ-JTU $ISPNJVNͩͱ4LJB΁ͷ໋ྩ ͷੜ੒͢ΔϑΣʔζ ‣ جຊ໰୊ʹͳΒͳ͍

  61. 3BTUFSJ[F ‣ ੜ੒ͨ͠%JTQMBZ-JTUΛ࣮ߦ࣮ͯ͠ࡍʹϐΫη ϧԽ͢ΔϑΣʔζ ‣ ॏ͍ͨ$44ϓϩύςΟ͕͔͔ͬͯΔͱ͕࣌ؒ ͔͔Δ ‣ CPYTIBEPX΍CPSEFSSBEJVT౳ ‣

    $ISPNJVNͩͱ4LJB%FCVHHFSͰ֬ೝͰ͖Δ

  62. $PNQPTJUF-BZFST ‣ 3BTUFSJ[F֤ͨ͠ϨΠϠʔΛ߹੒͢ΔϑΣʔ ζ ‣ [JOEFY΍pYFEQPTJUJPOͳͲʹԠͯ͡Ұຕ ֆʹ͢Δ

  63. Ҏ্ ‣ ϨϯμϦϯάͷ޻ఔ͸͜ͷ̐ͭ Loading Scripting Rendering Painting

  64. ΠϯλϥΫγϣϯΛ ଎͘͢Δ

  65. ΠϯλϥΫγϣϯͱ͸ ‣ ϢʔβͷΞΫγϣϯʹԠͯ͡ը໘্ʹ
 ද͞ΕΔϨεϙϯε ‣ GSBNFΛNTఔ౓ҎԼʹ཈͑Δ Button

  66. جຊతͳߟ͑ํ ‣ 4DSJQUJOHҎԼͷ޻ఔΛ଎͘͢Δ Rendering Painting { Paint Rasterize Composite Layers

    Calculate Style Layout { Scripting

  67. ΞχϝʔγϣϯΛ ଎͘͢Δ

  68. ΞχϝʔγϣϯΛ଎͘͢Δ ‣ $445SBOTJUJPO΍SFRVFTU"OJNBUJPO'SBNF
 ͰͷΞχϝʔγϣϯ ‣ GSBNFΛNTҎԼʹ཈͑Δ '14

  69. جຊతͳߟ͑ํ ‣ 4DSJQUJOHҎ֎͸$PNQPTJUF-BZFSTͷΈΛ
 ૸ΒͤΔΑ͏ʹ͢Δ Paint Rasterize { Composite Layers Painting

  70. Ξχϝʔγϣϯ͸γϏΞ ‣ %0.ૢ࡞ͨ͠Γɺ-BZPVUΛҾ͖ىͨ͜͠ Γ͢ΔͱϞόΠϧͩͱશ͘࢖͍΋ͷʹͳ Βͳ͍ ‣ Ξχϝʔγϣϯத͸USBOTGPSNͱPQBDJUZ͠ ͔͍͡Βͳ͍ͷ͕٢

  71. (16Λ׆༻͢Δ ‣ USBOTGPSNελΠϧଐੑʹ͸ɺ USBOTMBUFE    ΛؚΊ͓ͯ͘ ‣ $PNQPTJUF-BZFSTॲཧ࣌ʹ(16Ͱ߹੒͞

    ΕΔΑ͏ʹͳΔ

  72. ิ଍$44ϓϩύςΟͷมߋ

  73. $44ϓϩύςΟͷมߋ͢Δͱ Կ͕ى͜Δ ‣ $44ϓϩύςΟʹΑͬͯҧ͏ ‣ XJEUI΍NBSHJOͳͲཁૉͷେ͖͞΍Ґஔͷมߋ ‣ -BZPVU͔Βॲཧ͕࢝·Δ ‣ USBOTGPSN΍PQBDJUZΛมߋ

    ‣ $PNQPTJUF-BZFSTͷΈ૸Δ

  74. $445SJHHFSTͷ঺հ ‣ $44ϓϩύςΟͷมߋ͕
 ԿΛҾ͖ى͔͜͢໢ཏ IUUQDTTUSJHHFSTDPN

  75. ·ͱΊ

  76. ϨϯμϦϯάͷ޻ఔ Loading Scripting Rendering Painting ‣ ͦΕͧΕ໾ׂ͕͋Γνϡʔχϯάํ๏΋ҧ͏

  77. ΠϯλϥΫγϣϯΛ଎͘͢Δ Rendering Painting ‣ 4DSJQUJOHҎԼΛ଎͘͢Δ Scripting

  78. ΞχϝʔγϣϯΛ଎͘͢Δ ‣ $PNQPTJUF-BZFSTͷΈ૸ΒͤΔ Paint Rasterize { Composite Layers Painting

  79. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠