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
250
F7dd7b43a0cc6c063f7d98ba23a1d359?s=48 anatoo
0
2.5k
F7dd7b43a0cc6c063f7d98ba23a1d359?s=48 anatoo
11
19k
F7dd7b43a0cc6c063f7d98ba23a1d359?s=48 anatoo
8
8.2k
F7dd7b43a0cc6c063f7d98ba23a1d359?s=48 anatoo
6
8.5k
F7dd7b43a0cc6c063f7d98ba23a1d359?s=48 anatoo
8
5.9k
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
5b392dc79d5b6d1dab580bf60e26fb7c?s=48 nitya
0
210
9888b1cb1b2a5d93095bbd98daf2efa5?s=48 emi0726
0
240
C918bcbfa8df32567636c2d125a34fa1?s=48 sonnylazuardi
0
140
Af61fe2beec7f195d7418e0a474a4dfc?s=48 kfujieda
3
1.3k
4b09160b087e45103b210ef95079cee4?s=48 gakumura
0
140
1dfa2bb34977b1db41d0d46d4505183f?s=48 osuke
2
2.2k
A645e7c3a6635ead8fa323c583769591?s=48 hololab
0
280
9e7a653ed313b3da4b263a772bfc5026?s=48 clustervr
0
460
5d715b858124e0dd59af1a92e4397acd?s=48 y_temp4
0
320
3115a782126be714b5f94d24073c957d?s=48 oracle4engineer
3
300
F3f3eec8682a76ed430054e8fd994f15?s=48 tmnakagawa
0
780
229b1596ce57cd0935a2bacd410d87a0?s=48 aaaddress1
2
470

Featured

See All Featured
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
323
14k
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1020
360k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
1
280
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
5
3.6k
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
99
5.7k
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
93
5k
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
7
1.1k
E13c31390e0369fcd5972292ce0e7b92?s=48 jnunemaker
40
4.3k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
436
28k
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
23
3.7k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
319
53k
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
2
39

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