PR

Flashで簡易RSSリーダーを作ろう!

2009年1月22日(木)
高橋 義博

RSSファイルをFlashで読み込んでみよう

 では、Think ITのRSS2.0ファイル(http://thinkit.jp/rss/rss20.xml)を読み込む方法を紹介します。完成データをダウンロードできますので、合わせてご利用ください(797_1.zip/1.67 MB)。

 今回、ActionScript 3.0で作成していきますが、ActionScript 3.0に慣れていない方もいらっしゃると思いますので、classファイルを作成せず、すべてFlaファイル内のフレームにActionScriptを記述しています。ActionScript 3.0になじみがない方にも内容を理解いただくために、できるだけコードを短くし、コメントを記載しております。

 ダウンロードファイルの中に完成ファイル「RSS_Reader.fla」がありますので、Flash CS3もしくFlash CS4で開いて、レイヤー「シーン1」に書かれているActionScriptの内容を「アクションパネル」で確認してください。

 記事の構成上、RSSデータを取得する部分を主に紹介していきます。

 まず、読み込むRSSファイルを指定して読み込んでいる部分は、40行目~42行目です。40行目に記述されているアドレスの内容を変更することにより、読み込むRSSファイルを変更することができます。正しくRSSファイルの読み込みが完了しますと、49行目でRSSの任意のデータを取得/表示する処理を実行します。

 今回は、Webサイトのタイトルとして要素の直下にあるを、記事のタイトル/リンク/カテゴリ/日付として、<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行目に書かれているように、「オブジェクト名.要素名」で取得することができます。</item></item></rss></item></channel></rss></item></item></pubdate></category>

読み込んだRSSファイルを表示してみよう

 取得した各データを表示するには、ダイナミックテキストフィールドに表示することで実現できます。ただし、取得したデータにはリンク情報も含まれておりますし、タイトルや日付の文字サイズなども変更したいため、HTMLで文書構造を指定し、見た目の装飾部分はCSSで指定していきます。

 ただし、Webサイトのタイトルは一行であるため、テキストフィールドのプロパティで見た目の設定を行っています。

 70行目以降で、取得したデータにHTMLタグを追加しています。この際に、日付を表示形式を変更しています。RSSデータでは日付は「Fri, 05 Dec 2008 11:00:00 +0900」のように分かりづらい形式になっていますので、「2008年12月5日」のように分かりやすい表記に変更します。

 HTMLタグを追記した内容をダイナミックテキストフィールドに表示します。表示する際に、テキストフィールドをHTML表示できるように「インスタンス名.htmlText」と設定します。

 この状態では、記事の表示の見た目の設定を行っていませんので、次にCSSを読み込んで見た目の設定を行っていきます。

Think IT会員限定特典
  • 「Flashで簡易RSSリーダーを作ろう!」サンプルプログラム

制御機器メーカーでソフト開発やWebマスターの業務を経て、2007年からフリーランスとして、Webサイト制作、Flashコンテンツ制作を行っている。また、WebスクールでWebデザイン、Flash制作の講師などを担当し、経験を生かして幅広い指導を行っている。

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています