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

MTDDC Meetup Tokyo 2020 MovableType.net Block Editor

hayase
October 10, 2020

MTDDC Meetup Tokyo 2020 MovableType.net Block Editor

MovableType.net のカスタマイズ可能なブロックエディタの活用方法

Movable Type7にも搭載予定の簡単にカスタマイズ可能な MovableType.netのブロックエディタ。使い方によって様々な運用が可能です。今回はその活用方法について詳しく解説していきます。

hayase

October 10, 2020
Tweet

More Decks by hayase

Other Decks in Business

Transcript

  1. .PWBCMF5ZQFOFUͷΧελϚΠζՄೳͳ
    ϒϩοΫΤσΟλͷ׆༻ํ๏

    View Slide

  2. ࣗݾ঺հ
    γοΫεɾΞύʔτגࣜձࣾ
    ੡඼اըγχΞϚωδϟʔ
    ૣ੉ɹকҰ
    ݸਓαΠτɹIUUQTIBZBTFUW
    ɾ.5 .PWBCMF5ZQF
    ྺ೥໨
    ɾԕڑ཭πʔΩχετʢἚ৓ʣ
    ɾςϨϫʔΫͰϫʔϧυϏδωεαςϥΠτີணऔࡐ
    ɾυϩʔϯඈ͹ͯ͠ࢢͷެࣜ؍ޫಈը࡞੒
    ɾԻָϥΠϒͷԋग़༻ιϑτͳͲ͍Ζ͍Ζ࡞੒
    ɾੈքΏΔϛϡʔδοΫڠձʹࢀՃ
    ɾ΀Α΀ΑFεϙʔπɹࠓ೥΋ࠃମ༧બʹͰ͍ͨ

    View Slide

  3. ຊ೔ͷ༧ఆ
    ࠓ೥ϦϦʔεͨ͠.PWBCMF5ZQFOFUͷ৽ΤσΟλͷϒ
    ϩοΫΤσΟλɻ࢖͍ํʹΑͬͯ͸༷ʑͳӡ༻͕Մೳʹͳ
    Γ·͢ɻ׆༻ํ๏Λৄ͘͠ղઆ͠·͢ʂ

    View Slide

  4. ͱɺͦͷલʹ
    .PWBCMF5ZQFϑΝϛϦʔΛ͝঺հ

    View Slide

  5. .PWBCMF5ZQF
    ࡉ͔ͳվળ΍࢖͍উखͷ޲্Λ໨ࢦ͠ɺҾ͖ଓ͖ҎԼͷରԠΛߦ͍ɺ
    ̏ϲ݄ͷ୹͍εύϯͰϦϦʔεΛߦ͍ͬͯ·͢ɻ
    6*΍࢓༷ͷվળ
    όάϑΟοΫε
    υΩϡϝϯτͷ֦ॆ

    View Slide

  6. .PWBCMF5ZQFͷ௚ۙͷϦϦʔε༧ఆ
    ௚ۙͷϦϦʔε͸ҎԼΛ༧ఆ͍ͯ͠·͢ɻ
    w ݄த०ɿS
    w ೥໌͚ɿ.PWBCMF5ZQFOFUͷϒϩοΫΤσΟλΛϓϥάΠ
    ϯԽͯ͠ϦϦʔε

    View Slide

  7. .PWBCMF5ZQFOFUϑΥʔϜ
    8PSE1SFTTͰ΋੩త)5.-ϖʔ
    δͰ΋ɺιʔεΛషΓ෇͚Δ͚ͩ
    Ͱઃஔ͕Ͱ͖ΔϑΥʔϜαʔϏ
    εʂ
    IUUQTNPWBCMFUZQFOFUGPSN

    View Slide

  8. .PWBCMF5ZQFOFUϑΥʔϜͷಛ௃
    w߲໨͸υϥοάˍυϩοϓͰͩΕͰ΋؆୯ʹ࡞੒͢Δ͜ͱ͕Ͱ͖Δ
    wઃஔ͸ඞཁͳεΫϦϓτΛઃஔ্ͨ͠ͰJGSBNFͷιʔεΛషΔ͚ͩ
    wड෇σʔλΛอଘ͠$47Ͱॻ͖ग़͠΋Ͱ͖Δ
    w8FCIPPL࿈ܞ΍LJOUPOFͱͷ࿈ܞػೳͰ֎෦ͱ࿈ܞͰ͖Δ
    w݅਺΍೔࣌Λࢦఆͯ͠ड෇Λఀࢭͤ͞Δ͜ͱ͕Ͱ͖Δ
    w௨஌ϝʔϧ΍ࣗಈฦ৴ϝʔϧ΋ࣗ༝ʹΧελϚΠζՄೳ
    wϑΥʔϜ͝ͱʹઃஔ͢ΔαΠτͷυϝΠϯΛࢦఆͰ͖Δ
    wݸผ63-Λ࣋ͨͤͯϖʔδͱͯ͠දࣔ͢Δ͜ͱ͕Մೳ

    View Slide

  9. .PWBCMF5ZQFOFUαΠταʔν
    https://movabletype.net/sitesearch/
    •ݕࡧ݁Ռʹ޿ࠂදࣔͳ͠
    •ຒΊࠐΈίʔυͷషΓ෇͚Ͱઃஔ
    •Ωʔϫʔυ͝ͱʹ༏ઌϖʔδࢦఆՄೳ
    •ݕࡧΤϯδϯʹ͸GoogleͷAPIΛ࠾༻
    •݄1,000ԁʢ೥෷͍ͳΒ834ԁʣ͔Β

    View Slide

  10. .PWBCMF5ZQFOFU
    খதن໛ͷ΢ΣϒαΠτ੍࡞ɾӡӦʹ࠷ద
    ֹ݄໿ԁ͔Βొ࿥͢Ε͹͙͢ʹ࢖͑Δ
    ϝϯςφϯεϑϦʔͷ΢ΣϒαʔϏεܕߴػೳ$.4

    View Slide

  11. .PWBCMF5ZQFOFUͷಛ௕
    .PWBCMF5ZQFOFUʹ͸ҎԼͷಛ௕͕͋Γ·͢ɻ
    w΢ΣϒαʔϏεܕͳͷͰ೉͍͠ઃఆ౳ͳ͘Ϣʔβʔొ࿥͢Δ͚ͩͰ͙͢࢖͑Δ
    wαʔόʔ؅ཧ΍ιϑτ΢ΣΞͷ؅ཧ͕ෆཁͳͷͰɺηΩϡϦςΟ౳΋ؾʹͤͣʹ҆
    ৺ͯ͠ӡ༻͕Մೳ
    wαʔόʔྖҬͱ$.4ͷར༻ྉ͕ࠐΈͰֹ݄໿ԁʢ೥ؒҰׅ෷͍ͷ৔߹ʣ͔Β
    ҆Ձʹ࢝ΊΒΕΔ
    wϖʔδ͸׬શʹಈతԽ͞Ε͍ͯΔʢϖʔδੜ੒ͷ଴ͪ࣌ؒͳ͠ʣ
    wσβΠϯ͸)5.-ϨϕϧͰࣗ༝ʹฤूՄೳͰɺ$.4ͷσʔλ͸.5λάͱ͍͏ಠࣗ
    λάͰ؆୯ʹѻ͑Δ
    wεϚʔτϑΥϯʹରԠͨ͠ଈઓྗʹͳΔϨεϙϯγϒσβΠϯͷςʔϚΛෳ਺༻ҙ
    w؆୯ʹ࡞੒ઃஔ͕Ͱ͖ΔϑΥʔϜɺαΠταʔνػೳ͕ඪ४Ͱ౥ࡌ͞Ε͍ͯΔ

    View Slide

  12. ϒϩοΫΤσΟλ

    View Slide

  13. ϒϩοΫΤσΟλͷಛ௃
    w ཁૉͷϒϩοΫΛ௥Ճ͢ΔܗͰهࣄɺ΢Σ
    ϒϖʔδΛ࡞੒ɺฤू
    w ௥Ճͨ͠ϒϩοΫ͸ޙ͔Βฒͼସ͑΋0,
    w ར༻͠ͳ͍ཁૉͷϒϩοΫΛඇදࣔʹͨ͠
    Γɺฒͼॱͷมߋ΋Մೳ
    w ʮΧελϜϒϩοΫʯͰɺಠࣗͷཁૉΛઃ
    ఆͨ͠ϒϩοΫΛ௥Ճ
    w ϒϩοΫΤσΟλͰॻ͍ͨσʔλ͸ɺ.5λ
    άͰϒϩοΫ୯ҐͰͷग़ྗ͕Մೳ

    View Slide

  14. ඪ४ϒϩοΫͷछྨ
    ඪ४Ͱ༻ҙ͞Ε͍ͯΔϒϩοΫͷछྨ͸ҎԼʹͳΓ·͢ɻ
    wςΩετϒϩοΫʢஈམɺݟग़͠ɺଠࣈɺՕ৚ॻ͖ɺதԝدͤͳͲ͕Մೳʣ
    wը૾ʢ୅ସςΩετɺΩϟϓγϣϯɺදࣔαΠζɺදࣔҐஔࢦఆ͕Մೳʣ
    wϑΝΠϧʢμ΢ϯϩʔυϦϯΫΛදࣔʣ
    w)5.-
    wP&NCFEʢಈը΍4/4౤ߘΛ63-Λೖྗ͢ΔܗͰຒΊࠐΈʣ
    wܩઢ
    wςʔϒϧʢηϧͷ௥Ճɺ݁߹ɺελΠϧͷௐ੔͕Մೳʣ
    wϚϧνΧϥϜʢྻɺྻɺྻʣ

    View Slide

  15. ϒϩοΫͷදࣔʗඇදࣔɺฒͼସ͑
    ϒϩοΫ͸ɺهࣄɾ΢ΣϒϖʔδͦΕͧ
    ΕͰදࣔඇදࣔɺฒͼସ͑ͷઃఆ͕Մೳ
    Ͱ͢ɻ
    γϣʔτΧοτ΋ࢦఆͰ͖·͢ɻ
    ͦΕͧΕඞཁͳϒϩοΫΛඞཁͳॱ൪ʹ
    ฒ΂αΠτӡ༻ʹ͋ΘͤͨΤσΟλʹ͢
    Δ͜ͱ͕Ͱ͖·͢ɻ

    View Slide

  16. ΧελϜϒϩοΫ
    ඪ४ͷϒϩοΫҎ֎ʹɺಠࣗͷཁૉͰΧ
    ελϜϒϩοΫͷ࡞੒͕ՄೳͰ͢
    ӡ༻ʹ͋ΘͤͯɺඞཁͳػೳΛ΋ͬͨϒ
    ϩοΫΛ༻ҙ͢Δ͜ͱʹΑͬͯɺΑΓӡ
    ༻ͷ͠΍͍͢΢ΣϒαΠτΛ࡞੒͢Δ͜
    ͱ͕Ͱ͖·͢

    View Slide

  17. ΧελϜϒϩοΫͰͰ͖Δ͜ͱ
    ΧελϜϒϩοΫͰ࣮ݱՄೳͳྫ͸ҎԼʹͳΓ·͢ɻ
    wಛఆͷDMBTT໊Λ͚ͭͨϒϩοΫΛ࡞੒ͯͦ͠ΕͧΕҟͳΔ$44Λઃఆ͓ͯ͘͠
    wϨεϙϯγϒϨΠΞ΢τΛ୲อͨ͠ΧϥϜͷϨΠΞ΢τΛ෦෼తʹ࢖༻͢Δ
    w&YDFMϑΝΠϧΛಡΈࠐΜͰࣗಈͰςʔϒϧʢදʣΛදࣔ͢Δ
    wը૾ΛεϥΠυγϣʔͰදࣔ͢Δ
    ઃఆͨ͠ΧελϜϒϩοΫͷಡΈࠐΈʗॻ͖ग़͠Λར༻ͯ͠
    ΧελϜϒϩοΫͷ਽ܗԽɺ഑෍΋Մೳ

    View Slide

  18. σϞ

    View Slide

  19. ΧελϜϒϩοΫΛ׆༻ͨ͠৽ςʔϚ
    τοϓϖʔδΛؚΉ֤ϖʔ
    δΛϒϩοΫΛ૊Έ߹Θͤ
    Δ͚ͩͰ࡞੒Ͱ͖Δ৽ςʔ
    Ϛɺ#MPDL-BZPVUʢԾʣ
    Λ։ൃத

    View Slide

  20. όοΫΞοϓɾ෮ݩػೳ
    ࣗಈɾ೚ҙͷόοΫΞοϓ
    ΢ΣϒαΠτ୯ҐͰɺόοΫΞοϓͱ෮
    ݩ͕Ͱ͖·͢ɻ
    ௚ۙ೔ؒͷࣗಈόοΫΞοϓͱ೚ҙͷ
    λΠϛϯάͰݸ·ͰόοΫΞοϓΛ࢒
    ͓͚ͯ͠·͢ɻ
    όοΫΞοϓϑΝΠϧ͸[JQͰμ΢ϯϩʔ
    υͰ͖·͢ɻ
    όοΫΞοϓ͸ελϯμʔυϓϥϯҎ
    ্Ͱɺ෮ݩ͸શϓϥϯͰ͝ར༻͍ͨͩ
    ͚·͢ɻ
    αΠτશମͷ਽ܗԽ΋ՄೳͰ͢ɻ

    View Slide

  21. ੍࡞ऀ޲͚ධՁϥΠηϯε
    ੍࡞ऀ޲͚ධՁϥΠηϯε
    8FC੍࡞ऀͷํ͕ɺσϞ΍ධՁʹར༻Ͱ͖ΔϥΠ
    ηϯεΛ༻ҙ͍ͯ͠·͢ɻ
    ެ։ʹ͸࢖͑·ͤΜ͕ɺ
    ελϯμʔυϓϥϯΛ
    ࣗ෼༻ͷςετɾσϞ؀ڥ
    ͱͯ͠͝ར༻͍͚ͨͩ·͢ɻ

    View Slide

  22. αϙʔτίϯςϯπ
    ੍࡞ऀ޲͚ϙʔλϧ
    ϚχϡΞϧ΍ؔ࿈هࣄΛ·ͱΊ
    IUUQTEFWFMPQFSNPWBCMFUZQFOFU

    View Slide

  23. αϙʔτίϯςϯπ
    τϑͰ΋Ͱ͖ΔʂʁςʔϚ։ൃߨ࠲
    ςϯϓϨʔτɾςʔϚ։ൃΛ͸͡ΊΔॳ৺
    ऀ޲͚ίϯςϯπɻ
    IUUQTEFWFMPQFSNPWBCMFUZQFOFU
    UIFNFHVJEF

    ɹॻ੶ͷ1%'൛΋ެ։தʂ

    View Slide

  24. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

    View Slide