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

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

1. Vue.jsΛ
 a-blog cmsͰར༻ͯ͠ΈΔ ޱా੟ࢠ - ΢ΣϏϯάελδΦ
 2021-06-08 (tue) @ ๛ڮࢢͷࣗ୐ a-blog cms zoom up 2021/06
2. ޱాɹ੟ࢠ ͪͩ͘ ʢ͏͐ͼΜ͞Μʣ ͍ͤ͜ XFCCJOHTUVEJP ϑϩϯτΤϯυΤϯδχΞ
   BCMPH
   DNTΤόϯδΣϦετ 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 ͚ͩͰ࡞ͬͨ ͱΓ͋͑ͣ
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