Upgrade to Pro — share decks privately, control downloads, hide ads and more …

まだ間に合うHTML5 - Yeomanで追いつけ!高速Webアプリ開発

kadoppe
October 26, 2013

まだ間に合うHTML5 - Yeomanで追いつけ!高速Webアプリ開発

2013/10/26に大阪で開催されたInnovation EGG 第1回のセミナーで使ったプレゼン資料です。

http://eventregist.com/e/InnovationEGG01

kadoppe

October 26, 2013
Tweet

More Decks by kadoppe

Other Decks in Technology

Transcript

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

  2. ࣗݾ঺հ • ໊લ • ໳࿬߃ฏ  !LBEPQQF • ৬ۀ •

    ιϑτ΢ΣΞΤϯδχΞ • ॴଐ • )5.-8&45KQגࣜձࣾγΣΞ΢Οζ
  3. ຊ೔ͷεϥΠυ • 4MJEF4IBSF • IUUQXXXTMJEFTIBSFOFULBEPQQF • 4QFBLFS%FDL • IUUQTTQFBLFSEFDLDPNLBEPQQF

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

  5. )5.-8&45KQͷ঺հ

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

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

  9. ๻ͱ)5.-8&45KQ

  10. ग़ձ͍ •  • ژ౎(56()5.-ϋοΧιϯʹࢀՃ • +BWB4DSJQU)5.-ॳ৺ऀͰͨ͠ • ͦͷޙ •

    )5.-ಡॻձ΍ϋοΧιϯʹͭ͘͜͠ࢀՃ • ίΞϝϯόʔͱ͓ͯ͠༠͍Λ͏͚Δ
  11. ษڧձͰϓϨθϯ • )5.-ͳͲษڧձ͕։࠵͞ΕΔͨͼʹ Ͱ͖Δ͚ͩϓϨθϯ • ͦΕ͕͖͔͚ͬͰʜ

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

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

  14. ੋඇࢀՃ͍ͯͩ͘͠͞ʂ

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

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

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

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

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

    (PPHMF$ISPNFҠߦ • 4BGBSJҠߦ
  20. l)5.-zͰͰ͖Δ͜ͱ • ϚʔΫΞοϓฤ • දݱฤ • +BWB4DSJQU"1*ฤ • εϚϗΞϓϦฤ

  21. ϚʔΫΞοϓฤ

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

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

    ! ! <!DOCTYPE html>
  24. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> ! ! ! <meta charset="UTF-8">

  25. <style type=”text/css”>...</style> <script type=”text/javascript”>...</script> ! ! ! <style>...</style> <script>...</script>

  26. ηϚϯςΟοΫͳϚʔΫΞοϓ • <div>ཁૉ • ίϯϐϡʔλ͕ҙຯΛղऍ͢Δͷ͕೉͍͠ • <article>, <section>ཁૉͳͲΛ ࢖͏͜ͱͰ •

    ίϯϐϡʔλ͕ҙຯΛղऍͰ͖ΔΑ͏ʹ • εΫϦʔϯϦʔμ΍ݕࡧΤϯδϯ͕ ߴػೳʹ
  27. <article>ཁૉ • lهࣄzΛϚʔΫΞοϓ • 344ϑΟʔυʹؚΊͨͱ͖ʹ̍ͭͷهࣄͱͯ͠ ੒Γཱͭ୯Ґ • ྫʣ • ϒϩάͷΤϯτϦ

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

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

  30. <section> <h1>1ষ ͸͡Ίʹ</h1> <p> ... </p> </section> <section> <h1>2ষ എܠ</h2>

    <p> ... </p> </section>
  31. දݱฤ

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

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

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

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

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

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

    background-color: blue; }
  38. .box { animation: an-animation 2s infinite; } @keyframes an-animation {

    0%, 100% { left: 0px; } 50% { left: 100px; } }
  39. ࢀߟɿ̑෼ͰΘ͔Δ$44ͷάϥϑΟοΫεػೳ ʮ෼ͰΘ͔Δ$44ͷάϥϑΟοΫεػೳʯαϯϓϧ IUUQXXXBUNBSLJUDPKQGXDSEFTJHOCFOLZPXFCHSBQIJDTTBNQMFIUNM

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

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

    kadoppeFont; }
  42. ศརɿ(PPHMF'POUT (PPHMF'POUTIUUQXXXHPPHMFDPNGPOUT

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

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

    8FC(- • %άϥϑΟοΫ
  45. <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>
  46. <svg width="150" height="150"> ! <circle r="50" cx="75" cy="75" /> </svg>

  47. σϞ5IF4IPEP 5IF4IPEPIUUQXXXUIFTIPEPDPN

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

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

  50. +BWB4DSJQU"1*ฤ

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

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

  53. ࣄྫ(PPHMF.BQ

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

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

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

  57. 8FC"VEJP"1* • Ի੠ͷੜ੒ • ϑΟϧλʔॲཧ • ߴਫ਼౓ͷ࠶ੜλΠϛϯά੍ޚ • ࢖༻ྫɿ •

    ήʔϜ • γϯηαΠβʔ
  58. ࣄྫ"OHSZ#JSET "OHSZ#JSET$ISPNFIUUQDISPNFBOHSZCJSETDPN

  59. εϚϗΞϓϦฤ

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

    • )5.- • $44 • +BWB4DSJQU
  61. ࣄྫɿ.Z)FBSU$BNFS 1IPOF(BQc.Z)FBSU$BNFSBIUUQQIPOFHBQDPNBQQNZIFBSUDBNFSB

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

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

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

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

  66. ্͍͍ͭͯ͘Ͱͷ໰୊఺ • ٕज़͕޿͗͢Δɾଟ͗͢Δ • ৽ٕज़͕ͲΜͲΜొ৔͢Δ • "1* • େྔͷ+BWB4DSJQUϥΠϒϥϦ •

    #BDLCPOFKT %KT 5ISFFKT ̋̋KT 
  67. Ͳ͏͢Ε͹ʜ ɾТɾʆ

  68. ̍ɽͱʹ͔͘ڵຯΛ࣋ͭ

  69. ̎ɽͱʹ͔͘ίʔυΛॻ͘

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

  71. ΋͏ख஗Εʁؒʹ߹Θͳ͍ʁ ɾТɾʆ

  72. ̏ɽߴ଎ʹίʔυΛॻ͜͏

  73. ͦ͜Ͱ

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

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

  76. :FPNBOͷߏ੒ཁૉ

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

    DISPNFBQQ$ISPNF8FC4UPSF༻
  78. (SVOU • ͞·͟·ͳ࡞ۀΛࣗಈԽ • ։ൃ༻αʔόͷىಈ • ϑΝΠϧߋ৽ͷ؂ࢹ • ࣗಈςετ •

    ϦϦʔε࡞ۀ
  79. #PXFS • +BWB4DSJQUϥΠϒϥϦͷύοέʔδ؅ཧ • ݕࡧ • Πϯετʔϧ • Ξοϓσʔτ •

    ґଘؔ܎ͷࣗಈղܾ
  80. ࣮ࡍʹ͔ͭͬͯΈΔ

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

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

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

  84. :FPNBOͷΠϯετʔϧ $ npm install -g yo grunt-cli bower generator-webapp $Λআ͍ͨ෦෼Λ

    λʔϛφϧͰೖྗͯ͠&/5&3
  85. ϓϩδΣΫτͷ࡞੒ $ cd /Users/kadoppe/Source/hello-yeoman $ yo webapp

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

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

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

    QBDLBHFKTPO • UFTU
  89. BQQσΟϨΫτϦͷத਎ • IUNM • CPXFS@DPNQPOFOUT • JNBHFTը૾ϑΝΠϧΛ഑ஔ • JOEFYIUNM •

    SPCPUTUYU • TDSJQUT+BWB4DSJQUϑΝΠϧΛ഑ஔ • TUZMFT$44ϑΝΠϧ
  90. ಋೖ͞Ε͍ͯΔϑϨʔϜϫʔΫɾϥΠϒϥϦ • )5.-#PJMFSQMBUF • .PEFSOJ[S • 3FRVJSF+4 • #PPUTUSBQ

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

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

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

  94. <html class=“js canvas canvastext no-geolocation rgba hsla multiplebgs borderimage borderradius

    boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache fontface”>
  95. 3FRVJSF+4 • +BWB4DSJQUͰ֎෦+BWB4DSJQUϑΝΠϧ ͷಡΈࠐΈΛ࣮ݱ͢ΔϥΠϒϥϦ • $ݴޠͰ͍͏JNQPSU • େن໛ͳ+BWB4DSJQUϓϩάϥϜΛ ॻ͘ͱ͖ʹศར

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

  97. αʔόͷىಈ $ grunt server

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

  99. ίʔυΛॻ͘ • ςΩετΤσΟλͰࣗ༝ʹίʔυΛฤू • )5.-ɿJOEFYIUNM • +BWB4DSJQU • NBJOKTɿઃఆؔ܎ͷίʔυ •

    BQQKTɿΞϓϦέʔγϣϯͷίʔυ • $44ɿNBJOTDTT
  100. -JWF3FMPBE • ϑΝΠϧΛมߋͨ͠Βࣗಈతʹϒϥ΢β Λߋ৽ͯ͘͠ΕΔ࢓૊Έ • ʮΤσΟλˠอଘˠϒϥ΢βˠߋ৽ˠʯ ͷख͕ؒେ෯ʹܰݮ

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

  102. require.config({ paths: { d3: '../bower_components/d3/d3' }, shim: { d3: {

    exports: 'd3' } } }); NBJOKTʹ͓·͡ͳ͍௥Ճ ˞3FRVJSF+4ͷ%KTಡΈࠐΈઃఆ
  103. define(['d3'], function (d3) { }); BQQKTʹ͓·͡ͳ͍௥Ճ ˞3FRVJSF+4ͷ%KTಡΈࠐΈઃఆ

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

  105. ͞Βʹ։ൃΛߴ଎Խ • $P⒎FF4DSJQUΛ࢖͏ • ίϯύΠϧ͢Δͱ+BWB4DSJQUʹͳΔݴޠ • ಉ͜͡ͱΛΑΓγϯϓϧʹ࣮ݱͰ͖Δ • 4BTTʢ4$44ʣΛ࢖͏ •

    ίϯύΠϧ͢Δͱ$44ʹͳΔݴޠ • ม਺΍NJYJOʢؔ਺ʣɺೖΕࢠߏ଄͕Մೳ
  106. $.click(function () { console.log(‘clicked’); }); ! ! ! $.click ->

    console.log ‘clicked’
  107. .wrapper .inner a { text-decoration: none; } .wrapper .inner a:hover

    { text-decoration: underline; } ! ! ! .wrapper { .inner { a { text-decoration: none; &:hover { text-decoration: underline; } } } }
  108. ϦϦʔε $ grunt build

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

  110. ·ͱΊ • l)5.-z͸΋͏࢖͑Δʗ࢖ΘΕ͍ͯΔ • ٕज़ͷൣғɾछྨ͕ଟ͍͍͗ͯͭͯ͘͢ ͷ͕େม • ڵຯΛ࣋ͬͯͱʹ͔͘ίʔυΛॻ͘͜ͱ ͕ॏཁ •

    :FPNBOͰ։ൃɾֶशޮ཰Ξοϓ
  111. ·ͩؒʹ߹͏ʂ ௥͍͚ͭΔʂ

  112. ͓͠·͍