ディレクター・ノンプログラマー目線の 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として起業。 社名の由来は「誕生日が6日しか離れていなかったから」 日本ではネオテニー社(伊藤穰一さん、平田大治さん在籍)が その普及に活躍した。
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年 6月、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 9,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でのサイト構築・保守