Download as PDF, PPTX
Uploaded byYasufumi Nishiyama
ディレクター・ノンプログラマー目線のMovable Type
2016年2月27日に開催されたCMSMix Sapporoで使用したスライド（抜粋）です。
ディレクター・ノンプログラマー目線のMovable Type
- 1.
- 2.
- 3.
- 4.
- 5. Movable TypeとDB連携できるショッピングカート SKELETON CART http://skeleton.juxtaposition.jp/ MovableTypeの画像アップロード機能補助プラグイン ImageUploadUtility http://skeleton.juxtaposition.jp/image-upload-utility/ Movable Typeのプレビュー機能強化プラグイン DynamicPreview http://skeleton.juxtaposition.jp/dynamic-preview/
- 6.
- 7.
- 8.
- 9. 今日のアジェンダ 1. Movable Typeのこれまで 2.気に入っているところ 3. ちょっと残念なところ 4. 構築事例紹介 5. こらから始めたい方へ
- 10.
- 11.
- 12. 2001年 Movable Type リリース 2003年 米国SixApartの日本法人が設立 2004年 Movable Type 3 日本語版を販売開始 2007年 Movable Type 4 リリース 2009年 Movable Type 5 リリース 2010年 MTDDC HOKKAIDO 開催 2011年 日本法人が独立（Six ApartとMovable Typeの事業を引継ぐ） 2013年 Movable Type 6 リリース 2013年 MTDDC Meetup HOKKAIDO 開催（MT蝦夷発足） 2014年 海外事業の再展開を開始 2015年 MovableType.net リリース
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25. Movable Type Markup Language MovableTypeで利用するテンプレート記述言語 HTMLを拡張し、MTタグとして利用できる。
- 26.
- 27. 記事がある場合 <a href=“01.html”>記事タイトル①</a><br /> <ahref=“02.html”>記事タイトル②</a><br /> <a href=“03.html”>記事タイトル③</a><br /> ・ ・ ・ 記事がない場合 <p>記事がありません</p> ex. ブログ記事一覧
- 28. <?php if (have_posts()): ?> <?php while (have_posts()) : the_post(); ?> <a href="<?php the_permalink(); ?>”> <?php the_title(); ?></a><br /> <?php endwhile; ?> <?php else : ?> <p>記事がありません</p> <?php endif; ?> ex. ブログ記事一覧（WP）
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39. サーバーの同じ場所に index.html と test.htmlが 出力された状態
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 70. 構成メンバー ディレクター 西山 泰史 デザイナー 飯島 聡子 フロントエンド エンジニア 森智香子 Movable Type エンジニア 淺田 昇平 プログラマー SKELETON CART／DB管理画面担当 濱内 勇一（株式会社インセンブル） プログラマー MTプラグイン開発 遠藤克洋（カーリーブラケット株式会社）
- 71. ウェブサイト ブログ 商品情報 SKELETON CART 全体の構成図 Database Movable Typeで構築顧客・売上管理画面 プラグイン連携 Data API SKELETON CART プラグイン連携
- 72.
- 73. 2特 500g 特 500g 瓶250g 商品ページに「カテゴリアーカイヴ」を利用 公開URL /item/karashi-mentaiko/ ブログ記事アーカイヴ 公開ページなし
- 74.
- 75.
- 76. WireFrame ① デザイン作成 ② HTML作成 ④MTML作成 •今回のサイト構築趣旨 •デザイン、機能での要望 •テンプレート構成の相談 構築フロー ③ プラグイン開発
- 77. ① デザイン作成 ②HTML作成 構築フロー ウェブサイト全体を HTMLで作ってしまう
- 78.
- 79.
- 80.
- 81. SkeletonCartConnector for MT <mt:ScDir> SKELETONCARTのインストールディレクトリを出力 <mt:itemname> 商品名を出力 <mt:itemprice> 商品の価格を出力 ・・・などなど 独自のMTタグが使えるようになる
- 82.
- 83. <div class="wgt-items__colA"> <p class="wgt-items__name">鮭醤油いくら1kg</p> <p class="wgt-items__price">1箱 税込 <span class="number">0,000</span>円</p> </div> <div class="wgt-items__colA"> <p class="wgt-items__name"><mt:itemname></p> <p class="wgt-items__price">1<mt:unit_displayname> 税込 <span class="number"><mt:itemprice></span>円</p> </div> HTML ̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶ MTML ̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶
- 84. <ul class="wgt-items__list"> <li class=“wgt-items__item”> <formmethod="post" name="newdat" enctype="multipart/form-data" action=""> <div class="wgt-items__colA"> <p class="wgt-items__name">鮭醤油いくら 1kg</p> <p class="wgt-items__price">1箱 税込 <span class="number">0,000</span>円</p> </div> <div class="wgt-items__colB"> <p class="wgt-items__order">数量 <input type="text" name="" id=""> 箱</p> <div class="wgt-items__button"><input type="button" value="買い物かごへ" class="wgt-button"></div> </div> </form> </li> <li class=“wgt-items__item”> <form method="post" name="newdat" enctype="multipart/form-data" action=""> <div class="wgt-items__colA"> <p class="wgt-items__name">鮭醤油いくら 1kg</p> <p class="wgt-items__price">1箱 税込 <span class="number">0,000</span>円</p> </div> <div class="wgt-items__colB"> <p class="wgt-items__order">数量 <input type="text" name="" id=""> 箱</p> <div class="wgt-items__button"><input type="button" value="買い物かごへ" class="wgt-button"></div> </div> </form> </li> <li class=“wgt-items__item"> <form method="post" name="newdat" enctype="multipart/form-data" action=""> <div class="wgt-items__colA"> <p class="wgt-items__name">鮭醤油いくら 1kg</p> <p class="wgt-items__price">1箱 税込 <span class="number">0,000</span>円</p> </div> <div class="wgt-items__colB"> <p class="wgt-items__order">数量 <input type="text" name="" id=""> 箱</p> <div class="wgt-items__button"><input type="button" value="買い物かごへ" class="wgt-button"></div> </div> </form> </li> </ul> HTML ̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶ 同じ内容
- 85. <mt:Entries lastn="3"> <mt:EntriesHeader><ul class=“wgt-items__list"></mt:EntriesHeader> <liclass="wgt-items__item"> <form method="post" name="newdat" enctype="multipart/form-data" action="<mt:ScDir>cart.php?qp0=idx&qp1=ad"> <div class="wgt-items__colA"> <p class="wgt-items__name"><mt:itemname></p> <p class="wgt-items__price">1<mt:unit_displayname> 税込 <span class="number"><mt:itemprice></span>円</p> </div> <div class="wgt-items__colB"> <p class=“wgt-items__order">数量 <input type="text" name="cart_item_amount" value="1" id=""> <mt:unit_displayname></p> <div class=“wgt-items__button"><input type="submit" value="買い物かごへ" class=“wgt-button"></div> </div> </form> </li> <mt:EntriesFooter></ul></mt:EntriesFooter> <mt:Entries> MTML ̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶ 1つにまとめる
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101. ご清聴ありがとうございました！ CMSMix Sapporo 2016.02.27(Sat) at TKP札幌カンファレンスセンター ディレクター・ノンプログラマー目線の “Movable Type” Let’s Try Movable Type