WordPressで出力したXMLをFlashで表示してみる備忘録 : その1

この記事をフルスクリーンで見るフルスクリーンモードを終了するには Esc キーを押してください。または、ココをクリックしてください。

ずいぶんと前ですが、Movable Type を利用したブログとフォト・ギャラリーを Flash で作ってみたことがあります。
かれこれ3年ほど前です。

Flash Sample Contents

Flash 用の XML ファイルを出力するのは、やっぱり Movable Type の方がテンプレートの融通が利くので、作りやすいと思う。
でも、 Movable Type のライセンスのことなどでメインのブログを WordPress に切り替えて、ずいぶん経つ。
それに以前のコンテンツは、Flashでデザイン 差がつくBlogサイトの作り方という書籍を参考にしたり、当時のサイトを2、3参考にしたのですが、スクリプトの記述は AS2.0でした。
で、AS3.0になって XML との連携がよくなったということもあり(何を今更… :-D )、AS3.0で WordPress から出力した XML ファイルを読み込むコンテンツを作ってみることにしました。
それで、備忘録も兼ねて何回かに分けてちょこっと書いておこうと…

まず、Movable Type と違い WordPress は、Flash に読み込ませるための XML 出力に融通が利かなそうなので、ちょっとあれこれ検索…

この2つのサイトが大変参考になりました。

結局、ページ機能を使えば XML を出力することができるいうことがわかりました。
5ive™.blog さん、感謝感謝です。
Feed Wrangler” というフィードをカスタマイズできるプラグインの存在は知っていたのですが、ページ機能を使えばいらないですね。
あと、普段の投稿に複数のカスタムフィールドを使うようなコンテンツによっては “Custom Field Template plugin” を使うと確かに便利かも知れません。

今回は、”背景画像” と Flash ブログ用の “タイトル”、”概要”、”更新日付” など以外は、通常の投稿を表示しようと考えていますので、プラグインの使用は無しということで…

ではまず、現在使っているテーマの中に XML 出力用のファイルをアップします。
今回の場合は、“sample_flash.php” とします。
カスタムフィールドを使い背景画像を表示させたいので、“sampleFlashBg” という名前のカスタムフィールドを出力するようにファイルを作成しました。

sample_flash.php

<?php /*
Template Name: sampleFlashXML
*/ ?>

<?php header('Content-Type: text/xml; charset='.get_option('blog_charset'), true); ?>
<?php echo '<?xml version="1.0" encoding="'.get_option('blog_charset').'"?'.'>'; ?>

<root>
 <bg><?php echo get_post_meta($post->ID,'sampleFlashBg',TRUE); ?></bg>
</root>

アップが完了したら “外観” » “編集” とクリックし、”テンプレート” にファイルがアップされているのを確認。
無事アップされていたら “sampleFlashXML Page Template (sample_flash.php)” と表示されているはず。

背景に使用する適当な画像ファイルをアップする。
今回は “メディア” » “新規追加” でアップロード。
画像をアップロードすると “ファイルの URL” が表示されるので、それをメモ。(ファイルの URL の項目が表示されるのは WordPress 2.8.1からかも…それ以前はなかったような気が…)
デフォルトでは、
“http://www.hogehoge.com/wp-content/uploads/2009/07/sample_image_01.jpg”
のような URL になっていると思います。

次に “ページ” を “新規追加” します。
取りあえず、ページのタイトルは “sampleFlash”
続いて、ページの “属性” にあるテンプレートのプルダウンメニューを押すと、先ほどアップした “sampleFlashXML” が表示されるので、選択します。
背景画像を表示させるためのカスタムフィールドを “新規追加” します。
名前に “sampleFlashBg” と入力し、値には先ほどメモした画像の“ファイルの URL”を記入し、“カスタムフィールドを追加” ボタンをクリック。
URL は、http からはじまるパスでも絶対パス、相対パスのどちらでもいいと思います。
で、保存するとページ編集画面のタイトル下に “パーマリンク” 表示されます。
それが、Flash で読み込む XML ファイルの URL になります。
試しに “ページを表示” ボタンをクリックしてみると

<?xml version="1.0" encoding="UTF-8"?>
<root>
 <bg>/wp-content/uploads/2009/07/sample_image_01.jpg</bg>
</root>

というように背景画像用の URL が表示されているので OK ですね。
この XML を Flash に読み込むと下のように無事画像が表示されます。(Flash ということで、時計を表示させてみた。ゴチャゴチャと見づらいのはご愛嬌…)

サンプル Flash

試し、にもう一枚別の画像を “sample_image_02.jpg” という名前でアップロードし、カスタムフィールドの値を “/wp-content/uploads/2009/07/sample_image_02.jpg” に変更してページを保存。
Flash をリロードすると、背景もちゃんと新しくアップした画像に変更されます。

今回は背景画像用として XML を使いましたが、これを応用すると XML を使った Photo Gallery(Flash)を WordPress で管理できますよね。
まぁ、すでにそういったコンテンツを制作している人は多いかも知れませんね。

次は、タイトルや概要などのテキストを表示させようと思いますが、長くなってきましたので近々続きを書きたいと思います。

スポンサーリンク

  • このエントリーをはてなブックマークに追加

フルスクリーンモードを終了するには Esc キーを押してください。または、ココをクリックしてください。