どう違うかというと、@keyframesのアニメーション名にクオートを付けるとWebkit系は動くけどFirefox5は動かないみたい。

Demo

つまりこういうこと。（説明簡略化のためベンダプレフィックスは除いてます）

/* Webkitは動くけどFirefoxは動かない */
@keyframas 'hoge' {
    ...
}

/* WebkitでもFirefoxでも動く */
@keyframas hoge {
    ...
}

で、仕様はどうなってるか見てみると

CSS Animations Module Level 3

keyframes-rule: ‘@keyframes’ IDENT ‘{’ keyframes-blocks ‘}’;

って書いてあります。で、IDENTってところにキーフレーム名がくるわけですが、このIDENTってのが何かというは別の仕様に書いてあって

Syntax and basic data types

ここで定義されてるんですけど、IDENTはどうもクオートがつかない文字っぽいんですよね。なのでFirefoxでクオートがあると動かないのは仕様通りな気がします。ちなみにAnimationsの仕様書のExampleのコードはクオートありになってるんですが、これはExampleのコードが間違えなのかな。。？

さらに、Safariのドキュメント見てみると

Safari CSS Reference: Supported CSS Rules

keyframes-rule: ‘@-webkit-keyframes’ [ IDENT | STRING ] ‘{’ keyframes-blocks ‘}’;

って書いてあって、W3Cのほうの仕様書と違ってSTRINGが追加されてます。STRINGはクオートで囲む文字列のようなので、これに従うとWebkitのほうが正しいわけです。

まあまだ全然仕様が固まってない状態なのでこういうのもしょうがないんでしょうか。

まずdotcloudをインストールする。特に問題ない。

$ sudo easy_install dotcloud

アプリケーションをつくる。APIキーを設定してない場合は設定しろと出るので指示通りsettingsページに書いてあるAPIキーを入力する。

$ dotcloud create hokaccha
Warning: /Users/hokamura/.dotcloud/dotcloud.conf does not exist.
Enter your api key (You can find it at http://www.dotcloud.com/account/settings):

プロジェクトを作る。

$ dotcloud deploy -t nodejs hokaccha.helloworld
Created "hokaccha.helloworld".

最低限必要なのはsupervisord.confという設定ファイル。ここで起動用のスクリプトを指定する。supervisord.confの中身はこんな感じ。

[program:node]
command = node server.js
directory = /home/dotcloud/current

同じディレクトリに指定したserver.jsを置いてHello Worldの出力するサーバーを書く。

var http = require('http');

http.createServer(function (req, res){
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Hello World!!');
}).listen(8080);

これでこの二つのファイルを置いたディレクトリを指定してアップする。

$ dotcloud push hokaccha.helloworld .

これだけだった。10分くらいでできて超簡単。

http://helloworld.hokaccha.dotcloud.com/

次はExpressとMongoDBやってみる予定。

どうもfont-sizeが11px、10px、9pxのときにマルチバイト一文字につき、offsetWidthの値がそれぞれ1pxづつ大きい値になるというバグっぽい。

「あ」の文字のspan要素のoffsetWidthをJSで取得するデモ。

Demo

これiPhoneで見るとこうなる。

なんかIEでもfont-sizeが11px指定のときに12pxで表示されるというバグがあった気がするけど、このバグはさらに凶悪で、フォントサイズは指定したサイズになるけどoffsetWidthだけ指定のサイズより大きくなるというもの。それであのようなずれが生じるみたいです。

JSでoffsetWidthの値の変化がとれるということはバグがあるかどうか判定できそうだということでやってみた。

var mbFontsizeWidthCalcBug = (function(doc) {
    var body = doc.body;
    var span = doc.createElement('span');
    var width = {};
    var i = 10;

    span.style.position = 'absolute';
    span.style.visibility = 'hidden';
    span.innerHTML = 'あ';
    body.appendChild(span);

    for (;i < 13; i++) {
        span.style.fontSize = i + 'px';
        width[i] = span.offsetWidth;
    }

    body.removeChild(span);
    body = span = null;

    return (width[12] === width[11] && width[11] - 1 === width[10]);
})(document);

Demo

とりあえず判定はできるっぽい。これでModernizrみたいにhtml要素とかにclassつければなんとかCSSで分岐できそうではある。が、うーん。。。

1. about:debug

ブラウザのアドレスバーにabout:debugと打ち込むとJavaScriptのコンソールが現れます。これ簡単でいいんですけど、実機（Xperia ack）で試したらなんかよく（OSごと）落ちるし、いちいち入力するの面倒だしでちょっと微妙でした。あとどのバージョンからこれに対応してるかもよく知らない。

2. adb logcat

たぶんこっちが正当法。AndroidSDKに入ってるadb（Android Debug Bridge）というツールを使います。adbはAndroidSDKの tools/adb にあります。

まずエミュレータの場合。エミュレータを立ち上げたら以下のコマンドで接続を確認します。

$ cd /path/to/AndroidSDK/tools
$ ./adb devices
List of devices attached 
emulator-5554   device

接続が確認できたら

$ ./adb logcat

これでブラウザを起動してconsole.logの出力を見たいページを表示すればコンソールに出力が流れてきます。ただし、console.log以外のもろもろのデバッグ情報もダーっと流れてくるので適当にgrepかけとくと吉。

$ ./adb logcat | grep browser

次、実機で確認する方法。まず実機のほうの設定でデバッグの設定をします。端末によるのかもしれないけど、Xperia ackの場合は「設定」→「アプリケーション」→「開発」→「USBデバッグ」にチェックします。で、USBで接続するとadbで認識されるようになるはず。

$ ./adb devices
List of devices attached 
xxxxxxxxxxxxxxx    device

認識されてたらさっきと同じようにlogcatすればconsole.logの出力とかがコンソールに流れてきます。こんな感じ出る。

ちなみに接続が複数あったらadb logcatの起動がエラーになるので、以下のように指定します。

# エミュレーターの場合
$ ./adb -e logcat

# 実機の場合
$ ./adb -d logcat

# serial numberを指定して起動する場合
$ ./adb -s <serial number> logcat

-sのserial numberってのは adb deviceds したときに表示される文字列のことです。

でもなんか入門HTML5を読んだら、localStorage実装されてたらStorageEventも実装されてるよって書いてあったから試してみたけどやっぱ動かなかったんでちゃんと調べたら、そもそも勘違いしてたことに気づいた。

普通に

window.addEventListener('storage', function(evt) {
    console.log(evt);
}, false);

ってスクリプトを書いたHTMLを開いて、コンソールとかで localStorage.setItem(’hoge’, Math.random()) とか実行して発火しなかったんで、なんだよやっぱ動かねーじゃねーかと思ったんだけど、仕様書をよく読んだらこんな表記があった。

When the setItem(), removeItem(), and clear() methods are called on a Storage object x that is associated with a local storage area, if the methods did something, then in every Document object whose Window object’s localStorage attribute’s Storage object is associated with the same storage area, other than x, a storage event must be fired, as described below.

つまり、Storageを更新した場合、Storageを更新したドキュメント以外の、同じStorage領域を持ってるドキュメントでStorageEventが発火するってことでＯＫ？

ＯＫだった。さっきテストしてたやつを二つ開いて、同じようにコンソールでStorage更新したら実行してない方のウィンドウで発火してた。こういう使い方だったのね。

sugyanのツイートで気づいたけど、なんかChromeでいつの間にか等幅フォントがOsakaになってて、全然等幅じゃなくなってた。前からだっけ？

こんな感じになってた。

とりあえずフォントの設定でMonacoにしといた。（なぜかOsaka-Monoがない？）

等幅になった。

音声入力APIはフォームの入力を音声から取得してテキストに変換してくれるAPIです。

HTML Speech Input API Specification

使い方は超かんたん。speech属性をinput要素に指定するだけ。chrome11ではx-webkitっていうprefixつかないとダメっぽい。こんな感じ。

<input type="text" speech x-webkit-speech>

対応してるブラウザだったらテキストボックスにマイクのアイコンがでてると思うのでクリックすると音声で入力できます。

あと、言語をlang属性で指定できる模様。

<input type="text" speech x-webkit-speech lang="en">

ちなみにGoogle検索とかGoogle翻訳はすでに音声入力APIに対応している様子。

hokaccha/vim-css3-syntax - GitHub

不具合的なものは本家にマージされたんですが、ベンダプレフィックスの追加は本家のほうの方針では取り入れないということだったので、ベンダプレフィックスも対応したいという人はこちらをお使い下さい。

本家の元ネタはこちら。

VimのCSS3シンタックス・ファイルみたいな何か - Weblog - hail2u.net

Demo

これをiPhoneで見るとこんな感じになる。

こんな感じ。11px、10px、9pxのときに右側に隙間が空いてるがわかると思います。これは特にpaddingとかとってるわけではなくて、このfont-sizeのときだけなぜか隙間が空くんです。8pxは大丈夫なので11px以下というわけではないみたい。さらにマルチバイトでなければ隙間はできない。謎。

ちなみにiOS4.3でも直ってなかった。Androidは大丈夫。

解決方法知ってる人がいたら教えてほしい。

loading.show();
Deferred.parallel([
    Deferred.wait(1),
    function() {
        var d = Deferred();
        $.get('hoge', function() {
            // 何か処理
            d.call();
        });
        return d;
    }
])
.next(function() {
    loading.hide();
});

便利なり。