まだ間に合うHTML5 - Yeomanで追いつけ！高速Webアプリ開発

·ͩؒʹ߹͏l)5.-z :FPNBOͰ௥͍͚ͭʂߴ଎8FCΞϓϦ։ൃ *OOPWBUJPO&((!LBEPQQF

ࣗݾ঺հ • ໊લ • ໳࿬߃ฏ !LBEPQQF • ৬ۀ •
ιϑτ΢ΣΞΤϯδχΞ • ॴଐ • )5.-8&45KQגࣜձࣾγΣΞ΢Οζ

ຊ೔ͷεϥΠυ • 4MJEF4IBSF • IUUQXXXTMJEFTIBSFOFULBEPQQF • 4QFBLFS%FDL • IUUQTTQFBLFSEFDLDPNLBEPQQF

ΞδΣϯμ • )5.-8&45KQ঺հ • l)5.-zͰͰ͖Δ͜ͱ • l)5.-zʹ͍͍ͭͯͨ͘Ίʹ • :FPNBOͰ௥͍͚ͭʂ ߴ଎8FCΞϓϦ։ൃ

)5.-8&45KQͷ঺հ

)5.-8&45KQ • ؔ੢Ͱ)5.-ͷ࿩୊Λ੝Γ্͛ΔͨΊ ʹ೥ʹൃ଍ͨ͠ίϛϡχςΟ • ׆ಈ಺༰ • )5.-ؔ࿈ͷษڧձɾΠϕϯτ։࠵ • .-Ͱͷ৘ใڞ༗

)5.-ͳͲษڧձ • )5.-̑ؔ࿈ٕज़ͷൃදΛͱ͓ͯ͠ ٕज़޲্ɾ৘ใަ׵Λߦ͏৔ॴ • ෆఆظ։࠵ • ೥ʹୈճ͕։࠵ɾݱࡏ·Ͱʹճ։࠵ • ʮ)5.-ͱ͔ษڧձʯΛΠϯεύΠΞ

๻ͱ)5.-8&45KQ

ग़ձ͍ • • ژ౎(56()5.-ϋοΧιϯʹࢀՃ • +BWB4DSJQU)5.-ॳ৺ऀͰͨ͠ • ͦͷޙ •
)5.-ಡॻձ΍ϋοΧιϯʹͭ͘͜͠ࢀՃ • ίΞϝϯόʔͱ͓ͯ͠༠͍Λ͏͚Δ

ษڧձͰϓϨθϯ • )5.-ͳͲษڧձ͕։࠵͞ΕΔͨͼʹ Ͱ͖Δ͚ͩϓϨθϯ • ͦΕ͕͖͔͚ͬͰʜ

ࡶࢽͷಛूهࣄΛॻ͘͜ͱʹ • 8&# %#1SFTTWPM • ʮ࡞ֶͬͯͿσʔλՄࢹԽʯ

ࢀՃ͢ΔϝϦοτ • ৽ٕज़Λ஌Δɾษڧ͢Δ͖͔͚ͬʹͳΔ • ٕज़ʹͱ͕ͬͨਓͱ஌Γ߹͑Δ • खΛ্͛Ε͹ࣗ෼͕ൃදͰ͖Δ • ͦͷؾʹͳΕ͹ੈք͕޿͕Δ

ੋඇࢀՃ͍ͯͩ͘͠͞ʂ

l)5.-zͰͰ͖Δ͜ͱ

)5.-ͱl)5.-z • l)5.-z͸ͱͯ΋ᐆດͳݴ༿ • Ͳ͔͜Β͕)5.-ͳͷʁ • Ͳ͜·Ͱ͕)5.-ͳͷʁ

ڱٛͷ)5.- • )5.-ͷ࣍ͷόʔδϣϯ • ϚʔΫΞοϓݴޠͱͯ͠ͷ࢓༷ • ৽͍͠λάʗཁૉ͕௥Ճ

޿ٛͷl)5.-z • ϦονΠϯλʔωοτΞϓϦέʔγϣϯ 3*" ࣮ݱͷͨΊͷ༷ʑͳ࢓༷܈ • ʮ)5.-ؔ࿈ٕज़ʯͱݺ͹ΕΔ • ຊϓϨθϯͰ͸l)5.-zͱදه

͍͔ͭΒ࢖͑Δl)5.-z • "΋͏࢖͑Δ • ֤ϒϥ΢β͕ஈ֊తʹରԠ • *OUFSOFU&YQMPSFSҠߦ • .P[JMMB'JSFGPYҠߦ •
(PPHMF$ISPNFҠߦ • 4BGBSJҠߦ

l)5.-zͰͰ͖Δ͜ͱ • ϚʔΫΞοϓฤ • දݱฤ • +BWB4DSJQU"1*ฤ • εϚϗΞϓϦฤ

ϚʔΫΞοϓฤ

γϯϓϧͳϚʔΫΞοϓ • ΑΓγϯϓϧͳλάͰ)5.-͕ هड़Ͱ͖ΔΑ͏ʹ ˠ੍࡞ɾ։ൃޮ཰Ξοϓˢ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ TR/html4/loose.dtd"> !
! ! <!DOCTYPE html>

ηϚϯςΟοΫͳϚʔΫΞοϓ • <div>ཁૉ • ίϯϐϡʔλ͕ҙຯΛղऍ͢Δͷ͕೉͍͠ • <article>, <section>ཁૉͳͲΛ ࢖͏͜ͱͰ •
ίϯϐϡʔλ͕ҙຯΛղऍͰ͖ΔΑ͏ʹ • εΫϦʔϯϦʔμ΍ݕࡧΤϯδϯ͕ ߴػೳʹ

<article>ཁૉ • lهࣄzΛϚʔΫΞοϓ • 344ϑΟʔυʹؚΊͨͱ͖ʹ̍ͭͷهࣄͱͯ͠ ੒Γཱͭ୯Ґ • ྫʣ • ϒϩάͷΤϯτϦ

<article> <h1>ແమ๒ͰϥʔϝϯΛ৯΂͖ͯͨ</h1> <p>ແੑʹϥʔϝϯ͕৯΂͍ͨͱࢥ͍ɾɾɾ</p> <p>େߦྻ͕Ͱ͖͚ͯͨͲΊ͛ͣʹฒΜͰɾɾɾ</p> ... </article>

<section>ཁૉ • จষͷlηΫγϣϯzΛϚʔΫΞοϓ • ྫʣ • จষʹ͓͚Δzষz

දݱฤ

$44 • 8FCϖʔδ্ͰϦονͳදݱΛ࣮ݱ͢Δ ͨΊͷ༷ʑͳϓϩύςΟ͕௥Ճ͞Εͨ • ը૾΍εΫϦϓτ͕ඞཁͩͬͨදݱ ˠελΠϧγʔτ͚ͩͰ࣮ݱՄೳʹ

૷০ܥϓϩύςΟ • border-radius • ؙ֯ • box-shadow, text-shadow • υϩοϓγϟυ΢

.box { box-shadow: 2px 2px 2px rgba(0,0,0,0.2); border-radius: 3px; }

ࢀߟɿζϧ͍σβΠϯ ζϧ͍σβΠϯʢʣɿCPYTIBEPXͰදݱ͢Δɺʮηϛϑϥοτʯͳζϧ͍σβΠϯςΫχοΫ ˏ*5 IUUQXXXBUNBSLJUDPKQBJUBSUJDMFTOFXTIUNM

ΞχϝʔγϣϯܥϓϩύςΟ • transition • $44ϓϩύςΟʹΑΔঢ়ଶͷมԽΛ Ξχϝʔγϣϯ • animation • ΩʔϑϨʔϜΞχϝʔγϣϯ

.box { background-color: red; transition: background-color 1s; } .box:hover {
background-color: blue; }

.box { animation: an-animation 2s infinite; } @keyframes an-animation {
0%, 100% { left: 0px; } 50% { left: 100px; } }

ࢀߟɿ̑෼ͰΘ͔Δ$44ͷάϥϑΟοΫεػೳ ʮ෼ͰΘ͔Δ$44ͷάϥϑΟοΫεػೳʯαϯϓϧ IUUQXXXBUNBSLJUDPKQGXDSEFTJHOCFOLZPXFCHSBQIJDTTBNQMFIUNM

8FC'POUT • ϑΥϯτΛ8FC͔Βμ΢ϯϩʔυ͠ ϒϥ΢βͰදࣔ͢Δٕज़ • Πϯετʔϧ͞Ε͍ͯͳ͍ϑΥϯτ͕ ར༻Մೳ • ը૾จࣈ͕ඞཁͩͬͨදݱ ˠ$44ͷΈͰ࣮ݱՄೳʹ

@font-face { font-family: kadoppeFont; src: url(kadoppe.woff) } .box { font-family:
kadoppeFont; }

ศརɿ(PPHMF'POUT (PPHMF'POUTIUUQXXXHPPHMFDPNGPOUT

ศརɿ'0/51-64 '0/51-64ʛϑΥϯτϓϥεIUUQXFCGPOUGPOUQMVTKQ

άϥϑΟοΫඳըػೳ • $BOWBT • ϏοτϚοϓը૾ • *OMJOF47( • ϕΫλʔը૾ •
8FC(- • %άϥϑΟοΫ

<canvas id="canvas" width="150" height="150"></canvas> <script> ! var canvas, ctx; canvas
= document.getElementById('canvas'); ! ctx = canvas.getContext('2d'); ! ! ctx.strokeStyle = "#FF0000"; ! ctx.strokeRect(25, 25, 100, 100); ! ! ctx.fillStyle = "#FFCC00"; ! ctx.fillRect(25, 25, 100, 100); </script>

σϞ5IF4IPEP 5IF4IPEPIUUQXXXUIFTIPEPDPN

ࣄྫ4IBSF8JT ແྉֶशαΠτ4IBSF8JTIUUQTIBSFXJTDPN

ࣄྫ)FMMP3BDFS )FMMP3BDFSä8FC(-IUUQIFMMPSBDFSDPNXFCHM

+BWB4DSJQU"1*ฤ

(FPMPDBUJPO"1* • ϢʔβͷҐஔ৘ใΛѻ͏ͨΊͷ"1* • 8FCΞϓϦέʔγϣϯ͕Ϣʔβͷ৔ॴΛ ஌Δ͜ͱ͕Մೳʹ

navigator.geolocation.getCurrentPosition(function(position) { console.log(position.coords.latitude); // Ң౓ console.log(position.coords.longitude); // ܦ౓ });

ࣄྫ(PPHMF.BQ

MPDBM4UPSBHF • ϒϥ΢βʹσʔλΛอଘ • ͋ͱͰऔΓग़ͯ͠࢖༻Մೳ • ΦϑϥΠϯར༻Մೳͳ8FCΞϓϦ͕ ࣮ݱՄೳ

window.localStorage.setItem(‘food’, ‘ϥʔϝϯ’); console.log( window.localStorage.getItem(‘food’) );

'JMF"1* • ίϯϐϡʔλ্ͷϑΝΠϧΛಡΈࠐΉͨ Ίͷ"1* • ࢖༻ྫɿ͜͜ʹϑΝΠϧΛυϩοϓ +BWB4DSJQUͰͷϩʔΧϧϑΝΠϧͷಡΈࠐΈ)5.-3PDLT IUUQXXXIUNMSPDLTDPNKBUVUPSJBMTpMFEOEpMFT

8FC"VEJP"1* • Ի੠ͷੜ੒ • ϑΟϧλʔॲཧ • ߴਫ਼౓ͷ࠶ੜλΠϛϯά੍ޚ • ࢖༻ྫɿ •
ήʔϜ • γϯηαΠβʔ

ࣄྫ"OHSZ#JSET "OHSZ#JSET$ISPNFIUUQDISPNFBOHSZCJSETDPN

εϚϗΞϓϦฤ

1IPOF(BQ • εϚʔτϑΥϯ༻ωΠςΟϒΞϓϦ։ൃϑ ϨʔϜϫʔΫ • J04 "OESPJE 8JOEPXT1IPOF • l)5.-zؔ࿈ٕज़Λ͔ͭͬͯ։ൃ
• )5.- • $44 • +BWB4DSJQU

ࣄྫɿ.Z)FBSU$BNFS 1IPOF(BQc.Z)FBSU$BNFSBIUUQQIPOFHBQDPNBQQNZIFBSUDBNFSB

ୈ̏ͷϞόΠϧ04 • J04΍"OESPJEʹ͙࣍ୈͷ04 • 'JSFGPY04 • 5J[FO • ϓϥοτϑΥʔϜ͕ΞϓϦ͕ l)5.-zͰ࣮૷͞Ε͍ͯΔ

'JSFGPY04 ;5&0QFO1PXFSFECZ'JSFGPY04(6OMPDLFE4NBSUQIPOF0SBOHFF#BZ&YDMVTJWFcF#BZ IUUQXXXFCBZDPNJUN

5J[FO 6SCBO"JSTIJQ5BLFTUIF4UBHFBUUIF5J[FO%FWFMPQFS$POGFSFODF IUUQVSCBOBJSTIJQDPNCMPHVSCBOBJSTIJQUBLFTUIFTUBHFBUUIFUJ[FO EFWFMPQFSDPOGFSFODF

l)5.-zʹ͍͍ͭͯͨ͘Ίʹ

্͍͍ͭͯ͘Ͱͷ໰୊఺ • ٕज़͕޿͗͢Δɾଟ͗͢Δ • ৽ٕज़͕ͲΜͲΜొ৔͢Δ • "1* • େྔͷ+BWB4DSJQUϥΠϒϥϦ •
#BDLCPOFKT %KT 5ISFFKT ̋̋KT

Ͳ͏͢Ε͹ʜ ɾТɾʆ

̍ɽͱʹ͔͘ڵຯΛ࣋ͭ

̎ɽͱʹ͔͘ίʔυΛॻ͘

Ͱ΋ɺίʔυΛॻ͘ͷ ͔͔࣌ؒΔΑʜ ɾТɾʆ

΋͏ख஗Εʁؒʹ߹Θͳ͍ʁ ɾТɾʆ

̏ɽߴ଎ʹίʔυΛॻ͜͏

ͦ͜Ͱ

:FPNBO௥͍͚ͭʂ ߴ଎8FCΞϓϦ։ൃ

:FPNBO • 8FC։ൃʹؔΘΔ໘౗ͳ͜ͱΛ ࣗಈԽͯ͘͠ΕΔπʔϧ • ίʔυΛॻ͘લͷ४උ • ίʔυΛॻ͍͍ͯΔ࣌ͷ࡞ۀ • ίʔυΛॻ͖ऴΘͬͨ͋ͱͷ࡞ۀ

:FPNBOͷߏ੒ཁૉ

:P • :FPNBOͷϓϩδΣΫτΛੜ੒ • ༷ʑͳͻͳܗ͕ެ։͞Ε͍ͯΔ • XFCBQQҰൠతͳ΢ΣϒΞϓϦ༻ • CBDLCPOF#BDLCPOFKT༻ •
DISPNFBQQ$ISPNF8FC4UPSF༻

(SVOU • ͞·͟·ͳ࡞ۀΛࣗಈԽ • ։ൃ༻αʔόͷىಈ • ϑΝΠϧߋ৽ͷ؂ࢹ • ࣗಈςετ •
ϦϦʔε࡞ۀ

#PXFS • +BWB4DSJQUϥΠϒϥϦͷύοέʔδ؅ཧ • ݕࡧ • Πϯετʔϧ • Ξοϓσʔτ •
ґଘؔ܎ͷࣗಈղܾ

࣮ࡍʹ͔ͭͬͯΈΔ

खॱ • ඞཁͳπʔϧͷ४උ • ϓϩδΣΫτͷ࡞੒ • αʔόͷىಈ • ίʔυΛॻ͘ •
ϦϦʔε

ඞཁͳπʔϧͷ४උ • 8FCϒϥ΢β • ςΩετΤσΟλ • ීஈ࢖͍ͬͯΔ΋ͷ • λʔϛφϧʢ௨শɿࠇ͍ը໘ʣ •
OPEFKT

OPEFKT • αʔόαΠυ+BWB4DSJQU࣮ߦ؀ڥ • ৄ͍͜͠ͱ͸஌Βͳͯ͘΋0, • Πϯετʔϧ • QLHϑΝΠϧΛμ΢ϯϩʔυ͢Δͷ͕؆୯ IUUQOPEFKTKQOPEFKTPSH@KBEPDTW

:FPNBOͷΠϯετʔϧ $ npm install -g yo grunt-cli bower generator-webapp $Λআ͍ͨ෦෼Λ
λʔϛφϧͰೖྗͯ͠&/5&3

ϓϩδΣΫτͷ࡞੒ $ cd /Users/kadoppe/Source/hello-yeoman $ yo webapp

ͻͳܗʹԿΛؚΊΔ͔ਘͶΒΕΔ ͱΓ͋͑ͣ&OUFSΛೖྗ

৭ʑΠϯετʔϧ͞ΕΔ ͱΓ͋͑ͣ଴ͭ

ੜ੒͞ΕΔϓϩδΣΫτ • BQQˡ8FCΞϓϦͷίʔυ͸͜ͷத • CPXFSKTPO • (SVOUpMFKT • OPEF@NPEVMFT •
QBDLBHFKTPO • UFTU

BQQσΟϨΫτϦͷத਎ • IUNM • CPXFS@DPNQPOFOUT • JNBHFTը૾ϑΝΠϧΛ഑ஔ • JOEFYIUNM •
SPCPUTUYU • TDSJQUT+BWB4DSJQUϑΝΠϧΛ഑ஔ • TUZMFT$44ϑΝΠϧ

ಋೖ͞Ε͍ͯΔϑϨʔϜϫʔΫɾϥΠϒϥϦ • )5.-#PJMFSQMBUF • .PEFSOJ[S • 3FRVJSF+4 • #PPUTUSBQ

)5.-#PJMFSQMBUF • )5.-Ͱ8FC੍࡞Λߦ͏ͱ͖ͷ ϕετϓϥΫςΟεΛूΊͨςϯϓϨ • /PSNBMJ[FDTT • (PPHMF"OBMZUJDTಋೖ༻λά • *&ରԠ
• ৄ͘͠͸ެࣜΛݟ͍ͯͩ͘͞ IUUQIUNMCPJMFSQMBUFDPN

)5.-#PJMFSQMBUF • )5.-Ͱ8FC੍࡞Λߦ͏ͱ͖ͷ ϕετϓϥΫςΟεΛूΊͨςϯϓϨ • /PSNBMJ[FDTT • (PPHMF"OBMZUJDTಋೖ༻λά • *&ରԠ

.PEFSOJ[S • ϒϥ΢β͕αϙʔτ͍ͯ͠Δ)5.-ɾ $44ͷػೳΛࣗಈݕग़ • <html>ཁૉͷclassଐੑʹ αϙʔτঢ়گΛग़ྗͯ͘͠ΕΔ • $44΍+BWB4DSJQUͰॲཧΛ෼ذ ͢Δͷʹศར

3FRVJSF+4 • +BWB4DSJQUͰ֎෦+BWB4DSJQUϑΝΠϧ ͷಡΈࠐΈΛ࣮ݱ͢ΔϥΠϒϥϦ • $ݴޠͰ͍͏JNQPSU • େن໛ͳ+BWB4DSJQUϓϩάϥϜΛ ॻ͘ͱ͖ʹศར

#PPUTUSBQ • ༗໊ͳ$44ϑϨʔϜϫʔΫ • ͋Β͔͡Ίఆٛ͞ΕͨDMBTTΛཁૉʹ ઃఆ͢Δ͚ͩͰྑ͍ײ͡ͷσβΠϯʹ • σβΠϯྗ͕ͳ͍ͱ͖ʹศར

αʔόͷىಈ $ grunt server

αʔό͕ىಈ͠ ϒϥ΢βʹϖʔδ͕ ࣗಈతʹදࣔ͞ΕΔ

ίʔυΛॻ͘ • ςΩετΤσΟλͰࣗ༝ʹίʔυΛฤू • )5.-ɿJOEFYIUNM • +BWB4DSJQU • NBJOKTɿઃఆؔ܎ͷίʔυ •
BQQKTɿΞϓϦέʔγϣϯͷίʔυ • $44ɿNBJOTDTT

-JWF3FMPBE • ϑΝΠϧΛมߋͨ͠Βࣗಈతʹϒϥ΢β Λߋ৽ͯ͘͠ΕΔ࢓૊Έ • ʮΤσΟλˠอଘˠϒϥ΢βˠߋ৽ˠʯ ͷख͕ؒେ෯ʹܰݮ

+BWB4DSJQUϥΠϒϥϦΛಋೖ $ bower install d3.js

require.config({ paths: { d3: '../bower_components/d3/d3' }, shim: { d3: {
exports: 'd3' } } }); NBJOKTʹ͓·͡ͳ͍௥Ճ ˞3FRVJSF+4ͷ%KTಡΈࠐΈઃఆ

define(['d3'], function (d3) { }); BQQKTʹ͓·͡ͳ͍௥Ճ ˞3FRVJSF+4ͷ%KTಡΈࠐΈઃఆ

͞Βʹ։ൃΛߴ଎Խ • $P⒎FF4DSJQUΛ࢖͏ • ίϯύΠϧ͢Δͱ+BWB4DSJQUʹͳΔݴޠ • ಉ͜͡ͱΛΑΓγϯϓϧʹ࣮ݱͰ͖Δ • 4BTTʢ4$44ʣΛ࢖͏ •
ίϯύΠϧ͢Δͱ$44ʹͳΔݴޠ • ม਺΍NJYJOʢؔ਺ʣɺೖΕࢠߏ଄͕Մೳ

$.click(function () { console.log(‘clicked’); }); ! ! ! $.click ->
console.log ‘clicked’

.wrapper .inner a { text-decoration: none; } .wrapper .inner a:hover
{ text-decoration: underline; } ! ! ! .wrapper { .inner { a { text-decoration: none; &:hover { text-decoration: underline; } } } }

ϦϦʔε $ grunt build

ϦϦʔε࣌ʹ΍ͬͯ͘ΕΔ͜ͱ • +BWB4DSJQUͱ$44ͷ࠷దԽ • ݁߹ͱѹॖ • ը૾ͷ࠷దԽ • ϦϦʔεʹඞཁͳϑΝΠϧͷΈΛ EJTUσΟϨΫτϦʹҠಈ

·ͱΊ • l)5.-z͸΋͏࢖͑Δʗ࢖ΘΕ͍ͯΔ • ٕज़ͷൣғɾछྨ͕ଟ͍͍͗ͯͭͯ͘͢ ͷ͕େม • ڵຯΛ࣋ͬͯͱʹ͔͘ίʔυΛॻ͘͜ͱ ͕ॏཁ •
:FPNBOͰ։ൃɾֶशޮ཰Ξοϓ

·ͩؒʹ߹͏ʂ ௥͍͚ͭΔʂ

͓͠·͍

まだ間に合うHTML5 - Yeomanで追いつけ！高速Webアプリ開発

まだ間に合うHTML5 - Yeomanで追いつけ！高速Webアプリ開発

More Decks by kadoppe

Other Decks in Technology

Featured

Transcript