実践 Movable Type 7

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

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