Labs

<< 最初 < 前ページ 次ページ > 最後 >>
icon 2010/03/03 Ustream API はじめ
iPhoneの「Ustream Broadcaster」使ってみたけど、すげぇ簡単にライブ配信できる。
自分のiPhoneで早速試してみた(^_^)

                                
justinは完全に差をつけられた感じだなぁ。      
Ustreamはかなり技術力あってSoftbankも出資したし、ストリーミングは「Ustream」一本で間違いないだろう。

って訳で、このサイトも「Ustream」対応しようかと。

ちなみに、CMSとかでHTML出力するブロガーなら、JSやFlashガジェットタグ貼り付けるだけっす。
このサイトみたくフルFlashや自作でガジェット作りたい人は、公式サイトに「Ustream API」を利用。
パッと見だけど、わかりやすくてよく出来てると思う。

■Ustream APIデベロッパー登録
http://developer.ustream.tv/

登録すると「API Key」がゲットできます。

■Ustream APIドキュメント(英語)
http://developer.ustream.tv/data_api/docs

html,json,xml,phpのモードがあるけど、汎用性考えるとJSONっすね。
(PHPはsirializeで返ってくるけど、JSON使えればあんま意味ない気も)
しかも「Flash Client API」まで公開されてる!

■Flash Client API
▽ドキュメント
http://developer.ustream.tv/external/flash/

▽SVN
http://svn.ustream.tv/flash/rsls/

クロスドメイン制限してないのかな?
後々試してみます。


■API例
▽チャンネル一覧
http://api.ustream.tv/json/user/yohei/listAllVideos?key=API Key

■動作確認用のサンプル
class UStreamService extends Service {

    public function getChannels() {
        $params->user = UstreamのユーザID;
        $params->channel = Ustreamチャンネル名;
        $url = $this->getChannelListURL($params);
        $result = file_get_contents($url); 
        $results = json_decode($result);
        return $results
    }

    private function getChannelListURL($params, $mode="json") {
        $url = USTREAM_API_URL."/{$mode}/user/{$params->user}/listAllVideos?key=".USTREAM_API_KEY;
        return $url;
    }
}
仕様決まれば簡単にファイル分離できそうです。
本家サンプルではcurl使ってるけど、この程度ならfile_get_contentsで十分かな?
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;
    }
<< 最初 < 前ページ 次ページ > 最後 >>

このサイトについて

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

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