$30 off During Our Annual Pro Sale. View Details »

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

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

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

久保田光則

July 04, 2015
Tweet

More Decks by 久保田光則

Other Decks in Technology

Transcript

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

    View Slide

  2. ‣ ٱอాޫଇ!BOBUPP
    ‣ 6*69σβΠφʔɺ

    ιϑτ΢ΣΞΤϯδχΞ
    ‣ ΞγΞϧגࣜձࣾ"TQFDUJWF--$
    ࣗݾ঺հ

    View Slide

  3. View Slide

  4. ޷ධൃചதʂ

    View Slide

  5. View Slide

  6. IUUQPOTFOJP

    View Slide

  7. ࠓ೔࿩͢͜ͱ

    View Slide

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

    View Slide

  9. ͳͥ$PSEPWB͔

    View Slide

  10. ‣ )5.-ϋΠϒϦουΞϓϦ։ൃ

    ͢ΔͨΊͷϑϨʔϜϫʔΫ

    View Slide

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

    View Slide

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

    View Slide

  13. )5.-ϋΠϒϦουΞϓϦ

    ͷԿ͕ྑ͍ͷ͔

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  18. $PSEPWBͷఏڙ͢ΔϓϥάΠϯ
    ‣ ͞Βʹ$PSEPWBϓϥάΠϯͷ

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

    View Slide

  19. Α͘ى͜Δ໰୊

    View Slide

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

    View Slide

  21. ղܾࡦ

    View Slide

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

    View Slide

  23. ࠷ॳ͔Β଎͘ॻ͘
    ‣ ࠷ॳ͔Β଎͍ʹͨ͜͜͠ͱ͸ແ͍
    ‣ τϨʔυΦϑ͕͋·Γແ͍

    ϕετϓϥΫςΟεΛ౿ऻ͢Δ

    View Slide

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

    View Slide

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

    View Slide

  26. ‣ ͲͪΒΛ΍Δʹͯ͠΋

    ϨϯμϦϯάͷྲྀΕͷ೺Ѳ͸ඞਢ

    View Slide

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

    View Slide

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

    View Slide

  29. Loading
    Scripting
    Rendering
    Painting

    View Slide

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

    View Slide

  31. ϦιʔεͷಡΈࠐΈ
    ‣ )5.- $44 +4 ը૾ͳͲ

    ϑΝΠϧΛϩʔυ͢Δ
    ‣ ௨ৗͷ΢ΣϒͰ͸ωοτϫʔΫӽ͠ͷ

    Ϧιʔεͷऔಘ

    View Slide

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

    View Slide

  33. ‣ )5.-͸%0.πϦʔʹม׵͞ΕΔ



    charset="UTF-8">
    IUUQXXXIUNMSPDLTDPNFOUVUPSJBMTJOUFSOBMTIPXCSPXTFSTXPSL
    )5.-

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  38. Loading
    Scripting
    Rendering
    Painting

    View Slide

  39. ‣ +BWB4DSJQU͸଎͍ɻ

    جຊతʹͦΕ΄Ͳ໰୊ʹͳΒͳ͍ɻ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  44. ಉظతͳMBZPVUͷڧ੍ͷྫ
    ‣ ཁૉͷҐஔ΍αΠζΛઃఆͭͭ͠P⒎TFU5PQ΍
    HFU#PVOEJOH$MJFOU3FDU
    Λࢀর͢Δͱى͜Δ
    for(var m = 0; m < movers.length; m++) {
    movers[m].style.left = movers[m].offsetTop + 'px';
    }

    View Slide

  45. Loading
    Scripting
    Rendering
    Painting

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    }

    View Slide

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

    }

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  57. ը૾ͷαΠζ͸ඞͣࢦఆ͢Δ
    ‣ -BZPVUͷ΍Γͳ͓͠Λ๷͙ͨΊ

    View Slide

  58. Loading
    Scripting
    Rendering
    Painting

    View Slide

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

    View Slide

  60. 1BJOU
    ‣ %JTQMBZ-JTU $ISPNJVNͩͱ4LJB΁ͷ໋ྩ

    ͷੜ੒͢ΔϑΣʔζ
    ‣ جຊ໰୊ʹͳΒͳ͍

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  65. ΠϯλϥΫγϣϯͱ͸
    ‣ ϢʔβͷΞΫγϣϯʹԠͯ͡ը໘্ʹ

    ද͞ΕΔϨεϙϯε
    ‣ GSBNFΛNTఔ౓ҎԼʹ཈͑Δ
    Button

    View Slide

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

    View Slide

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

    View Slide

  68. ΞχϝʔγϣϯΛ଎͘͢Δ
    ‣ $445SBOTJUJPO΍SFRVFTU"OJNBUJPO'SBNF

    ͰͷΞχϝʔγϣϯ
    ‣ GSBNFΛNTҎԼʹ཈͑Δ '14

    View Slide

  69. جຊతͳߟ͑ํ
    ‣ 4DSJQUJOHҎ֎͸$PNQPTJUF-BZFSTͷΈΛ

    ૸ΒͤΔΑ͏ʹ͢Δ
    Paint
    Rasterize
    {
    Composite Layers
    Painting

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  74. $445SJHHFSTͷ঺հ
    ‣ $44ϓϩύςΟͷมߋ͕

    ԿΛҾ͖ى͔͜͢໢ཏ
    IUUQDTTUSJHHFSTDPN

    View Slide

  75. ·ͱΊ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide