IllustratorでYahooの天気情報を利用してみる。

| コメント(0) | トラックバック(0)

すこし、暑さが和らいで過ごし易くなりましたね。しかし、昨晩は娘に蹴られて目が覚めてを3回繰り返したため少々寝不足です。
少々マンネリ化しつつあるエクステンションパネルですが、今回はYahoo JAPANのRSSフィードを利用してIllustratorに週間予報データを生成させてみます。
RSSの詳細についてはhttp://weather.yahoo.co.jp/weather/public/rss.htmlを参照下さい。

とりあえずはフィードの内容を見てみましょう。

<rss version="2.0">
    <channel>
        <title>Yahoo!天気情報 - 北部(和歌山)の天気</title>
        <link>http://rd.yahoo.co.jp/rss/l/weather/days/*http://weather.yahoo.co.jp/weather/jp/30/6510.html</link>
        <description>Yahoo! JAPANの天気情報に掲載されている最新の情報を提供しています。</description>
        <language>ja</language>
        <copyright>Copyright (C) 2011 Yahoo Japan Corporation. All Rights Reserved.</copyright>
        <lastBuildDate>Tue, 23 Aug 2011 13:17:12 +0900</lastBuildDate>
        <item>
            <title>【 23日(火) 北部(和歌山) 】 曇時々晴 - 31℃/24℃ - Yahoo!天気情報</title>
            <link>http://rd.yahoo.co.jp/rss/l/weather/days/*http://weather.yahoo.co.jp/weather/jp/30/6510.html?d=20110823</link>
            <description>曇時々晴 - 31℃/24℃</description>
            <pubDate>Tue, 23 Aug 2011 11:00:00 +0900</pubDate>
        </item>
        <item>
            <title>【 24日(水) 北部(和歌山) 】 曇後晴 - 32℃/26℃ - Yahoo!天気情報</title>
            <link>http://rd.yahoo.co.jp/rss/l/weather/days/*http://weather.yahoo.co.jp/weather/jp/30/6510.html?d=20110824</link>
            <description>曇後晴 - 32℃/26℃</description>
            <pubDate>Tue, 23 Aug 2011 11:00:00 +0900</pubDate>
        </item>
        <item>
            <title>【 25日(木) 北部(和歌山) 】 曇時々雨 - 31℃/25℃ - Yahoo!天気情報</title>
            <link>http://rd.yahoo.co.jp/rss/l/weather/days/*http://weather.yahoo.co.jp/weather/jp/30/6510.html?d=20110825</link>
            <description>曇時々雨 - 31℃/25℃</description>
            <pubDate>Tue, 23 Aug 2011 11:00:00 +0900</pubDate>
        </item>
        <item>
            <title>【 26日(金) 北部(和歌山) 】 曇時々雨 - 32℃/26℃ - Yahoo!天気情報</title>
            <link>http://rd.yahoo.co.jp/rss/l/weather/days/*http://weather.yahoo.co.jp/weather/jp/30/6510.html?d=20110826</link>
            <description>曇時々雨 - 32℃/26℃</description>
            <pubDate>Tue, 23 Aug 2011 11:00:00 +0900</pubDate>
        </item>
        <item>
            <title>【 27日(土) 北部(和歌山) 】 曇時々雨 - 32℃/26℃ - Yahoo!天気情報</title>
            <link>http://rd.yahoo.co.jp/rss/l/weather/days/*http://weather.yahoo.co.jp/weather/jp/30/6510.html?d=20110827</link>
            <description>曇時々雨 - 32℃/26℃</description>
            <pubDate>Tue, 23 Aug 2011 11:00:00 +0900</pubDate>
        </item>
        <item>
            <title>【 28日(日) 北部(和歌山) 】 曇り - 32℃/25℃ - Yahoo!天気情報</title>
            <link>http://rd.yahoo.co.jp/rss/l/weather/days/*http://weather.yahoo.co.jp/weather/jp/30/6510.html?d=20110828</link>
            <description>曇り - 32℃/25℃</description>
            <pubDate>Tue, 23 Aug 2011 11:00:00 +0900</pubDate>
        </item>
        <item>
            <title>【 29日(月) 北部(和歌山) 】 曇り - 32℃/26℃ - Yahoo!天気情報</title>
            <link>http://rd.yahoo.co.jp/rss/l/weather/days/*http://weather.yahoo.co.jp/weather/jp/30/6510.html?d=20110829</link>
            <description>曇り - 32℃/26℃</description>
            <pubDate>Tue, 23 Aug 2011 11:00:00 +0900</pubDate>
        </item>
        <item>
            <title>【 30日(火) 北部(和歌山) 】 曇り - 32℃/26℃ - Yahoo!天気情報</title>
            <link>http://rd.yahoo.co.jp/rss/l/weather/days/*http://weather.yahoo.co.jp/weather/jp/30/6510.html?d=20110830</link>
            <description>曇り - 32℃/26℃</description>
            <pubDate>Tue, 23 Aug 2011 11:00:00 +0900</pubDate>
        </item>
        <item>
            <title>【 紀北 】注意報があります - Yahoo!天気情報</title>
            <link>http://rd.yahoo.co.jp/rss/l/weather/days/*http://typhoon.yahoo.co.jp/weather/jp/keihou/30/6511.html</link>
            <description>注意報があります</description>
            <pubDate>Tue, 23 Aug 2011 12:43:00 +0900</pubDate>
        </item>
        <item>
            <title>【 紀中 】注意報があります - Yahoo!天気情報</title>
            <link>http://rd.yahoo.co.jp/rss/l/weather/days/*http://typhoon.yahoo.co.jp/weather/jp/keihou/30/6512.html</link>
            <description>注意報があります</description>
            <pubDate>Tue, 23 Aug 2011 12:43:00 +0900</pubDate>
        </item>
        <item>
            <title>[PR] 「東日本大震災」に関する情報</title>
            <link>http://rd.yahoo.co.jp/rss/l/weather/jwa/SIG=11l5c397l/*http%3A//tenki.jp/docs/info.html?.tp=20110404183738</link>
            <description>「東日本大震災」に関する情報</description>
            <pubDate>Mon, 04 Apr 2011 18:37:38 +0900</pubDate>
        </item>
    </channel>
</rss>

という具合です。
タイトルはcannel直下のtitleを、各日の要素についてはitem以下を参照します。
今回はオブジェクトもそんなにありませんからExternalHostObjecを利用します。
まずはmxmlファイルを見てみましょう。

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
 layout="absolute" width="400" height="330">

    <mx:Script>
        <![CDATA[
            import flash.events.*;
            import flash.net.URLRequest;
            import flash.net.URLLoader;
            import flash.filesystem.*;

            private var hostName:String = HostObject.mainExtension;
            private var serverSocket:ServerSocket;
            public var FileGet:URLLoader;

            private function getCon():void
            {
                FileGet = new URLLoader();
                FileGet.dataFormat = URLLoaderDataFormat.TEXT;
                FileGet.addEventListener(IOErrorEvent.IO_ERROR, onIOError);
                FileGet.addEventListener(SecurityErrorEvent.SECURITY_ERROR, onSecurityError);
                FileGet.addEventListener(Event.COMPLETE, onComplete);
                var source:String = targetRSS.text;
                Message.text    += source + "RSS download Start.\n";
                var request:URLRequest = new URLRequest(source);
                FileGet.load(request);
            }

            private function onIOError(evt:IOErrorEvent):void
            {
                Message.text += "There was an IO Error.\n";
                Message.text += "Could not update variables.\n";
            }

            private function onSecurityError(evt:Event):void
            {
                Message.text    += "There was a security error.\n";
            }

            private function onComplete(evt:Event):void
            {
                Message.text    += "data update start...";
                Message.text    += FileGet.data
                if (updater.run(FileGet.data))
                    {
                        Message.text    += "data update finished";
                    }
            }
        ]]>
    </mx:Script>
    <mx:VBox paddingTop="10" horizontalCenter="0">
        <mx:Button id="doExe" label="get RSS" click="getCon()"/>
        <mx:TextInput id="targetRSS" width="350"
            text="http://rss.weather.yahoo.co.jp/rss/days/6510.xml"/>
        <mx:TextArea id="Message" width="350" height="160" text=""/>
    </mx:VBox>
</mx:WindowedApplication>

インターフェースはRSSのURL入力用のTextInputとログ記録用のTextArea、実行ボタンのシンプルなものです。コード自体の流れはまいどおなじみのものですので省略。もちろんExtendScriptをインクルードするためのライブラリはスプリットオフしています。

package
{
    import flash.external.HostObject;
    public class updater
    {    
        [Embed(source="./process.jsx", mimeType="application/octet-stream")]
        private static var EsInitClass: Class;

        public static function run(xmlStr:String):Boolean
        {
            var scriptObject: Object = new EsInitClass();
            var initScript: String = scriptObject.toString();
            var myBridgeScript : HostObject = HostObject.getRoot(HostObject.extensions[0]);
            
            myBridgeScript.eval(initScript);
            return myBridgeScript.processXML(xmlStr);
        }
    }
}

こちらもライブラリ名称とファンクション名が変わった位の代物ですね。
最後は以下のJSXファイルです。

function processArtwork(dat){
    var tg = app.activeDocument.groupItems;
    for (var i=0;i<7;i++){
        num = processSymbol (dat[i][2]);
        if (num>0){
            tgSym = app.activeDocument.symbolItems.add(app.activeDocument.symbols[num]);
            tgSym.top = tg[i].pathItems[0].top;
            tgSym.left = tg[i].pathItems[0].left;
            tgSym.width = tg[i].pathItems[0].width;
            tgSym.height = tg[i].pathItems[0].height;
            }
        tg[i].textFrames[0].contents = dat[i][1]
        tg[i].textFrames[1].contents = dat[i][0]
        tg[i].textFrames[3].contents = dat[i][4]
        tg[i].textFrames[4].contents = dat[i][3]
        tg[i].textFrames[5].contents = dat[i][2];
        }
    }


function processSymbol(str){
    var fstChar = str.substr (0, 1);
    if (fstChar=="晴"){
        if (str.length==1) return 0;
        if (str.match("曇")) return 1;
        if (str.match("雨")) return 2;
        if (str.match("雪")) return 3;
        if (str.match("雷")) return 4;
        }
    if (fstChar=="曇"){
        if (str.length==2) return 5;
        if (str.match("晴")) return 6;
        if (str.match("雨")) return 7;
        if (str.match("雪")) return 8;
        if (str.match("雷")) return 9;
        }
    if (fstChar=="雨"){
        if (str.length==1) return 10;
        if (str.match("晴")) return 11;
        if (str.match("曇")) return 12;
        if (str.match("雪")) return 13;
        if (str.match("雷")) return 14;
        }
    if (fstChar=="雪"){
        if (str.length==1) return 15;
        if (str.match("晴")) return 16;
        if (str.match("曇")) return 17;
        if (str.match("雨")) return 18;
        if (str.match("雷")) return 19;
        }
    return -1
    }

XMLデータから必要なものを抜き出してtextFrameのcontentsを差し替えます。面倒なのはアイコンですね。これらはシンボルを利用します。位置と大きさは差し替え対象のグループに含まれるダミーのrectangleの情報を拾って調整しています。
と言う事で実行イメージを

weatherRepo1.png

ボタンをぽちっとすると

weatherRepo2.png

こうなります。最後にzxpとベースのテンプレートも置いておきますね。

weather.zxp
weatherBase.ai.zip しかし、アートワーク絡みが力つきた感じでいかにも手抜きです。



トラックバック(0)

トラックバックURL: /372

コメントする

このブログ記事について

このページは、tenが2011年8月24日 12:31に書いたブログ記事です。

ひとつ前のブログ記事は「EAN(JAN)13 Barcode generator」です。

次のブログ記事は「Illustratorにzipファイルを展開させてみる」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

OpenID対応しています OpenIDについて
Powered by Movable Type 5.12

    follow? twitter...     
    available on exchange