NORIのFlashユーザのためのMovable Type講座 gihyo.jp版

第3回MT側:XMLの制作

今回は次のような手順で進めます。

  1. ブログ記事の新規作成
  2. XMLフォーマットを作成
  3. テンプレート新規作成
  4. ブログデータを出力
  5. 画像のURLを取り出す
  6. エントリーの繰り返し件数を指定

まず,出力用のダミーデータを作成します。次の手順に従ってダミーデータを入力してください。

ブログ記事の新規作成

MT管理画面をブラウザで開いてサンプルの画像ダウンロードを追加しましょう。

1.新規作成 > ブログ記事
図1 新規作成
2.画像の挿入 アイコンをクリック
図2 画像の挿入 アイコンをクリック
3.ダイアログで「新しい画像をアップロード」をクリック
図3 新しい画像をアップロード
4.アップロードするファイルを選択・アップロード先にパスを指定(例:images)し,「アップロード」をクリック
図4 アップロード
5.⁠ブログ記事に画像を表示」をチェックし,「完了」をクリック
図5 完了
6.ブログ記事を「保存」する
図6 エントリーを保存
7.⁠ブログ記事を見る」で確認
図7 ブログ記事を見る

後述するAsset系のタグで画像のURLを調べるため、HTMLソースを直接編集して<img>タグを追加する方法は使えません。必ず、MTが管理しているアイテムに登録してからブログ記事に挿入する上記の方法で挿入してください。

エントリの中には画像が1つだけ入っているという前提でテンプレートを作成しますので,1エントリに1枚の画像で作成します。

XMLフォーマットを作成

今回のFlashが扱うためのXMLファイルでは,どのようなXMLフォーマットが良いのか考えます。とりあえず,次のようなものを考えました。

XMLサンプル1
<?xml version="1.0" encoding="utf-8"?>
<entries>

<entry id="エントリー1" title="エントリータイトル1">
	<img src="画像1のURL" />
</entry>

<entry id="エントリー2" title="エントリータイトル2">
	<img src="画像2のURL" />
</entry>

<entry id="エントリー3" title="エントリータイトル3">
	<img src="画像3のURL" />
</entry>

</entries>

画像を表示することがメインなので画像のパスがわかるだけで良いと思いますが,どのエントリー(ブログ記事)から取り出した画像なのかわかるようにエントリーの基本データ(エントリーIDとエントリータイトル)だけは引き継ぐようにしてみました(見やすくするために、XMLサンプル1はタブによるインデント、改行を入れています⁠⁠。

1行目…XML宣言です。XMLファイルの文字コードはUTF-8です。MTやデータベースがUTF-8(Unicode)で作成されており、Flashもデフォルトの文字コードUTF-8でこのファイルを読み込みます。

2行目…<entries>の中に,複数の<entry>が入る予定です。この<entries>はMTタグではなく、XMLのフォーマットで定義した<entries>です。

3行目…<entry>はid属性で一意となります。このid属性は、MTで管理しているentry_idと同じ値です。同様にtitle属性もブログ記事(エントリー)のタイトルを引き継ぐ予定です。

4行目…エントリーの中にあるimg要素のURLだけをsrc属性の値にします。縦横のサイズはFlashで取得するので不要です。

5行目、6行目…<entry><entries>を閉じます。

テンプレート作成

まず、この状態でテンプレートに記入し、再構築してみましょう。再構築が完了したら「表示」します。以下に手順を示します。

1.[デザイン]-[テンプレート]
図8 テンプレートメニューへ
2.インデックステンプレートを作成
図9 インデックステンプレートを作成

3.タイトル「photo.xml」XMLサンプル1を記入
4.出力ファイル名「photo.xml⁠⁠、テンプレートの種類「カスタムインデックステンプレート」,ファイルへのリンク「⁠⁠空白⁠⁠、公開「スタティック(既定⁠⁠」とします。
5.⁠保存」をクリック
6.⁠保存と再構築」をクリック
7.⁠公開されたテンプレートを確認」をクリック

「photo.xml」テンプレートを「保存と再構築」後、⁠公開されたテンプレートを確認」
図10 <strong>XMLサンプル1</strong>を入力

現在の段階では、入力した文字がそのまま出力されていると思います。 テンプレートでは<mt~>というMTタグ以外の文字は,"や<>などもすべてそのまま出力されるのです。

Firefoxで見たリスト1の再構築結果
図11 XMLサンプル1の再構築結果

ブログデータを出力

このXMLで必要とするデータは、"エントリーID,"エントリータイトル,エントリーで使用されている画像とすべてエントリーに関するものです。

エントリーIDは<$mt:EntryID$>ですし、エントリータイトルは<$mt:EntryTitle$>ですが、そのまま書いてもエラーになります。

インデックステンプレートで,エントリーのデータにアクセスするには、まずブロックタグタグ<mt:Entries>を記述し、その中にファンクションタグ(<$mt:EntryID$>や<$mt:EntryTitle$>)を書かなくてはなりません。

また、テンプレート内で,ブロックタグは繰り返し処理をしますので、<entry>~</entry>は一度だけ記述します(繰り返し回数の指定方法は後述します⁠⁠。

先ほどのテンプレートを修正して「保存と再構築」をしてみましょう。

XMLサンプル2
<?xml version="1.0" encoding="utf-8"?>
<entries>
<mt:Entries>
<entry id="<$mt:EntryID$>" title="<$mt:EntryTitle$>">
<img src="画像のURL" />
</entry>
</mt:Entries>
</entries>

XMLサンプル2の再構築結果は次のようになります。idとtitle属性だけエントリーから得られたデータになっており,繰り返しも自動で行われています。

Firefoxで見たXMLサンプル2の再構築結果
図12 リスト2の再構築結果

画像のURLを取り出す

画像のURLはエントリーの中にあるimg要素のsrc属性を取り出す必要があります。その方法として次の2つがあります。

  • <$mt:EntryBody$>のimgタグを調べて、src属性からデータを取得する
  • エントリー内に使用されているアイテムを調べて、そこからsrc属性になりうるデータを取り出す

1つ目の方法は,MTCollectEntryImagesプラグインを使用すればできますが、今回は2つ目の方法、エントリーに紐付くアイテムを調べることでsrc属性を取り出すことにします。

アイテムは、通常<mt:Assets>というブロックタグを使用します。

しかし、エントリーの中のアイテムを調べたいときには、特別に<mt:EntryAssets>というブロックタグを使用します。このとき、type="image" という属性をつければ対象のアイテムが画像だけに限定できます。

ファンクションタグ<$mt:AssetURL$>がアイテム(イメージファイル)のURLを返すので、それを<mt:EntryAssets>の中で利用します。

<img src="画像のURL" />を置き換えると次のようになります。

XMLサンプル3
<?xml version="1.0" encoding="utf-8"?>
<entries>
<mt:Entries>
<entry id="<$mt:EntryID$>" title="<$mt:EntryTitle$>">
<mt:EntryAssets type="image">
<img src="<$mt:AssetURL$>" />
</mt:EntryAssets>
</entry>
</mt:Entries>
</entries>

その結果,最初に求めていたXML形式が得られるようになりました。

XMLサンプル3の再構築結果(src属性値などは環境によって異なります)
図13 XMLサンプル3の再構築結果

エントリの繰り返し件数を指定

現在の仕様では,エントリは最新の10件を表示するようになっています。これは,ブログのデフォルト設定です。

この件数は,テンプレートでも設定できますので、photo.xmlに書き出すエントリの件数をテンプレートで指定してみましょう。

件数指定は,MTタグ<mt:Entries>でlastnという属性に数字で行います。逆にlastnが未設定の場合はブログの設定が適用されます。

XMLサンプル4
<?xml version="1.0" encoding="utf-8"?>
<entries>
<mt:Entries lastn="50">
<entry id="<$mt:EntryID$>" title="<$mt:EntryTitle$>" url="<$mt:EntryPermaLink$>">
<mt:EntryAssets type="image">
<img src="<$mt:AssetURL$>" />
</mt:EntryAssets>
</entry>
</mt:Entries>
</entries>

これで50件までは一気に出力されるようになります。

まとめ

今回はXMLを作成するため以下のMT側の作業をしました。

  • XMLの設計
  • XMLを出力するテンプレートの作成

次回は今回作成したXMLを読み込むFlashをActinScript3で制作します。

おすすめ記事

記事・ニュース一覧