Flex SDKで、Flickrの写真を表示するヤツ (treasuring misc.)

前回にひきつづき、輪講の時間にてFlex SDKに挑戦中です。
Flexならではのものを作りたいよね、ということで、今回はサーバ側との連携に挑戦。
Flexのチュートリアルを眺めていたら、Flickrの画像を持ってくる、というサンプルを見つけたのでこれを叩き台にして試してみたいと思います。

Adobe - Flex Quick Starts: Loading external data with HTTPService

ここに掲載されているソースコードをそのままmxmlファイルとして作成して、前回と同様に mxmlc コマンドでコンパイルすると、こんなswfファイルがすぐに出来上がります。わーい、ちゃんと写真が出てきた！

＊

さて。ここから改造。
この状態で表示される写真はFlickr全体でpublicなもの。どうせなら自分がアップした写真だけを表示させたいですよね。

Flickr のRSS urlの仕様をちょっと調べてみると、

■全員のRSS

http://api.flickr.com/services/feeds/photos_public.gne?lang=en-us&format=rss_200

■指定したユーザーの写真一覧RSS

http://api.flickr.com/services/feeds/photos_public.gne?lang=en-us&format=rss_200&id=(ユーザーID)

という違いがあって、idパラメタでユーザーIDを付加してあげればよいようです。

＊

つぎにFlex側から、任意のurlをコールする方法について。
このチュートリアルに一通りのことが書いてあります。

Adobe - Developer Center : Flex quick start guide for PHP developers

なるほど、<mx:HTTPService>の要素の中に

<mx:request>
   <id>10116145@N03</id>
</mx:request>

といった具合でFlickr ユーザーIDを指定すればOKみたいです。

＊

あと、ついでに見た目の調整も適当にやってしまいましょう。UI部品の色などは、CSSと同じようなプロパティ指定で変更できるようです。
詳細については「flex リファレンス」などで検索すると出てきますが、たとえばこんなものを参考に。

mx.containers.Panel (Flex リファレンスガイド)

＊

そんなこんなで、今回できたのはこんなものです。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:aral="*" 
    creationComplete="photoService.send();"
    viewSourceURL="src/HTTPServiceConsumingFlickrRSSFeed/index.html"
>
    <!-- Model -->
    
    <!-- Define the HTTP service -->
    <mx:HTTPService 
        id="photoService"
        url="http://api.flickr.com/services/feeds/photos_public.gne" 
        resultFormat="e4x"
        result="photoResultHandler(event);"
        fault="photoFaultHandler(event);"
    >
      <mx:request>
         <id>10116145@N03</id>
      </mx:request>
   </mx:HTTPService>
    
    <!-- Controller -->
    <mx:Script>
        <![CDATA[
            import flash.net.navigateToURL;
            import mx.controls.Alert;
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            
            [Bindable]

            private var photoFeed:XML;
            
            // Define and use atom namespace.
            private namespace atom = "http://www.w3.org/2005/Atom";
            use namespace atom;
                        
            // The image URL is in the HTML content 
            // so we have to parse it out.
            private function parseImageUrl(fromHtml:XMLList):String
            {
                var pattern:RegExp = /img src="(.+?)" /;
                var results:Array = pattern.exec(fromHtml);
                var imageURL:String = results[1]; // backreference 1 from pattern
                
                return imageURL;
            }

            // Result handler - gets called after RSS is loaded.
            private function photoResultHandler(event:ResultEvent):void
            {
                photoFeed = event.result as XML;
            }
            
            // Fault handler - displays the error.
            private function photoFaultHandler(event:FaultEvent):void
            {
                Alert.show(event.fault.message, "Could not load photo feed");
            }

            // Opens author's HTML page in external window.
            private function openAuthorPage(event:MouseEvent):void
            {
                var dataIndex:uint = Number(event.target.instanceIndices.toString());
                var urlRequest:URLRequest = new URLRequest(photoFeed.entry[dataIndex].author.uri)

                navigateToURL(urlRequest, "_blank");    
            }
        ]]>
    </mx:Script>

    <!-- View -->        

    <!-- Effects -->

    <mx:Fade id="fadeIn" duration="3000" alphaFrom="0" alphaTo="1"/>
    <mx:Fade id="fadeOut" duration="3000" alphaFrom="1" alphaTo="0"/>

    <!-- User Interface -->
    <mx:Panel title="My Photos" width="100%" height="100%" borderColor="blue" backgroundDisabledColor="blue" backgroundColor="#efefff" color="white">
        
        <mx:Tile width="100%" height="100%">            
            <mx:Repeater id="photos" dataProvider="{photoFeed.entry}">                
                <mx:Box 
                    xmlns:mx="http://www.adobe.com/2006/mxml" 
                    textAlign="center" 
                >

                    <mx:Image 
                        id="myImage"
                        source="{parseImageUrl(photos.currentItem.content)}"
                        completeEffect="{fadeIn}"
                        scaleX="0.7"
                        scaleY="0.7"
                    />

                </mx:Box>    
                
            </mx:Repeater>

        </mx:Tile>
        
        <mx:ControlBar horizontalAlign="center">

        </mx:ControlBar>
        
    </mx:Panel>
    
</mx:Application>

これをコンパイルして生成されるswfはこちら。

下記もおなじswfですが、ちっちゃいサイズで貼り付けるとそれだけでブログパーツっぽくなりますね。