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をプラットフォームとして活用した初歩的な例をまとめています。

うぇびんさん

June 08, 2021
Tweet

More Decks by うぇびんさん

Other Decks in Technology

Transcript

  1. Vue.jsΛ

    a-blog cmsͰར༻ͯ͠ΈΔ
    ޱా੟ࢠ - ΢ΣϏϯάελδΦ

    2021-06-08 (tue) @ ๛ڮࢢͷࣗ୐
    a-blog cms zoom up 2021/06

    View full-size slide

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

    View full-size slide

  3. ຊ֨తͳ

    ϑϩϯτΤϯυͷ

    ٕज़Λ

    ਎ʹண͚͍ͨ
    ݈߁໘ͱ͔

    ऩӹΞοϓͱ͔

    τϨϯυͱ͔

    View full-size slide

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

    View full-size slide

  5. ͏͐ͼΜ͞Μɺ͜Μʹͪ͸ʂ
    ΋͠Α͚Ε͹࣍ճͷa-blog cms zoom upͰ

    ൃද͍͚ͯͨͩ͠ͳ͍Ͱ͠ΐ͏͔ʁ
    Ξοϓϧοϓϧ

    ৿ా͞Μ

    View full-size slide

  6. Vue.jsΛa-blog cmsͰ

    ࢼͯ͠ΈΑ͏

    View full-size slide

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

    View full-size slide

  8. JavaScriptͰͷΞϓϦ։ൃΛ

    ָʹ͢ΔϑϨʔϜϫʔΫ

    View full-size slide

  9. ެࣜͷઆ໌
    Vue͸

    ϢʔβʔΠϯλʔϑΣΠεΛߏங͢ΔͨΊͷ

    ϓϩάϨογϒϑϨʔϜϫʔΫͰ͢ɻ
    https://jp.vuejs.org/v2/guide/index.html#Vue-js-ͱ͸ʁ

    View full-size slide

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

    View full-size slide

  11. Vue.jsͷಛ௃
    ‣ HTMLจॻϕʔε
    ‣ ֶशίετ͕௿͍

    ‣ ϢʔβʔΠϯλʔϑΣʔεͷ࡞੒ʹಛԽ
    ‣ ΫϦοΫ΍ϑΥʔϜೖྗʹ൓Ԡ͢Δɺ΋Ζ΋Ζ

    ‣ ஈ֊తʢϓϩάϨογϒϑϨʔϜϫʔΫʣ
    ‣ ϓϩδΣΫτͷཁٻϨϕϧʹԠͯ͡ن໛Λม͑ΒΕΔ

    View full-size slide

  12. jQueryͱͷҧ͍ : jQueryͷ৔߹

    変数 a は

    です。

    let a = 0;
    $(‘#var’).text(a);
    a = 3;
    $(‘#var’).text(a);

    View full-size slide

  13. jQueryͱͷҧ͍ : jQueryͷ৔߹
    ˣˣˣ+BWB4DSJQUͷRVFSZ4FMFDUPS΋

    変数 a は

    です。

    let a = 0;
    $(‘#var’).text(a);
    a = 3;
    $(‘#var’).text(a);
    ม਺ͷ஋͕มΘͬͨΒ

    DOMʢHTMLͷߏ଄ʣΛ

    εΫϦϓτͰॻ͖׵͑Δඞཁ͕͋Δ

    View full-size slide

  14. jQueryͱͷҧ͍ : Vueͷ৔߹


    変数 a は
    {{a}} です。


    let a = 0;
    let app = new Vue({
    el: '#app',
    data: data,
    })
    a = 3;

    View full-size slide

  15. jQueryͱͷҧ͍ : Vueͷ৔߹


    変数 a は
    {{a}} です。


    let a = 0;
    let app = new Vue({
    el: '#app',
    data: data,
    })
    a = 3;
    HTML಺ͷɺ೚ҙͷཁૉΛ

    ʮVueΞϓϦέʔγϣϯʯ
    ͱͯ͠એݴ

    View full-size slide

  16. jQueryͱͷҧ͍ : Vueͷ৔߹


    変数 a は
    {{a}} です。


    let a = 0;
    let app = new Vue({
    el: '#app',
    data: data,
    })
    a = 3;
    ม਺ͷ஋͕มΘΔͱ

    ΞϓϦέʔγϣϯ಺ͷ

    DOM͕ࣗಈతʹߋ৽͞ΕΔ

    View full-size slide

  17. v-for
    ഑ྻΛ܁Γฦ͠ϦετΞοϓ
    ̎

    View full-size slide

  18. Vue.jsͱa-blog cmsͰ

    ͳʹ࡞Ζ͏ʁ

    View full-size slide

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

    View full-size slide

  20. たのしい

    View full-size slide

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

    View full-size slide

  22. a-blog cmsͷϞδϡʔϧͰදࣔ



    【男優の情報を繰り返し表示】



    View full-size slide

  23. ܁Γฦ͠͸Ͳ͏͢Δʁ
    v-for
    IUUQTKQWVFKTPSHWHVJEFMJTUIUNMWGPSͰ഑ྻʹཁૉΛϚοϐϯά͢Δ

    View full-size slide

  24. Vue.jsͷ v-for Ͱදࣔ - HTMLଆ


    【男優の情報を繰り返し表示】


    ଐੑͬΆ͍΋ͷͷ͜ͱΛਖ਼ࣜʹ͸σΟϨΫςΟϒͱ͍͍·͢

    View full-size slide

  25. let data = {
    items: [

    ]
    }
    a-blog cmsͷ

    ϞδϡʔϧͰ

    σʔλ഑ྻΛ࡞Δ
    ˞࣮ࡍʹ͸΋ͬͱ௕͍ίʔυͰ͢
    ˞΋ͬͱεϚʔτͳํ๏͕͋Δ͚Ͳ
    ɹࠓͷͱ͜Ζ͸͜ΕͰ

    View full-size slide

  26. let app = new Vue({
    el: '#app',
    data: data,
    })
    ഑ྻΛ

    ΞϓϦέʔγϣϯͰ

    ࢖͏σʔλͱͯ͠

    ඥ෇͚Δ

    View full-size slide

  27. VueͰ ಉ͡ͷͰ͖ͨΘ͊ ( ‘ Ų ’ * )

    View full-size slide

  28. ͋Εʁ

    ͖ͬ͞ͱॱ൪ҧ͏ʁ

    View full-size slide

  29. ಡΈࠐΜͩͱ͖ʹ

    ഑ྻΛγϟοϑϧͨ͠
    let app = new Vue({
    el: '#app',
    data: data,
    })
    app.items = shuffle( app.items );
    ΞϓϦέʔγϣϯ໊ม਺Λૢ࡞͢Δͱଈ൓ө͞ΕΔʂ
    IUUQTXXXOYXPSMEOFUKTBSSBZTIV⒐FIUNM

    View full-size slide

  30. v-on
    ΫϦοΫ΍Ωʔૢ࡞Λ࿈݁
    ̏

    View full-size slide

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

    View full-size slide

  32. Vue.jsͷ v-on Ͱฒͼସ͑ - HTMLଆ


    五十音順


    PODMJDLଐੑͱಉ͡ॻ͖ํ

    View full-size slide

  33. v-on: ͸ @ ʹུهͰ͖Δ


    五十音順


    View full-size slide

  34. let methods = {
    itemsort(index) {
    const funcs = {
    'id': function( items ){
    // ID順に並び替え
    },
    'height': function( items ){
    // 身長順に並び替え
    },
    'syllabary': function( items ){
    // 五十音順に並び替え
    },
    'age': function( items ){
    // 50歳以上の人を抜き出す
    },
    // 以下略 引数を調べて実行
    }
    }
    ࣮ߦ͍ͨ͠ॲཧΛ

    ΦϒδΣΫτͱͯ͠

    ఆ͓ٛͯ͘͠

    View full-size slide

  35. let app = new Vue({
    el: '#app',
    data: data,
    methods: methods,
    })
    ΦϒδΣΫτΛ

    ΞϓϦέʔγϣϯͰ

    ࢖͏ॲཧͱͯ͠

    ඥ෇͚Δ
    όʔδϣϯͰ͸ผͷํ๏͕͋Γ·͢
    ͜Ε͸όʔδϣϯ·Ͱͷํ๏Ͱ͢

    View full-size slide

  36. ιʔτͰ͖ͨΘ͊ ( ‘ Ų ’ * )

    View full-size slide

  37. ͋Εʁ

    ಈ͘ԋग़ͬͯͲ͏΍ͬͨͷʁ

    View full-size slide

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

    View full-size slide

  39. transition-groupͰғΉ



    【男優の情報を繰り返し表示】



    ਖ਼ࣜʹ͸ίϯϙʔωϯτͱ͍͍·͢

    View full-size slide

  40. ग़ྗͷࡍʹHTMLཁૉʹม׵Ͱ͖Δ
    name=“actors”
    tag=“div"
    class=“echo-cards"
    >

    View full-size slide

  41. transition-groupͷޮՌ
    ‣ ฒͼସ͑ͷͱ͖ʹ

    v-forͷ܁Γฦ͠ʹ

    Ϋϥε͕෇͘
    ‣ ͞ΒʹɺࣗಈͰ

    transformϓϩύςΟͷ

    Ґஔ৘ใ΋෇͘

    View full-size slide

  42. .actors-move {
    transition:
    transform 0.6s;
    }
    .໊લ-move Ͱ

    Ξχϝʔγϣϯͷ

    ࣌ؒΛࢦఆ͢Δ͚ͩ
    0.6ඵ͔͚ͯ

    ͦΕͧΕͷஉ༏Χʔυ͕

    ιʔτઌ΁Ҡಈ͢Δʂ

    View full-size slide

  43. ͜͜·Ͱ͸

    jQueryͰ΋ͳΜͱ͔ͳΔ
    ࠓͷCMSͷτϨϯυʹ௅ઓʂ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. a-blog cms Ͱ

    ϔουϨεCMS ͸Ͱ͖Δͷ͔ʁ

    View full-size slide

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

    View full-size slide

  49. δΣϊϕʔθ͞Μ͕

    ·ͱΊͯ͘Ε͍ͯ·ͨ͠
    ͋Γ͕ͱ͏͍͟͝·͢ʔʂ

    View full-size slide

  50. a-blog cmsͷ৔߹
    ‣ ϔουϨεCMS͸ɺURLͰϦΫΤετ͢Δͱ

    JSON౳ͰσʔλΛฦ٫͢Δඞཁ͕͋Δ
    ‣ ͔͠͠ɺa-blog cms͸

    ͦͷΑ͏ͳʮAPIʯΛ͍࣋ͬͯͳ͍
    ΢Σϒ੍࡞ऀ޲͚ͷ$.4Ͱ͔͢ΒͶ

    View full-size slide

  51. {
    "items": [

    {
    "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}"
    },

    ]
    }
    ςϯϓϨʔτͰ

    JSONΛ

    ࡞ͬͯ͠·͓͏
    ΍΍ߥͬΆ͍Ͱ͕͢

    View full-size slide

  52. CMSଆͷυϝΠϯͷ

    .htaccessʹڐՄ͕ඞཁ
    Header set Access-Control-Allow-Origin:(改行)
    https://example.com

    View full-size slide

  53. JSONΛผυϝΠϯ͔Βݺͼɺ഑ྻʹม׵

    ࡞͓͍ͬͯͨ Vue.js ͷΞϓϦʹ࿈݁
    axios
    .get('https://example.com/actors.json')
    .then( function(response) {
    app.items = response.data.items;
    }
    );
    ࠓճ͸ݺͼग़͠ʹ)551௨৴͕ՄೳʹͳΔBYJPTΛ࢖͍·ͨ͠

    View full-size slide

  54. ผυϝΠϯͰදࣔͰ͖ͨΘ͊ ( ‘ Ų ’ * )

    View full-size slide

  55. ΫϦοΫͰৄࡉ৘ใΛ

    ද͔ࣔͨͬͨ͠ͷͰ͕͢

    ΍Γํ͕෼͔Βͣ…
    ࠓճ͸͜͜·Ͱʂ

    View full-size slide

  56. ิ଍ɾ·ͱΊ
    ̑

    View full-size slide

  57. a-blog cms ͸

    ೾Χοί(mustache)͕ ਖ਼͘͠දࣔ͞Εͳ͍
    {{ name }}
    {name} ͳΜͯ

    ςϯϓϨʔτม਺͸ͳ͍Αʂ

    View full-size slide

  58. ͹ʔ΂͍ͨΉ
    @verbatim

    {{ message }}

    @endverbatim
    !WFSCBUJNϒϩοΫͰ
    ғΜͩՕॴ͸
    ೾Χοί͕ల։͞Ε·ͤΜ
    IUUQTEFWFMPQFSBCMPHDNTKQEPDVNFOUUFNQMBUFWFSCBUJNIUNM

    View full-size slide

  59. ωοτͷ৘ใऩू͸͖͍ͭ
    ‣ όʔδϣϯ̎ܥͱ̏ܥͷҧ͍
    ‣ جૅΛ஌͍ͬͯΔલఏͷ৘ใ
    ‣ React.js, nuxt.js, node.js …
    Vue.js ެ͕͍ࣜͪ͹ΜΘ͔Γ΍͍͢ʂ

    View full-size slide

  60. ࣮຿Ϩϕϧʹ

    ͳΓ͍ͨͷͰ

    ૉ௚ʹ

    ຊΛങ͍·ͨ͠
    ࡳຈͷ

    ͳ͕͞Θ͞Μͱ͙ͬͪʔ͞Μͷ

    Vue.jsຊ

    View full-size slide

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

    View full-size slide

  62. たのしい

    View full-size slide

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

    View full-size slide