Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
http://goo.gl/sxKC6Q
自己紹介
@inuchin
 ゲーム系の技術の人
 最近はもっぱらNFCとiBeacon
 Haxe + OpenFLで遊んでます
 HTML5で ↓ の奴作った


http://goo.gl/sxKC6Q
先週は大洗に
居ました。
http://goo.gl/sxKC6Q
動機
Videoタグが使いたかった
標準のムービープレイヤーが

しょぼいよね
よし、CoverFlowをパクインス
パイアしよう!
http://goo.gl/sxKC6Q
CoverFlowをご存知ない方へ
ちょっと前のiTunesとかに

あったんですが、気がついた
ら無くなってた。
MacのFinderにいるけど使わ

ない…
http://goo.gl/sxKC6Q
CoverFlowのイメージ画像

http://goo.gl/sxKC6Q
http://goo.gl/sxKC6Q
CoverFlowのイメージ画像

http://goo.gl/sxKC6Q
http://goo.gl/sxKC6Q
どうやって実現しようか


CSS3のTransformとPerspective
perspective(200px) rotateY(45deg)
単位のつけ忘れに注意
degreeなのでπ /ネタができない。
悔しい。

http://g...
ここで詰まる
Videoを呼び出すのに、メディア関係のディ
レクトリにアクセスする必要があった。(アプ
リのsandbox無いは無理?)
 権限が必要


"type": "privileged",
"permissions": {
"de...
ここまでしかできんかった
フリック入力は電子書籍ビュアーの奴を
持ってくるつもりが、調整不足で動かず。
 ボタンで代用


http://goo.gl/sxKC6Q
こんな感じ

Firefox OS Simulatorの画面を
お楽しみください

http://goo.gl/sxKC6Q
実機での動作

字
余
り

な
重
ら 実 す
や
へ 用 ぎ
な ん に
て
い
レ
か
ベ
い
ル
に

http://goo.gl/sxKC6Q
感想
恐らく原因はメディアの読み込み速度
 多重再生してなければそれなり


http://goo.gl/sxKC6Q
検索ポインタ的なもの
var videos = navigator.getDeviceStorage('videos');
var cursor = videos.enumerate();
var count = 0;
cursor.onsuc...
CSS3のTransformについて
4x4のMatrix(行列)が使えますので、自前で
透視投影変換を行えば、OrthoPerspective
(正射投影)とかもできると思います。
 WebGLを使うまでもない3Dならこれで!


htt...
Upcoming SlideShare
Loading in …5
×

Cover flow4fxos

731 views

Published on

  • Be the first to comment

  • Be the first to like this

Cover flow4fxos

  1. 1. http://goo.gl/sxKC6Q
  2. 2. 自己紹介 @inuchin  ゲーム系の技術の人  最近はもっぱらNFCとiBeacon  Haxe + OpenFLで遊んでます  HTML5で ↓ の奴作った  http://goo.gl/sxKC6Q
  3. 3. 先週は大洗に 居ました。 http://goo.gl/sxKC6Q
  4. 4. 動機 Videoタグが使いたかった 標準のムービープレイヤーが しょぼいよね よし、CoverFlowをパクインス パイアしよう! http://goo.gl/sxKC6Q
  5. 5. CoverFlowをご存知ない方へ ちょっと前のiTunesとかに あったんですが、気がついた ら無くなってた。 MacのFinderにいるけど使わ ない… http://goo.gl/sxKC6Q
  6. 6. CoverFlowのイメージ画像 http://goo.gl/sxKC6Q
  7. 7. http://goo.gl/sxKC6Q
  8. 8. CoverFlowのイメージ画像 http://goo.gl/sxKC6Q
  9. 9. http://goo.gl/sxKC6Q
  10. 10. どうやって実現しようか  CSS3のTransformとPerspective perspective(200px) rotateY(45deg) 単位のつけ忘れに注意 degreeなのでπ /ネタができない。 悔しい。 http://goo.gl/sxKC6Q
  11. 11. ここで詰まる Videoを呼び出すのに、メディア関係のディ レクトリにアクセスする必要があった。(アプ リのsandbox無いは無理?)  権限が必要  "type": "privileged", "permissions": { "device-storage:videos" : { "access" : "readonly" } } http://goo.gl/sxKC6Q
  12. 12. ここまでしかできんかった フリック入力は電子書籍ビュアーの奴を 持ってくるつもりが、調整不足で動かず。  ボタンで代用  http://goo.gl/sxKC6Q
  13. 13. こんな感じ Firefox OS Simulatorの画面を お楽しみください http://goo.gl/sxKC6Q
  14. 14. 実機での動作 字 余 り な 重 ら 実 す や へ 用 ぎ な ん に て い レ か ベ い ル に http://goo.gl/sxKC6Q
  15. 15. 感想 恐らく原因はメディアの読み込み速度  多重再生してなければそれなり  http://goo.gl/sxKC6Q
  16. 16. 検索ポインタ的なもの 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(); } } http://goo.gl/sxKC6Q
  17. 17. CSS3のTransformについて 4x4のMatrix(行列)が使えますので、自前で 透視投影変換を行えば、OrthoPerspective (正射投影)とかもできると思います。  WebGLを使うまでもない3Dならこれで!  http://goo.gl/sxKC6Q

×