ホーム > タグ > range
range
Canvasを試してみる その6 完結
- 2010-05-19 (水)
- html5
つーわけでCanvasの試行がてら
TiltShift Generatorもどきを作ってきたが
一通りの機能を設定したところで完成とする。
TiltShiftかどうかすら疑わしい出来だが。
本当はfile apiも使って任意のデータを編集できるようにしたかったが
それはsafariが対応してからにしよう。
感想
HTML5 vs Flashって?
だれが言い出したんだろうか。
何から何まで(でもないが)クライアントサイドで出来てしまうFlashは優秀だ。
確かに、今回の”TiltShift Generatorもどき”作りながら
「ブラー処理ひとつ出来ぬモノにFlashの代わりが務まろうなど片腹痛いわ!」
とか自分の技術力を棚に上げて思ったりもしたが
別にブラー処理なんてクライアントサイドで実装する必要も無い。
負荷のかかる処理なんかは、それこそ雲の向こうで処理してもらって
その結果が満足に表示できれば何ら問題ないわけで。
単純なHTML5 vs Flashって事で比較すると機能面でFlashのコールド勝ちだけど
そもそもそんな単純な話じゃないので比較自体意味を成さない。
で、HTML5っていつ普及するの?
単純な疑問がここ。
Flashの最も優れた所はクロスブラウザであるところだと思っている。
個人的な意見だがFlashが爆発的に普及したのは
・ネスケとIEで同じように見える
・金額(利幅)が大きい
っていう制作側に対する恩恵が大きかったからで
ユーザーが望んだ結果と言うよりは送り手側の都合の方が大きかったからだと思っている。
僕が2000年代初めに働いていた会社では
全部のブラウザで同じ見え方にするっていう事が何よりも優先されていて
Win、Mac間のテキストの大きさとかマージンの調整とか何かと面倒が多かった(cssが普及する前だったし)。
でもFlashだったらpluginさえ入っていれば見え方も同じ、さらにレイアウトも自由自在。
「じゃFlashにしましょうよ」は魔法の言葉w。
それにFlashだと一人、もしくは少人数で制作が可能なうえ、
大量のHTMLをコーディングするより金額が大きいと言う状況だった。
今考えるとベクターベースで容量が軽いとかはどちらかというと外向けの理由の様な気がする。
なのでHTML5の実装状況が各ブラウザでまちまちってのはホントいただけない。
将来的にはマシになるかと言えばどうだろう?
未だにIE6がーとかだしなー。
とは言っても
今後Flashだけで家が建てられるとか言う状況でもない。
広告費は減っているし、スペシャルコンテンツでウン百万とかいう時代は多分終わりつつある。
というかFlashはスキップされるためのオープニングとかじゃなくて
もっとFlashの機能が最大限活かされるイカした場所で使われるべきだと思う(具体例は出てこないけど)。
というわけで
まぁ色々書いては見たけど
そんなことより
次はCanvasのアニメーションを試してみたいと思う。
だってほら
「動いてる、動いてる、いいなーーわっくわくするなーー♪」
とか言いたいじゃん。
- Comments: 0
- Trackbacks: 0
Canvasを試してみる その4
- 2010-05-17 (月)
- html5
前回からの続き。
drawImageにはCanvasも指定可能。
なので元画像をCanvasに一度縮小。
ブラー処理。
別Canvasへ元のサイズへ拡大して表示。
という処理で比較的短い処理時間でそれなりのブラーを得られるようにした。
さらにぼかし画像に対してアルファチャンネルマスクを追加。
なお、マウスの座標取得に関しては
以下のサイトを参考にさせていただいた。
- Comments: 0
- Trackbacks: 0
Canvasを試してみる その3
- 2010-05-14 (金)
- html5
前回からの続き。
今回はブラーをかける。
まずは周囲の8pxと自身の色の平均値を計算してブラーをかけてみる。
ボケが弱い。
とりあえず試行錯誤。サンプルhtmlにリンクしてますが
処理が激重の為、閲覧周囲。
・色の平均を取るマスを増やしてみた。

html(別ウインドウ)
・処理を複数回連続させてみた。

html(別ウインドウ)
どっちも適度なボケ味を出そうとするとレインボーカーソル回りっぱなしで
とてもじゃないが実用に耐えるような処理速度じゃない。
ちょっと他の方法も探ってみよう。
- Comments: 0
- Trackbacks: 0
Canvasを試してみる
- 2010-05-12 (水)
- html5
さすがにそろそろ触っておかないと
と、html5の勉強を始める。
まずは取っつきやすそうなCanvasから。
さらーっといろんなサイト見てると頑張ればTiltShift Generatorもどきが作れそう?
大きすぎるくらいだが当面の目標を「html5でTiltShift Generator」に設定。
とりあえず挫折するまで頑張ろうと思う。
まぁ、『威力棒Vii』くらいの完成度になるだろうけどw
今日の内容
・画像のピクセル操作
・input要素のtype属性range
safari4でのみ動作確認済み。
画像処理の所のプログラムがダメダメなので処理に多少時間がかかってる。
参考サイト
http://www.html5.jp/canvas/
http://f32.aaa.livedoor.jp/~azusa/?t=html5&p=event_attributes
http://html5.blog20.fc2.com/blog-entry-16.html
- Comments: 0
- Trackbacks: 0
Home > Tags > range
- Search
- Feeds






