• 基本設置マニュアル
  • MT設置マニュアル
  • WP設置マニュアル
  • 在庫数取得モジュールの利用
  • ちょっと便利な使い方

Movable Typeへの導入マニュアル

Information at 2009/12/24

このコンテンツの掲載内容には古い情報が含まれています。
SKELETON CARTをMovable Typeのショッピングカートとして機能させる専用プラグイン「SKELETON CART Connector for MT」を配布しておりますので、こちらのページをご参照ください。 » SKELETON CART Connector for MT

スケルトンカートなら、簡単な設定でMovable Typeとの連携をスムースに始められます。
本マニュアルでは、Movable Typeの「ウェブページ機能」を利用して、「スケルトンカートとMovable Typeを連携する方法」をご案内します。
※インデックステンプレートを使用しても問題ありません。

スケルトンカートとMovable Typeを連携させると、スケルトンカートの画面上(HTML上)で、Movable Typeのウィジェットを表示できるようになるなど、その利便性が向上します。
※別途プラグインなどを使用することでMTタグも使用できるようになります。

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

  1. Movable Type、スケルトンカートのインストール
  2. Movable Typeの「ウェブページ機能」でスケルトンカートのHTMLテンプレートを設置
    • 【1】ウェブページのアーカイヴマッピングを変更
    • 【2】スケルトンカート格納ディレクトリをMovable Typeへ登録
    • 【3】ウェブページの作成
    • 【4】全てのスケルトンカート用テンプレートをMovable Typeへ登録
  3. 商品登録作業
  4. 商品情報ページの作成
  5. Movable Typeのウィジェットを使用して、「買い物かごを見る」を作る
  6. スケルトンカート部分のCSSを調整して作業完了

なお、実際にスケルトンカートをMovable Typeと連携させている動作サンプルはこちらでご覧いただけます。
Movable Type連携動作デモ

1. Movable Type、スケルトンカートのインストール

Movable TypeをSixApart社のドキュメントやインストールマニュアル等に従ってインストールしてください。
基本設置マニュアルにならってスケルトンカートをインストールし、必要な初期設定を完了させてください。
本マニュアルでは、スケルトンカートの設置ディレクトリをMovable Typeを利用したブログの「公開ディレクトリ・URL」配下になるように作成しています。
異なるディレクトリへ設置している場合は、各種パスなどを適宜読み替えてご確認ください。
Movable Type、スケルトンカートのインストールが終わったら、次のステップへ進んでください。

2. Movable Typeの「ウェブページ機能」でスケルトンカートのHTMLテンプレートを設置

【1】ウェブページのアーカイヴマッピングを変更

スケルトンカートで使用するHTMLテンプレートを、Movable Typeの「ウェブページ」を使用して出力します。
Movable Typeのデフォルト設定では、ファイル名に「_(アンダースコア)」が含まれている場合、ウェブページの保存・再構築時にアンダースコアを強制的に「-(ハイフン)」とリネームしてしまいます。 アンダースコアが使用できるよう以下の手順でアーカイヴマッピングのパスを変更します。

操作メニュー(ブログ・モード)の「デザイン」から「テンプレート」を選択します。

「デザイン」から「テンプレート」を選択

アーカイヴテンプレートから「ウェブページ」を選択し、アーカイヴマッピングのパスで「カスタム」を選択します。

アーカイヴマッピングのパスで「カスタム」を選択

パスに「%-c/%f」と入力し、保存します。
その後、アーカイヴテンプレートの一覧で正しく保存されている事を確認してください。

アーカイヴマッピングの変更 ※画像をクリックすると拡大します。

【2】スケルトンカート格納ディレクトリをMovable Typeへ登録

スケルトンカートの格納先ディレクトリをMovable Typeに登録します。
ここではブログの公開ディレクトリ直下に「cart」というディレクトリを作成している前提で進めます。

操作メニュー(ブログ・モード)で「一覧」から「フォルダ」を選択してください。

「一覧」から「フォルダ」を選択

「トップレベルのフォルダを作成」で「cart」ディレクトリを作成してください。

フォルダを作成

テキストボックスに「cart」と入れて、新規作成をクリック

「cart」ディレクトリを登録

完了後、以下の画像のように「ブログ公開URL/cart」とパスが設定されていればOKです。

完了後

【3】ウェブページの作成

スケルトンカートのHTMLテンプレートから必要箇所をコピーしてウェブページを作成します。
操作メニュー(ブログ・モード)の「一覧」から「ウェブページを選択」してください。

「一覧」から「ウェブページを選択」

ウェブページの作成画面(※下記画像は編集画面)で、以下のように設定・入力してください。
・タイトル:カートの中身
・フォーマット:なし
・本文:スケルトンカートの_tpl_cart.htmlをコピー

【注意】スケルトンカートに付属しているHTMLテンプレートには「ヘッダー」や「フッター」が入っています。
この部分はMovable Typeに組み込んで使用する場合不要となりますので、以下の部分のみを使用してください。

必要箇所のみを抜き出したテキストファイル:カートの中身:_tpl_cart.html

ウェブページの作成

上記テキストファイルでは、デフォルトのHTMLでインクルードしているフッター部分を削除している他、スケルトンカートで必要となるscript.jsを読み込む部分の追加(通常はhead部分に記載)、Movable Typeの使用IDと重複している「id="footer"」を「id="control"」へ変更しています。

次に、画面右側にある「フォルダ」と「ファイル名」を以下にならって設定してください。
※下の画像は「カートの中身(_tpl_cart.html)」を作成する場合です。

フォルダとファイル名の登録

ここまでが終了した段階で、ウェブページを保存して再構築してください。
「ウェブページの管理」に、今作成した「カートの中身」があればOKです。

【4】全てのスケルトンカート用テンプレートをMovable Typeへ登録

上記では「カートの中身」を例にしていますが、その他のHTMLテンプレートでも同様にMovable Typeのウェブページへ登録してください。

その際に各ウェブページで必要となるHTML箇所は以下になります。
リンク先にテキストファイルを表示します。
カートの中身:_tpl_cart.html
お客様情報入力画面:_tpl_regi.html
内容確認画面:_tpl_regi_conf.html
購入完了画面:_tpl_regi_comp.html
エラー画面:_tpl_error.html

全てのテンプレートを登録し終わると、ウェブページの管理で以下のようになります。
(順序は画像と変わる場合があります)

ウェブページの管理

以上でウェブページへの登録は完了です。
HTMLは自由に変更していただいて問題ありません。
この状態ではスケルトンカートの標準CSSを読み込んでいないので、そちらも併せて修正してください。

[ 留意事項 ]

スケルトンカートの基本機能として、スクリプトから購入完了画面へ出力する「データ(値)の文字コード」を任意のものへ変更する機能があります。
その際、購入完了画面はその文字コードに合わせて作成する必要がありますが、Movable Typeへ導入する際は、出力されるHTMLがMovable Typeの出力文字コードに依存する事に注意してください。

購入完了画面の文字コードを変更する必要がある場合は、購入完了画面だけウェブページ化しないなどの方法をとる必要があります。

また、スケルトンカートの初期設定ファイル「init.php」、送信メールテンプレート(_tpl_mail_order.txt、_tpl_mail_user.txt)を管理画面上から操作できるようにする場合、後述する「item.dat」の作成方法と同様に、Movable Typeの「インデックステンプレート」を利用してください。
現在のスケルトンカートでは、管理画面上から直接操作するようにはできませんのでご了承ください。

3. 商品登録作業

商品情報(商品ID・商品名・価格・商品グループID)を登録する「item.dat」をMovable Type上で作成します。
このファイルはMovable Typeを使用せず、手動でアップロードしても問題ありませんが、カスタムフィールドを利用して商品登録をMovable Typeのみで行う場合に必要となります。

操作メニュー(ブログ・モード)の「デザイン」から「テンプレート」を選択してください。

「デザイン」から「テンプレート」を選択

「インデックステンプレートを作成」を選択し、新規作成画面を開いてください。

「インデックステンプレートを作成」を選択

テンプレート名に「商品データ」(任意)と入力し、各項目を半角パイプライン「|」で区切って入力してください。
例:1|Tシャツ|2500|1
商品IDと商品グループIDは必ず半角数字で記載してください。
また価格は全角で記載してもスクリプト側で適切に処理できますが、可能であれば半角数字とするようにしてください。

商品データの作成 ※画像をクリックすると拡大します。

入力フィールドの下部にある「テンプレートの設定」で「出力ファイル名」を以下のように設定してください。
なお、この例では「cart」ディレクトリ内に「data」ディレクトリを作成し、「item.dat」で商品データを登録するようになっていますが、スケルトンカート初期設定ファイル「init.php」で別途設定した場合は、それにならって設定してください。

テンプレートの設定

設定後、インデックステンプレートの一覧で下記のように登録されます。

インデックステンプレートの一覧

以上で商品データ用のファイル作成は完了です。

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

商品情報ページとそこに設置する「カートへ入れる」ボタンは、Movable Typeのブログ記事として出力します。
カスタムフィールドを使用しない場合(Movable Type Open Source利用時など)は、ブログ記事のアーカイヴテンプレートは特に編集の必要はありません。

ここではカスタムフィールドを使用せず、通常のブログ記事として商品情報ページを作成する場合を例に手順をご案内します。
カスタムフィールドの利用については、こちらをご覧ください。

操作メニュー(ブログ・モード)の「新規作成」から「ブログ記事」を選択します。

「新規作成」から「ブログ記事」を選択

ブログ記事の新規作成(下の画像は編集画面)では、以下の例にならって入力してください。

ブログ記事の新規作成

「本文(Entry Body)」あるいは「続き(Entry More)」等を使用してform部品を記事中に埋め込みます。
記載するHTML内容は、スケルトンカートで使用するオプション項目によって違いますが、以下を参考にしてください。

<form method="post" name="newdat" enctype="multipart/form-data" action="/demo/mt/cart/cart.php?qp0=idx&qp1=ad"> 
価格:2,500円<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="1" type="hidden" />
</form>

上記のうち、赤字になっている部分が、ご利用環境によって変わる部分です。
formのaction先にはスケルトンカートの設置ディレクトリ、cart_item_item_idのvalueには商品データ(例:item.dat)に記載した商品IDが入ります。

その他の公開設定等は任意で決めていただいて問題ありません。
form部品を埋め込んだ記事を書出すと、以下のように商品情報ページが完成します。

商品情報ページ完成イメージ ※画像をクリックすると拡大します。

以上で商品情報ページと「カートへ入れるボタン」の作成は完了です。

5. Movable Typeのウィジェットを使用して、「買い物かごを見る」を作る

通常のECサイトなどに必要となる「買い物かごを見る」ボタンをMovable Type上で作成・設置します。
今回は、Movable Typeのウィジェットを利用して作成します。

操作メニュー(ブログ・モード)の「デザイン」から「ウィジェット」を選択してください。

「デザイン」から「ウィジェット」を選択

「ウィジェットテンプレートの作成」を選択してください。

「ウィジェットテンプレートの作成」を選択

ウィジェットの作成(下記画像は編集画面)で以下にならってHTMLを記載してください。

ウィジェットの作成 ※画像をクリックすると拡大します。

HTMLソースは以下を参考にしてください。

<div class="widget-search widget">
    <h3 class="widget-header">買い物かごを見る</h3>
    <div class="widget-content">
    <input type="button" value="カートを見る" onClick="location.href='http://skeleton.juxtaposition.jp/demo/mt/cart/cart.php'" />
    </div>
</div>

新規ウィジェットを保存したら、操作メニュー(ブログ・モード)の「デザイン」から「ウィジェット」を選択し、ウィジェットセットの一覧から必要なセットを編集してください。
(もちろん新規に作成してもOKです)

「利用可能」なウィジェット一覧から、「買い物かごを見る」をドラッグ&ドロップします。

ウィジェットの編集

インストール済みウィジェットの一覧の中で、掲載する順番を変更して、「変更を保存」してください。

インストール済み

以上で「買い物かごを見る」ウィジェットの作成は完了です。
再構築して、これまで作成した内容が正しく設置出来ているか確認してください。

6. スケルトンカート部分のCSSを調整して作業完了

今回の手順でスケルトンカートとMovable Typeを連携させる場合、スケルトンカート標準のCSSは使用されていません。
設置完了が確認出来たら、各種HTMLの修正と併せてCSSでデザインを修正して全ての作業が完了となります。

CSSなどを調整した完成イメージが右の画像です。
実際の動作サンプルは、こちらの動作デモでご覧いただくことが出来ます。

Movable Type連携動作デモ

7. もっとMovable Typeを活用する

今回の手順では、新しく商品を登録する際に、「商品データ(例:item.dat)」を更新し、それに併せて商品情報ページを作成する必要があります。
また、商品情報ページの作成時にはHTMLタグを直接本文中に書き込む必要があるので、Movable Typeの操作だけでなく、HTMLタグについてもある程度の知識を必要とします。

Information at 2009/12/24

SKELETON CARTをMovable Typeのショッピングカートとして機能させる専用プラグイン「SKELETON CART Connector for MT」を配布しておりますので、こちらのページをご参照ください。 » SKELETON CART Connector for MT