ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守

ディレクター・ノンプログラマー目線の 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> 　<a href=“02.html”>記事タイトル②</a> 　<a href=“03.html”>記事タイトル③</a> 　　　　・　　　　・　　　　・

記事がない場合

　記事がありません

ex. ブログ記事一覧

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?> <a href="<?php the_permalink(); ?>”>

<?php the_title(); ?></a> <?php endwhile; ?>

<?php else : ?>

記事がありません

<?php endif; ?>

ex. ブログ記事一覧（WP）

<mt:Entries>

<a href=“<mt:EntryPermaLink>”> <mt:EntryTitle></a> 

<mt:Else>

記事がありません

</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を採用


J-Physics（北海道大学理学研究院）

CPI ACE01（MTオプション）を利用

1. 更新作業が多くなるとが予想されたが、担当者はHTML等に詳しくなかった。

2. 初期コストを抑えたかった。

3. 年に数回開催されるイベント用に専用の申込フォームをその都度用意する必要があった。（A-Formを採用）

文科省の補助金を活用した2015年～2019年の時限公開サイト。研究成果の公表や各種イベント情報を掲載。


羅臼海産株式会社（羅臼町）

Movable Type（ソフトウェア）を利用

1. SKELETON CARTを導入したい。

2. 専用の管理画面を開発し、売上把握と送り状発行を連携したい。

3. コンテンツを充実させる必要がある

4. 当初掲載の商品数は少なく、徐々に増やしたい。

羅臼前浜で穫れた魚介を自社加工して製造卸。消費者直販を目標にウェブサイトを新規構築。


構築フロー事例（分業の事例）

構成メンバー

ディレクター西山泰史

デザイナー飯島聡子

フロントエンドエンジニア森智香子

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管理画面内で設定

カスタムフィールドではなくプラグインで入力欄を作成


<mt:ScDir> SKELETON CARTのインストールディレクトリを出力

<mt:itemname> 商品名を出力

<mt:itemprice> 商品の価格を出力

などなど

独自のMTタグが使えるようになる


② HTML作成

構築フロー

④ MTML作成

HTMLの必要箇所を MTMLでテンプレート化及びモジュール化を実施（MTでの一元管理）

③ プラグイン開発

<div class="wgt-items__colA"> 鮭醤油いくら 1kg 1箱税込 0,000円 </div>

<div class="wgt-items__colA"> <mt:itemname> 1<mt:unit_displayname> 税込 <mt:itemprice>円 </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でのサイト構築・保守

Presentations & Public Speaking

ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守