ディレクター・ノンプログラマー目線のMovable Type
•
2 likes•3,331 views
2016年2月27日に開催されたCMSMix Sapporoで使用したスライド（抜粋）です。
Recommended
More Related Content
What's hot
What's hot (20)
Similar to ディレクター・ノンプログラマー目線のMovable Type
Similar to ディレクター・ノンプログラマー目線のMovable Type (20)
ディレクター・ノンプログラマー目線のMovable Type
- 2. 自己紹介
- 5. Movable TypeとDB連携できるショッピングカート SKELETON CART http://skeleton.juxtaposition.jp/ Movable Typeの画像アップロード機能補助プラグイン ImageUploadUtility http://skeleton.juxtaposition.jp/image-upload-utility/ Movable Typeのプレビュー機能強化プラグイン DynamicPreview http://skeleton.juxtaposition.jp/dynamic-preview/
- 6. 西山と言えば？
- 7. ラーメン！
- 9. 今日のアジェンダ 1. Movable Typeのこれまで 2. 気に入っているところ 3. ちょっと残念なところ 4. 構築事例紹介 5. こらから始めたい方へ
- 12. 2001年 Movable Type リリース 2003年 米国Six Apartの日本法人が設立 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 リリース
- 18. ①ファイル形式を問わず 静的ファイルを出力 CSV JSONPHP HTML CSS javascript
- 22. テンプレートの管理
- 25. Movable Type Markup Language Movable Typeで利用するテンプレート記述言語 HTMLを拡張し、MTタグとして利用できる。
- 26. <?php the_title(); ?> ↓ <mt:EntryTitle> ex. ブログ記事タイトル
- 27. 記事がある場合 <a href=“01.html”>記事タイトル①</a><br /> <a href=“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. <mt:Entries> <a href=“<mt:EntryPermaLink>”> <mt:EntryTitle></a><br /> <mt:Else> <p>記事がありません</p> </mt:Entries> ex. ブログ記事一覧（MT）
- 30. MTMLのいいところ編
- 31. 再構築 MTMLのいいところ①
- 33. 画面が白くならない
- 39. サーバーの同じ場所に index.html と test.html が 出力された状態
- 45. MTMLでカスタマイズも可能
- 49. ちょっと残念なところ
- 50. ①ドキュメント…
- 52. お、おう…
- 55. ②ライセンス料…
- 61. ③再構築が…
- 64. ④動的な出力が…
- 66. ⑤管理画面のUIが…
- 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/ ブログ記事アーカイヴ 公開ページなし
- 76. WireFrame ① デザイン作成 ② HTML作成 ④ MTML作成 •今回のサイト構築趣旨 •デザイン、機能での要望 •テンプレート構成の相談 構築フロー ③ プラグイン開発
- 77. ① デザイン作成 ② HTML作成 構築フロー ウェブサイト全体を HTMLで作ってしまう
- 81. SkeletonCartConnector for MT <mt:ScDir> SKELETON CARTのインストールディレクトリを出力 <mt:itemname> 商品名を出力 <mt:itemprice> 商品の価格を出力 ・・・などなど 独自のMTタグが使えるようになる
- 82. ② HTML作成 構築フロー ④ MTML作成 HTMLの必要箇所を MTMLに置き換える ③ プラグイン開発
- 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”> <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> <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> <li class="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. 構築フロー Data APIを利用してデータベース内の情報を独自管理画面に表示 Database 顧客・売上管理画面Data API ⑤ 専用管理画面開発
- 91. これから始めてみたい方へ
- 94. でも画面が見づらいよね…
- 96. こんな画面だったのが
- 97. こんな感じになります
- 98. でも…１人で勉強するの嫌だな
- 100. シール作りました
- 101. ご清聴ありがとうございました！ CMSMix Sapporo 2016.02.27 (Sat) at TKP札幌カンファレンスセンター ディレクター・ノンプログラマー目線の “Movable Type” Let’s Try Movable Type