Cover flow4fxos

http://goo.gl/sxKC6Q

自己紹介 @inuchin

ゲーム系の技術の人

最近はもっぱらNFCとiBeacon

Haxe + OpenFLで遊んでます

HTML5で ↓ の奴作った


先週は大洗に居ました。


動機

Videoタグが使いたかった

標準のムービープレイヤーがしょぼいよね

よし、CoverFlowをパクインスパイアしよう！


CoverFlowをご存知ない方へ

ちょっと前のiTunesとかに

あったんですが、気がついた

ら無くなってた。

MacのFinderにいるけど使わ

ない…


CoverFlowのイメージ画像


どうやって実現しようか

CSS3のTransformとPerspective

perspective(200px) rotateY(45deg)

単位のつけ忘れに注意

degreeなのでπ ／ネタができない。

悔しい。


ここで詰まる

Videoを呼び出すのに、メディア関係のディレクトリにアクセスする必要があった。(アプリのsandbox無いは無理？)

権限が必要 "type": "privileged",

"permissions": {

"device-storage:videos" : {

"access" : "readonly"

}

}


ここまでしかできんかった

フリック入力は電子書籍ビュアーの奴を持ってくるつもりが、調整不足で動かず。

ボタンで代用


こんな感じ

Firefox OS Simulatorの画面を

お楽しみください


実機での動作

重すぎて

実用にレベルに

ならへん

やないかい

字余り


感想

恐らく原因はメディアの読み込み速度

多重再生してなければそれなり


検索ポインタ的なもの var videos = navigator.getDeviceStorage('videos'); var cursor = videos.enumerate(); var count = 0; cursor.onsuccess = function () { if (this.result) { appendLine = '<tr class="medialine"><td class="mediadata">'+count+'</td><td class="mediadata">'+this.result.name+'</td><td class="mediadata">'+this.result.lastModifiedDate+'</td></tr>'; var thumb = document.createElement("video"); if( thumb.canPlayType(this.result.type) ){ thumb.controls = true; thumb.src = URL.createObjectURL(this.result); thumb.preload = "true"; thumb.autoplay = "true"; thumb.loop = "true"; thumb.classList.add("thumbnaildata_img"); var div = document.createElement("div"); div.classList.add("thumbnaildata"); div.id = "thumb"+count; div.appendChild(thumb); $("#thumbnail").append(div); $("#medialist").append(appendLine); maxsize = count++; } // 次のエントリを取得する this.continue(); } }


CSS3のTransformについて

4x4のMatrix(行列)が使えますので、自前で透視投影変換を行えば、OrthoPerspective（正射投影）とかもできると思います。

WebGLを使うまでもない3Dならこれで！


Cover flow4fxos

Documents

Transcript of Cover flow4fxos