MTDDC Meetup Tokyo 2020 MovableType.net Block Editor

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

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

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