$30 off During Our Annual Pro Sale. View Details »

実践 Movable Type 7

Yuji Takayama
November 03, 2018

実践 Movable Type 7

MTDDC Meetup TOKYO 2018で使ったスライド。
Movable Type 7 でコンテンツタイプを使うときの情報設計、サイト設計のお話。

Yuji Takayama

November 03, 2018
Tweet

More Decks by Yuji Takayama

Other Decks in Technology

Transcript

  1. .PWBCMF5ZQF%FWFMPQFSTBOE%FTJHOFST$POGFSFODF
    .FFUVQ50,:0
    4BU
    !:BIPP
    :VKJ5BLBZBNB!4JY"QBSU
    ࣮ફ.PWBCMF5ZQF

    View Slide

  2. My Social icon
    yuji
    yuji
    Yuji Takayama
    swordbreaker
    YUJI TAKAYAMA
    Six Apart, Ltd.
    Senior Product Manager
    4JY"QBSUͰ.PWBCMF5ZQFͷ։ൃαϙʔτΛ։࢝
    4JY"QBSUʹਖ਼ࣜʹ+PJO
    Ҿ͖ଓ͖.PWBCMF5ZQF&OUFSQSJTFͷ։ൃʹैࣄ
    .PWBCMF5ZQF-FBE&OHJOFFSͱͯ͠։ൃνʔϜΛ
    ཰͍Δ
    .PWBCMF5ZQF4FOJPS1SPEVDU.BOBHFSΛ݉຿
    .PWBCMF5ZQF ͷ੡඼اը୲౰ͱͯ͠৽͍͠
    .PWBCMF5ZQFͷ։ൃΛ཰͍Δ

    View Slide

  3. .PWBCMF5ZQF"EWBODFE.PWBCMF5ZQF
    ϦϦʔεԆظʹ͍ͭͯ੣ʹਃ͠༁͍͟͝·ͤΜ

    View Slide

  4. .PWBCMF5ZQF͓͞Β͍

    View Slide

  5. .PWBCMF5ZQFͷίϯηϓτ
    ޮ཰త͔ͭޮՌతʹίϯςϯπΛར༻Ͱ͖Δ
    ࠓ͢Δ΂͖͜ͱΛ೺ѲͰ͖Δ
    ༷ʑͳܗࣜͷίϯςϯπΛ؅ཧͰ͖Δ
    8FCαΠτͱ͍͏࿮૊ΈʹनΘΕͳ͍ɺίϯςϯπΛ؅ཧ͢ΔͨΊͷγεςϜ
    ίϯςϯπͷϥΠϑαΠΫϧʹԠͯ͡ɺదͨ͠έΞ͕Ͱ͖ΔγεςϜ
    ഑৴͍ͨ͠ܗࣜΛΧελϚΠζͰ͖ΔγεςϜ
    ૯߹؀ڥͰ͋Γͳ͕ΒɺΠϯςάϨʔγϣϯ΋ՄೳͳγεςϜ
    ࡞ۀͷअຐΛ͠ͳ͍σβΠϯͱόοΫΤϯυΛඋ͑ͨγεςϜ
    1VCMJTIJOH1MBUGPSN͔Β$POUFOU)VC1MBUGPSN΁

    View Slide

  6. ίϯςϯπλΠϓ
    छྨͷϑΟʔϧυλΠϓͰϑΟʔϧυΛࣗ༝ʹઃܭ
    ίϯςϯπλΠϓಉ࢜ΛϦϯΫͯ͠࠶ར༻Մೳͳσʔ
    λ؅ཧΛ࣮ݱ
    ίϯςϯπλΠϓ͝ͱʹΞʔΧΠϒΛ༻ҙ
    ೔෇΍ΧςΰϦ΋࢖͑Δࣗ༝ͳΞʔΧΠϒϚοϐϯά
    ίϯςϯπλΠϓɺϑΟʔϧυ͝ͱͷݖݶ؅ཧ
    .PWBCMF5ZQFͷ֩ɿίϯςϯπλΠϓ

    View Slide

  7. ςΩετ
    ςΩετʢෳ਺ߦʣ
    ຒΊࠐΈςΩετ
    ਺஋
    63-
    ೔෇ͱ࣌ࠁ
    ೔෇
    ࣌ࠁ
    Ξηοτ
    ΦʔσΟΦΞηοτ
    ϏσΦΞηοτ
    ը૾Ξηοτ
    ΧςΰϦ
    λά
    ίϯςϯπλΠϓ
    ηϨΫτϘοΫε
    ϥδΦϘλϯ
    νΣοΫϘοΫε
    Ϧετ
    ςʔϒϧ
    ίϯςϯπϑΟʔϧυͷछྨ

    View Slide

  8. ΧςΰϦηοτ
    ίϯςϯπλΠϓͰ࢖͑ΔΧςΰϦ
    ෳ਺ͷΧςΰϦ܈Λ༻్ʹԠͯ͡؅ཧ
    ӡ༻ϧʔϧϕʔεͷΧςΰϦར༻ʹαϤφϥ
    ΧςΰϦʔผΞʔΧΠϒͷج४
    .PWBCMF5ZQFͷ֩ɿΧςΰϦηοτ

    View Slide

  9. ϒϩοΫΤσΟλ
    ϒϩοΫ୯ҐͰςΩετ΍ը૾ͳͲΛ࡞੒
    ϔομʔɺΞηοτɺςΩετɺਫฏઢ
    ίϯςϯπʹߏ଄৘ใΛ૊Έࠐ·ͳ͍
    ϒϩοΫ͸+BWB4DSJQUͰ௥ՃՄೳ
    ϦονΤσΟλ8:4*8:(ΤσΟλ
    Ϧονͳ8PSEతͳ΋ͷͰ͸ͳ͘จࣈ૷০Λௐ੔
    .PWBCMF5ZQFͷ֩ɿϒϩοΫΤσΟλ

    View Slide

  10. .PWBCMF5ZQF
    ࣌୅ͷαΠτઃܭ

    View Slide

  11. .VMUJ#MPH
    ࠶ߏஙτϦΨʔ
    ڞ௨ϚςϦΞϧ
    ίϯςϯπʹ߹ΘͤͨαΠτઃܭ
    8
    αΠττοϓ
    #
    χϡʔε
    .PWBCMF5ZQF
    -FLVNP
    Πϕϯτɾηϛφʔ
    PAST
    ίϯςϯπͷछྨʹΑͬͯϒϩάΛ࡞੒
    αΠτͷύεߏ଄ʹ੍໿
    ͍͍ͩͨ΢ΣϒαΠτ͕ͭ

    View Slide

  12. "
    ڞ௨Ξηοτ
    ίϯςϯπʹ߹ΘͤͨαΠτઃܭ
    4
    αΠττοϓ
    4
    χϡʔε
    .PWBCMF5ZQF
    -FLVNP
    Πϕϯτɾηϛφʔ
    NOW
    $
    ίϯςϯπͷ໾ׂͰαΠτΛ෼͚Δ
    جຊతʹ͸αΠτ͋Ε͹͍͍

    View Slide

  13. ϒϩάத৺ͷαΠτઃܭ
    ŠŠŠ
    ŠŠŠ
    ŠŠŠ
    ŠŠŠ
    هࣄ
    NUYY
    NUYY
    ςϯϓϨʔτ ίϯςϯπ
    PAST
    ϥΠλʔɺฤूऀ
    ࡞੒ݖݶ
    ฤूݖݶ
    هࣄ୯Ґʹ͔͠ݖݶ͕ઃఆͰ͖ͳ͍
    ݸผΞʔΧΠϒ͸هࣄʹͭ࡞Εͳ͍
    ඞવ

    View Slide

  14. ίϯςϯπத৺ͷαΠτઃܭ
    ŠŠŠ
    ŠŠŠ
    ŠŠŠ
    ŠŠŠ
    ίϯςϯτλΠϓ
    NUYY
    NUYY
    ςϯϓϨʔτ ίϯςϯπ
    NOW
    ϥΠλʔɺฤूऀ
    ࡞੒ݖݶ
    ฤूݖݶ ίϯςϯπλΠϓ͝ͱʹݖݶ؅ཧͰ͖Δ
    ίϯςϯπλΠϓ͝ͱʹΞʔΧΠϒͰ͖Δ

    View Slide

  15. ࣮ફίϯςϯπλΠϓ

    View Slide

  16. TJYBQBSUKQͷαΠτઃܭ
    4
    αΠττοϓ
    4
    .PWBCMF5ZQF
    -FLVNP
    1
    ձࣾ৘ใ
    5
    ͓໰͍߹Θͤ
    χϡʔε
    ηϛφʔ
    $
    ಋೖࣄྫ
    ϓϨεϦϦʔε
    ύʔτφʔ

    View Slide

  17. ࣮ફίϯςϯπλΠϓࣄྫ঺հ
    https://www.sixapart.jp/business/seiko-sts.html

    View Slide

  18. ࣮ફίϯςϯπλΠϓࣄྫ঺հ
    ࣄྫ໊শ
    ಋೖઌ໊
    λά
    ಋೖϦϯΫ
    ಋೖϦϯΫλΠτϧ
    εΫϦʔϯγϣοτ
    ຊจ
    ར༻ͨ͠੡඼
    ༻్
    ੍࡞ձࣾ
    ۀछ
    ֓ཁ
    ςΩετ
    ςΩετ
    λά
    63-
    ςΩετ
    ςΩετʢෳ਺ߦʣ
    ը૾
    ςΩετʢෳ਺ߦʣ
    ίϯςϯπλΠϓ
    ΧςΰϦ
    ΧςΰϦ
    ΧςΰϦ

    View Slide

  19. બͿ΋ͷ͕ͳ͍ɾɾɾ

    View Slide

  20. ίϯςϯπλΠϓɺΧςΰϦηοτ͕
    ؚ·ΕΔίϯςϯπλΠϓͰ͸ɺ
    ͦͪΒΛઌʹ࡞Βͳ͍ͱબ΂ͳ͍
    ˒౾஌ࣝ˒

    View Slide

  21. ࣮ફίϯςϯπλΠϓ੍࡞ձࣾ
    https://www.sixapart.jp/pronet/partner/
    partner000073.html

    View Slide

  22. ࣮ફίϯςϯπλΠϓ੍࡞ձࣾ
    ձ໊ࣾ
    ձࣾϩΰ
    ձࣾઆ໌
    ΢ΣϒαΠτ
    ॅॴ
    ి࿩൪߸
    '"9൪߸
    ࣮੷ͷ͋Δ෼໺
    ࣮੷ͷ͋Δۀछ
    ෦ॺ
    ରԠՄೳͳ੡඼
    ϝʔϧΞυϨε
    ςΩετ
    ը૾
    ςΩετʢෳ਺ߦʣ
    63-
    ςΩετʢෳ਺ߦʣ
    ςΩετ
    ςΩετ
    ςΩετ
    ςΩετ
    ΧςΰϦ
    ΧςΰϦ
    ΧςΰϦ

    View Slide

  23. ࣮ફίϯςϯπλΠϓ੍࡞ձࣾ

    View Slide

  24. ࣮ફίϯςϯπλΠϓಋೖࣄྫ

    View Slide

  25. ϦϯΫ͢ΔίϯςϯπλΠϓ΍
    ΧςΰϦηοτ͸࢖͍ճ͕͠Ͱ͖Δ
    ͦͯ͠ɺϥϕϧ͸ͦΕͧΕࢦఆͰ͖Δ
    ˒౾஌ࣝ˒

    View Slide

  26. ࣮ફίϯςϯπλΠϓίϯςϯπλΠϓͷΦϓγϣϯ

    View Slide

  27. σʔλࣝผϥϕϧ͸ೖྗඞਢͰ͋Δ
    ςΩετ͔ΒࢦఆͰ͖Δ
    දࣔΦϓγϣϯͷมߋՄ൱΋๨Εͣʹ
    ˒౾஌ࣝ˒

    View Slide

  28. ࣮ફίϯςϯπλΠϓίϯςϯπλΠϓΞʔΧΠϒ

    View Slide

  29. ࣮ફίϯςϯπλΠϓΞʔΧΠϒϚοϐϯάʢݸผʣ
    ೥݄ϕʔεωʔϜ
    ΞʔΧΠϒର৅ͱͳΔ
    ೔෇ͷϑΟʔϧυΛબ୒
    ೥݄೔ϕʔεωʔϜ
    ΞʔΧΠϒର৅ͱͳΔ
    ೔෇ͷϑΟʔϧυΛબ୒
    ࡞ऀϕʔεωʔϜ
    ΧςΰϦϕʔεωʔϜ
    ΞʔΧΠϒର৅ͱͳΔ
    ΧςΰϦηοτͷϑΟʔϧυΛબ୒
    ΧελϜ
    ࣗ༝ʹઃܭՄೳ

    View Slide

  30. ର৅ͱͳΔίϯςϯπλΠϓ͸
    ͋ͱ͔ΒมߋͰ͖ͳ͍
    Ϛοϐϯάͷ࡞੒Λ๨Εͣʹ
    ˒౾஌ࣝ˒

    View Slide

  31. ࣮ફίϯςϯπλΠϓςϯϓϨʔτ








    "
    target="_blank">








    ੍࡞ձࣾ


    mt:ContentField>">
    a>



    ར༻ͨ͠੡඼



    View Slide

  32. ςϯϓϨʔτλάղઆ



    MTContentField
    ίϯςϯπσʔλͷ֤ϑΟʔϧυͷ஋Λදࣔ͢ΔͨΊͷϒϩοΫλάͰ͢ɻ
    ͜ͷλά͚ͩͰ͸஋Λදࣔ͢Δ͜ͱ͸Ͱ͖·ͤΜɻ
    ίϯςϯπϑΟʔϧυ͕ɺʮΧςΰϦʯʮλάʯʮΞηοτؔ࿈ʯͷͱ͖ɺϒϩοΫ಺෦Ͱ͸ͦΕͧΕͷ
    ΦϒδΣΫτʹؔ࿈͢Δλά͕ར༻Ͱ͖·͢ɻʢྫ.5$BUFHPSZ-BCFMͳͲʣ
    ·ͨɺෳ਺ͷ஋͕બ୒͞Ε͍ͯΔ৔߹ɺ͜ͷλά͸.5-PPQͱࣅͨಈ͖Λ͢ΔͷͰɺ֤ཁૉ͝ͱʹϒϩο
    Ϋ͕ॲཧ͞Ε·͢ɻ

    View Slide

  33. ςϯϓϨʔτλάղઆ



    MTContentFieldValue
    ݱࡏͷίϯςΫετʹ͓͚ΔίϯςϯπϑΟʔϧυͷ஋Λදࣔ͢ΔϑΝϯΫγϣϯλάͰ͢ɻίϯςϯπ
    ϑΟʔϧυͷछྨʹΑͬͯద੾ͳ஋͕දࣔ͞Ε·͢ɻ
    ྫ͑͹ɺςΩετ΍਺஋ͳͲͷ஋Λอ͍࣋ͯ͠ΔϑΟʔϧυͷ৔߹͸ɺͦͷ஋͕දࣔ͞Ε·͕͢ɺΧςΰ
    Ϧ΍ΞηοτͳͲϦϯΫ͍ͯ͠ΔϑΟʔϧυͷ৔߹͸ɺϦϯΫ͍ͯ͠Δσʔλͷ*%͕දࣔ͞Ε·͢ɻ
    ࣮ࡍͷ஋Λར༻͍ͨ͠৔߹͸ɺ͜ͷλάͰ͸ͳ͘ΦϒδΣΫτͷλάΛར༻͠·͢ɻ
    ϑΟʔϧυ͕ίϯςϯπλΠϓͱϦϯΫ͍ͯ͠Δ৔߹͸ɺ.5$POUFOU'JFMEϒϩοΫ಺ʹ.5$POUFOU'JFME
    ϒϩοΫΛೖΕࢠͰ഑ஔ͢ΔͱϦϯΫ͞Ε͍ͯΔίϯςϯπλΠϓͷ஋ΛऔಘͰ͖·͢ɻ

    View Slide

  34. .5$POUFOU'JFMEͰίϯςΫετΛ࡞੒
    ϒϩοΫ಺͸ͦΕͧΕͷ஋΍ɺ
    ؔ࿈͢ΔΦϒδΣΫτͷλάΛར༻
    ˒౾஌ࣝ˒

    View Slide

  35. ࣮ફίϯςϯπλΠϓը૾ڞ༗αʔϏε
    https://www.instagram.com/swordbreaker/

    View Slide

  36. ࣮ફίϯςϯπλΠϓը૾ڞ༗αʔϏε
    ࣸਅ
    λΠτϧ
    ը૾
    ςΩετ
    ৔ॴ ςΩετ

    View Slide

  37. ࣮ફίϯςϯπλΠϓςϯϓϨʔτʢΠϯσοΫεʣ



    height="25"$>" width="25" height="25" class="rounded-circle" > href="">
    "
    alt="">

    mt:ContentField>



    View Slide

  38. ςϯϓϨʔτλάղઆ

    ……

    MTContents
    ίϯςϯπσʔλΛҰཡ͢ΔͨΊͷϒϩοΫλάͰ͢ɻDPOUFOU@UZQFϞσΟϑΝΠΞ͕ඞਢͰ͢ɻ
    pFMEϑΟʔϧυͷϢχʔΫ*%ͱࢦఆ͢ΔͱɺίϯςϯπϑΟʔϧυͷ஋ͰϑΟϧλʔͰ͖·͢ɻ
    ϒϩοΫ಺Ͱ͸ɺίϯςϯπλΠϓؔ࿈ͷλά͕ར༻Ͱ͖·͢ɻ

    View Slide

  39. ςϯϓϨʔτλάղઆ

    width="25" height="25" class="rounded-circle" >

    MTContentAuthorUserPicAsset
    ίϯςϯπσʔλΛ࡞੒ͨ͠ϢʔβʔͷϓϩϑΟʔϧը૾ʹؔ͢Δ৘ใΛऔಘ͢ΔͨΊͷϒϩοΫλάͰ
    ͢ɻ͜ͷλάͷதͰ͸ɺΞηοτؔ࿈ͷςϯϓϨʔτλάΛར༻Ͱ͖·͢ɻ

    View Slide

  40. ςϯϓϨʔτλάղઆ

    MTArchiveLink
    .5"SDIJF-JOLͳͲͷΞʔΧΠϒܥͷλάͰ͸ɺUZQFϞσΟϑΝΠΞͷ஋ͱͯ͠ίϯςϯπλΠϓؔ࿈ͷ
    ΞʔΧΠϒλΠϓΛࢦఆͰ͖·͢ɻ
    ContentType
    ContentType-Yearly
    ContentType-Monthly
    ContentType-Daily
    ContentType-Weekly
    ContentType-Category
    ContentType-Category-Yearly
    ContentType-Category-
    Monthly
    ContentType-Category-Daily
    ContentType-Category-
    Weekly
    ContentType-Author
    ContentType-Author-Yearly
    ContentType-Author-Monthly
    ContentType-Author-Daily
    ContentType-Author-Weekly

    View Slide

  41. ςϯϓϨʔτλάղઆ

    MTContentAuthorDisplayName
    ίϯςϯπσʔλΛ࡞੒ͨ͠Ϣʔβʔͷද໊ࣔΛදࣔ͠·͢ɻ

    View Slide

  42. ࣮ફίϯςϯπλΠϓςϯϓϨʔτʢϢʔβʔΞʔΧΠϒʣ
    " width="150" height="150" class="rounded-circle mx-
    auto d-block" >



    ౤ߘ ݅






    "
    alt="">



    View Slide

  43. ςϯϓϨʔτλάղઆ

    MTAuthorContentCount
    Ϣʔβʔ͕ίϯςϯπσʔλΛ࡞੒ͨ͠਺Λදࣔ͠·͢ɻ

    View Slide

  44. ଞʹ΋ίϯςϯπλΠϓʹؔ͢Δ৽͠
    ͍λά͕௥Ճ͞Εͯ·͢ɻ
    https://www.movabletype.jp/documentation/
    appendices/tags/content-type/
    ˒౾஌ࣝ˒

    View Slide

  45. ৘ใઃܭͷ݁ՌɺඞཁҎ্ʹϑΟʔϧυ
    Λࡉ͔͘ઃܭ͢Δͱɺ࣮ࡍʹ͸࢖͍ʹ͘
    ͘ͳΔ͜ͱ͕ଟ͍ͷͰؾΛ͚ͭΑ͏ɻ
    σΟϨΫτϦ୯ҐͰࢠαΠτΛઃܭ͢Δ
    ͷͰ͸ͳ͘ɺ໾ׂͰ෼ׂ͠Α͏ɻ
    ˒·ͱΊ˒

    View Slide

  46. .PWBCMF5ZQF3PBENBQ

    View Slide

  47. ίϯςϯπϚΠάϨʔγϣϯػೳ
    هࣄ΍΢ΣϒϖʔδΛίϯςϯπλΠϓ΁ม׵
    ίϯςϯπλΠϓؒͷม׵
    ൛؅ཧػೳ
    ެ։தͷίϯςϯπͷ৽൛࡞੒ɺࢦఆ೔ࠩ͠ସ͑
    ॊೈͳίϯςϯπ؅ཧΛ࣮ݱ͢Δػೳ

    View Slide

  48. ίϯςϯπίϐʔػೳ
    طଘͷίϯςϯπσʔλͷෳ੡Λ࡞੒
    ίϯςϯπڞ༗ػೳ
    ίϯςϯπλΠϓΛͻͳܗͱͯ͠؅ཧ
    ΰϛശ
    ίϯςϯπΛ͙͢ʹ͸σʔλϕʔε͔Β࡟আ͠ͳ͍
    ॊೈͳίϯςϯπ؅ཧΛ࣮ݱ͢Δػೳ

    View Slide

  49. ڞ༗ϓϨϏϡʔ
    ϓϨϏϡʔΛୈࡾऀͱڞ༗͢Δ
    σΟεΧογϣϯ
    ϓϨϏϡʔΛݩʹͨ͠σΟεΧογϣϯΛαϙʔτ
    ঝೝϑϩʔ
    ίϯςϯπͷެ։ʹࡍͯ͠ঝೝϑϩʔΛ࣮ݱ
    ϫʔΫϑϩʔ؅ཧΛ࣮ݱ͢Δػೳ

    View Slide

  50. ϫʔΫϑϩʔσβΠϯػೳ
    ίϯςϯπλΠϓʹԠͨ͡ϫʔΫϑϩʔͷઃܭ
    ଟஈ֊΍άϧʔϓʹରԠ
    ϝοηʔδϯά
    ঝೝϑϩʔ΍σΟεΧογϣϯͳͲΛ௨஌
    ֎෦ϝοηʔδϯάαʔϏε 4MBDL΍.BJMͳͲ
    ͱ࿈ܞ
    μογϡϘʔυͰ৘ใ֬ೝ
    ϫʔΫϑϩʔ؅ཧΛ࣮ݱ͢Δػೳ

    View Slide

  51. Ξηοτϒϥ΢β
    εϜʔζʹ৘ใΛҰཡɺ֬ೝͰ͖ͯݕࡧͰ͖Δ
    ϥΠϑαΠΫϧ؅ཧγεςϜ
    ؔ࿈͢Δίϯςϯπͱ࿈ಈͨ͠Ξηοτͷެ։ͱඇެ
    ։
    ൛؅ཧػೳ
    Ξηοτͷߋ৽ʹԠͨ͡൛؅ཧ
    Ξηοτ؅ཧΛ࣮ݱ͢Δػೳ

    View Slide

  52. มߋཤྺ؅ཧػೳ
    มߋه࿥ͷ֬ೝ
    ஶ࡞ݖ؅ཧػೳ
    Ξηοτͷ΢ΥʔλʔϚʔΫ
    &YJG΍(FP5BHͱ͍ͬͨ৘ใͷอޢ
    Ξηοτ؅ཧγεςϜΛ࣮ݱ͢Δػೳ

    View Slide

  53. ը૾ฤूػೳ
    ΑΓศརʹ࢖͍΍͘͢
    ֎෦Ξηοτ࿈ܞػೳ
    ֎෦αʔϏεͰ؅ཧ͍ͯ͠ΔΞηοτ΋Ξοϓϩʔυ
    ͨ͠ΞηοτͱมΘΒͳ͍؅ཧΛ࣮ݱ
    Ξηοτ؅ཧγεςϜΛ࣮ݱ͢Δػೳ

    View Slide

  54. Thank you for listening

    View Slide