Labs

<< 最初 < 前ページ 次ページ > 最後 >>
icon 2010/03/03 GoogleMap API はじめ
おぉ!GoogleMapAPIのFlex用ライブラリーがswc形式でGoogle本家にあがってます(^_^)/
これで、わざわざFlashとJavaScriptの連携しなくてもよさげ?
3分クッキングで作成してみた。

■google_map.swf
htmlTextは機能ダメダメだけど、imgタグでswfを直で読めるんだぁ・・・ (^_^)つ ペタッ

まだクラスの中身を詳しく見てないけど、swf間で通信(LocalConnection等)を実装すれば色んなことできそうです。

■Google Maps API for Flash - FlexBuilder
▽チュートリアル
http://code.google.com/intl/ja/apis/maps/documentation/flash/tutorial-flexbuilder.html

▽ダウンロード
http://maps.googleapis.com/maps/flash/release/sdk.zip

■Maps API キーの取得
ドメイン毎にMapsAPIキーを生成できます。
http://code.google.com/intl/ja/apis/maps/signup.html
ドメイン毎に発行なので、開発環境と本番ではキーを別々にしなければいけません。

プログラムは、クラス実装さえわかれば難しいことはなさげです。
ARK-Web」にわかりやすくまとめられています。
実践編ではFlexとJavaScript連携でやってますが、Flexオンリーでやった方が軽そうだけど、
HTML派に考慮しての事かと思います。

■動作確認サンプル
▽ソース
これだけで、あっさり表示されます。
    import com.google.maps.controls.ZoomControl;
    import com.google.maps.controls.MapTypeControl;
    import com.google.maps.controls.PositionControl;
    import com.google.maps.LatLng;
    import com.google.maps.Map;
    import com.google.maps.MapEvent;
    import com.google.maps.MapType;

    private var map:Map;
    private var locateX:Number = 35.728912;
    private var locateY:Number = 139.7095082;

    private function onInitialize(event:Event):void {
        map = new Map();
        map.key = GoogleMapキー;
        map.addEventListener(MapEvent.MAP_READY, onMapReady);
        mapContainer.addChild(map);
    }

    private function onResize(event:Event):void {
        map.setSize(new Point(mapContainer.width, mapContainer.height));		
    }

    private function onMapReady(event:Event):void {
        map.setCenter(new LatLng(locateX, locateY), 14, MapType.NORMAL_MAP_TYPE);
        map.addControl(new ZoomControl());
        map.addControl(new PositionControl());
        map.addControl(new MapTypeControl());
    }
locateX、locateYの位置指定は、GoogleMapのパラメータを直接埋め込んでますが、
各パラメータをGoogleからシームレスにやり取りできるかですね。
只今、このサイトと連動できるよう作成中で、何だか面白くなってきました。
icon 2010/03/01 FlexにないVideoパッケージ
がちょーん!!FlashCSだけに「FlvPlayback」等の便利なVideoコンポーネントがあるw
Flexにないコンポーネントってあるんだねぇ(^_^;)
どうりで最近動画プレイヤーが出回ってると思ったら・・・。

■FlashのVideoコンポーネント(Flexには標準で未実装)

ビデオプレイヤーの再生・停止は勿論、シークやボリューム等もGUIだけで作れちゃうん。
これならデザイナーさんには重宝されますなぁ(^_^)
とは言っても、外部ビデオファイル取得とか他とのマッシュアップとかの処理は、結局ガリガリかかないといけないが・・・。

しかし、こんな便利なもんあるなら俺もFlashで作ろうか?と。
けど「fl.video」パッケージを探せば何とかなるんじゃね?と調べたら、ありました!


■Adobe Flash Media Server productivity tool
FMS用のツールなんだけど、Flexでも使えそうです。
Adobe本家から「Adobe Flash Media Server productivity tool」をダウンロードできます。

https://www.adobe.com/cfusion/entitlement/index.cfm?event=custom&sku=FS0000503&e=fms35

FMS用のツールで、他にもやら面白げなライブラリーがある。

「Dynamic Streaming Class」って何?何?これ??(^_^)
もしかして動的にAS書き出せちゃうのか???(違うか。。。)

とりあえず後回しで「FLVPlayback2.5」を使ってみる。

               
サンプルでスキンもswfで用意されている。
欲を言えば、スキンはswfでなくてas + 素材で欲しかったなぁ。
FlashCSみたくカスタムコンポーネント化すれば、もっと便利かも

■サンプルソース
     private function playTopVideo():void {
        var video:FLVPlayback = new FLVPlayback();
        var ui:UIComponent = new UIComponent();
        view.topVideo.addChild(ui);
        ui.addChild( video );
        video.width = 320;
        video.height = 240;
        video.source = "movie/empire.mp4";
        video.skinBackgroundColor = 0x666666;
        video.skin = "swf/FLVPlaybackSkins/SkinUnderAll.swf";
        video.scaleMode = VideoScaleMode.MAINTAIN_ASPECT_RATIO;
        video.skinAutoHide = false;
    }
icon 2010/02/25 Twitter & mixi API クラス分離
かなり煩雑なコードになってきたので、クラス化と言う名のリファクタリング。
意地でもPEARや他のライブラリは使わないぞw

■修正内容 VoiceService ver0.2
(1) MixiVoice、Twitterクラス化・ファイル整理

VoiceService
|
getVoices()
|
MixiVoice --> HTTPService
Twitter --> HTTPService



(2) HTTPサービスクラス「HTTPService」作成
「HTTPRequestService」の命名の方が正しいかも!?

(3) 同時投稿機能追加
とり合えず最低限の実装
・Twitterは、Basic認証でなくてtokenにするのが今後の課題
・Mixiは、htmlパースとログイン処理が課題

■VoiceService(抜粋)
ファイル分離して非常にわかりやすくなったv(^_^)v
    /**
     * mixi & Twitterボイス取得
     **/
    public function getVoices()
    {
        $mixi_voice = new MixiVoice();
        $voices['mixi'] = $mixi_voice->getVoices();

        $twitter = new Twitter();
        $voices['twitter'] = $twitter->getUserTimeline();

        $results = $this->_marge_voices($voices);
        dump($results);
        return $results;
    }

    /**
     * mixi & Twitterボイス同時投稿
     **/
    public function postVoice($values)
    {
        if ($values->message && $values->password == VOICE_PASSWORD) {
            $mixi_voice = new MixiVoice();
            $is_mixi = $mixi_voice->postMessage($values->message);

            $twitter = new Twitter();
            $is_twitter = $twitter->postMessage($values->message);

            return ($is_mixi && $is_twitter);
        }
    }
※「$this->_marge_voices($voices)」は、MixiVoiceとTwitterデータをマージしてJSON化してる

■MixiVoice(抜粋)
「HTTPService->request」を実装して、paramsをオブジェクトで渡すようにした。
とりあえず、こんなもんかな?

    /**
     * mixiボイス取得
     **/
    public function getVoices()
    {
        $this->login();

        $params->url = MIXI_ECHO_LIST_URL;
        $params->method = 'POST';

        $html = $this->request($params);
        $results = $this->parseVoice($html);
        return json_encode($results);
    }

■Twitter(抜粋)
このクラス名だと、また膨大になりそうな予感だけど。。。
これもパラメータをオブジェクトで渡すようにした。

    /**
     * Twitter投稿
     **/
    public function postMessage($message)
    {
        if (!$message) return;

        $posts['status'] = $message;

        $params->posts = $posts;
        $params->url = TWITTER_UPDATE_JSON_URL;
        $params->basic->id = TWITTER_USER_NAME;
        $params->basic->password = TWITTER_PASS;

        $results = $this->curlRequest($params);
        return $results;
    }

■HTTPService(抜粋)
これが肝のクラス。
なので、頭が整理できてなずサッパリ(T_T)

cokkie処理やBasic認証が両立できなくて、とりあえず「curl」と「file_get_contents」の併用です。

▽各メリット
・curl:細かいことができそうで速い
・file_get_contents:ソースが短くできそう

最終的にはcurlで統一するかな?

    /**
     * HTTPリクエスト(curl)
     **/
    public function curlRequest($params)
    {
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, $params->url);
        curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 2);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

        //POST
        if ($params->posts) {
            $posts = http_build_query($params->posts, '', '&');
            curl_setopt($ch, CURLOPT_POST, 1);
            curl_setopt($ch, CURLOPT_POSTFIELDS, $posts);
        }

        //cookies
        //TODO 
        //curl_setopt($ch, CURLOPT_COOKIEJAR, "cookie");

        //BASIC認証
        if ($params->basic) {
            curl_setopt($ch, CURLOPT_USERPWD, "{$params->basic->id}:{$params->basic->password}");
            dump($params->basic);
        }
        $results = curl_exec($ch);
        curl_close($ch);
        return $results;
    }

    /**
     * HTTPリクエスト(file_get_contents)
     **/
    public function request($params) {
        $headers[] = 'Content-Type: application/x-www-form-urlencoded';

        if (is_array($params->posts)) {
            $content = http_build_query($params->posts, '', '&');
            $content_length = strlen($content);
            $headers[] = "Content-Length: {$content_length}";
            $requests['http']['content'] = $content;
        }

        //Basic認証
        if ($params->basic) {
            $basic = base64_encode("{$params->basic->id}:{$params->basic->password}");
            $header[] = "Authorization: Basic ".$basic;
        }

        //cokkie
        //TODO paramsかセッションにする?
        if ($this->cookie) {
            $headers[] = "Cookie: {$this->cookie}";
        }

        if ($params->method) {
            $method = $params->method;
        } else {
            $method = 'GET';
        }
        $requests['http']['method'] = $method;
        $requests['http']['header'] = implode("\r\n", $headers);

        $context = stream_context_create($requests);
        $contents = file_get_contents($params->url, false, $context);

        //cookie取得・設定
        if ($http_response_header) {
            $this->setCookieForHttpResponseHeader($http_response_header);
        }
        return $contents;
    }
※「$this->setCookieForHttpResponseHeader」は、HTTPヘッダーをパース
<< 最初 < 前ページ 次ページ > 最後 >>

このサイトについて

HTML5 & CSS3化しつつあるので、現在IEには対応してません。
できれば、Google Chromeやら Apple SafariのWebKit系をお勧めします。

DBからプログラムまで一応全て自作なので、バグってたらすいません。
実験でFlash版(Flex版)を先に作りましたが、ちょっと停止してます。

プロフィール

新宿近辺でSE & プログラマーしてます。
Webアプリの開発・設計とか、最近はiPhoneとか奮闘してます。
デザインはさっぱりです。

音楽は、昔からCubase打ち込み人間で、そっちの方が経歴は長いですが、最近はやる暇がないです。。。

今は、Gon's Privates ってバンドのキーボードやってます。
単発的に、なんちゃってジャズ系のライブもやってます。

名古屋生まれなのでドラゴンズ好きです。

Info && SNS

Gmail

 yohei.yoshikawa@gmail.com

Twitter

 http://twitter.com/yoo_yoo_yoo

あんまつぶやきませんが、一応技術系メインで使ってます。情報交換はこちらへ

FaceBook

 http://www.facebook.com/#!/profile.php?id=1439130626

海外の知り合いがいないので閑散としてます。

mixi

 http://mixi.jp/show_profile.pl?id=230072

音楽仲間とかはこっちメインでやってます。興味があればこちらへ