MediaRSSをフィードとするフォトビューア

HTML5

JAM - HTML5 and Flash
Session2 「MediaRSSをフィードとするフォトビューアをつくってください」

との事で、机の上に無造作に置かれたポラロイドを表現。


forked from: Simple MediaRSS Viewer - jsdo.it - share JavaScript, HTML5 and CSS

回転させる為のCSSのtransformがIEだと効かないので、IE用にマトリックスフィルタを使用。

また、jsdoitだと画像のアップロードができない(？)ので、画像はdataスキームで埋め込み。

何気にCSSでも埋め込めるんだなと。見た目は酷いけど。


しかしセキュリティ周りの問題なんだろうけど、canvas使ってクロスドメイン画像のピクセル操作はできないっぽいのは何だかなと。。

ブラウザとの差異の吸収とか面倒くさい事考える位なら、まだActionScriptで書いちゃった方がいいのかもと思ったり思わなかったり。

砂時計

HTML5

javascriptが速いブラウザじゃないと厳しめ。


砂時計 - jsdo.it - share JavaScript, HTML5 and CSS


初めはfillStyleとfillRect()で砂粒書いてたんだけど、重い→数減らす→つまんない→fillStyleなくす(同色)→数増やせたけどつまんない→getImageData()で直書き
な流れ。

まぁ描画が1回/フレームになったんで速くなったはなったんだけど、やはりブラウザによって速度が変わるのが頂けない。

Firefoxとか数の問題じゃないっぽいし。。

Opera, Safari辺りだとまだ数増やしても見れる。

落ちる砂を見つめすぎてトリップしちゃいそうになったのは内緒(笑

地形生成

HTML5

興味があったので。

ハイトマップを作って線で結んで表示してみただけだけど、何だかそれっぽい。

しかし色付けたい。


地形生成 - jsdo.it - share JavaScript, HTML5 and CSS



あと、先日のBouningen ClockがHot Code入りしてた。

人間の動作で時計ったらコレかなと。


Bouningen Clock [forked from: Human Clock] - jsdo.it - share JavaScript, HTML5 and CSS

JSDOITを追え！

HTML5

Wonderfl版を移植した。

Wonderflの時はSprite使ってたんで、個別にクリックイベント登録してたんだけど、今回はwindow.onclickのみ。


JSDOITを追え！ - jsdo.it - share JavaScript, HTML5 and CSS

canvasはAS3でいうBitmapData的な感じで書けるかな。

Google Mapを回転

HTML5

Google Mapである必要はない。。

回転ボタンを押している間、地図が回転する。
地図を読んでいる雰囲気なノリ。
IE非対応。


地図を回転 - jsdo.it - share JavaScript, HTML5 and CSS

body onloadはwindow.onload = function(){};て書き方ができるのか。

ブラウザ外からドラッグアンドドロップ

HTML5

先日ローンチされたjsdo.itに参戦。

jsticeはコードネームだったのか。

HTML5という事で、今の所Canvasを使った投稿が多い様(というか書き始めると が用意されてるん)だけど、canvas使わなくてもいいのよね？

という訳で、気になっていたブラウザ外からのドラッグアンドドロップを書いてみた
(Firefox3.6.3のみで動作確認)。


ブラウザ外からドラッグアンドドロップ - jsdo.it - share JavaScript, HTML5 and CSS

HTMLをどこから書けばいいのかと思ったりしたけど、iframeで呼び出されてるっぽく、内を書けばいいっぽい。

body onloadはどうすんだ、body内bodyでいいのかな。jqueryの$(function(){})でいいのか。

しかしHTML5、HTML5て言ってるけど、結局の所、HTML5はJavascriptまで含めてHTML5という事なのかしら。