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

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

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

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

Yausufmi Nishiyama

November 13, 2021
Tweet

More Decks by Yausufmi Nishiyama

Other Decks in Technology

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