RSSとは何か?
ブログやニュースサイトなどで、RSSという文字や画像を目にする機会が多いと思います。RSSは、Internet Explorer 7のようにRSSに対応したブラウザやRSSリーダーというソフトを利用することで、RSSに対応したサイトから最新ニュースやブログ最新記事などの更新情報を自動的に集めることができます。
このRSSのデータ形式は、XMLというデータ形式で作成されています。RSSの構造は、このXMLの構造と同じになりますので、HTMLによく似たタグで構成されていて、テキストファイルとして作成されます(XMLファイルについては、「FlashでXMLを活用しよう!(http://thinkit.jp/article/408/1/)」を参照)。
そのため、RSSはさまざまなアプリケーションから利用でき、Flashからも利用することができます。ただ、一言でRSSといっても、さまざまな経緯から幾つかの種類に分かれています。その中で、現在一般的に利用されているRSS1.0、RSS2.0、Atomを簡単に紹介します。
RSS1.0は、拡張子がrdfであることが多く、古くから利用されています。RDFという規格をもとに作成されています。
RSS2.0は、拡張子がxmlであることが多いです。RSS1.0の続きバージョンのような名称ですが、こちらはXMLをもとに作成されていて、RSS1.0とは構造が異なります。
Atomは、RSSに複数のバージョンがあり混乱したため、またRSS1.0の規格RDFの構造が複雑なため、新しいRSSとして作成されました。
上記のようにRSSには3種類あり、構造も異なっています。そのため、今回はFlashでRSSを読み込む基本的な仕組みを説明するため、構造がシンプルなRSS2.0を使った簡易RSSリーダーの解説を行っていきます。

RSS2.0の構造について
Think ITのRSS2.0(http://thinkit.jp/rss/rss20.xml)の構造を図1にまとめました。
RSS2.0は、ファイルの全体を要素で囲んでいます。その要素の直下に要素がありますが、その要素の直下の内容がRSSファイル全体の説明になります。そのため、通常はこの部分にサイトのタイトルや説明等を記述します。
要素の中に書かれている主な要素の説明は以下の通りです。
・:Webサイトのタイトル<br> ・<link>:Webサイトのアドレス<br> ・<description>:Webサイトの説明文<br> <br> ファイル中段に<item>が繰り返し記述されていますが、この部分がサイトの更新記事などを列挙する個所になります。<item>要素内にも<channel>要素内に書かれていた要素と同様な要素が記述されています。この部分が記事のタイトルや内容等になります。<br> <br> <item>要素の中に書かれている主な要素の説明は以下の通りです。<br> <br> ・<title>:記事のタイトル<br> ・<link>:記事のアドレス<br> ・<category>:記事のカテゴリ<br> ・<pubDate>:記事の発行日時<br> ・<description>:記事の内容<br> <br> これらの内容をFlashで解析し、適切に表示することでRSSリーダーとしての機能を実現することとなります。それでは、Flash ActionScript 3.0を使った簡易RSSリーダー作成していきます。ActionScript 2.0で作成してみたい方は、「FlashでXMLを活用しよう!(<a href="http://thinkit.jp/article/408/1/">http://thinkit.jp/article/408/1/</a>)」を参照ください。</p>
</div><!--pagebreak--><div id="article_body"> <h2>RSSファイルをFlashで読み込んでみよう</h2> <p> では、Think ITのRSS2.0ファイル(<a href="http://thinkit.jp/rss/rss20.xml">http://thinkit.jp/rss/rss20.xml</a>)を読み込む方法を紹介します。完成データをダウンロードできますので、合わせてご利用ください(797_1.zip/1.67 MB)。<br> <br> 今回、ActionScript 3.0で作成していきますが、ActionScript 3.0に慣れていない方もいらっしゃると思いますので、classファイルを作成せず、すべてFlaファイル内のフレームにActionScriptを記述しています。ActionScript 3.0になじみがない方にも内容を理解いただくために、できるだけコードを短くし、コメントを記載しております。<br> <br> ダウンロードファイルの中に完成ファイル「RSS_Reader.fla」がありますので、Flash CS3もしくFlash CS4で開いて、レイヤー「シーン1」に書かれているActionScriptの内容を「アクションパネル」で確認してください。<br> <br> 記事の構成上、RSSデータを取得する部分を主に紹介していきます。<br> <br> まず、読み込むRSSファイルを指定して読み込んでいる部分は、40行目~42行目です。40行目に記述されているアドレスの内容を変更することにより、読み込むRSSファイルを変更することができます。正しくRSSファイルの読み込みが完了しますと、49行目でRSSの任意のデータを取得/表示する処理を実行します。<br> <br> 今回は、Webサイトのタイトルとして<channel>要素の直下にある<title>を、記事のタイトル/リンク/カテゴリ/日付として、<item>要素内にある<title>、<link>、<category>、<pubDate>を取得します。<br> <br> 記事の内容を取得する方法ですが、60行目にあるように「for each in」を利用し<item>要素内のデータを取得しています。<item>要素内を指定する方法ですが、RSSファイル全体指定してるXMLオブジェクト「rssItem」から見た場合、<rss>→<channel>→<item>と一番上にある<rss>要素から2階層下にある<item>要素を指定することになりますので、「rssXml..item」と記述し2階層下を「..」と指定しています。<br> <br> また、<item>要素内の各要素の取得は、62行目~65行目に書かれているように、「オブジェクト名.要素名」で取得することができます。</p> <p class="img"><a href="/images/article/797-201.png" target="_blank"><img src="/images/article/797-201-t.png"></a></p> <h2>読み込んだRSSファイルを表示してみよう</h2> <p> 取得した各データを表示するには、ダイナミックテキストフィールドに表示することで実現できます。ただし、取得したデータにはリンク情報も含まれておりますし、タイトルや日付の文字サイズなども変更したいため、HTMLで文書構造を指定し、見た目の装飾部分はCSSで指定していきます。<br> <br> ただし、Webサイトのタイトルは一行であるため、テキストフィールドのプロパティで見た目の設定を行っています。<br> <br> 70行目以降で、取得したデータにHTMLタグを追加しています。この際に、日付を表示形式を変更しています。RSSデータでは日付は「Fri, 05 Dec 2008 11:00:00 +0900」のように分かりづらい形式になっていますので、「2008年12月5日」のように分かりやすい表記に変更します。<br> <br> HTMLタグを追記した内容をダイナミックテキストフィールドに表示します。表示する際に、テキストフィールドをHTML表示できるように「インスタンス名.htmlText」と設定します。<br> <br> この状態では、記事の表示の見た目の設定を行っていませんので、次にCSSを読み込んで見た目の設定を行っていきます。</p>
</div><!--pagebreak--><div id="article_body"> <h2>CSSで見た目を設定しよう</h2> <p> ここでは、外部にあるCSSファイル「style.css」をテキストフィールドに設定する方法を紹介します。「style.css」は、ダウンロードした完成ファイルに含まれております。<br> <br> CSSファイルを設定するには、テキストフィールドに文字を表示する前に設定する必要があります。そのため、RSSファイルの読み込みよりも先にCSSファイルを読み込む必要があるため、完成ファイル「RSS_Reader.fla」では、一番最初にCSSファイルの読み込みの設定を行っています。<br> <br> 読み込むCSSファイルを指定して読み込んでいる部分は、12行目~14行目です。12行目のファイル名を変更することにより、読み込むCSSファイルを変更することができます。<br> <br> 読み込んだCSSファイルをテキストフィールドに設定する部分は、18行目~22行目です。CSSファイルの内容をテキストフィールドに適用するには、StyleSheetオブジェクトにCSSファイルの内容を指定し、そのStyleSheetオブジェクトをテキストフィールドのstyleSheetプロパティに設定する必要があります。<br> <br> また、Flash Playerが対応しているCSSのプロパティですが、CSS1の一部のみの対応となっています。そのため、設定できる内容に制限がありますので、注意してください。<br> <br> 設定できるCSSプロパティについては、Adobe社の「StyleSheet - ActionScript 3.0 コンポーネントリファレンスガイド(<a href="http://livedocs.adobe.com/flash/9.0_jp/ActionScriptLangRefV3/flash/text/StyleSheet.html">http://livedocs.adobe.com/flash/9.0_jp/ActionScriptLangRefV3/flash/text/StyleSheet.html</a>)」を確認してみてください。</p> <p class="img"><a href="/images/article/797-301.png" target="_blank"><img src="/images/article/797-301-t.png"></a></p> <h2>RSSリーダー作成時の注意</h2> <p> 今回ダウンロードいただいた完成ファイル「RSS_Reader.fla」は、Flash上の「ムービープレビュー」から動作の確認をすることができます。しかし、作成したSWFファイル単体を実行するとセキュリティ上の問題で動作を確認することができません。<br> <br> これは、Flash Playerは同じサーバー内にあるRSSファイル(XMLファイル)を読み込むことができるのですが、外部サーバー内にありますRSSファイルを読み込むことができない仕様となっています。<br> <br> 外部サーバーにあるRSSファイルを読み込む方法としましては、図3のように「PHPプログラムを経由する方法」と「ポリシーファイルを配置する方法」の2種類あります。しかし後者の「ポリシーファイルを配置する方法」では外部サーバーにファイルを設置する必要があり敷居が高いため、一般的には「PHPプログラムを経由する方法」が使われています。<br> <br> 「PHPプログラムを経由する方法」の場合、Flash側の設定はActionScriptで指定しているRSSファイルのアドレスの部分をPHPファイルのアドレスに変更するだけとなります。PHP側の設定は、読み込んだRSSファイルの内容をそのままFlash側に渡すだけなので、比較的簡単なプログラムとなっています。<br> <br> ダウンロードしたデータの中に「RSS_Reader_php.fla」と「loadRSS.php」があります。この2つのファイルを組み合わせることにより、外部サーバーにあるRSSファイルをFlashに読み込むことができます。ただし、PHPを動作させる必要がありますので、ApacheなどのWebサーバーとPHPが実行できる環境での動作確認が必要です。<br> <br> 今回は、FlashでRSSファイルを簡単に読み込みができるように、シンプルな構造になっています。Flashでは動きがあるコンテンツが作成できますので、今回の内容を参考に動きのあるRSSリーダーなどの作成にチャレンジしてみてはいかがでしょうか。</p>
</div>
<div class="next_page_link" id="next_page_link_auto"><a href="/article/797/1?page=1" class="btn --next-prev next_page_link_auto_bancho_common">Flashで簡易RSSリーダーを作ろう!</a></div></body></html>