View
378
Download
1
Category
Preview:
Citation preview
ディレクター・ノンプログラマー目線の Movable Typeでのサイト構築・保守
西山 泰史 にしやま やすふみ
株式会社ジャクスタポジション 札幌市在住のウェブディレクター 創業13年目（法人4期目） 2004年頃よりMovable Type利用 好きなMTタグは、MTIf
西山 泰史 にしやま やすふみ
創業時よりMovable Typeをプラットフォームにウェブサイトを構築 2013年よりMT蝦夷を主宰 2015年よりウェブディレクション研究会（仮称）をスタート
三度の飯より食べることが好き
ジャクスタと言えば
Webデザイナーのためのショッピングカート
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/
本日のアジェンダ
1. Movable Typeの歴史を知ろう
2. MTのいいところ／残念なところ
3. クライアントのタイプ別にみるライセンス選定事例
4. 構築フロー事例（分業の事例）
5. ウェブサイト運営に効く弊社プラグインのご紹介
Movable Typeの歴史を知ろう
2001年にトロット夫妻の手によりリリース フロントエンド（デザイナー）のMenaが、 それまでよりもっと機能的で使いやすいブログを要望。 Menaの「これが欲しい」をもとにエンジニアのBenが開発。
カテゴリー分類や、コメント・トラックバック機能のほか、 特にページテンプレート（MTML）が特徴的だった。
2001年にSix Apartとして起業。 社名の由来は「誕生日が６日しか離れていなかったから」 日本ではネオテニー社（伊藤穰一さん、平田大治さん在籍）が その普及に活躍した。
2001年 Movable Type リリース
2003年 米国Six Apartの日本法人が設立
2004年 Movable Type 3 日本語版を販売開始
2007年 Movable Type 4 リリース
2009年 Movable Type 5 リリース
2011年 日本法人が独立（インフォコム株式会社グループ企業）
2012年 Movable Type EZ（その後のMTクラウド）リリース
2013年 Movable Type 6 リリース 1月、MTDDC Meetup KYUSHU開催（MT福岡発足）
10月、MTDDC Meetup HOKKAIDO 開催（MT蝦夷発足）
2014年 海外事業の再展開を開始
2015年 MovableType.net リリース
2016年 ６月、Employee Buy-OutによりSix Apart社独立
全国におよそ 300社のProNet加盟企業
全国におよそ 300社のProNet加盟企業
2008年より加盟
Movable Type ユーザーコミュニティ 北海道
東北
東京
愛媛名古屋
新潟
長野
広島 関西福岡熊本
鹿児島
神戸
佐賀
https://www.movabletype.jp/mtug/
Movable Typeのいいところ
①ファイル形式を問わず静的ファイルを出力
CSV JSONPHP
HTML CSS javascript
HTMLなど Database
再構築＝書き出し
DBにアクセスせず ウェブサイトを閲覧
Movable TypeからJSONファイルを出力し、 それを検索対象とすることも可能
②テンプレートの構造を管理画面上から俯瞰
インデックス
カテゴリ
月別・日別
…
記事別
…
テンプレートの管理
現在のテンプレートが、 ほかのどのテンプレートを インクルードしているか すぐに把握できる
Movable Typeの テンプレート編集は 管理画面でほぼ全てを操作
※エディタを使用して外部から テンプレートを構築することもできます。
③MTMLの学習コストが低い （テンプレートの可読性）
Movable Type Markup LanguageMovable Typeで利用するテンプレート記述言語 HTMLを拡張し、MTタグとして利用できる。
ex. ブログ記事タイトル
<?php the_title(); ?> ↓ <mt:EntryTitle>
記事がある場合
<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）
④公開中のページを編集する際も 確認用ファイルを出力できる
ファイルを複製
①ファイルを選択
②複製でGO
③複製が完了
出力ファイル名を変更
④ファイル名変更
⑤実際に出力される内容を確認
サーバーの同じ場所に index.html と test.html が出力された状態
⑥test.htmlをリネームして index.htmlを上書き
確認後にファイルを上書き
⑦メインページ（index.html）を削除 ⑧メインページのコピーを「メインページ」に変更
これだとリビジョン（更新履歴）が残らないので、 test.htmlのソースをコピーするのがいいかも。
⑤管理画面もMTML
MTMLでカスタマイズも可能
管理画面のカスタマイズなら！
PerlやMTMLの知識が無くても jQueryでMTの管理画面をカスタマイズできる
↑bit part 柳谷さん この会場にいます
⑥再構築
MTMLの書き方を間違ったり バージョンアップが原因で
動かないプラグインがあっても
画面が白くならない
間違ったまま「保存／再構築」しても
保存しない／ファイルを出力しない
公開中のサイトに 影響しない
ちょっと残念なところ
①再構築が…
(́Д｀;)
再構築を早めるためにできること
•モジュールのキャッシュ化 •アーカイブテンプレートの活用 •テンプレートの手動再構築 •再構築キュー cron の利用 •利用しているプラグインの見直し
再構築ってどれぐらいの頻度？ 誰が支払うべきコストなのか？
②ドキュメント…
(́Д｀;;)
お、おう…
ドキュメントでわからないこと
MTQ
ドキュメントでわからないこと
MTCafe
③動的な出力が…
(́Д｀;;;)
ダイナミック・パブリッシング
•Movable Type標準機能 標準機能でも動的出力ができます。
•Perl版ダイナミック・パブリッシング 藤本壱さんのプラグイン
•DynamicMTML アルファサードさんのプラグイン
④ライセンス料…
(́Д｀;;;;)
実はライセンスのバリエーションが多い
90,000円（税別） 1,800,000円（税別）
0.07ドル／1時間 月額5,000円～
サービス型CMS MovableType.net
月額約2,100円（税別）～
CPIのレンタルサーバー ACE01
月額1,500円（税別） ※3ユーザー・ライセンス
クライアントのタイプ別にみる ライセンス選定事例
北海道大学バスケットボール連盟
1. 更新担当者が交代するため、スキルレベルが一定ではなかった。
2. 連盟での運営のため、初期構築予算が限られていた。
3. 更新は年に数回まとめて実施していた。
MovableType.netを採用
北海道内の複数の大学バスケットボール部からなる連盟の ウェブサイト。大会結果などを掲載。
※FONTPLUS、絶賛利用中！
北照高等学校（小樽市）北海道小樽市の私立高等学校。現在アルペンスキー・野球・ 男子サッカー・女子サッカーに絞って全国から生徒を募っている。
1. 比較的多い更新作業にかかる人的・時間的負担を減らしたい。
2. 独自ドメインを持っていなかった。→公開時からSSL化したい
3. 保護者向けクローズドコンテンツを載せたい。
MovableType.netを採用
※FONTPLUS、絶賛利用中！
J-Physics（北海道大学理学研究院）
CPI ACE01（MTオプション）を利用
1. 更新作業が多くなるとが予想されたが、担当者はHTML等に詳しくなかった。
2. 初期コストを抑えたかった。
3. 年に数回開催されるイベント用に専用の申込フォームをその都度用意する必要があった。（A-Formを採用）
文科省の補助金を活用した2015年～2019年の時限公開サイト。 研究成果の公表や各種イベント情報を掲載。
※FONTPLUS、絶賛利用中！
羅臼海産株式会社（羅臼町）
Movable Type（ソフトウェア）を利用
1. SKELETON CARTを導入したい。
2. 専用の管理画面を開発し、売上把握と送り状発行を連携したい。
3. コンテンツを充実させる必要がある
4. 当初掲載の商品数は少なく、徐々に増やしたい。
羅臼前浜で穫れた魚介を自社加工して製造卸。 消費者直販を目標にウェブサイトを新規構築。
※FONTPLUS、絶賛利用中！
構築フロー事例（分業の事例）
構成メンバー
ディレクター 西山 泰史
デザイナー 飯島 聡子
フロントエンド エンジニア 森 智香子
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
<mt:ScDir> SKELETON CARTのインストールディレクトリを出力
<mt:itemname> 商品名を出力
<mt:itemprice> 商品の価格を出力
などなど
独自のMTタグが使えるようになる
SkeletonCartConnector for MT
② HTML作成
構築フロー
④ MTML作成
HTMLの必要箇所を MTMLでテンプレート化 及びモジュール化を実施（MTでの一元管理）
③ プラグイン開発
<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 ̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶
※上記はほんの一例です
構築フロー
Data APIを利用してMTデータベース内の情報を独自管理画面に表示
Database
Data API
⑤ 管理画面開発実現したい内容
売上管理画面
専用の管理画面を開発
MTのDBから情報を取得
商品ページブログ
ウェブページ ショッピングカート
デザインを 作る人
MTタグを作る人
MTタグを使う人
Data APIを 利用する人
共通言語 MTML
MTML デザインとロジックを分離
Data API Movable Typeとウェブを融合
ウェブサイト運営に効く弊社MTプラグインのご紹介
Movable Typeの画像アップロード機能補助プラグイン
ImageUploadUtility http://skeleton.juxtaposition.jp/image-upload-utility/
アップロード・リサイズ パブリッシュ・サムネイルリサイズ マルチバイト・リネーム Exifコントロール、JPEG画像圧縮率指定、拡張子変換
ウォーターマーク合成、PDFサムネイル作成 複数画像アップロード、タグ装飾機能、ファイル名ソート機能
ImageUploadUtility
ImageUploadUtility Pro
DEMO 製品サイトをご覧くださいhttp://skeleton.juxtaposition.jp/image-upload-utility/
Commercial ９,000円（税別） Personal 0円 ＜導入例＞ 学校法人（幼稚園など）、お花屋さん、一般企業
ImageUploadUtility
Commercial 27,000円（税別）
＜導入例＞ 学校法人（大学など）、研究機関（大学院など）、メディア系企業（Webメディア、TV放送局など）
ImageUploadUtility Pro
Movable Type用プレビュー機能強化プラグイン
DynamicPreview
http://skeleton.juxtaposition.jp/dynamic-preview/
プレビューを別ウインドウ表示、プレビューを動的表示 複数テンプレートを一括表示、未公開記事のプレビュー SSIインクルード対応
カテゴリ編集画面でのプレビュー、ベースURL設定可能 URL/文字列置換可能 プレビュー依頼メールの送信機能 プレビュー限定アカウントの作成機能
DynamicPreview
DynamicPreview Pro
DEMO 製品サイトをご覧くださいhttp://skeleton.juxtaposition.jp/dynamic-preview/
通常版 10,000円（税別） Pro版 30,000円（税別）
DynamicPreview
本日のまとめ
ありがとうございました！
Web制作・運営のツボ Vol.1 at デジタルハリウッド福岡校（2016/10/09）
ディレクター・ノンプログラマー目線の Movable Typeでのサイト構築・保守
Recommended