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

実践 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. 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ͷ։ൃΛ཰͍Δ
  2. ςΩετ ςΩετʢෳ਺ߦʣ ຒΊࠐΈςΩετ ਺஋ 63- ೔෇ͱ࣌ࠁ ೔෇ ࣌ࠁ Ξηοτ ΦʔσΟΦΞηοτ

    ϏσΦΞηοτ ը૾Ξηοτ ΧςΰϦ λά ίϯςϯπλΠϓ ηϨΫτϘοΫε ϥδΦϘλϯ νΣοΫϘοΫε Ϧετ ςʔϒϧ ίϯςϯπϑΟʔϧυͷछྨ
  3. .VMUJ#MPH ࠶ߏஙτϦΨʔ ڞ௨ϚςϦΞϧ ίϯςϯπʹ߹ΘͤͨαΠτઃܭ 8 αΠττοϓ # χϡʔε .PWBCMF5ZQF -FLVNP

    Πϕϯτɾηϛφʔ PAST ίϯςϯπͷछྨʹΑͬͯϒϩάΛ࡞੒ αΠτͷύεߏ଄ʹ੍໿ ͍͍ͩͨ΢ΣϒαΠτ͕ͭ
  4. ϒϩάத৺ͷαΠτઃܭ ŠŠŠ ŠŠŠ ŠŠŠ ŠŠŠ هࣄ NUYY NUYY ςϯϓϨʔτ ίϯςϯπ

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

    NOW ϥΠλʔɺฤूऀ ࡞੒ݖݶ ฤूݖݶ ίϯςϯπλΠϓ͝ͱʹݖݶ؅ཧͰ͖Δ ίϯςϯπλΠϓ͝ͱʹΞʔΧΠϒͰ͖Δ
  6. ࣮ફίϯςϯπλΠϓࣄྫ঺հ ࣄྫ໊শ ಋೖઌ໊ λά ಋೖϦϯΫ ಋೖϦϯΫλΠτϧ εΫϦʔϯγϣοτ ຊจ ར༻ͨ͠੡඼ ༻్

    ੍࡞ձࣾ ۀछ ֓ཁ ςΩετ ςΩετ λά 63- ςΩετ ςΩετʢෳ਺ߦʣ ը૾ ςΩετʢෳ਺ߦʣ ίϯςϯπλΠϓ ΧςΰϦ ΧςΰϦ ΧςΰϦ
  7. ࣮ફίϯςϯπλΠϓ੍࡞ձࣾ ձ໊ࣾ ձࣾϩΰ ձࣾઆ໌ ΢ΣϒαΠτ ॅॴ ి࿩൪߸ '"9൪߸ ࣮੷ͷ͋Δ෼໺ ࣮੷ͷ͋Δۀछ

    ෦ॺ ରԠՄೳͳ੡඼ ϝʔϧΞυϨε ςΩετ ը૾ ςΩετʢෳ਺ߦʣ 63- ςΩετʢෳ਺ߦʣ ςΩετ ςΩετ ςΩετ ςΩετ ΧςΰϦ ΧςΰϦ ΧςΰϦ
  8. ࣮ફίϯςϯπλΠϓςϯϓϨʔτ <h2><mt:ContentField content_field=“ࣄྫ໊শ”><mt:ContentFieldValue escape=“html”></mt:ContentField></h2> <h5><mt:ContentField content_field="ಋೖઌ໊"><mt:ContentFieldValue></mt:ContentField></h5> <ul class="list-unstyled"> <li><mt:ContentField content_field=“λά"><mt:TagName

    escape=“html”></mt:ContentField></li> </ul> <main> <section> <ul class="list-unstyled"> <li><a href="<mt:ContentField content_field=“ಋೖઌϦϯΫ"><mt:ContentFieldValue></mt:ContentField>" target="_blank"><mt:ContentField content_field="ಋೖઌϦϯΫλΠτϧ"><mt:ContentFieldValue escape=“html”></mt:ContentField></a></li> </ul> <p><mt:ContentField content_field="֓ཁ"><mt:ContentFieldValue escape=“html”></mt:ContentField></p> <mt:ContentField content_field="εΫϦʔϯγϣοτ"><mt:AssetThumbnailLink width="450"></mt:ContentField> </section> <section> <mt:ContentField content_field="ຊจ"><mt:ContentFieldValue escape=“html”></mt:ContentField> </section> <section> <h3>੍࡞ձࣾ</h3> <p><mt:ContentField content_field="੍࡞ձࣾ"> <a href="<mt:ContentField content_field="΢ΣϒαΠτ"><mt:ContentFieldValue></ mt:ContentField>"><mt:ContentField content_field=“ձ໊ࣾ"><mt:ContentFieldValue escape=“html”></mt:ContentField></ a> </mt:ContentField></p> </section> <section> <h3>ར༻ͨ͠੡඼</h3> <p><mt:ContentField content_field=“ར༻ͨ͠੡඼"><mt:CategoryLabel escape=“html”></mt:ContentField></p> </section> </main>
  9. ςϯϓϨʔτλάղઆ <mt:ContentField content_field=“ࣄྫ໊শ”> <mt:ContentFieldValue escape=“html”> </mt:ContentField> MTContentFieldValue ݱࡏͷίϯςΫετʹ͓͚ΔίϯςϯπϑΟʔϧυͷ஋Λදࣔ͢ΔϑΝϯΫγϣϯλάͰ͢ɻίϯςϯπ ϑΟʔϧυͷछྨʹΑͬͯద੾ͳ஋͕දࣔ͞Ε·͢ɻ ྫ͑͹ɺςΩετ΍਺஋ͳͲͷ஋Λอ͍࣋ͯ͠ΔϑΟʔϧυͷ৔߹͸ɺͦͷ஋͕දࣔ͞Ε·͕͢ɺΧςΰ

    Ϧ΍ΞηοτͳͲϦϯΫ͍ͯ͠ΔϑΟʔϧυͷ৔߹͸ɺϦϯΫ͍ͯ͠Δσʔλͷ*%͕දࣔ͞Ε·͢ɻ ࣮ࡍͷ஋Λར༻͍ͨ͠৔߹͸ɺ͜ͷλάͰ͸ͳ͘ΦϒδΣΫτͷλάΛར༻͠·͢ɻ ϑΟʔϧυ͕ίϯςϯπλΠϓͱϦϯΫ͍ͯ͠Δ৔߹͸ɺ.5$POUFOU'JFMEϒϩοΫ಺ʹ.5$POUFOU'JFME ϒϩοΫΛೖΕࢠͰ഑ஔ͢ΔͱϦϯΫ͞Ε͍ͯΔίϯςϯπλΠϓͷ஋ΛऔಘͰ͖·͢ɻ
  10. ࣮ફίϯςϯπλΠϓςϯϓϨʔτʢΠϯσοΫεʣ <mt:Contents content_type="ࣸਅ"> <div class="col-sm-6 offset-2" style="margin-top:20px;"> <div class="card"> <h5

    class="card-title" style="padding: 1rem"><mt:ContentAuthorUserpicAsset><img src="<$mt:AssetThumbnailURL width="25" height="25"$>" width="25" height="25" class="rounded-circle" ></mt:ContentAuthorUserpicAsset> <a href="<mt:ArchiveLink type="ContentType-Author">"><mt:ContentAuthorDisplayName escape="html"></a></h5> <img class="card-img-top" src="<mt:ContentField content_field="ࣸਅ"><mt:AssetThumbnailURL width="500"></mt:ContentField>" alt="<mt:ContentField content_field="λΠτϧ"><mt:ContentFieldValue escape="html"></mt:ContentField>"> <p class="card-text" style="padding: 1rem"><mt:ContentField content_field="λΠτϧ"><mt:ContentFieldValue escape="html"></ mt:ContentField></p> </div> </div> </mt:Contents>
  11. ςϯϓϨʔτλάղઆ <mt:ContentAuthorUserpicAsset> <img src="<$mt:AssetThumbnailURL width="25" height="25"$ width="25" height="25" class="rounded-circle" >

    </mt:ContentAuthorUserpicAsset> MTContentAuthorUserPicAsset ίϯςϯπσʔλΛ࡞੒ͨ͠ϢʔβʔͷϓϩϑΟʔϧը૾ʹؔ͢Δ৘ใΛऔಘ͢ΔͨΊͷϒϩοΫλάͰ ͢ɻ͜ͷλάͷதͰ͸ɺΞηοτؔ࿈ͷςϯϓϨʔτλάΛར༻Ͱ͖·͢ɻ
  12. ςϯϓϨʔτλάղઆ <mt:ArchiveLink type="ContentType-Author"> 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
  13. ࣮ફίϯςϯπλΠϓςϯϓϨʔτʢϢʔβʔΞʔΧΠϒʣ <mt:AuthorUserpicAsset><img src="<mt:AssetThumbnailURL width="150" height="150">" width="150" height="150" class="rounded-circle mx- auto

    d-block" ></mt:AuthorUserpicAsset> </div> <div class="col-sm-8"> <h4><mt:AuthorDisplayName escape="html"></h4> <p>౤ߘ <mt:AuthorContentCount content_type="ࣸਅ"> ݅</p> </div> </div> <div class="row" style="margin-top: 2em"> <mt:Contents content_type="ࣸਅ"> <div class="col-sm-4"> <div class="card"> <img class="card-img-top" src="<mt:ContentField content_field="ࣸਅ"><mt:AssetThumbnailURL width="500"></mt:ContentField>" alt="<mt:ContentField content_field="λΠτϧ"><mt:ContentFieldValue escape="html"></mt:ContentField>"> </div> </div> </mt:Contents>