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

Vue.jsをa-blog cmsで試してみる

Vue.jsをa-blog cmsで試してみる

2021年6月8日にオンラインで開催された「a-blog cms zoom up 2021/06」の発表スライドです。JavaScriptフレームワーク「Vue.js」をa-blog cmsをプラットフォームとして活用した初歩的な例をまとめています。

43a3551f1fad41e6d3c1e3e98b6cfaa1?s=128

うぇびんさん

June 08, 2021
Tweet

Transcript

  1. Vue.jsΛ
 a-blog cmsͰར༻ͯ͠ΈΔ ޱా੟ࢠ - ΢ΣϏϯάελδΦ
 2021-06-08 (tue) @ ๛ڮࢢͷࣗ୐

    a-blog cms zoom up 2021/06
  2. ޱాɹ੟ࢠ ͪͩ͘ ʢ͏͐ͼΜ͞Μʣ ͍ͤ͜ XFCCJOHTUVEJP ϑϩϯτΤϯυΤϯδχΞ BCMPHDNTΤόϯδΣϦετ XFCCJOHTUVEJPDPN Ѫ஌ݝ๛ڮࢢ

  3. ຊ֨తͳ
 ϑϩϯτΤϯυͷ
 ٕज़Λ
 ਎ʹண͚͍ͨ ݈߁໘ͱ͔
 ऩӹΞοϓͱ͔
 τϨϯυͱ͔

  4. Ͱ͖ͦ͏ͳ΍͔ͭΒֶश͠Α͏ Vue.js Angular.js React.js ೉қ౓ jQuery ૉͷJavaScript ͍ͩͿཧղͨ͠ ݟͨ͜ͱ͋Δ

  5. ͏͐ͼΜ͞Μɺ͜Μʹͪ͸ʂ ΋͠Α͚Ε͹࣍ճͷa-blog cms zoom upͰ
 ൃද͍͚ͯͨͩ͠ͳ͍Ͱ͠ΐ͏͔ʁ Ξοϓϧοϓϧ
 ৿ా͞Μ

  6. Vue.jsΛa-blog cmsͰ
 ࢼͯ͠ΈΑ͏

  7. Vue.jsͱ͸ ͼΎʔ͍͐͑͢͡ ͱಡΈ·͢ ̍

  8. JavaScriptͰͷΞϓϦ։ൃΛ
 ָʹ͢ΔϑϨʔϜϫʔΫ

  9. ެࣜͷઆ໌ Vue͸
 ϢʔβʔΠϯλʔϑΣΠεΛߏங͢ΔͨΊͷ
 ϓϩάϨογϒϑϨʔϜϫʔΫͰ͢ɻ https://jp.vuejs.org/v2/guide/index.html#Vue-js-ͱ͸ʁ

  10. Α͘Θ͔Βͳ͍ͷͰௐ΂Δ

  11. Vue.jsͷಛ௃ ‣ HTMLจॻϕʔε ‣ ֶशίετ͕௿͍
 ‣ ϢʔβʔΠϯλʔϑΣʔεͷ࡞੒ʹಛԽ ‣ ΫϦοΫ΍ϑΥʔϜೖྗʹ൓Ԡ͢Δɺ΋Ζ΋Ζ
 ‣

    ஈ֊తʢϓϩάϨογϒϑϨʔϜϫʔΫʣ ‣ ϓϩδΣΫτͷཁٻϨϕϧʹԠͯ͡ن໛Λม͑ΒΕΔ
  12. jQueryͱͷҧ͍ : jQueryͷ৔߹ <p> 変数 a は <span id=“var”></span> です。

    </p> let a = 0; $(‘#var’).text(a); a = 3; $(‘#var’).text(a);
  13. jQueryͱͷҧ͍ : jQueryͷ৔߹ ˣˣˣ+BWB4DSJQUͷRVFSZ4FMFDUPS΋ <p> 変数 a は <span id=“var”></span>

    です。 </p> let a = 0; $(‘#var’).text(a); a = 3; $(‘#var’).text(a); ม਺ͷ஋͕มΘͬͨΒ
 DOMʢHTMLͷߏ଄ʣΛ
 εΫϦϓτͰॻ͖׵͑Δඞཁ͕͋Δ
  14. jQueryͱͷҧ͍ : Vueͷ৔߹ <div id=“app"> <p> 変数 a は {{a}}

    です。 </p> </div> let a = 0; let app = new Vue({ el: '#app', data: data, }) a = 3;
  15. jQueryͱͷҧ͍ : Vueͷ৔߹ <div id=“app"> <p> 変数 a は {{a}}

    です。 </p> </div> let a = 0; let app = new Vue({ el: '#app', data: data, }) a = 3; HTML಺ͷɺ೚ҙͷཁૉΛ
 ʮVueΞϓϦέʔγϣϯʯ ͱͯ͠એݴ
  16. jQueryͱͷҧ͍ : Vueͷ৔߹ <div id=“app"> <p> 変数 a は {{a}}

    です。 </p> </div> let a = 0; let app = new Vue({ el: '#app', data: data, }) a = 3; ม਺ͷ஋͕มΘΔͱ
 ΞϓϦέʔγϣϯ಺ͷ
 DOM͕ࣗಈతʹߋ৽͞ΕΔ
  17. v-for ഑ྻΛ܁Γฦ͠ϦετΞοϓ ̎

  18. Vue.jsͱa-blog cmsͰ
 ͳʹ࡞Ζ͏ʁ

  19. a-blog cms ͚ͩͰ࡞ͬͨ ͱΓ͋͑ͣ

  20. None
  21. たのしい

  22. echo.css΋ΑΖ͘͠Ͷʂ https://echocss.webbingstudio.com/

  23. a-blog cmsͷϞδϡʔϧͰදࣔ <!-- BEGIN_MODULE Entry_Summary id="summary_actor_all" --> <!-- BEGIN unit:loop

    --> <!-- BEGIN entry:loop --> 【男優の情報を繰り返し表示】 <!-- END entry:loop --> <!-- END unit:loop --> <!-- END_MODULE Entry_Summary -->
  24. ܁Γฦ͠͸Ͳ͏͢Δʁ v-for IUUQTKQWVFKTPSHWHVJEFMJTUIUNMWGPSͰ഑ྻʹཁૉΛϚοϐϯά͢Δ

  25. Vue.jsͷ v-for Ͱදࣔ - HTMLଆ <div id=“app”> <div v-for="item in

    items" v-bind:key="item.id"> 【男優の情報を繰り返し表示】 </div> </div> ଐੑͬΆ͍΋ͷͷ͜ͱΛਖ਼ࣜʹ͸σΟϨΫςΟϒͱ͍͍·͢
  26. let data = { items: [ <!-- BEGIN_MODULE Entry_Summary id="summary_actor_all"

    —> <!-- BEGIN unit:loop --><!-- BEGIN entry:loop —> { id: {eid}, name: '{title}', image_src: '%{MEDIA_ARCHIVES_DIR}{actor_photo@path}’, furigana: '{actor_furigana}', age: {actor_birth}[age], height: {actor_height}, }, <!-- END entry:loop --><!-- END unit:loop —> <!-- END_MODULE Entry_Summary --> ] } a-blog cmsͷ
 ϞδϡʔϧͰ
 σʔλ഑ྻΛ࡞Δ ˞࣮ࡍʹ͸΋ͬͱ௕͍ίʔυͰ͢ ˞΋ͬͱεϚʔτͳํ๏͕͋Δ͚Ͳ ɹࠓͷͱ͜Ζ͸͜ΕͰ
  27. ͜͏ͳΔ

  28. let app = new Vue({ el: '#app', data: data, })

    ഑ྻΛ
 ΞϓϦέʔγϣϯͰ
 ࢖͏σʔλͱͯ͠
 ඥ෇͚Δ
  29. VueͰ ಉ͡ͷͰ͖ͨΘ͊ ( ‘ Ų ’ * )

  30. ͋Εʁ
 ͖ͬ͞ͱॱ൪ҧ͏ʁ

  31. ಡΈࠐΜͩͱ͖ʹ
 ഑ྻΛγϟοϑϧͨ͠ let app = new Vue({ el: '#app', data:

    data, }) app.items = shuffle( app.items ); ΞϓϦέʔγϣϯ໊ม਺Λૢ࡞͢Δͱଈ൓ө͞ΕΔʂ IUUQTXXXOYXPSMEOFUKTBSSBZTIV⒐FIUNM
  32. v-on ΫϦοΫ΍Ωʔૢ࡞Λ࿈݁ ̏

  33. ϘλϯΫϦοΫͰฒͼସ͍͑ͨ v-on IUUQTKQWVFKTPSHWHVJEFFWFOUTIUNM

  34. Vue.jsͷ v-on Ͱฒͼସ͑ - HTMLଆ <div id=“app”> <button v-on:click=“itemsort(‘syllabary')"> 五十音順

    </button> </div> PODMJDLଐੑͱಉ͡ॻ͖ํ
  35. v-on: ͸ @ ʹུهͰ͖Δ <div id=“app”> <button @click=“itemsort(‘syllabary’)”> 五十音順 </button>

    </div>
  36. let methods = { itemsort(index) { const funcs = {

    'id': function( items ){ // ID順に並び替え }, 'height': function( items ){ // 身長順に並び替え }, 'syllabary': function( items ){ // 五十音順に並び替え }, 'age': function( items ){ // 50歳以上の人を抜き出す }, // 以下略 引数を調べて実行 } } ࣮ߦ͍ͨ͠ॲཧΛ
 ΦϒδΣΫτͱͯ͠
 ఆ͓ٛͯ͘͠
  37. let app = new Vue({ el: '#app', data: data, methods:

    methods, }) ΦϒδΣΫτΛ
 ΞϓϦέʔγϣϯͰ
 ࢖͏ॲཧͱͯ͠
 ඥ෇͚Δ όʔδϣϯͰ͸ผͷํ๏͕͋Γ·͢ ͜Ε͸όʔδϣϯ·Ͱͷํ๏Ͱ͢
  38. ιʔτͰ͖ͨΘ͊ ( ‘ Ų ’ * )

  39. ͋Εʁ
 ಈ͘ԋग़ͬͯͲ͏΍ͬͨͷʁ

  40. transition-group ؆୯Ξχϝʔγϣϯ ̏

  41. transition-groupͰғΉ <div id=“app”> <transition-group name=“actors"> <div v-for="item in items" v-bind:key="item.id">

    【男優の情報を繰り返し表示】 </div> </transition-group> </div> ਖ਼ࣜʹ͸ίϯϙʔωϯτͱ͍͍·͢
  42. ग़ྗͷࡍʹHTMLཁૉʹม׵Ͱ͖Δ <transition-group name=“actors” tag=“div" class=“echo-cards" > <div class=“echo-cards">

  43. transition-groupͷޮՌ ‣ ฒͼସ͑ͷͱ͖ʹ
 v-forͷ܁Γฦ͠ʹ
 Ϋϥε͕෇͘ ‣ ͞ΒʹɺࣗಈͰ
 transformϓϩύςΟͷ
 Ґஔ৘ใ΋෇͘

  44. .actors-move { transition: transform 0.6s; } .໊લ-move Ͱ
 Ξχϝʔγϣϯͷ
 ࣌ؒΛࢦఆ͢Δ͚ͩ

    0.6ඵ͔͚ͯ
 ͦΕͧΕͷஉ༏Χʔυ͕
 ιʔτઌ΁Ҡಈ͢Δʂ
  45. ͜͜·Ͱ͸
 jQueryͰ΋ͳΜͱ͔ͳΔ ࠓͷCMSͷτϨϯυʹ௅ઓʂ

  46. ϔουϨεCMS ؅ཧը໘ͱެ։ϖʔδΛ෼཭ ̐

  47. ‣ දࣔ෦෼Λ࣋ͨͳ͍CMS ‣ APIܦ༝ͰσʔλΛऔಘ͢Δલఏ ϔουϨεCMSͱ͸ TJUFCDPN $.4ຊମ TJUFBDPN ެ։αΠτ

  48. ࠃ࢈७ਖ਼ͩͱ microCMSͳͲ https://microcms.io/

  49. a-blog cms Ͱ
 ϔουϨεCMS ͸Ͱ͖Δͷ͔ʁ

  50. ̍೥൒લ

  51. Headless CMSͱͯ͠ͷa-blog cms https://gradation.me/technology/a-blog-cms/headless-cms.html

  52. δΣϊϕʔθ͞Μ͕
 ·ͱΊͯ͘Ε͍ͯ·ͨ͠ ͋Γ͕ͱ͏͍͟͝·͢ʔʂ

  53. a-blog cmsͷ৔߹ ‣ ϔουϨεCMS͸ɺURLͰϦΫΤετ͢Δͱ
 JSON౳ͰσʔλΛฦ٫͢Δඞཁ͕͋Δ ‣ ͔͠͠ɺa-blog cms͸
 ͦͷΑ͏ͳʮAPIʯΛ͍࣋ͬͯͳ͍ ΢Σϒ੍࡞ऀ޲͚ͷ$.4Ͱ͔͢ΒͶ

  54. { "items": [ <!-- BEGIN_MODULE Entry_Summary id="summary_actor_all" —> <!-- BEGIN

    unit:loop --><!-- BEGIN entry:loop --> { "id": "{eid}", "name": "{title}", "image_src": “https://example.com%{MEDIA_ARCHIVES_DIR}{actor_photo@path}”, "furigana": "{actor_furigana}", "age": "{actor_birth}[age]", "height": "{actor_height}" }<!-- BEGIN glue -->,<!-- END glue --> <!-- END entry:loop --><!-- END unit:loop —> <!-- END_MODULE Entry_Summary --> ] } ςϯϓϨʔτͰ
 JSONΛ
 ࡞ͬͯ͠·͓͏ ΍΍ߥͬΆ͍Ͱ͕͢
  55. CMSଆͷυϝΠϯͷ
 .htaccessʹڐՄ͕ඞཁ Header set Access-Control-Allow-Origin:(改行) https://example.com

  56. JSONΛผυϝΠϯ͔Βݺͼɺ഑ྻʹม׵
 ࡞͓͍ͬͯͨ Vue.js ͷΞϓϦʹ࿈݁ axios .get('https://example.com/actors.json') .then( function(response) { app.items

    = response.data.items; } ); ࠓճ͸ݺͼग़͠ʹ)551௨৴͕ՄೳʹͳΔBYJPTΛ࢖͍·ͨ͠
  57. ผυϝΠϯͰදࣔͰ͖ͨΘ͊ ( ‘ Ų ’ * )

  58. ΫϦοΫͰৄࡉ৘ใΛ
 ද͔ࣔͨͬͨ͠ͷͰ͕͢
 ΍Γํ͕෼͔Βͣ… ࠓճ͸͜͜·Ͱʂ

  59. ิ଍ɾ·ͱΊ ̑

  60. a-blog cms ͸
 ೾Χοί(mustache)͕ ਖ਼͘͠දࣔ͞Εͳ͍ {{ name }} {name} ͳΜͯ


    ςϯϓϨʔτม਺͸ͳ͍Αʂ
  61. ͹ʔ΂͍ͨΉ @verbatim <div id="app"> {{ message }} </div> @endverbatim !WFSCBUJNϒϩοΫͰ

    ғΜͩՕॴ͸ ೾Χοί͕ల։͞Ε·ͤΜ IUUQTEFWFMPQFSBCMPHDNTKQEPDVNFOUUFNQMBUFWFSCBUJNIUNM
  62. ωοτͷ৘ใऩू͸͖͍ͭ ‣ όʔδϣϯ̎ܥͱ̏ܥͷҧ͍ ‣ جૅΛ஌͍ͬͯΔલఏͷ৘ใ ‣ React.js, nuxt.js, node.js …

    Vue.js ެ͕͍ࣜͪ͹ΜΘ͔Γ΍͍͢ʂ
  63. ࣮຿Ϩϕϧʹ
 ͳΓ͍ͨͷͰ
 ૉ௚ʹ
 ຊΛങ͍·ͨ͠ ࡳຈͷ
 ͳ͕͞Θ͞Μͱ͙ͬͪʔ͞Μͷ
 Vue.jsຊ

  64. ·͋ɹ͜Ε͔ΒͰ͕͢

  65. たのしい

  66. ͋Γ͕ͱ͏͍͟͝·ͨ͠ ίϯςϯπʹ৘೤ΛɺϚωʔδϝϯτʹ୳ٻΛ webbingstudio.com