Flexでブログパーツ
ブログパーツとしてはSWF形式が一般的ですが、その作成方法にはいくつかあります。
最も一般的なのはAdobeのFLASHを使用して作る方法です。
他にもプログラム言語のライブラリとしてPHPを吐き出せるものなどもあります。
PHPのMing、JavaのJavaSWFなどですが、あまり一般的では無いように思います。
割と新しい方法としては、今回紹介するFlexがあります。
Flexも現在はバージョン３となり、認知度も上がってきていることと思いますが、一応説明させてもらいます。
FlexはFLASHと同じAdobeの提供するSWF「開発」ソフトです。
元々、FLASHでのオーサリングはデザイナーの仕事というイメージでしたが、ActionScriptの登場によりプログラマとの共同作業ということも増えてきました。
FLASHで作成されるものとして大きく分けると、ゲームやアニメーションなどのエンターテイメント系と自由なGUIや出力表現を備えた業務系の２つになります。
厳密な区切りは難しいですが、前者は見た目が重視されるためデザイナーが中心となりますが、後者は綿密な用件定義が必要でありシステム屋が中心となる仕事です。
しかし、プログラマにとってはFLASHのオーサリングというのは普段の業務内容から大きく外れています。
タイムラインという考え方やGUIコンポーネントも作成する必要があるなど難易度も高くなります。
そこで、Flexの登場です。
FLASHがあるのに、なぜFlexか？
それは、プログラマがSWFを作成するためというのが一番の理由でしょう。
Flexではまず、GUIコンポーネントがすでに用意されています。
JavaでいえばSWINGを使ってJButtonクラスやJMenuでGUIコンポーネントを作成できるといったことです。
次に、FLASHのようにタイムラインを考える必要がありません。
FlexではMXMLというXMLとActionScriptのみで作成ができます。
HTML＋Javascriptの組み合わせと似ていて、HTMLが見た目を用意し、Javascriptが動きを制御するといった感じです。
Flexはプログラマフレンドリーなのです。
それでは、早速Flexを使ったSWFの作成方法を説明します。
グラフィカルなIDE開発環境FlexBuilderも販売されていますが、今回程度の無いようなら無料のFlex SDKのみでも問題ありません。
Flex SDKで作成したコードをコンパイルしてSWFファイルを生成できます。
今回紹介するのは、RSSから最新記事を表示するブログパーツです。
上記の説明では、FLASHでのお仕事に含まれそうですが、、、どちらでもよいのです。
まず、大枠となる部分はいつも一緒です。
XML宣言とアプリケーション本体のコンテナです。
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” initialize=”init()”>
・・・
・・・
</mx:Application>
mx:Applicationタグに、initialize=”init()” としているのは、URLを読み込む
次に、アプリケーションの中身を追加していきます。
※見やすいようにサイズや座標指定など細かい属性は省略しています。x,y,width,heightなど必要に応じて指定しましょう。
<mx:Panel>
<mx:Image source=”blog01.gif” />
<mx:Image source=”blog02.gif” />
<mx:Image source=”blog03.gif” />
<mx:VBox>
<mx:LinkButton id=”link0″ label=”" click=”openNews(event)” />
<mx:LinkButton id=”link1″ label=”" click=”openNews(event)” />
<mx:LinkButton id=”link2″ label=”" click=”openNews(event)” />
<mx:LinkButton id=”link3″ label=”" click=”openNews(event)” />
<mx:LinkButton id=”link4″ label=”" click=”openNews(event)” />
</mx:VBox>
</mx:Panel>
まずPanelコンテナを配置し、中にImageやLinkButtonを配置しています。
今回はRSSの表示部分以外の見た目を簡単にするためにImage要素でデザインのパーツをペタペタ貼り付けています。
RSSの表示部分はVBoxの中にLinkButtonを配置します。これで、最新の記事がたてに並んで表示されます。
表示されるラベルはRSSから読み込んでセットするので、label=”"となっています。
リンクっぽく表示するために、textDecoration=”underline”やrollOverColorで色を指定してもよいでしょう。
各記事のLinkButtonからclick=”openNews(event)”で記事のページへジャンプします。
init()やopenNews(event)などの関数はmx:Applicationの中にmx:Scriptタグを追加します。
<mx:Script>
<![CDATA[
・・・
・・・
]]>
</mx:Script>
中身はActionScriptでXMLではないため、<![CDATA[～]]>も忘れずに記述します。
init()関数から見ていきます。
public function init():void {
var request:URLRequest = new URLRequest(”http://www.queserastyle.com/rss/index.xml”);
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, setNews);
loader.load(request);
}
取得したいRSSのURLで初期化したURLRequestのインスタンスrequestとURLLoaderインスタンスloaderを作成します。
次にloaderがロードが終わったときに、RSSの内容をセットするsetNews()関数を呼び出すようにイベントハンドラを登録します。
後はloaderのload関数の引数にrequestを与えて終わりです。
次にRSSのロードが終わったタイミングで呼び出されるsetNews関数を見て見ましょう。
private function setNews(event:Event):void {
var loader:URLLoader = event.target as URLLoader;
var xml:XML = XML(loader.data);
var itemNode:XMLList = xml.child(”item”);
link0.label = “★”+xml.channel.item[0].title;
link1.label = “★”+xml.channel.item[1].title;
link2.label = “★”+xml.channel.item[2].title;
link3.label = “★”+xml.channel.item[3].title;
link4.label = “★”+xml.channel.item[4].title;
for (var i:int = 0; i < 5; i++) {
links[i] = xml.channel.item[i].link;
}
}
まずevent.targetをURLLoaderとして型指定しloaderオブジェクトにセットします。
XML(loader.data)でRSSデータをXMLオブジェクトとしてxmlにセットします。
あとは、上から順にタイトルを取得し、LinkButtonにセットしています。
また、clickイベント時にジャンプ先として使用するため、link配列にURLをセットしておきます。
最後に各LinkButtonのclickイベント時に呼ばれるopenNews()関数です。
private function openNews(event:Event):void {
var id:String = event.target.id;
id = id.replace(”link”, “”);
navigateToURL(new URLRequest(links[id]));
}
まず、クリックされたオブジェクトのIDを取得します。
IDは”link”＋数字となっているので、”link”という文字列を消して数字のみを何番目のリンクかを調べます。
link配列の同じ番号のURLを取得し、URLRequestオブジェクトを作成、navigateToURL関数でその記事のページをブラウザで開きます。
あとはmxmlcコマンドでコンパイルするとSWFファイルの出来上がり。
FLASHプレイヤーで動作を確認してみましょう。
以上、簡単にでしたがFlexでブログパーツを作る方法でした！
Flashが使えない。。。というあなたも、Flexならできるかもしれませんよ？
今回の例の元となったブログパーツはケセラスタイルから見ることができます。
ブログパーツの配布ページを見てね！
