Movable Typeのウェブページ（あるいはインデックステンプレート）とスケルトンカートの連携によって、Movable Typeの各種機能を利用できるなど、ECサイトにおいてその利便性を高めることが出来ます。

しかし、Movable Typeのウェブページ機能を利用しただけでは、商品登録時に商品データを別途更新しなければならない、あるいは商品情報ページにHTMLタグを書き込まなければならない等の点で、その操作に慣れていない方（実際にECサイトを運営する方）にとってはやや面倒な作業が発生してしまいます。

ここでは、Movable Typeのカスタムフィールド機能を利用して、決められた入力フィールドに値を入れるだけで、誰でも簡単に手間がかからない方法で商品情報ページと商品データを同時に更新出来る仕組みを作ります。

本マニュアルは以下の構成になっています。

1. カスタムフィールドの作成
2. ブログ記事アーカイヴテンプレートの編集
3. 商品データ（インデックステンプレート）の編集
4. 商品情報ページの作成
5. 動作確認

本マニュアルで使用しているMovable Typeはversion4.2となっています。
バージョンの違いによる表示差違などはご了承願います。

1. カスタムフィールドの作成

操作メニュー（ブログ・モード）の「設定」から「カスタムフィールド」を選択します。

カスタムフィールドの作成画面で「フィールドを作成」をクリックします。

作成画面で以下のように必要事項を入力し、「保存」してください。

※画像をクリックすると拡大します。

なお、スケルトンカート側で最低限必要となる項目は以下の3種になります。
ここでは、それらについて以下のようにテンプレートタグを設定する事とします。

項目名	MTタグ	フィールドタイプ
商品ID	EntryItemID	テキスト
商品名	EntryItemName	テキスト
価格	EntryItemPrice	テキスト
商品グループID	EntryItemGroupID	テキスト

スケルトンカートのオプション項目を使用する場合など、必要に応じて上記以外を作成してください。
また、本マニュアルではテキストフィールドにしていますが、商品IDをブログ記事ID（MTEntryID）、商品名をブログ記事タイトル（MTEntryTitle）、商品グループIDをカテゴリID（MTCategoryID）として利用する方法や、商品グループIDについてはカスタムフィールド自体をセレクトボックス（ラジオボタン）にするなどの方法も考えられます。

なお、商品IDと商品グループIDは必ず半角数字で入力する必要があります。
そのため、実際に商品登録をされる方の入力操作が心配な場合は、ブログ記事IDやカテゴリIDを使用するなどをご考慮ください。

カスタムフィールドの作成が完了すると、以下のように一覧が確認できます。
（順序は以下と異なる場合があります）

ブログ記事の作成画面へ移動し、画面右側の「表示オプション」をクリックして、上記で作成したフィールドのチェックをONにしてください。

ブログ記事の作成画面を更新すると、以下のように新しいフィールドが表示されます。
（順序は以下と異なる場合があります）

以上でカスタムフィールドの作成は完了です。

2. ブログ記事アーカイヴテンプレートの編集

新規作成したカスタムフィールドの各項目をブログ記事中に表示出来るよう、アーカイヴテンプレートを編集します。
操作メニュー（ブログ・モード）の「デザイン」から「テンプレート」を選択してください。

アーカイヴテンプレートの一覧から「ブログ記事」を選択してください。

テンプレート中で、カスタムフィールドの項目を表示したい箇所に以下のHTMLソースを貼り付けます。
このHTMLは「商品ID」が登録されている事を前提に、商品名以下のformタグ部分までをブログ記事テンプレートに挿入します。（商品IDがブログ記事に含まれていない場合、何も表示しません）

<MTIfNonEmpty tag="entryitemid">
<p>商品名: <MTentryitemname></p>
<form method="post" name="newdat" enctype="multipart/form-data" action="/demo/mt/cart/cart.php?qp0=idx&qp1=ad"> 
価格：<MTentryitemprice><br />
数量：<select name="cart_item_amount">
	<option value="1" selected="selected">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	</select>
購入：<input value="買い物かごへ" type="submit" />
<input name="cart_item_item_id" value="<MTentryitemid>" type="hidden" />
</form></MTIfNonEmpty>

上記のHTMLソースを以下のように貼り付けます。
formのaction先はスケルトンカートのインストール環境に合わせて修正してください。

以上でアーカイヴテンプレートの編集は完了です。

3. 商品データ（インデックステンプレート）の編集

操作メニュー（ブログ・モード）の「デザイン」から「テンプレート」を選択し、インデックステンプレートの一覧から「商品データ」を選択してください。

テンプレートの中身を以下のHTMLソースに変更してください。

<MTEntries lastn="999"><MTIfNonEmpty tag="entryitemid"><mt:EntryItemID>|<mt:EntryItemName>|<mt:EntryItemPrice>|<mt:EntryItemGroupID></MTIfNonEmpty>
</MTEntries>

上記のHTMLソースを以下のように貼り付けます。
ここでは、MTEntriesで「lastn="999"」としていますが、任意の内容で問題ありません。
また、このテンプレート中でも「商品IDが存在するブログ記事だけ」を出力するようにしています。

以上で商品データ（インデックステンプレート）の編集は完了です。

4. 商品情報ページの作成

ブログ記事の作成画面へ移動し、以下を参考に必要事項を入力してください。

入力後、記事を再構築すると以下のように商品情報ページが完成します。

以上で商品情報ページの作成は完了です。

5. 動作確認

上記「4.商品情報ページの作成」でブログ記事を保存・再構築したと同時に、商品データ（例：item.dat）も更新されています。
FTPソフトあるいはブラウザ上から、内容が正しく記載されている事を確認してください。

最後に、商品情報ページから実際にカートへ商品を入れてみて、正しく情報が渡っている事が確認できれば、全ての作業が完了となります。

おまけ

今回はMovable Typeのカスタムフィールドを利用して上記の通り、商品情報ページを作成するだけで一連の作業を自動化する仕組みを作りました。
これにより、Movable Typeの操作に不慣れな方やHTMLタグにあまり詳しくない方でも、Movable Typeとスケルトンカートを利用して簡単にECサイトを運営することが可能となります。

また、Movable Type Open Sourceではカスタムフィールドが利用できませんが、それに代わる方法（例えば管理画面代替テンプレートの作成や、リッチテキストエディタのテンプレート機能など）を利用することも可能です。
作業が自動化されるわけではないですが、入力ミスなどは予防できると思います。

アイディア次第で、スケルトンカートとMovable Typeは色々な連携・活用方法が考えられます。