カスタムブロック作成手順のベタープラクティス

2021年11月13日（土）にオンライン開催されたMTDDC Meetup TOKYO 2021のセッションで使用したスライドです。

Transcript

1. Hello!
   ΧελϜϒϩοΫ࡞੒खॱͷ
   ϕλʔϓϥΫςΟε
   MTDDC Meetup TOKYO 2021
   

   View Slide

2. #mtddc
   ࡾ౓ͷ൧ΑΓ৯΂Δ͜ͱɺ
   ͦͯ͠ҿΉ͜ͱ͕޷͖
   גࣜձࣾδϟΫελϙδγϣϯɹ୅දऔక໾ʗσΟϨΫλʔ
   ೥݄૑ۀɺ೥݄๏ਓԽʢ๏ਓظ໨ʣ
   .PWBCMF5ZQFΛϓϥοτϑΥʔϜʹ΢ΣϒαΠτΛߏங
   ೥ɹ1SP/FUʢγοΫεɾΞύʔτࣾύʔτφʔʣՃໍ
   ೥ɹ.5՜ҔΛελʔτ
   ೥ɹ.5%%$.FFUVQ)0,,"*%0։࠵
   ೥ɹ.5%%$.FFUVQ)0,,"*%0։࠵
   ੢ࢁɹହ࢙
   ʢʹ͠΍·ɹ΍͢;Έʣ
   

   View Slide

3. #mtddc
   σΟϨΫλʔɹ໊
   σβΠφʔɹ໊
   .5ςϯϓϨʔτΤϯδχΞɹ໊
   ओͳۀ຿
   ɾ΢ΣϒαΠτߏங
   ɾ΢ΣϒίϯαϧςΟϯά
   ɾࣗࣾ։ൃ੡඼ൢച
   ɾ΢ΣϒγεςϜ։ൃ
   ɾҹ࡮෺σβΠϯ
   

   View Slide

4. #mtddc
   ࣗࣾϓϩμΫτ4,&-&50/$"35ͷ։ൃɾൢച
   .5Ϋϥ΢υରԠʂ
   

   View Slide

5. #mtddc
   %ZOBNJD1SFWJFX
   *NBHF6QMPBE6UJMJUZ
   .PWBCMF5ZQF༻ϓϥάΠϯͷ։ൃɾൢച
   

   View Slide

6. #mtddc
   %BTICPBSE6UJMJUZGPSNPWBCMFUZQFOFU
   

   View Slide

7. #mtddc
   ຊ೔ͷΞδΣϯμ
   

   View Slide

8. #mtddc
   ϒϩοΫΤσΟλͱΧελϜϒϩοΫ
   σϑΥϧτϒϩοΫͷ)5.-ʹ͋ΘͤΔ͔
   

   σβΠϯ͞Εͨ)5.-ʹ͋ΘͤΔ͔
   ΧελϜεΫϦϓτͱNU#MPDL&EJUPS#MPDLT
   ΧελϜεΫϦϓτΛར༻ͨ͠
   

   ΧελϜϒϩοΫ࡞੒खॱ
   ӡ༻͠΍͍͢ϒϩοΫΤσΟλ
   

   View Slide

9. #mtddc
   ϒϩοΫΤσΟλͱΧελϜϒϩοΫ
   

   View Slide

10. #mtddc
    ϒϩοΫΤσΟλͰར༻Ͱ͖ΔϒϩοΫ
    ϓϦηοτ͞Ε͍ͯΔ΋ͷ
    ʢσϑΥϧτϒϩοΫʣ
    ςΩετϒϩοΫ
    ը૾
    ϑΝΠϧ
    )5.-
    P&NCFE
    ܩઢ
    ςʔϒϧ
    ϚϧνΧϥϜ
    ΦϦδφϧͰ৽͘͠࡞Δ΋ͷ
    ʢΧελϜϒϩοΫʣ
    ΧελϜεΫϦϓτ
    NU#MPDL&EJUPS#MPDLT
    

    View Slide

11. #mtddc
    σϑΥϧτϒϩοΫͷ)5.-ʹ͋ΘͤΔ͔
    

    σβΠϯ͞Εͨ)5.-ʹ͋ΘͤΔ͔
    

    View Slide

12. #mtddc
    σϑΥϧτϒϩοΫʢྫɿϚϧνΧϥϜʣΛར༻͢Δ
    >
    
    >
    
    ޗഐ͸ೣͰ͋Δ>
    
    ޗഐ͸ೣͰ͋Δɻ໊લ͸·ͩແ͍ɻͲ͜Ͱɾɾɾɹ
    
    
    >
    
    >
    
    >
    
    
    alt="͵͜͞·
    "
    
    width="640
    "
    
    height="640
    "
    
    class="asset asset-image
    "
    
    style="max-width:100%;height:auto;display:block"
    >
    
    >
    
    >
    
    )5.-ߏ଄ΛมߋͰ͖ͳ͍ͨΊɺ
    ͜ͷ)5.-ʹ͋ΘͤͯελΠϧʢσβΠϯʣΛ༻ҙ͢Δ
    

    View Slide

13. #mtddc
    ΧελϜϒϩοΫΛ࢖͍ͨ͘ͳΔ
    >
    
    >
    
    ޗഐ͸ೣͰ͋Δ>
    
    ޗഐ͸ೣͰ͋Δɻ໊લ͸·ͩແ͍ɻͲ͜Ͱɾɾɾɹ
    
    
    >
    
    >
    
    >
    
    
    alt="͵͜͞·
    "
    
    width="640
    "
    
    height="640
    "
    
    class="asset asset-image
    "
    
    style="max-width:100%;height:auto;display:block"
    >
    
    >
    
    >
    
    
    ผͷDMBTTΛೖΕ͍ͨ
    TUZMFଐੑ͸ආ͚͍ͨ
    IʹDMBTTΛ௥Ճ͍ͨ͠
    ೖΕࢠͷEJWΛ௥Ճ͍ͨ͠
    σβΠϯ͞Εͨ)5.-Λ४උ͠ɺ
    ͦΕʹ͋Θͤͨ)5.-ߏ଄Λ࡞Δ
    

    View Slide

14. #mtddc
    ϒϩοΫΤσΟλͰར༻Ͱ͖ΔϒϩοΫ
    ϓϦηοτ͞Ε͍ͯΔ΋ͷ
    ʢσϑΥϧτϒϩοΫʣ
    ςΩετϒϩοΫ
    ը૾
    ϑΝΠϧ
    )5.-
    P&NCFE
    ܩઢ
    ςʔϒϧ
    ϚϧνΧϥϜ
    ΦϦδφϧͰ৽͘͠࡞Δ΋ͷ
    ʢΧελϜϒϩοΫʣ
    ΧελϜεΫϦϓτ
    NU#MPDL&EJUPS#MPDLT
    ࠓ೔ɺ͓࿩͢Δ෦෼
    

    View Slide

15. #mtddc
    ΧελϜεΫϦϓτͱ
    NU#MPDL&EJUPS#MPDLT
    

    View Slide

16. #mtddc
    ϒϩοΫΤσΟλͰར༻Ͱ͖ΔϒϩοΫ
    ϓϦηοτ͞Ε͍ͯΔ΋ͷ
    ʢσϑΥϧτϒϩοΫʣ
    ςΩετϒϩοΫ
    ը૾
    ϑΝΠϧ
    )5.-
    P&NCFE
    ܩઢ
    ςʔϒϧ
    ϚϧνΧϥϜ
    ΦϦδφϧͰ৽͘͠࡞Δ΋ͷ
    ʢΧελϜϒϩοΫʣ
    ΧελϜεΫϦϓτ
    NU#MPDL&EJUPS#MPDLT
    

    View Slide

17. #mtddc
    ΧελϜεΫϦϓτ
    NU#MPDL&EJUPS#MPDLT
    ‣ +BWB4DSJQUͰෳࡶͳՃ޻Λߦ͏͜ͱ͕Ͱ͖Δ
    ‣ ฤूը໘Ͱ΋ग़ྗͱಉ݁͡ՌΛදࣔ͢Δ͜ͱ͕Ͱ͖Δ
    ‣ ΧελϜεΫϦϓτΛมߋͯ͠΋ग़ྗͨ͠಺༰͸มߋ͞Εͳ͍
    ‣ .5λάΛ૊Έ߹ΘͤͨΧελϚΠζΛߦ͏͜ͱ͕Ͱ͖Δ
    ‣ ͭͷιʔε͔Βɺෳ਺ͷग़ྗΛಘΔ͜ͱ͕Ͱ͖Δ
    ‣ .5.-ͷมߋͰޙ͔Βग़ྗͨ͠಺༰ΛมߋͰ͖Δ
    

    View Slide

18. #mtddc
    ΧελϜεΫϦϓτ
    NU#MPDL&EJUPS#MPDLT
    ‣ +BWB4DSJQUͰෳࡶͳՃ޻Λߦ͏͜ͱ͕Ͱ͖Δ
    ‣ ฤूը໘Ͱ΋ग़ྗͱಉ݁͡ՌΛදࣔ͢Δ͜ͱ͕Ͱ͖Δ
    ‣ ΧελϜεΫϦϓτΛมߋͯ͠΋ग़ྗͨ͠಺༰͸มߋ͞Εͳ͍
    ‣ .5λάΛ૊Έ߹ΘͤͨΧελϚΠζΛߦ͏͜ͱ͕Ͱ͖Δ
    ‣ ͭͷιʔε͔Βɺෳ਺ͷग़ྗΛಘΔ͜ͱ͕Ͱ͖Δ
    ‣ .5.-ͷมߋͰޙ͔Βग़ྗͨ͠಺༰ΛมߋͰ͖Δ
    K2VFSZͰ΋0,
    ׬੒ޙ͕ΠϝʔδͰ͖Δ
    

    View Slide

19. #mtddc
    ϒϩοΫΤσΟλͰར༻Ͱ͖ΔϒϩοΫ
    ϓϦηοτ͞Ε͍ͯΔ΋ͷ
    ʢσϑΥϧτϒϩοΫʣ
    ςΩετϒϩοΫ
    ը૾
    ϑΝΠϧ
    )5.-
    P&NCFE
    ܩઢ
    ςʔϒϧ
    ϚϧνΧϥϜ
    ΦϦδφϧͰ৽͘͠࡞Δ΋ͷ
    ʢΧελϜϒϩοΫʣ
    ΧελϜεΫϦϓτ
    NU#MPDL&EJUPS#MPDLT
    ࠓ೔ɺ͓࿩͢Δ෦෼
    

    View Slide

20. #mtddc
    ΧελϜεΫϦϓτΛར༻ͨ͠
    

    ΧελϜϒϩοΫ࡞੒खॱ
    

    View Slide

21. #mtddc
    ΧελϜϒϩοΫͷ৽ن࡞੒ʢجຊʣ
    

    View Slide

22. #mtddc
    αϯϓϧʢ׬੒൛ʣ
    IUUQTXXXOJKQIJTUPSZPGNUEEDDPNQMFUFIUNM
    ࠓճ͸.PWBCMF5ZQFOFUͰ࡞੒͠·͢
    

    View Slide

23. #mtddc
    )5.-ΛϒϩοΫ୯Ґʹ෼͚Δ
    01
    STEP
    

    View Slide

24. #mtddc
    
    
    2010
    
    
    11.06
    
    MTDDC Meetup FUKUSHIMA 2010
    
    
    
    Movable Type MTDDC Mee
    
    <
    fi
    gure class="img-block__img">
    
    MTDDC Meetup FUKUSHIMA 2010
    
    
    
    
    
    
    2011
    
    
    04.16
    MTDDC Meetup NAGOYA 2011
    06.25
    
    M
    
    
    

    View Slide

25. #mtddc
    
    
    2010
    
    
    11.06
    
    MTDDC Meetup FUKUSHIMA 2010
    
    
    
    Movable Type MTDDC Mee
    
    <
    fi
    gure class="img-block__img">
    
    MTDDC Meetup FUKUSHIMA 2010
    
    
    
    
    
    
    2011
    
    
    04.16
    MTDDC Meetup NAGOYA 2011
    06.25
    
    M
    
    
    

    View Slide

26. #mtddc
    
    
    2010
    
    
    11.06
    
    MTDDC Meetup FUKUSHIMA 2010
    
    
    
    Movable Type MTDDC Mee
    
    <
    fi
    gure class="img-block__img">
    
    MTDDC Meetup FUKUSHIMA 2010
    
    
    
    
    
    
    2011
    
    
    04.16
    MTDDC Meetup NAGOYA 2011
    06.25
    
    M
    
    
    EJWCMPDL
    

    View Slide

27. #mtddc
    Πϕϯτ։࠵೔ͱͦͷ಺༰
    ςΩετ
    ը૾ͱςΩετ
    ίϝϯτ
    Πϕϯτ։࠵೥
    λΠϜϥΠϯશମ
    ࡞੒͢ΔϒϩοΫ
    

    View Slide

28. #mtddc
    Πϕϯτ։࠵೔ͱͦͷ಺༰
    ςΩετ
    ը૾ͱςΩετ
    ίϝϯτ
    Πϕϯτ։࠵೥
    λΠϜϥΠϯશମ
    ࡞੒͢ΔϒϩοΫ
    ಉ͡೥ͷผͷ೔ʹ
    Πϕϯτ͕։࠵͞Ε͍ͯΔ
    ը૾഑ஔ͕ύλʔϯ͋Δ
    

    View Slide

29. #mtddc
    ϒϩοΫ୯ҐͰΧελϜϒϩοΫΛ࡞Δ
    02
    STEP
    

    View Slide

30. #mtddc
    ಺ଆ͔Β࡞͍ͬͯ͘
    Πϕϯτ։࠵೔ͱͦͷ಺༰
    ςΩετ
    ը૾ͱςΩετ
    ίϝϯτ
    Πϕϯτ։࠵೥
    λΠϜϥΠϯશମ
    

    View Slide

31. #mtddc
    
    
    2010
    
    
    11.06
    
    MTDDC Meetup FUKUSHIMA 2010
    
    
    
    Movable Type MTDDC Mee
    
    <
    fi
    gure class="img-block__img">
    
    MTDDC Meetup FUKUSHIMA 2010
    
    
    ᶃΠϕϯτ։࠵೔ͱͦͷ಺༰
    

    View Slide

32. #mtddc
    ᶃΠϕϯτ։࠵೔ͱͦͷ಺༰
    

    View Slide

33. #mtddc
    ᶃΠϕϯτ։࠵೔ͱͦͷ಺༰
    ϒϩοΫɿςΩετ
    આ໌ɹɹɿ։࠵೔
    Ϋϥε໊ɿNPOUI
    ϙΠϯτ
    ςΩετͷϒϩοΫཁૉͷλά͸
    Q IʙI QSF͔Βબ୒
    

    View Slide

34. #mtddc
    ᶃΠϕϯτ։࠵೔ͱͦͷ಺༰
    ϒϩοΫɿςΩετϒϩοΫ
    આ໌ɹɹɿͰ͖͝ͱ
    Ϋϥε໊ɿEFTDSJQUJPO
    ϙΠϯτ
    ςΩετϒϩοΫ͸
    ϒϩοΫཁૉ΍૷০Λ
    ೖྗ࣌ʹઃఆՄೳ
    

    View Slide

35. #mtddc
    ᶃΠϕϯτ։࠵೔ͱͦͷ಺༰
    ։࠵೔ͱͰ͖͝ͱɺ͋Γ·͢ʢݟ͑ͳ͍͚Ͳʣ
    

    View Slide

36. #mtddc
    
    11.06
    
    MTDDC Meetup FUKUSHIMA 2010
    
    
    
    Movable Type MTDDC Mee
    
    <
    fi
    gure class="img-block__img">
    
    MTDDC Meetup FUKUSHIMA 2010
    
    
    
    
    
    
    2011
    
    
    04.16
    ᶄίϝϯτ಺ͷςΩετͱը૾
    

    View Slide

37. #mtddc
    ᶄίϝϯτ಺ͷςΩετ
    ϒϩοΫɿςΩετϒϩοΫ
    આ໌ɹɹɿͳ͠
    Ϋϥε໊ɿͳ͠
    ϙΠϯτ
    

    View Slide

38. #mtddc
    ᶄίϝϯτ಺ͷը૾
    ϒϩοΫɿυϩοϓμ΢ϯ
    આ໌ɹɹɿը૾ͷ഑ஔ
    Ϋϥε໊ɿQPTJUJPO
    ΦϓγϣϯɿOPOF SJHIU MFGU
    ϙΠϯτ
    

    View Slide

39. #mtddc
    ᶅίϝϯτ಺ͷը૾
    ϒϩοΫɿυϩοϓμ΢ϯ
    આ໌ɹɹɿը૾ͷ഑ஔ
    Ϋϥε໊ɿQPTJUJPO
    ϙΠϯτ
    

    View Slide

40. #mtddc
    ᶄίϝϯτ಺ͷը૾
    ϒϩοΫɿը૾
    આ໌ɹɹɿͳ͠
    Ϋϥε໊ɿJNHCMPDL@@JNH
    ϙΠϯτ
    

    View Slide

41. #mtddc
    ᶄίϝϯτ಺ͷը૾
    ϒϩοΫɿςΩετϒϩοΫ
    આ໌ɹɹɿͳ͠
    Ϋϥε໊ɿJNHCMPDL@@UFYU
    ϙΠϯτ
    

    View Slide

42. #mtddc
    ᶄίϝϯτ಺ͷը૾
    ίϯςφཁૉͰแΉɿ0/
    Ϋϥε໊ɿJNHCMPDL
    ϙΠϯτ
    
    <
    fi
    gure class="img-block__img">
    
    MTDDC Meetup FUKUSHIMA 2010
    
    
    

    View Slide

43. #mtddc
    
    11.06
    
    MTDDC Meetup FUKUSHIMA 2010
    
    
    
    Movable Type MTDDC Mee
    
    <
    fi
    gure class="img-block__img">
    
    MTDDC Meetup FUKUSHIMA 2010
    
    
    
    
    
    
    2011
    
    
    04.16
    ᶅίϝϯτ
    

    View Slide

44. #mtddc
    ᶅίϝϯτ
    ίϯςφཁૉͰแΉɿ0/
    Ϋϥε໊ɿDPNNFOU
    ϒϩοΫͷ௥Ճͱ࡟আɿ0/
    ϙΠϯτ
    ௥ՃՄೳͳϒϩοΫ
    ɾςΩετ
    ɾը૾
    

    View Slide

45. #mtddc
    
    
    2010
    
    
    11.06
    
    MTDDC Meetup FUKUSHIMA 2010
    
    
    
    Movable Type MTDDC Mee
    
    <
    fi
    gure class="img-block__img">
    
    MTDDC Meetup FUKUSHIMA 2010
    
    
    ᶆΠϕϯτ։࠵೥
    

    View Slide

46. #mtddc
    ᶆΠϕϯτ։࠵೥ ϙΠϯτ
    ϒϩοΫɿςΩετ
    આ໌ɹɹɿ։࠵೥
    Ϋϥε໊ɿZFBS
    

    View Slide

47. #mtddc
    ᶆΠϕϯτ։࠵೥ ϙΠϯτ
    ௥ՃՄೳͳϒϩοΫ
    ɾ݄೔
    ɾίϝϯτ
    ίϯςφཁૉͰแΉɿ0/
    Ϋϥε໊ɿCMPDL
    ϒϩοΫͷ௥Ճͱ࡟আɿ0/
    

    View Slide

48. #mtddc
    ᶆΠϕϯτ։࠵೥ ϙΠϯτ
    ௥ՃՄೳͳϒϩοΫ
    ɾ݄೔
    ɾίϝϯτ
    ίϯςφཁૉͰแΉɿ0/
    Ϋϥε໊ɿCMPDL
    ϒϩοΫͷ௥Ճͱ࡟আɿ0/
    
    
    2010
    
    
    11.06
    
    MTDDC Meetup FUKUSH
    
    
    
    Movable Type
    
    <
    fi
    gure class="img-block__img">
    
    MTDDC Meetup FUKUSHIMA 2010
    
    
    

    View Slide

49. #mtddc
    
    
    2010
    
    
    11.06
    
    MTDDC Meetup FUKUSHIMA 2010
    
    
    
    Movable Type MTDDC Mee
    
    <
    fi
    gure class="img-block__img">
    
    MTDDC Meetup FUKUSHIMA 2010
    
    
    ᶇλΠϜϥΠϯશମ
    

    View Slide

50. #mtddc
    ᶇλΠϜϥΠϯશମ ϙΠϯτ
    ௥ՃՄೳͳϒϩοΫ
    ɾ೥
    ίϯςφཁૉͰแΉɿ0/
    Ϋϥε໊ɿUJNFMJOF
    ϒϩοΫͷ௥Ճͱ࡟আɿ0/
    

    View Slide

51. #mtddc
    ΧελϜϒϩοΫͷʮೖΕࢠߏ଄ʯ
    03
    STEP
    

    View Slide

52. #mtddc
    ͜͜·Ͱ࡞ͬͨϒϩοΫΛ࢖ͬͯΈΑ͏
    

    View Slide

53. #mtddc
    ౤ߘઃఆ
    

    View Slide

54. #mtddc
    ౤ߘઃఆ
    ʮϒϩοΫΤσΟλͷදࣔઃఆʯʹ͋Δ
    ʮ΢Σϒϖʔδʯͷ෦෼Ͱ
    ʮλΠϜϥΠϯʯͷΈΛ0/ʹ͢Δ
    

    View Slide

55. #mtddc
    ΢Σϒϖʔδͷ࡞੒
    ΢ΣϒϖʔδͰ࢖͑ΔϒϩοΫ͸
    ʮλΠϜϥΠϯʯͷΈͳͷͰɺ
    ௥ՃϘλϯʹ͸͜ͷΑ͏ʹදࣔ͞ΕΔ
    

    View Slide

56. #mtddc
    ΢Σϒϖʔδͷ࡞੒
    λΠϜϥΠϯͷϒϩοΫͰ
    ௥ՃͰ͖Δͷ͸೥ͷϒϩοΫͷΈ
    

    View Slide

57. #mtddc
    ΢Σϒϖʔδͷ࡞੒
    λΠϜϥΠϯͷϒϩοΫʹ௥ՃͰ͖ΔͷΛ
    ೥ͷϒϩοΫ͚ͩʹઃఆ͓͍ͯͨͨ͠Ί
    

    View Slide

58. #mtddc
    ΢Σϒϖʔδͷ࡞੒ ։࠵೥ͷϒϩοΫͰ
    ௥ՃͰ͖Δͷ͸݄೔ͱίϝϯτͷΈ
    

    View Slide

59. #mtddc
    ΢Σϒϖʔδͷ࡞੒
    ଓ͍ͯίϝϯτͷϒϩοΫΛ௥Ճ
    

    View Slide

60. #mtddc
    ΢Σϒϖʔδͷ࡞੒ ίϝϯτͷϒϩοΫͰ
    ௥ՃͰ͖Δͷ͸ςΩετͱը૾ͷϒϩοΫͷΈ
    

    View Slide

61. #mtddc
    ΢Σϒϖʔδͷ࡞੒ ֤ϒϩοΫʹೖྗ͍ͯ͘͠
    

    View Slide

62. #mtddc
    ΢Σϒϖʔδͷ࡞੒ ͜ͷঢ়ଶ͔ΒϓϨϏϡʔ͢Δͱɾɾɾ
    

    View Slide

63. #mtddc
    $44͕ਖ਼͘͠ద༻͞Ε͍ͯͳ͍
    

    View Slide

64. #mtddc
    
    
    2010
    11.06
    
    MTDDC Meetup FUKUSHIMA 2010
    
    
    Movable Type MTDDC Meetup
    
    left
    
    
    MTDDC Meetup FUKUSHIMA 2010 80
    
    
    
    
    MTDDC Meetup FUKUSHIMA
    
    )5.-λά͕ҧ͏͔ΒɺελΠϧ͕ద༻͞Εͳ͍
    ϒϩοΫͷλά͕ҧ͏
    ඞཁͳϒϩοΫ͕ͳ͍
    

    View Slide

65. #mtddc
    ΧελϜεΫϦϓτΛॻ͘
    04
    STEP
    

    View Slide

66. #mtddc
    ΧελϜεΫϦϓτΛॻ͘ λΠΠϜϥΠϯͷϒϩοΫʹ
    ·ͱΊͯεΫϦϓτΛॻ͘
    ʢೖΕࢠߏ଄ͷ৔߹ɺ਌ϒϩοΫʹॻ͘ʣ
    
    

    View Slide

67. #mtddc
    integrity="*****************************************"
    crossorigin="anonymous">
    <br/>$(function(){<br/>if (document.body.dataset.hasCompiledHtml) {<br/>return;<br/>}<br/>// HTML<br/>var html = document.querySelector('.timeline').outerHTML;<br/>MTBlockEditorSetCompiledHtml(html);<br/>});<br/>
    ΧελϜεΫϦϓτΛॻ͘
    ࢲ͕͍ͭ΋࢖͏ςϯϓϨʔτ
    +BWB4DSJQU
    ɾK2VFSZΛ࢖༻
    ɾ਌ϒϩοΫͷ)5.-Λ·Δͬͱग़ྗ
    ɹͪͳΈʹɺࢲͷ+BWB4DSJQUεΩϧ͸௿͍Ͱ͢ʜ
    

    View Slide

68. #mtddc
    //
    $('.year').replaceWith(function() {
    var year = $(this).text();
    $(this).replaceWith('' + year + '')
    });
    //
    $('img').removeAttr('style class');
    $('.img-block__img').replaceWith(function() {
    var img = $(this).html();
    $(this).replaceWith('<
    fi
    gure class="img-block__img">' + img + '
    fi
    gure>')
    });
    ࠓճॻ͍͍ͯΔ಺༰ʢൈਮʣ
    QλάΛEJW΍
    fi
    HVSFʹஔ͖׵͑
    TUZMFଐੑ΍DMBTTଐੑΛ࡟আ
    

    View Slide

69. #mtddc
    //
    $('.img-block').each(function(){
    var position = $(this).
    fi
    nd('.position').text();
    $(this).addClass(position);});
    $('.position').remove();
    //
    $('.block').wrapInner('');
    $('.detail').wrapInner('');
    //
    $('.block').each(function(){
    $(this).
    fi
    nd('.year').insertBefore($(this).
    fi
    nd(".detail"));
    });
    $('.block').each(function(){
    $(this).
    fi
    nd('.comment').insertAfter($(this).
    fi
    nd(".group"));
    });
    ࠓճॻ͍͍ͯΔ಺༰ʢൈਮʣ
    ը૾഑ஔ༻ͷDMBTTΛ਌ϒϩοΫʹ͚ͭΔ
    ϒϩοΫͰғͬͨΓɺॱংΛೖΕସ͑ͨΓ
    

    View Slide

70. #mtddc
    ͋ΒͨΊͯ΢Σϒϖʔδͷฤूը໘Λ։͘
    ϓϨϏϡʔʹ΋൓ө͞ΕΔͷͰ
    ͏·͘ಈ͔ͳͯ͘΋
    ։ൃऀπʔϧͰ֬ೝͰ͖Δ
    

    View Slide

71. #mtddc
    ͜͜·Ͱͷ಺༰ͰϓϨϏϡʔͯ͠ΈΔ
    

    View Slide

72. #mtddc
    
    
    2010
    
    
    11.06
    
    MTDDC Meetup FUKUSHIMA 2010
    
    
    
    Movable Type MTDDC Meetup
    
    <
    fi
    gure class="img-block__img">
    
    
    fi
    gure>
    
    MTDDC Meetup FUKUSHIMA 2010 80
    
    
    
    
    )5.-λά͕ॻ͖׵͑ΒΕɺελΠϧ͕ద༻͞Ε͍ͯΔ
    ਖ਼͍͠ϒϩοΫͷλά
    ඞཁͳϒϩοΫ͕ἧ͏
    

    View Slide

73. #mtddc
    ฤूը໘ͰͷϓϨϏϡʔͱΤσΟλ$44
    05
    STEP
    

    View Slide

74. #mtddc
    ͜ͷ··Ͱ΋ྑ͍͚ΕͲɺݟͨ໨͕ҧ͏ͷͰΘ͔Γʹ͍͘
    

    View Slide

75. #mtddc
    ؅ཧը໘ͷΤσΟλʹద༻Ͱ͖Δ$44Λ௥Ճ
    IUUQTNPWBCMFUZQFOFUTVQQPSUEFTJHOFEJUDTTIUNM
    ৄ͘͠͸ʮΤσΟλ$44Λར༻͢ΔʯΛࢀর
    

    View Slide

76. #mtddc
    ؅ཧը໘ͷΤσΟλʹద༻͞ΕΔ$44Λ௥Ճ
    

    View Slide

77. #mtddc
    ؅ཧը໘ͷΤσΟλͰ΄΅ϓϨϏϡʔͰ͖Δ
    

    View Slide

78. #mtddc
    ͋ͱ͸ʮ೥ʯผͷͰ͖͝ͱΛ௥Ճ͍͚ͯͩ͘͠
    

    View Slide

79. #mtddc
    ͋ͱ͸ʮ೥ʯผͷͰ͖͝ͱΛ௥Ճ͍͚ͯͩ͘͠
    

    View Slide

80. #mtddc
    αϯϓϧʢ׬੒൛ʣ
    IUUQTXXXOJKQIJTUPSZPGNUEEDDPNQMFUFIUNM
    

    View Slide

81. #mtddc
    ࣮ࡍʹ͜ͷΧελϜϒϩοΫͰߏஙͨ͠ྫ
    גࣜձࣾγʔζɾϥϘ ձࣾԊֵ ΩϟϦΞύε
    

    View Slide

82. #mtddc
    ӡ༻͠΍͍͢ϒϩοΫΤσΟλ
    

    View Slide

83. #mtddc
    ϒϩοΫΤσΟλ͡Όͳͯ͘΋ྑ͍ͷͰ͸ʜ
    !
    

    View Slide

84. #mtddc
    )5.-ϒϩοΫΛ࡞ͬͯɺ)5.-ΛషΓ෇͚Δ
    

    View Slide

85. #mtddc
    )5.-ϒϩοΫΛ࡞ͬͯɺ)5.-ΛషΓ෇͚Δ
    

    View Slide

86. #mtddc
    ͜ΕͰ΋Ͱ͖ͪΌ͍·͢
    )5.-ϒϩοΫΛ࡞ͬͯɺ)5.-ΛషΓ෇͚Δ
    

    View Slide

87. #mtddc
    ΢ΣϒϖʔδΛฤू͢Δਓ͕
    )5.-Λॻ͚ΔͳΒ
    ϒϩοΫΤσΟλ͡Όͳͯ͘΋ྑͦ͞͏ʜʁ
    

    View Slide

88. #mtddc
    ϒϩοΫΤσΟλΛར༻͠ɺࣗ෼ͨͪͰߋ৽͍ͯ͠Δ
    ฐࣾΫϥΠΞϯτͷօ͞Μ
    

    View Slide

89. #mtddc
    ϒϩοΫΤσΟλΛར༻͠ɺࣗ෼ͨͪͰߋ৽͍ͯ͠Δ
    ฐࣾΫϥΠΞϯτͷօ͞Μ
    &$ػೳͱ࿈ܞͨ͠঎඼ϖʔδ
    ਺ेϖʔδʹ౉Δίϯςϯπ
    ݚमࢿྉʢಈըʣͷܝࡌ
    

    View Slide

90. ΧελϜϒϩοΫ࡞੒खॱͷ
    ϕλʔϓϥΫςΟε
    גࣜձࣾδϟΫελϙδγϣϯɹ୅දऔక໾ɹ੢ࢁɹହ࢙
    
    .5%%$.FFUVQ50,:0
    See you!
    1IPUPCZ.BUU)VETPOPO6OTQMBTI
    

    View Slide