MTDDC Meetup Tokyo 2020 MovableType.net Block Editor

65257c35a14db5531c983e9e061f8f40?s=47 hayase
October 10, 2020

MTDDC Meetup Tokyo 2020 MovableType.net Block Editor

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

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

65257c35a14db5531c983e9e061f8f40?s=128

hayase

October 10, 2020
Tweet

Transcript

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

  2. ࣗݾ঺հ γοΫεɾΞύʔτגࣜձࣾ ੡඼اըγχΞϚωδϟʔ ૣ੉ɹকҰ ݸਓαΠτɹIUUQTIBZBTFUW ɾ.5 .PWBCMF5ZQF ྺ೥໨ ɾԕڑ཭πʔΩχετʢἚ৓ʣ ɾςϨϫʔΫͰϫʔϧυϏδωεαςϥΠτີணऔࡐ

    ɾυϩʔϯඈ͹ͯ͠ࢢͷެࣜ؍ޫಈը࡞੒ ɾԻָϥΠϒͷԋग़༻ιϑτͳͲ͍Ζ͍Ζ࡞੒ ɾੈքΏΔϛϡʔδοΫڠձʹࢀՃ ɾ΀Α΀ΑFεϙʔπɹࠓ೥΋ࠃମ༧બʹͰ͍ͨ
  3. ຊ೔ͷ༧ఆ ࠓ೥ϦϦʔεͨ͠.PWBCMF5ZQFOFUͷ৽ΤσΟλͷϒ ϩοΫΤσΟλɻ࢖͍ํʹΑͬͯ͸༷ʑͳӡ༻͕Մೳʹͳ Γ·͢ɻ׆༻ํ๏Λৄ͘͠ղઆ͠·͢ʂ

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

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

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

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

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

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

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

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

    wεϚʔτϑΥϯʹରԠͨ͠ଈઓྗʹͳΔϨεϙϯγϒσβΠϯͷςʔϚΛෳ਺༻ҙ w؆୯ʹ࡞੒ઃஔ͕Ͱ͖ΔϑΥʔϜɺαΠταʔνػೳ͕ඪ४Ͱ౥ࡌ͞Ε͍ͯΔ
  12. ϒϩοΫΤσΟλ

  13. ϒϩοΫΤσΟλͷಛ௃ w ཁૉͷϒϩοΫΛ௥Ճ͢ΔܗͰهࣄɺ΢Σ ϒϖʔδΛ࡞੒ɺฤू w ௥Ճͨ͠ϒϩοΫ͸ޙ͔Βฒͼସ͑΋0, w ར༻͠ͳ͍ཁૉͷϒϩοΫΛඇදࣔʹͨ͠ Γɺฒͼॱͷมߋ΋Մೳ w

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

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

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

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

  18. σϞ

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

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

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

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

  23. αϙʔτίϯςϯπ τϑͰ΋Ͱ͖ΔʂʁςʔϚ։ൃߨ࠲ ςϯϓϨʔτɾςʔϚ։ൃΛ͸͡ΊΔॳ৺ ऀ޲͚ίϯςϯπɻ IUUQTEFWFMPQFSNPWBCMFUZQFOFU UIFNFHVJEF  ɹॻ੶ͷ1%'൛΋ެ։தʂ

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