遂にキタ！MTのブロックエディタはイノベーションを起こすのか

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

Transcript

1. MT
   MTDDC Meetup TOKYO 2020 at Zoom Webinar
   Yasufumi Nishiyama ( Juxtaposition Inc. )
   Hello!
   

   View Slide

2. #mtddc
   

   View Slide

3. #mtddc
   2004 4 2013 10 8
   

   View Slide

4. #mtddc
   Movable Type
   2004 4 Movable Type
   2008 ProNet
   2013 MT
   2013 MTDDC Meetup HOKKAIDO 2013
   2015
   2018 MTDDC Meetup HOKKAIDO 2018
   

   View Slide

5. #mtddc
   

   View Slide

6. #mtddc
   SKELETON CART
   MT
   

   View Slide

7. #mtddc
   DynamicPreview 2015.4
   ImageUploadUtility 2012.3
   Movable Type
   

   View Slide

8. #mtddc
   DashboardUtility for movabletype.net
   

   View Slide

9. #mtddc
   1. MT7 MT.net
   2. MovableType.net
   3.
   

   View Slide

10. #mtddc
    Movable Type 7
    

    View Slide

11. #mtddc
    Movable Type 7
    

    View Slide

12. #mtddc
    Movable Type 7
    

    View Slide

13. #mtddc
    Movable Type 7
    

    View Slide

14. #mtddc
    Movable Type 7
    

    View Slide

15. #mtddc
    Movable Type 7
    

    View Slide

16. #mtddc
    Movable Type 7
    

    View Slide

17. #mtddc
    Movable Type 7
    

    View Slide

18. #mtddc
    Movable Type 7
    

    View Slide

19. #mtddc
    Movable Type 7
    

    View Slide

20. #mtddc
    Movable Type 7
    

    View Slide

21. #mtddc
    Movable Type 7
    

    View Slide

22. #mtddc
    Movable Type 7
    

    View Slide

23. #mtddc
    Movable Type 7
    

    View Slide

24. #mtddc
    MTAppjQuery
    Movable Type 7
    

    View Slide

25. #mtddc
    MovableType.net
    

    View Slide

26. #mtddc
    MovableType.net
    

    View Slide

27. #mtddc
    MovableType.net
    

    View Slide

28. #mtddc
    MovableType.net
    

    View Slide

29. #mtddc
    TinyMCE
    MovableType.net
    

    View Slide

30. #mtddc
    MovableType.net
    

    View Slide

31. #mtddc
    MovableType.net
    

    View Slide

32. #mtddc
    MovableType.net
    

    View Slide

33. #mtddc
    MovableType.net
    

    View Slide

34. #mtddc
    MovableType.net
    

    View Slide

35. #mtddc
    MovableType.net
    

    View Slide

36. #mtddc
    TinyMCE
    MovableType.net
    

    View Slide

37. #mtddc
    MovableType.net
    

    View Slide

38. #mtddc
    MovableType.net
    

    View Slide

39. #mtddc
    MovableType.net
    class
    JavaScript CSS
    div
    class
    

    View Slide

40. #mtddc
    

    View Slide

41. #mtddc
    iframe
    Innovation 01
    

    View Slide

42. #mtddc
    YouTube
    .YouTube iframe
    . HTML
    .div.youtube HTML
    .CSS
    

    View Slide

43. #mtddc
    YouTube
    .YouTube iframe
    .
    . div.youtube
    .CSS
    

    View Slide

44. #mtddc
    MovableType.net
    .
    

    View Slide

45. #mtddc
    MovableType.net
    .
    . oEmbed
    

    View Slide

46. #mtddc
    MovableType.net
    .
    . oEmbed
    . ON
    

    View Slide

47. #mtddc
    MovableType.net
    .
    . oEmbed
    . ON
    . youtube
    . CSS div.youtube iframe { }
    QR
    

    View Slide

48. #mtddc
    MovableType.net
    .
    

    View Slide

49. #mtddc
    MovableType.net
    .
    . YouTube URL
    

    View Slide

50. #mtddc
    MovableType.net
    .
    . YouTube URL
    

    View Slide

51. #mtddc
    MovableType.net
    HTML
    
    frameborder="0" allow="accelerometer; autoplay;
    clipboard-write; encrypted-media; gyroscope; picture-in-
    picture" allowfullscreen="">
    
    

    View Slide

52. #mtddc
    table
    Innovation 02
    

    View Slide

53. #mtddc
    table
    . table
    CSS
    .WYSIWYG HTML
    div class
    

    View Slide

54. #mtddc
    MovableType.net
    .
    

    View Slide

55. #mtddc
    MovableType.net
    .
    .
    

    View Slide

56. #mtddc
    MovableType.net
    .
    .
    .
    default, vertical, scroll
    

    View Slide

57. #mtddc
    MovableType.net
    .
    .
    .
    default, vertical, scroll
    .
    QR
    

    View Slide

58. #mtddc
    MovableType.net
    .
    

    View Slide

59. #mtddc
    MovableType.net
    .
    .
    

    View Slide

60. #mtddc
    MovableType.net
    
    
    
    
    
    
    
    
    
    
    
    

    View Slide

61. #mtddc
    MovableType.net
    
    
    
    
    ộ
    
    
    
    
    HTML
    

    View Slide

62. #mtddc
    Innovation 03
    

    View Slide

63. #mtddc
    ˡ͕͜͜ΠϯσοΫεʹͳΔ
    ˡ͜͜΁ͷϦϯΫΛ
    ɹͭ͘Γ͍ͨ
    

    View Slide

64. #mtddc
    Movable Type
    . HTML
    .
    .
    .
    . MT
    

    View Slide

65. #mtddc
    MovableType.net
    .
    

    View Slide

66. #mtddc
    MovableType.net
    .
    .
    

    View Slide

67. #mtddc
    MovableType.net
    .
    .
    

    View Slide

68. #mtddc
    MovableType.net
    <$mt:PageBody$>
    .
    .
    .
    

    View Slide

69. #mtddc
    MovableType.net
    
    
    folder_label="$__value__" />
    
    
    
    
    .
    .
    .
    

    View Slide

70. #mtddc
    MovableType.net
    .
    .
    .
    .
    
    
    
    
    
    
    

    

    

    
    
    
    
    
    

    View Slide

71. #mtddc
    MovableType.net
    .
    

    View Slide

72. #mtddc
    MovableType.net
    .
    .
    

    View Slide

73. #mtddc
    MovableType.net
    
    
    ձࣾ֓ཁ
    ࢧళॴࡏ஍
    
    
    HTML
    

    View Slide

74. #mtddc
    HTML
    HTML MT
    Innovation!
    

    View Slide

75. #mtddc
    

    View Slide

76. #mtddc
    

    View Slide

77. #mtddc
    

    View Slide

78. #mtddc
    

    View Slide

79. #mtddc
    

    View Slide

80. #mtddc
    YouTube
    

    View Slide

81. #mtddc
    

    View Slide

82. #mtddc
    HTML/MT
    2021 MT7
    

    View Slide

83. #mtddc
    MT
    URLɿwww.ni4.jp
    Twitter : nishi_yama
    MTDDC Meetup TOKYO 2020
    See you!
    

    View Slide