Embed Size (px)
Citation preview
ディレクター・ノンプログラマー目線の
Movable Type株式会社ジャクスタポジション 西山
自己紹介
西山 泰史 にしやま やすふみ
株式会社ジャクスタポジション 札幌市在住のWebディレクター 創業12年目（法人3期目） Movable Typeでのサイト構築 2013年よりMT蝦夷を主宰 好きなMTタグは、MTIf 三度の飯より食べることが好き
ジャクスタポジションと言えば？
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/
西山と言えば？
ラーメン！
今日のミッションMovable Type いいね！ 思っていたよりも簡単そう！ 使ってみたい！
今日のアジェンダ1. Movable Typeのこれまで 2. 気に入っているところ 3. ちょっと残念なところ 4. 構築事例紹介 5. こらから始めたい方へ
Movable Typeのこれまで
2001年にトロット夫妻の手によりリリース フロントエンド（デザイナー）のMenaが、 それまでよりもっと機能的で使いやすいブログを要望。 Menaの「これが欲しい」をもとにエンジニアのBenが開発。
カテゴリー分類や、コメント・トラックバック機能、 ページテンプレート（MTML）が特徴的だった。
2002年にSix Apartとして起業、 日本ではネオテニー社（伊藤穰一さん、平田大治さん在籍）が その普及に活躍した。
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 リリース
サイボウズ式
ぐるなび
伊勢丹パーク
ファイナルファンタジー
全国におよそ 300社のProNet加盟企業
全国におよそ 300社のProNet加盟企業
2008年より加盟
Movable Type ユーザーコミュニティ 北海道
東北
東京
愛媛名古屋
新潟長野
広島 関西
福岡
熊本 鹿児島
Movable Typeを 気に入っているところ
①ファイル形式を問わず 静的ファイルを出力
CSV JSONPHP
HTML CSS javascript
HTMLなど Database
再構築＝書き出し
DBにアクセスせず ウェブサイトを閲覧
Movable Typeから JSONファイルを出力し、 それを検索対象とする
②テンプレートの構造を 管理画面上から俯瞰
インデックス
カテゴリ
月別・日別
…
記事別
…
テンプレートの管理
現在のテンプレートが、 ほかのどのテンプレートを インクルードしているかも 把握できる
Movable Typeの テンプレート編集は 管理画面でほぼ全てを操作
※エディタなどを使用して 外部からテンプレートを 構築することもできます。
③MTMLの学習コストが低い （テンプレートの可読性）
Movable Type Markup LanguageMovable Typeで利用するテンプレート記述言語 HTMLを拡張し、MTタグとして利用できる。
<?php the_title(); ?> ↓ <mt:EntryTitle>
ex. ブログ記事タイトル
記事がある場合 <a href=“01.html”>記事タイトル①</a><br /> <a href=“02.html”>記事タイトル②</a><br /> <a href=“03.html”>記事タイトル③</a><br /> ・ ・ ・ 記事がない場合 <p>記事がありません</p>
ex. ブログ記事一覧
<?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）
<mt:Entries> <a href=“<mt:EntryPermaLink>”>
<mt:EntryTitle></a><br /> <mt:Else>
<p>記事がありません</p> </mt:Entries>
ex. ブログ記事一覧（MT）
MTMLのいいところ編
再構築
MTMLのいいところ①
MTMLの書き方を間違ったり バージョンアップが原因で 動かないプラグインがあっても
MTMLのいいところ①
画面が白くならない
間違ったまま「保存／再構築」しても
保存しない／ファイルを出力しない
公開中のサイトに 影響しない
公開中のページを編集する際も 確認用ファイルを出力できる
MTMLのいいところ②
ファイルを複製
①ファイルを選択
②複製でGO
③複製が完了
出力する ファイル名を変更
④ファイル名変更
⑤実際に出力される内容を確認
サーバーの同じ場所に index.html と test.html が 出力された状態
⑥test.htmlをリネームして index.htmlを上書き
確認後にファイルを上書き
⑦メインページ（index.html）を削除 ⑧メインページのコピーを「メインページ」に変更
これだとリビジョン（更新履歴）が残らないので、 test.htmlのソースをコピーするのがいいかも。
なかったことにしてくれる <mt:Ignore>
MTMLのいいところ③
<ul> <mt:Entries> <li><mt:EntryTitle></li> </mt:Entries> </ul>
<mt:Entries> <mt:EntriesHeader><ul></mt:EntriesHeader> <li><mt:EntryTitle></li> <mt:EntriesFooter></ul></mt:EntriesFooter> </mt:Entries>
<mt:Ignore> <ul> <mt:Entries> <li><mt:EntryTitle></li> </mt:Entries> </ul> </mt:Ignore>
<mt:Entries> <mt:EntriesHeader><ul></mt:EntriesHeader> <li><mt:EntryTitle></li> <mt:EntriesFooter></ul></mt:EntriesFooter> </mt:Entries>
この部分を出力しない （無かったことにしてくれる） デフォルトテンプレートを 参考に「試す」ことができる
管理画面もMTML
MTMLのいいところ④
MTMLでカスタマイズも可能
管理画面のカスタマイズなら！
PerlやMTMLの知識が無くても jQueryでMTの管理画面をカスタマイズできる
↑bit part 柳谷さん この会場にいます
MTMLによる分業
MTMLのいいところ⑤
MTコーディング時にプログラムを書かない
プラグイン
MT
MTMLHTML
プログラマーフロントエンド
実現したいことSix Apart
標準機能またはプラグインでMTML化
ちょっと残念なところ
①ドキュメント…
お、おう…
ドキュメントでわからないこと
MTQ
ドキュメントでわからないこと
MTCafe
②ライセンス料…
実はライセンスの バリエーションが多い
90,000円（税別） 1,800,000円（税別）
0.07ドル／1時間 月額5,000円～
ソフトウェア版 90,000円（税別）
クラウド版 5,000円（税別）～
サーバーメンテナンス バージョンアップ含む
Movable type.net
月額約2,100円（税別）～
CPIのレンタルサーバー ACE01月額1,500円（税別） ※3ユーザー・ライセンス
③再構築が…
再構築を早めるために できること
•モジュールのキャッシュ化 •アーカイブテンプレートの活用 •テンプレートの手動再構築 •利用しているプラグインの見直し
再構築ってどれぐらいの頻度？ 誰が支払うべきコストなのか？
④動的な出力が…
ダイナミック・パブリッシング•Movable Type標準機能 標準機能でも動的出力ができます。
•Perl版ダイナミック・パブリッシング 藤本壱さんのプラグイン
•DynamicMTML アルファサードさんのプラグイン
⑤管理画面のUIが…
http://www.slideshare.net/daijihirata/road-to-next-mt-mtddc-meetup-tokyo-2015-keynote
構築事例紹介
構成メンバーディレクター 西山 泰史
デザイナー 飯島 聡子
フロントエンド エンジニア 森 智香子
Movable Type エンジニア 淺田 昇平
プログラマー SKELETON CART／DB管理画面担当 濱内 勇一（株式会社インセンブル）
プログラマー MTプラグイン開発 遠藤克洋（カーリーブラケット株式会社）
ウェブサイト
ブログ
商品情報
SKELETON CART
全体の構成図
Database
Movable Typeで構築 顧客・売上管理画面
プラグイン連携
Data API
SKELETON CART プラグイン連携
ウェブサイト
ブログ
商品情報
2特 500g
特 500g
瓶 250g
商品ページに「カテゴリアーカイヴ」を利用公開URL /item/karashi-mentaiko/
ブログ記事アーカイヴ 公開ページなし
カテゴリ情報に カスタムフィールドで 項目別入力欄を追加
ブログ記事を 商品販売単位に見立て 商品名や価格を入力
入力項目は、 プラグインで拡張
WireFrame
① デザイン作成
② HTML作成
④ MTML作成
•今回のサイト構築趣旨 •デザイン、機能での要望 •テンプレート構成の相談
構築フロー
③ プラグイン開発
① デザイン作成 ② HTML作成
構築フロー
ウェブサイト全体を HTMLで作ってしまう
構築フロー
商品情報 SKELETON CARTプラグイン連携
商品情報の項目をDBに保存、MTMLで出力するプラグイン
③ プラグイン開発
SkeletonCartConnector for MT
MT管理画面内で設定
カスタムフィールドではなく プラグインで入力欄を作成
SkeletonCartConnector for MT
SkeletonCartConnector for MT
<mt:ScDir> SKELETON CARTのインストールディレクトリを出力
<mt:itemname> 商品名を出力
<mt:itemprice> 商品の価格を出力
・・・などなど
独自のMTタグが使えるようになる
② HTML作成
構築フロー
④ MTML作成
HTMLの必要箇所を MTMLに置き換える
③ プラグイン開発
<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 ̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶
<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 ̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶
同じ内容
<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つにまとめる
構築フロー
Data APIを利用してデータベース内の情報を独自管理画面に表示
Database 顧客・売上管理画面Data API
⑤ 専用管理画面開発
専用の管理画面を開発
MTのDBから情報を取得
商品ページブログ
ウェブページ ショッピングカート
デザインを 作る人
MTタグを作る人
MTタグを使う人
Data APIを 利用する人
共通言語 MTML
MTML デザインとロジックを分離
Data API Movable Typeとウェブを融合
これから始めてみたい方へ
MovableType.net•アカウント登録無料 •ウェブサイト（ブログ）は14日間無料 •ウェブサイト（ブログ）は何度作ってもOK •テンプレートをGitHubで管理OK •サーバー管理／アップデートが不要 •再構築が不要 •利用料は月額約2,100円～
でも画面が見づらいよね…
大丈夫！そんなときは！
SyntaxHighlight for MovableType.net
Google Chrome エクステンション
こんな画面だったのが
こんな感じになります
でも…１人で勉強するの嫌だな
大丈夫！そんなときは！
MTCafeSapporo／MTもくもく会 などなどやってます。 次回は4月16日か、5月14日に Movable Type.netハンズオンを予定！
MT蝦夷
MT蝦夷版トフ こぼれイクラトフ
シール作りました
ご清聴ありがとうございました！
CMSMix Sapporo 2016.02.27 (Sat) at TKP札幌カンファレンスセンターディレクター・ノンプログラマー目線の “Movable Type”
Let’s Try Movable Type
