html

rails.vim で html5 のタグをハイライト

rails.vim v4.3を入れてもerbの編集ではhtml5のタグをハイライトしないが、以下の手順でhtml5タグを認識させることができた。~/.vim/ftplugin/html.vimを作るかダウンロードしてくる syn keyword htmlTagName contained article aside section header footer…

Drag and DropとFile APIを試す

HTML5のDrag and Drop APIとFile APIを試してみました。Drag And Drop APIは HTML上の要素のドラッグアンドドロップをサポート File APIとの連携でデスクトップからのドラッグアンドドロップをサポート 1番はHTML5でなくてもjQuery等を用いれば実現可能です…

Web FontsをHTML Canvasで使う

といっても特に変わった事をする必要も無く、CSSでWeb Fontsを定義して、Canvasのfontプロパティに定義した名前をセットするだけ。 @font-face{ font-family: MadoMagi; src: url('./MadokaRunes.ttf') format("truetype"); } ctx.textAlign = "center"; ctx…

node.jsでServer-Sent Eventsを試す

HTML5のServer-Sent Eventsの仕様は、HTTP通信を使ってサーバサイドからのデータプッシュを行うCometを、JavaScriptのAPIを定義するなどして使いやすくまとめたものらしい。クライアント側のAPIはSafari5やChrome8では既に実装されているそうなので試してみ…

JettyとiPhoneでWebSocketを試す

iOS 4.2のSafariがWebSocketに対応したらしい。以前JettyとGoogle ChromeでWebSocketを試すために書いたプログラムを使って、iPhoneのWebSocketを試したみた。WebSocketのプロトコルに変更があったようで、以前のプログラムではiPhoneはおろか最新のGoogle C…

iPhone用サイトのフォームにはHTML5の属性を使おう

ガラケーからiPhone4に乗り換えました。おサイフケータイ等のガラパゴス機能は使っていなかったのでiPhoneになって不便を感じることもなく、iPhoneの便利さだけを享受しています。東京にいる限りはソフトバンクの電波で困ることもないですしね。ところでiPho…

CSSでもデータスキームが使える

らしい background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAl0lEQVR4nO3QMREAIAzAwPqXghwMFRk/kOH3XObc2Z+NDtAaoAO0BugArQE6QGuADtAaoAO0BugArQE6QGuADtAaoAO0BugArQE6QGuADtAaoAO0BugArQE6QGuADtAaoAO0BugArQE6Q…

クロスドメイン画像はピクセル操作できない

HTML Canvasでクロスドメイン画像のピクセルを加工することはできない。クロスドメインの画像をdrawImageすることはできる。しかし、クロスドメイン画像をdrawImageしたcanvasからgetImageDataしようとするとエラーになる。 $("<img>").attr("src", "http://www.h…

jQueryでcanvasを扱うときは画像読み込みのタイミングに注意

jQueryの $(function(){ ... }) は、ページの load イベントではなく、DOMContentLoaded というイベントをトリガにして実行されます(Firefoxの場合)。このイベントはHTMLファイルがロードされDOMツリー構築が終了したときに実行されます。画像などの重いコ…

HTML Canvasでアンシャープマスク

最近、HTML5のCanvasの世界ではC言語で鳴らしたガチの画像処理の達人がコード書いてるらしく、恐ろしい最適化がされていてハッキリ言って付いていけませんwま、そんなガチムチマッチョな画像処理ウィザード野郎共はほっといて、HTML5のCanvasで画像処理して…

Shift_JIS is CP932

When a user agent would otherwise use an encoding given in the first column of the following table to either convert content to Unicode characters or convert Unicode characters to bytes, it must instead use the encoding given in the cell i…

Geolocation API

次世代ブラウザアプリケーションの仕様で、位置情報を取得できるGeolocation APIというのがあるらしい。 javascript:(function(){navigator.geolocation.getCurrentPosition(function(p){ location.href="http://www.google.co.jp/maps?q=" + p.coords.latit…

パンくずリストの要素はolかulか?

今、訳あって普段の業務とは関係のない、あるウェブサイトを作成している。自分はWebデザイナじゃないので見た目はウンコでもいいらしいのだが、WebプログラマとしてはHTMLを正しくマークアップしないとダメだろ、という俺制約を勝手に課している。で、パン…

Web Workersで気付いた事

Web Workersで遊んでみて、ちょっと嫌な感じの2つの点に気付いた。 複数ワーカを起動すると重い Windowsではそうでもないのだけど、Macは複数のワーカを立ち上げるとかなり重くなる。Windowsでは1スレッドを1コアで処理しているらしく、ワーカが1つだと1コ…

Web Workersで遊んでみた

HTML5を含む次世代Web規格の一環として、ページ描画・処理のバックグラウンドで処理を実行できるWeb Workersという仕様が策定されています。 Web Workers Using web workers - MDC 既にFirefox 3.5やSafari 4等では一部の機能が実装されているそうなので試し…

ストレージのインターフェースが修正されていた

Firefox 3.5からローカルストレージのインターフェースが、HTML5の仕様に沿ったものに修正されたようです。以前は globalStorage という名前で実装されていましたが、 var ls = window.globalStorage[location.hostname]; ls.setItem("hoge", "ほげ"); windo…

Firefoxの新しいHTML 5 Parser

ナイトリービルドに新しいHTML 5 Parserが入ったのでおまいらテストしる!だそうです。 The WHATWG Blog » Blog Archive » Help Test HTML5 Parsing in Gecko John Resig - HTML 5 Parsing about:configでhtml5.enableをtrueにすると有効になるらしい。そし…

XHTML2がHTML5に統合

W3C,マークアップ言語「XHTML 2」を「HTML 5」に統合へ:ITproブラウザベンダは、ブラウザをアプリケーションプラットフォームにしたいのでXHTML2にやる気が無い、というかブラウザベンダがXHTML2に見切りを付けて作ったのがHTML5の前身のWeb Application規…

window.showModalDialog

returnVal = window.showModalDialog(uri[, arguments][, options]);モーダルで別ウィンドウをオープンするメソッド。IEの実装がHTML 5の仕様に取り込まれたようです。IEは4.0の頃から実装されていたメソッドで、Firefoxでは3.0から実装されたそうです。Fire…

navigator.onLine

まだFirefoxだけかもしれないが、JavaScript で navigator.onLine というプロパティが利用できる。このプロパティはHTML 5の仕様の一つのようで、例えば、オンラインならばローカルストレージとサーバサイドのストレージを同期するという実装を行う場合に、…

DOMストレージ

先日リリースされたIE8にはDOMストレージが実装されており、主要ブラウザのほとんどでDOMストレージが使えるようになりました。以前作成したサンプルをIE8でも動作するように書き直しました。 セッションストレージ ローカルストレージ IE8では、 sessionSto…

HTML Canvasで平均画素法

今日はHTML Canvasで平均画素法を書いてみた。 https://nullpon.moe/dev/sample/canvas/average.html 平均画素法は画像縮小用のアルゴリズムです。例えば元画像と縮小後の画像のサイズの比率が3:2だとすると、2倍に拡大して、1/3に縮小する、という処理を通…

HTML5ではフォームにDELETE、PUTを指定できる?

現在のHTML4やXHTMLの仕様ではform要素のmethod属性の値としてGETとPOSTだけが許可されている。HTML5ではDELETEやPUTも指定可能になりそうだ。まだ草案ですらないEditor's Draftだが、以下のような記述がされている。 The method content attribute is an en…

HTML 5

最近HTML5について調べている。HTML 5ではセマンテックウェブという理想は何処へか飛んでいき、完全にアプリケーションプラットフォームと成り果てた様子だ。まぁ、世の中の大部分のWeb屋さんにとっては未来のセマンテックウェブよりも今日のアプリケーショ…

HTML5

Web系技術サイトで話題のHTML5。 Input要素の拡張 rangeとかnumberとかdatetimeとかurlとか。これは嬉しいねえ。rangeはスピナとかスライダで実装されるのかな? DataGrid これはWebアプリ作成者みんなが待っていたモノでは? こういうのが標準で付いている…