HTML5カンファレンス2015in鹿児島での発表資料です。
$PSEPWB։ൃऀ͕͓͖͍ͬͯͨϨϯμϦϯάΤϯδϯͷ)5.-ΧϯϑΝϨϯεJOࣛࣇౡ
View Slide
‣ ٱอాޫଇ!BOBUPP‣ 6*69σβΠφʔɺ ιϑτΣΞΤϯδχΞ‣ ΞγΞϧגࣜձࣾ"TQFDUJWF--$ࣗݾհ
ධൃചதʂ
IUUQPOTFOJP
ࠓ͢͜ͱ
͢͜ͱ‣ ͳͥ$PSEPWB͔ ‣ Α͘ى͖Δ‣ ϨϯμϦϯάͷྲྀΕ‣ ΠϯλϥΫγϣϯͷߴԽ‣ ΞχϝʔγϣϯͷߴԽ
ͳͥ$PSEPWB͔
‣ )5.-ϋΠϒϦουΞϓϦ։ൃ ͢ΔͨΊͷϑϨʔϜϫʔΫ
)5.-ϋΠϒϦουΞϓϦ‣ ΞϓϦͱͯ͠ಈ࡞‣ ෦ͷ࣮ʹ)5.-Λར༻ΞϓϦωΠςΟϒ)5.-
ΈΞϓϦHTMLಡΈࠐΈWebView
)5.-ϋΠϒϦουΞϓϦ ͷԿ͕ྑ͍ͷ͔
ΫϩεϓϥοτϑΥʔϜੑAndroid iOS
Σϒͷ͕ࣝ׆͔ͤΔ
ετΞͰͷ‣ ֎ݟී௨ͷΞϓϦͳͷͰɺετΞͰՄೳ
ωΠςΟϒͷػೳͷݺͼग़͠‣ +BWB4DSJQU͔Β04ͷ"1*Λݺͼग़͠ՄೳAndroid / iOSOS API
$PSEPWBͷఏڙ͢ΔϓϥάΠϯ‣ ͞Βʹ$PSEPWBϓϥάΠϯͷ ΈΛ͑͜ΕҎ֎ͷ͜ͱՄೳϑΝΠϧετϨʔδɺΧϝϥɺίϯύεՃηϯαʔɺίϯλΫτϦετɺҐஔใऔಘɺωοτϫʔΫɺ#MVFUPPUI௨৴ɺ"OESPJEͷΠϯςϯτɺΞϓϦϒϥβɺ(14ɺ/'$ɺFUDʜ
Α͘ى͜Δ
‣ ύϑΥʔϚϯε͕ѱ͍‣ ωΠςΟϒΞϓϦͬΆ͘ͳΒͳ͍‣ ಈ͖͕ͬ͞Γ͍ͯ͠Δ
ղܾࡦ
‣ ࠷ॳ͔Β͘ಈ͘Α͏ʹॻ͘‣ ॻ͍ͨޙʹνϡʔχϯά͢ΔPS
࠷ॳ͔Β͘ॻ͘‣ ࠷ॳ͔Β͍ʹͨ͜͜͠ͱແ͍‣ τϨʔυΦϑ͕͋·Γແ͍ ϕετϓϥΫςΟεΛ౿ऻ͢Δ
ॻ͍ͨޙʹνϡʔχϯά͢Δ‣ ͕ग़͔ͯΒղܾ͢Δ‣ ܭଌͯ͠ϘτϧωοΫΛಛఆɺ࠷దԽ
‣ "OESPJEͰ$ISPNFɺJ04Ͱ4BGBSJͷΠϯεϖΫλΛར༻‣ ϘτϧωοΫΛಛఆͯ͠࠷దԽ
‣ ͲͪΒΛΔʹͯ͠ ϨϯμϦϯάͷྲྀΕͷѲඞਢ
XFCLJUܥΤϯδϯͷϨϯμϦϯάͷྲྀΕ
ϨϯμϦϯάͷఔ}GSBNFඳը͕࢝·ͬͯऴΘΔ·Ͱ͕GSBNFLoadingScriptingRenderingPainting
LoadingScriptingRenderingPainting
LoadingϦιʔεͷಡΈࠐΈϦιʔεͷύʔε{
ϦιʔεͷಡΈࠐΈ‣ )5.- $44 +4 ը૾ͳͲ ϑΝΠϧΛϩʔυ͢Δ‣ ௨ৗͷΣϒͰωοτϫʔΫӽ͠ͷ Ϧιʔεͷऔಘ
Ϧιʔεͷύʔε‣ ಡΈࠐΈ͕ऴΘͬͨΒɺύʔε͢Δ‣ ϒϥβͷ෦දݱม
‣ )5.-%0.πϦʔʹม͞ΕΔcharset="UTF-8">IUUQXXXIUNMSPDLTDPNFOUVUPSJBMTJOUFSOBMTIPXCSPXTFSTXPSL)5.-
$44‣ $44$440.πϦʔʹม͞ΕΔbody {color: black;}.container {width: 920px;IUUQXXXIUNMSPDLTDPNFOUVUPSJBMTJOUFSOBMTIPXCSPXTFSTXPSL
+BWB4DSJQU‣ +BWB4DSJQU࣮ߦՄೳͳදݱʹίϯύΠϧ‣ +*5ίϯύΠϧͰػցޠʹม͞ΕͨΓ
௨ৗͷΣϒͷ߹‣ ϦιʔεͷಡΈࠐΈ͕ѹతʹ͍‣ ը૾ͷ࠷దԽ‣ )5.-$44+4ͷѹॖ‣ ಡΈࠐΈॱংͷ࠷దԽ
ϋΠϒϦουΞϓϦͷ߹‣ ϦιʔεಡΈࠐΈ͋·ΓʹͳΒͳ͍‣ ͢ͰʹϚγϯʹϦιʔε͕͋Δ͔Β‣ ύʔεϘτϧωοΫʹͳΒͳ͍
‣ +BWB4DSJQU͍ɻ جຊతʹͦΕ΄ͲʹͳΒͳ͍ɻ
‣ ܭࢉྔͷଟ͍ॲཧ‣ DBOWBTͷඳը‣ MBZPVUΛಉظతʹڧ੍͢ΔίʔυʹͳΔέʔε
4DSJQUJOH͕ϘτϧωοΫͩͬͨΒ‣ ؆୯ 1SPpMFTλϒͰ͞Βʹܭଌ
‣ #PUUPN6Qͷ4FMGཝɻॏ͍ͨؔΛಛఆ
ಉظతͳ-BZPVUͷڧ੍Λආ͚Δ‣ UJNFMJOFͰ͜Ε͕ग़ͨΒҙIUUQTEFWFMPQFSDISPNFDPNEFWUPPMTEPDTEFNPTUPPNVDIMBZPVU
ಉظతͳMBZPVUͷڧ੍ͷྫ‣ ཁૉͷҐஔαΠζΛઃఆͭͭ͠P⒎TFU5PQHFU#PVOEJOH$MJFOU3FDU Λࢀর͢Δͱى͜Δfor(var m = 0; m < movers.length; m++) {movers[m].style.left = movers[m].offsetTop + 'px';}
RenderingϦιʔεͷಡΈࠐΈϦιʔεͷύʔεCalculate StyleLayout{
$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ͷΓͳ͓͠Λ͙ͨΊ
ϦιʔεͷಡΈࠐΈϦιʔεͷύʔεPaintRasterize{PaintingComposite Layers
1BJOU‣ %JTQMBZ-JTU $ISPNJVNͩͱ4LJBͷ໋ྩͷੜ͢ΔϑΣʔζ‣ جຊʹͳΒͳ͍
3BTUFSJ[F‣ ੜͨ͠%JTQMBZ-JTUΛ࣮ߦ࣮ͯ͠ࡍʹϐΫηϧԽ͢ΔϑΣʔζ‣ ॏ͍ͨ$44ϓϩύςΟ͕͔͔ͬͯΔͱ͕͔͔࣌ؒΔ‣ CPYTIBEPXCPSEFSSBEJVT‣ $ISPNJVNͩͱ4LJB%FCVHHFSͰ֬ೝͰ͖Δ
$PNQPTJUF-BZFST‣ 3BTUFSJ[F֤ͨ͠ϨΠϠʔΛ߹͢ΔϑΣʔζ‣ [JOEFYpYFEQPTJUJPOͳͲʹԠͯ͡Ұຕֆʹ͢Δ
Ҏ্‣ ϨϯμϦϯάͷఔ͜ͷ̐ͭLoadingScriptingRenderingPainting
ΠϯλϥΫγϣϯΛ͘͢Δ
ΠϯλϥΫγϣϯͱ‣ ϢʔβͷΞΫγϣϯʹԠͯ͡ը໘্ʹ ද͞ΕΔϨεϙϯε‣ GSBNFΛNTఔҎԼʹ͑ΔButton
جຊతͳߟ͑ํ‣ 4DSJQUJOHҎԼͷఔΛ͘͢ΔRenderingPainting{PaintRasterizeComposite LayersCalculate StyleLayout{Scripting
ΞχϝʔγϣϯΛ͘͢Δ
ΞχϝʔγϣϯΛ͘͢Δ‣ $445SBOTJUJPOSFRVFTU"OJNBUJPO'SBNF ͰͷΞχϝʔγϣϯ‣ GSBNFΛNTҎԼʹ͑Δ '14
جຊతͳߟ͑ํ‣ 4DSJQUJOHҎ֎$PNQPTJUF-BZFSTͷΈΛ ΒͤΔΑ͏ʹ͢ΔPaintRasterize{Composite LayersPainting
ΞχϝʔγϣϯγϏΞ‣ %0.ૢ࡞ͨ͠Γɺ-BZPVUΛҾ͖ىͨ͜͠Γ͢ΔͱϞόΠϧͩͱશ͍͘ͷʹͳΒͳ͍‣ ΞχϝʔγϣϯதUSBOTGPSNͱPQBDJUZ͔͍͠͡Βͳ͍ͷ͕٢
(16Λ׆༻͢Δ‣ USBOTGPSNελΠϧଐੑʹɺUSBOTMBUFE ΛؚΊ͓ͯ͘‣ $PNQPTJUF-BZFSTॲཧ࣌ʹ(16Ͱ߹͞ΕΔΑ͏ʹͳΔ
ิ$44ϓϩύςΟͷมߋ
$44ϓϩύςΟͷมߋ͢ΔͱԿ͕ى͜Δ‣ $44ϓϩύςΟʹΑͬͯҧ͏‣ XJEUINBSHJOͳͲཁૉͷେ͖͞Ґஔͷมߋ‣ -BZPVU͔Βॲཧ͕࢝·Δ‣ USBOTGPSNPQBDJUZΛมߋ‣ $PNQPTJUF-BZFSTͷΈΔ
$445SJHHFSTͷհ‣ $44ϓϩύςΟͷมߋ͕ ԿΛҾ͖ى͔͜͢ཏIUUQDTTUSJHHFSTDPN
·ͱΊ
ϨϯμϦϯάͷఔLoadingScriptingRenderingPainting‣ ͦΕͧΕׂ͕͋Γνϡʔχϯάํ๏ҧ͏
ΠϯλϥΫγϣϯΛ͘͢ΔRenderingPainting‣ 4DSJQUJOHҎԼΛ͘͢ΔScripting
ΞχϝʔγϣϯΛ͘͢Δ‣ $PNQPTJUF-BZFSTͷΈΒͤΔPaintRasterize{Composite LayersPainting
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
anatoo
soachr
toshiaizawa
you
sumiren
seike460
chiroruxx
masashi_sutou
iseki
dskst
oracle4engineer
tomohisa
asazutaiga
michaelherold
ammeep
lara
garrettdimon
samlambert
aarron
keithpitt
reverentgeek
samanthasiow
hursman
morganepeng
jlugia