実践 Movable Type 7

9422b432ae4eb16431c72411107a4113?s=47 Yuji Takayama
November 03, 2018

実践 Movable Type 7

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

9422b432ae4eb16431c72411107a4113?s=128

Yuji Takayama

November 03, 2018
Tweet

Transcript

  1. 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ͷ։ൃΛ཰͍Δ
  2. 7.

    ςΩετ ςΩετʢෳ਺ߦʣ ຒΊࠐΈςΩετ ਺஋ 63- ೔෇ͱ࣌ࠁ ೔෇ ࣌ࠁ Ξηοτ ΦʔσΟΦΞηοτ

    ϏσΦΞηοτ ը૾Ξηοτ ΧςΰϦ λά ίϯςϯπλΠϓ ηϨΫτϘοΫε ϥδΦϘλϯ νΣοΫϘοΫε Ϧετ ςʔϒϧ ίϯςϯπϑΟʔϧυͷछྨ
  3. 11.

    .VMUJ#MPH ࠶ߏஙτϦΨʔ ڞ௨ϚςϦΞϧ ίϯςϯπʹ߹ΘͤͨαΠτઃܭ 8 αΠττοϓ # χϡʔε .PWBCMF5ZQF -FLVNP

    Πϕϯτɾηϛφʔ PAST ίϯςϯπͷछྨʹΑͬͯϒϩάΛ࡞੒ αΠτͷύεߏ଄ʹ੍໿ ͍͍ͩͨ΢ΣϒαΠτ͕ͭ
  4. 12.
  5. 13.

    ϒϩάத৺ͷαΠτઃܭ ŠŠŠ ŠŠŠ ŠŠŠ ŠŠŠ هࣄ NUYY NUYY ςϯϓϨʔτ ίϯςϯπ

    PAST ϥΠλʔɺฤूऀ ࡞੒ݖݶ ฤूݖݶ هࣄ୯Ґʹ͔͠ݖݶ͕ઃఆͰ͖ͳ͍ ݸผΞʔΧΠϒ͸هࣄʹͭ࡞Εͳ͍ ඞવ
  6. 14.

    ίϯςϯπத৺ͷαΠτઃܭ ŠŠŠ ŠŠŠ ŠŠŠ ŠŠŠ ίϯςϯτλΠϓ NUYY NUYY ςϯϓϨʔτ ίϯςϯπ

    NOW ϥΠλʔɺฤूऀ ࡞੒ݖݶ ฤूݖݶ ίϯςϯπλΠϓ͝ͱʹݖݶ؅ཧͰ͖Δ ίϯςϯπλΠϓ͝ͱʹΞʔΧΠϒͰ͖Δ
  7. 16.
  8. 18.

    ࣮ફίϯςϯπλΠϓࣄྫ঺հ ࣄྫ໊শ ಋೖઌ໊ λά ಋೖϦϯΫ ಋೖϦϯΫλΠτϧ εΫϦʔϯγϣοτ ຊจ ར༻ͨ͠੡඼ ༻్

    ੍࡞ձࣾ ۀछ ֓ཁ ςΩετ ςΩετ λά 63- ςΩετ ςΩετʢෳ਺ߦʣ ը૾ ςΩετʢෳ਺ߦʣ ίϯςϯπλΠϓ ΧςΰϦ ΧςΰϦ ΧςΰϦ
  9. 22.

    ࣮ફίϯςϯπλΠϓ੍࡞ձࣾ ձ໊ࣾ ձࣾϩΰ ձࣾઆ໌ ΢ΣϒαΠτ ॅॴ ి࿩൪߸ '"9൪߸ ࣮੷ͷ͋Δ෼໺ ࣮੷ͷ͋Δۀछ

    ෦ॺ ରԠՄೳͳ੡඼ ϝʔϧΞυϨε ςΩετ ը૾ ςΩετʢෳ਺ߦʣ 63- ςΩετʢෳ਺ߦʣ ςΩετ ςΩετ ςΩετ ςΩετ ΧςΰϦ ΧςΰϦ ΧςΰϦ
  10. 31.

    ࣮ફίϯςϯπλΠϓςϯϓϨʔτ <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>
  11. 33.

    ςϯϓϨʔτλάղઆ <mt:ContentField content_field=“ࣄྫ໊শ”> <mt:ContentFieldValue escape=“html”> </mt:ContentField> MTContentFieldValue ݱࡏͷίϯςΫετʹ͓͚ΔίϯςϯπϑΟʔϧυͷ஋Λදࣔ͢ΔϑΝϯΫγϣϯλάͰ͢ɻίϯςϯπ ϑΟʔϧυͷछྨʹΑͬͯద੾ͳ஋͕දࣔ͞Ε·͢ɻ ྫ͑͹ɺςΩετ΍਺஋ͳͲͷ஋Λอ͍࣋ͯ͠ΔϑΟʔϧυͷ৔߹͸ɺͦͷ஋͕දࣔ͞Ε·͕͢ɺΧςΰ

    Ϧ΍ΞηοτͳͲϦϯΫ͍ͯ͠ΔϑΟʔϧυͷ৔߹͸ɺϦϯΫ͍ͯ͠Δσʔλͷ*%͕දࣔ͞Ε·͢ɻ ࣮ࡍͷ஋Λར༻͍ͨ͠৔߹͸ɺ͜ͷλάͰ͸ͳ͘ΦϒδΣΫτͷλάΛར༻͠·͢ɻ ϑΟʔϧυ͕ίϯςϯπλΠϓͱϦϯΫ͍ͯ͠Δ৔߹͸ɺ.5$POUFOU'JFMEϒϩοΫ಺ʹ.5$POUFOU'JFME ϒϩοΫΛೖΕࢠͰ഑ஔ͢ΔͱϦϯΫ͞Ε͍ͯΔίϯςϯπλΠϓͷ஋ΛऔಘͰ͖·͢ɻ
  12. 37.

    ࣮ફίϯςϯπλΠϓςϯϓϨʔτʢΠϯσοΫεʣ <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>
  13. 39.

    ςϯϓϨʔτλάղઆ <mt:ContentAuthorUserpicAsset> <img src="<$mt:AssetThumbnailURL width="25" height="25"$ width="25" height="25" class="rounded-circle" >

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

    ςϯϓϨʔτλάղઆ <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
  15. 42.

    ࣮ફίϯςϯπλΠϓςϯϓϨʔτʢϢʔβʔΞʔΧΠϒʣ <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>