以前, HTML5 の Canvas 上でボールがコロコロするプログラムを作りました. iPhone の傾きを JavaScript で取れたので iPhone 用に修正してみました. iPhone を傾けるとボールの転がる方向が変わります.

WebGLが気になると言いだして約１年の月日が経ちました. 当時は, Chromeでのみ, しかも起動オプションを指定しないと動かなかったWebGLでしたが, 今ではChromeはもちろんのことIE9やFireFoxでも動作するようになりました.

まったく使いこなせてはいないですが、とりあえず動作するサンプルを作ったので載せておきます.

SVG で遊んでみました。 SVGとは、Scalable Vector Graphicsの略でXMLでベクターグラフィックスを書いちゃおう！！っていうフォーマットです。 ちなみにベクターグラフィックスとは拡大縮小しても劣化しないグラフィック画像文書のことです。イラレとかがそうですね。

SVGは、一時期話題になったのですがIEが採用しないことを決めたせいで普及しなかった悲しい仕様です。 ですが、Chromeでは動きます(さすが)しIE9も採用する(やっとかよ！！)ことを決めているので 今後ちょこちょこ普及していくのかなと思っていたりします。W3Cも勧告出してますしね♪♪

ちょっとしたサンプルを作ってみたので良かったら見ていってください。 国旗を作ってみました。シンボル化機能をうまく使えばオブジェクト指向っぽく書けるのでなかなか面白かったです。 アメリカだけ大きいのは端数をなくすためであって、決して汎アメリカ主義者ではありませんｗ 国旗をダブルクリックすると、SVGのソースが表示されます。

私の環境では、現在(2010/11/8)Chromeでしか動作しませんでした。
他にはFirefox 4betaとIE9が対応もしくは今後対応予定みたいです。

HTML5の勉強がてら、Web Editorを作ってみました。

こんな夏まっただなかだというのに雪を降らせるプログラムを作ってみました。
たいしたことはやってませんが、暑すぎて思いついちゃったんで作っちゃいました。

実行結果

[実際のサンプル]

デモイメージ

色々と付けたし付けたしで何パターンか作ってみましたが、
他に何かアイデアあれば教えてください。

次はゲームを作ろうか。それともジオメトリ変換でも実装してみるか。

ツールへのリンクはこちら

HTML特殊文字変換ツール

HTML特殊文字変換ツールを作ってみました。
というのもブログなんかでコードをハイライト表示したりする際に不便だったからです。

一般的にHTMLでソースコードを埋め込むときにpreタグなんかを使うと思うのですが、
これだと、<や>が使えません。

なので変換するツールを作りました。
リアルタイムで変換されるので、テキストエリアに<なんかを打ってみると
どう変換されているのかがわかると思います。

それと結果が出るテキストエリアをクリックすると自動で全選択になったりしますので
コピペなんかしやすいんじゃないかなぁ～と思ったり思わなかったり。

良かったら使ってください。