JavaScript 相対的なマウス位置を取得する

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

canvasでゲームを作る際に、canvasの左上を基準としたマウス位置を
取得する処理が必要になることが多々あったのでその方法をメモっておきます。

Read More

AjaxでUnique URLを使い、戻る/進むボタンにも対応させる

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

GmailやTwitterでは、Ajaxによる非同期なやりとりを行い
現在の状態をアンカー(window.location.hash)に書きこむことで保存したURLにも反応するようになっています。

以前私のブログでも書いた Unique URL ってやつですね。
しかしこれだけではまだ不十分です。
戻る/進むボタンが反応しないという問題が残っています。

なぜ反応しないかというと、ハッシュが変更されたさいにそれを知る手段がないからです。

なのでその対処法をざっくりとプログラムで書いてみました。

Read More

11月11日は Binary Day!! 記念に「Binary Painter」作ってみた

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

最近ちまたで11月11日をポッキーの日にしようなんて動きがあるみたいですが、残念ながら先着がいます。

そう!!今日は Binary Day だ!!ってことで記念にJavaScriptでちょっとしたプログラムを作ってみました。

「Binary Painter」は、1と0のみで絵を描こうってプログラムです。 引きめで眺めると結構絵に見える。ような気がします。

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