HTML5 の Canvas 上でボールをコロコロ for iPhone

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

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

Read More

WebGL を使ってみました

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

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

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

Read More

SVG で遊んでみました

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

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

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

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

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

Read More

HTML5のCanvasを使って雪を降らす

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

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

実行結果

[実際のサンプル]
デモイメージ

デモイメージ

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

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

HTML特殊文字変換ツールを作ってみた

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

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

HTML特殊文字変換ツール

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

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

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

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

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