Progression + WordPress の連携（WordPress編）

動的なシーンを簡易に生成できる Progression と CMS との連携を
前々から試してみたかったので、今回 WordPress との連携にチャレンジしてみました。
連携することにより、更新の際の Flash の再オーサリングが不要になり、
フィードも自動書き出ししてくれます。

実際出来たのがコレです（見た目が全く Flash サイトっぽくないですがw）。
http://littlepad.net/demo/progwp/

シーン構成はこんなイメージ。

今回、テンプレートとなるものを制作したかったので、
極力シンプルな構成としました。

処理の流れとしては、
最初に全体のシーン構成を記述した PRML 形式の XML ファイルを読み込みシーンを構成。
インデックスや、カテゴリアーカイブ、シングルページの各ページでは、
各々専用の XML ファイルを読み込みます。

WordPress で複数の XML を出力するには、
ページのテンプレートとして作成し、
新規ページでそのテンプレートを選択して保存することによって可能です。
今回のファイル構成は以下のようにしました。

• scenes.php    ：シーン構築用 XML（ページテンプレート）
• indexxml.php    ：インデックス用 XML（ページテンプレート）
• sidemenu.php    ：サイドメニュー用 XML（ページテンプレート）
• archvie.php    ：カテゴリアーカイブ用 XML
• single.php    ：シングルページ用 XML
• index.php    ：インデックス（HTML）書き出し
• function.php    ：テーマのための関数
• style.css    ：スタイルシート

参考）WordPressでFlash用に複数のxmlを出力する方法
http://www.5ive.info/blog/archives/280

参考）ProgressionとWordPressの連携
http://flabaka.com/blog/?p=1209

■シーン構築用 XML（PRML形式）

<?php
/*
Template Name: ScenesXML
*/?>
<?php echo "<?xml version=\"1.0\" encoding=\"" .get_bloginfo('charset'). "\" ?>\n" ?>
<prml version="2.0.0" type="text/prml">
    <scene name="index" cls="myproject.scenes.IndexScene" title="<?php bloginfo('name'); ?>">
        <xml>http://www.littlepad.net/demo/progwp/?page_id=17</xml>
        <sidemenu>http://www.littlepad.net/demo/progwp/?page_id=14</sidemenu>
        <?php /* カテゴリ */ ?>
        <?php $categories = get_categories(); ?>
        <?php $output = ""; ?>
        <?php foreach ($categories as $category): ?>
        <?php
            $output .= "        <scene name=\"" .$category->category_nicename. "\" cls=\"myproject.scenes.CategoryScene\" title=\"" .$category->cat_name. " | " .get_bloginfo('name'). "\">\n";
            $output .= "            <xml>" .get_category_link($category->cat_ID). "</xml>\n";
            $output .= "        </scene>\n";
        ?>
        <?php endforeach; ?>
        <?php echo $output; ?>
        <?php /* 記事一覧 */ ?>
        <?php query_posts('post_type=post'); ?>
        <?php if(have_posts()): while(have_posts()): the_post(); ?>
        <scene name="<?php the_time('Y-m-d-his'); ?>" cls="myproject.scenes.EntryScene" title="<?php the_title(); ?> | <?php bloginfo('name'); ?>">
            <xml><?php the_permalink(); ?></xml>
        </scene>
        <?php endwhile; endif; ?>
    </scene>
</prml>

シーンの name は、カテゴリアーカイブにはカテゴリのスラッグを設定、
シングルページには“年-月-日-時分秒”というフォーマットでユニークな値をふっています。
cls はシーンに関連づけるクラスのパスを指定します。
また、各シーンにはページで読み込む XML のパスをエレメントとして記述しています。
sidemenu というエレメントは、サイドメニューに表示させるカテゴリ一覧の XML パスです。

[ 実際に書き出している シーン構築用 XML ]
http://www.littlepad.net/demo/progwp/?page_id=11

カテゴリアーカイブとシングルページは、
WordPress の archive.php と single.php をカスタマイズして XML 形式で書き出すようにします。

■カテゴリアーカイブ用 XML（archive.php）

<?php echo "<?xml version=\"1.0\" encoding=\"" .get_bloginfo('charset'). "\" ?>\n" ?>
<data>
    <category><?php single_cat_title(); ?></category>
    <entries>
    <?php if(have_posts()): while(have_posts()): the_post(); ?>
        <entry>
            <title><?php the_title(); ?></title>
            <date><?php the_time("Y/m/d"); ?></date>
            <scene>/index/<?php the_time('Y-m-d-his'); ?></scene>
        </entry>
    <?php endwhile; endif; ?>
    </entries>
</data>

[ 実際に書き出している archive.php ]
http://www.littlepad.net/demo/progwp/?cat=5

■シングルページ用 XML（sigle.php）

<?php echo "<?xml version=\"1.0\" encoding=\"" .get_bloginfo('charset'). "\" ?>\n" ?>
    <data>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <title><?php the_title(); ?></title>
        <etnry><?php $content = get_the_content(); echo convertParag($content); ?></etnry>
    <?php endwhile; endif; ?>
</data>

ここでのポイントは get_the_content() と convertParag() です。
外部 XML ファイルを Flash 側で読み込む際、
改行コードは 
 または 
 を使用するので、
ここでは function.php 内で convertParag() という関数を定義し、
取得したデータをコンバートしています。
こうすることにより、Flash 側で正しい改行処理が行われます。
また、<?php the_content(); ?>ではなく、get_the_content() を使っているのは
HTML タグなしの記事データを取得したいためです。

function convertParag($str) {
    $output = preg_replace('/\r\n/', '
', $str);
    return $output;
}

参考）[AS3]TextFieldの罠（改行編）
http://cocoasaurus.com/blog/2009/09/as3textfield.html

[ 実際に書き出している sigle.php ]
http://www.littlepad.net/demo/progwp/?p=5

もし、Flash の TextField で HTMLレンダリング を有効にする場合は、
<?php the_content(); ?> を利用すれば、タグ付きでのデータを出力できます。
但し、XML 内に HTML タグがあると、正しくデータをパース出来ないので、
取得したデータのタグに対して CDATA セクションで囲むなどの処理が発生すると思います。

参考）ActionScriptで読み込むXML内にHTMLタグを使いたい　CDATAセクション
http://67.org/uk/2008/05/flashcdata.html

今回、ベーシックな部分だけを実装したので、
管理画面もデフォルトのままで、
入力フィールドはタイトルと本文しかありません。
表示要素もタイトルと記事本文（テキストのみ）です。

カスタムフィールドを使えば、表示要素も増やせますし、
追加処理としても、書き出す XML に追加し、
Progression 側で読み込む処理を追加すればいいので比較的簡単に出来ると思います。

なんか WordPress 側の話ばっかりになってしまったので、
Flash 側の処理はまた後日。

Progression + WordPress の連携（Progression編）