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

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

前回の記事『WordPressで出力したXMLをFlashで表示してみる備忘録 : その1』では、背景画像を読み込むための URL を出力しましたが、今回はタイトルや概要などのテキストを表示するための XML を出力したいと思います。

まず、前回の XML に必要な要素を追加します。

<?xml version="1.0" encoding="UTF-8"?>
<root>
 <bg>/wp-content/uploads/2009/07/sample_image_01.jpg</bg>
 <title>ココにタイトルを記入</title>
 <date>ココに日付を記入</date>
 <excerpt>ココに概要を記入</excerpt>
</root>

というように、『title』、『date』、『excerpt』と3つの要素を追加しました。
で、その要素にコンテンツが記入されるように WordPress のテンプレートを作成するのですが、その前に前回 “sampleFlash” という名前で作ったページを編集します。
前回は背景画像を表示させるための URL を記入するカスタムフィールドを作りました。
今回もカスタムフィールドを新規追加してもいいのですが、追加する要素が『タイトル』と『日付』、『概要』の3つなのでカスタムフィールドは使用せずに、『タイトル』はページのタイトル、『日付』はページの公開日時もしくは最終更新日時、『概要』はページの本文を使用することにしました。
もちろん、カスタムフィールドを追加しても全然 OK です。

まず、“sampleFlash” というタイトルを『WordPressの”XML”を表示するFlash』というように変更します。
日付は、基本的には編集しませんが、どうしても日付を変えたい場合は各自編集してくださいね。
本文には、

WordPressの”XML”を表示するFlash。
WordPress で出力した XML ファイルを Flash で読み込み表示するコンテンツ。
更新作業がちょっと楽になりそう…

と記入します。
ちょっと検証したいことがありますので、1行目はタイトルと同じ文章を書いています。

前回作成したテンプレート “sampleFlashXML Page Template”を先ほどの XML のように編集します。

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>
 <title>ココにタイトルを記入</title>
 <date>ココに日付を記入</date>
 <excerpt>ココに概要を記入</excerpt>
</root>

次に、それぞれの要素のコンテンツを WordPress のテンプレートタグを使って編集していきます。
文字をテンプレートタグで XML に出力する場合はちょっと気をつけなければいけないこともあるのですが、それは後々検証するとして取り敢えず何も気にせず編集します。

WordPress Codex 日本語版にある、テンプレートタグの投稿タグと日時タグを見ると『タイトル』、『日付』、『本文』用のテンプレートタグが載っています。
それを参考に『タイトル』→『the_title』、『日付』→『the_date』、『本文』→『the_content』を使ってタンプレートを編集します。

<?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>
 <title><?php the_title(); ?></title>
 <date><?php the_modified_date('Y-m-d'); ?></date>
 <excerpt><?php the_content(); ?></excerpt>
</root>

これで、一旦テンプレートを保存して、ページ(sampleFlash)を表示してみると

<root>
 <bg>/wp-content/uploads/2009/07/sample_image_01.jpg</bg>
 <title>WordPressの”XML”を表示するFlash’s</title>
 <date>2009-07-24</date>
 <excerpt>
 <p>WordPressの”XML”を表示するFlash’s<br/>WordPress で出力した XML ファイルを Flash’s で読み込み表示するコンテンツ。<br/>更新作業がちょっと楽になりそう…</p>
 </excerpt>
</root>

概要(本文に記入)が、<p>タグや<br/>タグ付きで出力されていますので、フィード用のテンプレートタグ『the_content_rss』に変更してみます。
今度は、<p>タグなどが除かれて文章だけが表示されてます。(フィード用のテンプレートタグなので当たり前なのですが…)

この XML を Flash で表示してみると

サンプル

概要(本文)の改行がおかしい。
これは、以前から話題になっている『改行コードが “CR+LF(dos)” のテキストは、1行増える』という Flash の問題です。
ということは、WordPress の出力する文章は改行コードが “CR+LF(dos)” なんですね。
そこで、これを解消するために “にゃあプロジェクト” さんの『改行コードを統一する (2)』、もしくは『【AS3.0】外部テキストを読み込む (4)』を参考に actionscript を追加します。

サンプル

見事に余分な行が削除されました。
ひろゆきさんに感謝です :D

取り敢えず、今回の『タイトル』と『概要(本文)』は無事表示されましたが、『<』などの記号が文章中にある場合、パースエラー(XML Parsing Error)になります。
それを回避するには、『URLエンコード・デコード』を使うのですが、そのあたりのことは次回に書くとして、ちょっと気になることが…

先ほど検証のため『タイトル』と『概要(本文)』に同じ文章を使いましたが、それの出力結果がちょっと違うんですよね。
両方ともフィード用のタンプレートタグを使い、<title><?php the_title_rss(); ?></title>、<excerpt><?php the_content_rss(); ?></excerpt>のようにしました。
その出力結果を見ると大して違いはないのですが、ソースを見ると

<?xml version="1.0" encoding="UTF-8"?>
<root>
 <bg>/wp-content/uploads/2009/07/sample_image_01.jpg</bg>
 <title>WordPressの&#8221;XML&#8221;を表示するFlash</title>
 <date>2009-07-24</date>
 <excerpt>WordPressの"xml"を表示するFlash。
WordPress で出力した XML ファイルを Flash で読み込み表示するコンテンツ。
更新作業がちょっと楽になりそう...
 </excerpt>
</root>

というように、『タイトル』だけ『”』の記号が文字実態参照に変換されています。
WordPress Codex 日本語版で、テンプレートタグの説明を見ると『the_title_rss』には引数がなく、『the_content_rss』には引数があります。
ということは、『タイトル』に使われている記号は必ず文字実態参照に変換されるということなんでしょうか?
う〜ん、文字実態参照を表示する場合、表示が気に入らないことがあるんですが、どうしようもないということなんでしょうかね。
上にある Flash の『タイトル』に使われている『”(ダブルクオート)』は『&#8221;』に変換されてしまうので、ちょっと表示が微妙…
ちなみに『“(&ldquo;)』や『”(&rdquo;)』を使うと文字実態参照に変換されない。
う〜ん、よくわかりません。
それと、『the_content_rss』にあれこれ引数を書いてみても出力結果が変わらない気がするのですが、書き方が間違っているのかなぁ…

何だかよくわかりません。
とほほ…

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

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