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
300
F7dd7b43a0cc6c063f7d98ba23a1d359?s=48 anatoo
0
2.6k
F7dd7b43a0cc6c063f7d98ba23a1d359?s=48 anatoo
11
19k
F7dd7b43a0cc6c063f7d98ba23a1d359?s=48 anatoo
8
8.5k
F7dd7b43a0cc6c063f7d98ba23a1d359?s=48 anatoo
6
8.7k
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
872c040ebc1db6c2090d99dde729a8d4?s=48 supership
0
200
94870c02836167043f37f05ae1032690?s=48 tatsy
0
130
94870c02836167043f37f05ae1032690?s=48 tatsy
2
430
19fc8f6113c5c3d86e6176362ff29479?s=48 kanaugust
PRO
0
210
74cec195bfb6cb5165256d88cb7fcf0f?s=48 miu_crescent
0
320
525442fc70ca92f82ae503f826956137?s=48 finengine
0
340
585cdfa5a081d53de7529e9b58926af2?s=48 kota2and3kan
2
340
23f4d5d797a91b6d17d627b90b5a42d9?s=48 kentaro
2
520
Baf3de0f86a61c06c8fb9539d4958bf5?s=48 jozono
6
1.2k
3115a782126be714b5f94d24073c957d?s=48 oracle4engineer
0
140
Cd931bc05e7cee46b9a950a63e47ba4c?s=48 you
0
150
Ad5c154f422a9204af738d173aad4d4c?s=48 kinunori
1
160

Featured

See All Featured
9128d500301ae51524e887bb680f471d?s=48 caitiem20
311
17k
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
22
2.2k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
167
7.3k
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
53
2.9k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
192
8.9k
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
176
7.6k
11c84dff30266b907714802088852677?s=48 jasonvnalue
81
8.1k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
192
17k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
267
17k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
232
18k
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
252
19k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
2
560

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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠