detergraceの日記

2008-02-12自作ニコニコ動画 ① このエントリーを含むブックマーク

ActionScript勉強中。

ニコニコ動画みたいなサービスを自作してみる。

とりあえず今日は動画の上に文字を流すところまで。

↓こんな感じ↓

f:id:detergrace:20080213012434g:image

【ToDo】

挿入したコメントをDBに保存。

動画の再生時間に合わせてコメントを流す。


むぅ。どうやろう…。

とりあえずタイマーをきって該当の時間にコメントが存在したら流すみたいな方法でいいのかなぁ。そんな方法しか思いつかない。orz

2008-02-023D空間でストリーミング再生実験&ウェブアプリ作成 このエントリーを含むブックマーク

Tube 3D

3次元空間でテクスチャにストリーミング映像を埋め込む実験をかねて、ウェブアプリをつくた。


Tube 3D

URLhttp://stoap.net/movie3d/

☆注意☆ PCのパワーがある程度必要なのでご注意ください


【画面】

f:id:detergrace:20080203124202p:image


説明

動画情報取得

まずはYouTubeのWebAPIをつかってVideo情報を取得。

当初、ActionScriptからXMLを取得する設計で進めてたのだけど、サーバにアップしてセキュリティサンドエラー…。YouTubeのポリシーが同一ドメインのみ許可というのをすっかり忘れてました。仕方ないので取得後、swfに渡す。


3D空間生成

上記で受け取ったVideo情報を3D空間のPlaneオブジェクトに埋め込んむ



var connection:NetConnection = new NetConnection();
connection.connect( null );
var stream: NetStream = new NetStream( connection );
stream.bufferTime =20;
var video:Video = new Video();
video.attachNetStream(stream);

//YouTube FLVファイルのURL
stream.play(urlStr);

stream.pause();
		
//読み込んだflvを使ってVideoStreamMaterialインスタンスを作る
var vsm:VideoStreamMaterial = new VideoStreamMaterial( video , stream );
vsm.doubleSided = true;
//Videoの大きさ320 x 240
var p:Plane = new Plane(vsm,320,240,2,2);
//平面モデルをランダムに配置
p.x = Math.random()*1500 - 550;
p.y = Math.random()*1500 - 700;
p.z = Math.random()*1500 - 300;
p.rotationY = Math.random()*360;
p.rotationX = Math.random()*45;

scene.addChild(p);
scene.renderCamera(camera);
		
//ここまでの処理を追加するモデル数繰り返す

「Next」や「Back」ボタンが押されたタイミングでカメラ(視点)をPlaneオブジェクトの正面にアニメーションさせると同時にストリーミングの再生を開始させる。

機能的に単純だけど表示の仕方を少し変えただけで結構おもしろい。

あとはコレをどうやって料理するかだけど…。

色々作ってみる。

3Dグラフィックス たのしー \(o⌒∇⌒o)/

2008-01-26WEBPON 【機能強化】 このエントリーを含むブックマーク

ウェブポンはキーワードを入力すると自動的にホームページが完成するサービス。作ったままほったらかしてたんだけど安定してアクセスがあるみたいなので、ちょっと手直し。

  1. デザイン修正
  2. 新規で編集モード追加

使い捨てのホームページとしてご利用ください。あと、IEしか使えなけど編集モードに力をいれました。自由なレイアウトホームページを保存できます。


【サイトURL

http://stoap.net/stoap/auto/


編集画面

f:id:detergrace:20080126210703p:image

2008-01-21次世代UI  Papervision3D このエントリーを含むブックマーク

昨今のAjaxに代表されるWeb2.0技術の登場によってWebのユーザインターフェースは大きな進化を遂げました。

画面の更新なしにHTMLを挿入したり、ブラウザ上でドラッグ&ドロップができる。Ajaxの勉強を始めた時、頭の中に色々なWebサービスが浮かんできたのを思い出します。

僕は技術の幅はエンジニアとしての発想の幅に直結するものだと思う。

プログラミングは考えるだけじゃアイデアは出てこないことが多い。

コードを書く中でひらめき、発想が広がることが(僕は)多い。

だから、いろんな言語でコードが書ければひらめきも多くでてくるお。

前回のエントリーでも書いたけど最近ActionScriptの勉強を始めて、つくってみたいサービスがいくつか浮かんできた。そして、また面白そうなものを発見。

WEB3D

Web3Dとはブラウザ上で動作する3Dグラフィックス環境

僕の中でWeb3Dの印象としてはとにかく重い!!というのが一番だった。

学生時代(もう3年ぐらい前)、Java3Dを使ったWebサービスを構築してみたことがあって

JSP + Java3D + Servlet みたいな)

そのとき感じたWeb3Dの欠点が以下のようなものだった

その1:プラグインが必要

⇒Web3Dを表示するためにはたいてい専用のプラグインが必須。その場合クロスブラウザはむずかしいし、Javaなら環境の差を吸収していろんな環境で3Dグラフィックスを表示できると考えたけど、それでも敷居は高い。

その2:重い

⇒ちょっと複雑なモデルを表示しようとする空間を構築する計算に時間がかかる。Java3Dではメモリがすさまじい勢いで上昇したのを覚えてます。

上記の理由により、その可能性は感じながらも一般的なWebサイトでは使いにくいなぁと思っていました。

Papervision 3D

それから年月が流れ

最近FLASHで3Dを表示するライブラリが話題になってるらしい。

昔、FLASHの3Dは重すぎて使い物にならなかったけど、AS3で格段に高速化したことにより

実用的なレベルにまでなったということ

とりあえず、何かサービスを作ってみることにした。


  ___
 / || ̄ ̄|| ∧_∧  x y z …
 |  ||__||(    ) 
  ̄ ̄\三⊂    )


Flicker Blue Bird

できたお

FlickerのWebAPIを使って検索したイメージを3次元空間に出現させるというもの。

その空間を自由に上昇や下降を行いながら遊泳する。


flickerBlueBird

http://stoap.net/bird3d/


【画面】

f:id:detergrace:20080121223947p:image

どうっすか? 僕のPCでは500個ぐらいまで追加してもサクサク動いてくれてる。メモリ少ない人とかやっぱり重いのかな?それでも一時代前に比べればこの速度はすごい。

さらにFLASHは復旧率95%以上!さまざまな環境で動作する。

FLASHでの3Dグラフィックス

Papervision 3D オモシロイ \(^o^)/

ActionScriptとの連携がスムーズなのも特徴。

3Dの概念をユーザインターフェースに持ち込むことで新しい発想のサービスが生まれればいいなぁと大きな可能性を感じました。

ctrlshiftctrlshift2008/01/21 23:45たしかに、新しい言語は新しい機能を持っていますし、可能性が広がりますね。
frickerBlueBirdやりましたよー!
「smile」とかで検索してみたら、「あぁ、空間が笑顔で満たされている……」と、思わぬ幸福感に満たされました。
erogeek的な使い方をしたら、また別の幸福感が得られそうです。(笑)

detergracedetergrace2008/01/22 00:15ctrlshiftさん コメントありがとうございます。
>>erogeek的な使い方をしたら、また別の幸福感が得られそうです。
なるほどwww 360度eroに包まれた空間…素敵ですね(笑)これは実装するっきゃない!! yusukebeさんのサイトでちょっと勉強してみます。\(^o^)/

2008-01-13AS3の勉強をかねてWebサービス開発 このエントリーを含むブックマーク

ToDOリストに入れてからずっと放置してきたAS3の勉強をやってみた。

はじめてのAction Script 3.0

一通り文法の確認後、デモとソースを見比べながら基本的な動きを把握。

イベントリスナーの登録とか、全体的な文法を見ているとJavaのAWTに似ているなぁという印象。これは意外と短期間で習得できるんじゃないか~なんて

とりあえず、何かサービスを作ってみることにした。

FLASHアプリケーションに挑戦!!!

さて、何を作ろうか。FLASHといえばやっぱり動画でしょー!という一方的な思い込みでYoutubeの動画を再生しながらチャットできるサービスを作ることに決定。

さらにせっかくチャットするんであれば、みんなが同じ動画を見ていればおもしろそう。

それで考えた仕様がコレ

【サービスの概要】

・チャット機能
 ⇒せっかくのFLASHなのでキャラクターに噴出しをつけてしゃべる感じに
  キャラクターは自由に移動でき、位置情報は共有する。

・動画登録機能
 ⇒YoutubeのURLを入力すると同じ部屋にいるみんながその動画を同時に
  鑑賞できるようにする。(再生の同期をとる)

・開発言語
 ⇒ ASP.NET C# AS3.0

それでは実装開始!!!

プログラミング開始

まずはサーバ側の実装。DB定義、アクセス用のクラス作成…等々。

普通のチャットなら作ったことがあったけど、今回はチャットといってもキャラクタの位置情報や動画情報などメッセージのやり取りに限定されていないのでちょっと悩んだ。

結局、通信するデータにヘッダ情報として「発言」「位置移動」「動画再生」というデータを持たせて判断させることにした。

次にクライアント側。まぁ、FLASHメインなのであまり書くこともなく、普通のASPX(HTML)。

FLASHの罠

いよいよメインイベント。FLASH wktk

  ___
 / || ̄ ̄|| ∧_∧  ムズイナ
 |  ||__||(    ) 
  ̄ ̄\三⊂    )


うーむ。最近の高機能なIDEに慣れている(ヘタレ)せいかFLASHエディタが使いにくい!! AS3になって複雑なアプリが組めるといってもこの環境じゃ厳しいような…。別売りのプログラマ向け環境だと違うんだろうか?

他にもはまった穴はたくさんあったけどそれは今度書こうとおもう。

☆完成☆

一応完成した。

せっかくのAS3なのに見事なスパゲッティになった。

まぁ、初回だから。次はもっとうまく書ける(汗)


シンクロチューブ 

http://stoap.net/livechat/

説明

http://stoap.net/livechat/help.htm


チャット画面】

f:id:detergrace:20080113124305g:image


(特に注意)

・実験サービスのためバグが含まれている可能性があります。

・IE6,IE7で動作します。FireFoxは不安定。

・2つ以上チャット画面を開いていると動作しません。

・5分以上操作しない場合は強制退室


想定される使い方

・発表の映像を流してみんなで意見交換する

・お気に入りの映像を順番に登録して感想を言い合う。

・みんなで(;´Д`)はぁはぁ

ブラッシュアップ(時間があれば)

こんなのどうかな?

YouTubeの動画はチャット画面から検索できるようにする

・部屋を自分で登録することができるようにする。知り合いのみ入室できるプライベートモードなど

・動画再生中に入室しても再生同期を取る


開発を終えて

AS3については言語仕様うんぬんよりもツールの使い方に手間取った感じです。HTML,JSではできない、もしくは複雑なものを簡単に作れる表現力はやはり魅力的に感じました。

今回のノウハウはいろいろ応用できそうな感じもしてます。

うん。FLASHおもしろい。

kamawadakamawada2008/01/13 16:22面白いっすね。僕も同じこと考えてました。
同期させるところはred5とかのSocketサーバー使うといいと思います。

uzullauzulla2008/01/16 00:57わーいま作ってるのと同じようなの作られた(笑
私はBlazeDSで同期取ろうと思ってました。