2012-02-08
Chrome for Android を開発者視点で調べてみた
ついに Android 4.0 向けに Chrome が公開されました。やはり開発者としては HTML5 の準拠度やパフォーマンスを調べてしまうのは仕方ないですね。
まずは Android 4.0 標準ブラウザと The HTML5 test - How well does your browser support HTML5? で大まかに比較してみました。今回は Nexus S を使って調べました。
| Android 4.0 標準ブラウザ | Chrome for Android | |
|---|---|---|
| Video - H.264 support | × | ○ |
| Video - WebM support | × | ○ |
| Audio - PCM audio support | × | ○ |
| Audio - AAC support | × | ○ |
| Audio - WebM support | × | ○ |
| Session History | × | ○ |
| Custom scheme handlers | × | ○ |
| WebGL - Native binary data | △ | ○ |
| Server-Sent Events | × | ○ |
| WebSockets | × | ○ |
| FileSystem API | × | ○ |
| IndexedDB | × | ○ |
| Web Workers | × | ○ |
| Page Visibility | × | ○ |
| requestAnimationFrame | × | ○ |
代表的な HTML5 の API は対応しているようですね。注目したいのは Android 4.0 で使えなくなった History API が Chrome で使えるようになっていることです。他にはフォーム周りで新しい形式に対応していたりしますが、細かいので今回はスルーします。
合計では 343 点となっています。これはモバイルブラウザでは最高点数です。
HTML5 の準拠度を簡単に見ましたが、Chrome for Android はハードウェアアクセラレーションを活用することで、パフォーマンスも上がっているらしいです。どのくらい速くなっているのか Internet Explorer 10 Test Drive を使って確認しました。
FishIE Tank
左が Android 4.0 標準ブラウザ、右が Chrome for Android です。
FPS 表示は 22fps と 41fps で Chrome の圧勝のように見えますが、標準ブラウザはどう見ても 22fps も出ていませんでした。単に描画命令は 22 回実行できたみたいですが、画面の更新自体は 3,4fps 相当に見えました。
Speed Reading
これも同じく左が Android 4.0 標準ブラウザ、右が Chrome for Android です。
もう圧倒的な差がついています。Chrome はパタパタアニメーションが非常にスムーズで、この後のテストを実行するのに 28 秒しかかかりませんでした。標準ブラウザは遅すぎるので実行していません。
Nexus S はちょっと古いハードですが、それでも 30fps を超える数値が出たのは驚きです。これからはスマホ向けでも HTML5 のグラフィックス関連 API を使ったアプリが登場することを期待してもいいのではないでしょうか。
追記
折角なので Speed Reading の実行結果を動画で撮影して上げておきました。iPod touch で撮影したので画質悪い＆手振れしてますがご勘弁を。
2012-02-06
knockout.js でカスタムバインディングを作成する
バインディングは text とか value みたいに data-bind 属性の内部で指定する奴です。knockout.js ではこのバインディングを自由に拡張できるようになっています。
バインディングは ko.bindingHandlers に内蔵のものもすべて含まれているので、ここに追加してあげればいいです。以下にテンプレを置いておきます。
ko.bindingHandlers.myBinding = { init: function (element, valueAccessor, allBindingsAccessor, viewModel) { // 初期化、イベントハンドラの登録など }, update: function (element, valueAccessor, allBindingsAccessor, viewModel) { // 値が変化した時に行う処理 } };
init は最初に一回だけ呼ばれるので、このタイミングでイベントハンドラの登録や初期値の設定を行っておきます。そして実際にバインディングしたプロパティの値が変化した時に update が呼ばれるので UI 要素への反映などを行います。
コールバックの引数は element に data-bind 属性を指定した DOM 要素、valueAccessor にバインディングされた値のアクセッサ、allBindingsAccessor に data-bind 属性に指定されたすべてのバインディング定義のアクセッサ、viewModel には指定したビューモデルが入ってます。
<span data-bind="myBinding: name"></span>
のように指定すると valueAccessor では name プロパティの値が取得できます。
アクセッサは関数なので呼び出すと実際の値が取れます。
// 値を取得 var value = valueAccessor(); // 全てのバインディング定義を取得 var allBindings = allBindingsAccessor();
valueAccessor で取れる値は大抵の場合は ko.observable なので、実際に値を取りたい場合には ko.utils.unwrapObservable を使えば楽です。
// 値を取得 var value = valueAccessor(); // observable から実際の値を取得 var valueUnwrapped = ko.utils.unwrapObservable(value);
後は何を実装するかなので、アイディアしだいですね。DOM 要素であればバインディング可能なので、audio/video 要素や canvas 要素向けのバインディングも作成することが出来るので、ある程度の処理をまとめたバインディングを作っておけば便利かもしれませんね。
2012-01-31
WebMatrix 既に 1 周年
折角なのでデカいバナーを張ってみました。
WebMatrix は WordPress などのインストールには最適だと思いますので、是非 MS 系技術者以外の方に使っていただきたいですね。そして流石にもうそろそろ WebMatrix 2 が出てもいいと思うんですが、今のところはベータ版で我慢してください。
ちなみに WebMatrix 2 を使った WordPress のインストール、デプロイに関しては以下の記事も参考にどうぞ。
WebMatrix 2 Beta で WordPress をデプローイ！する (1) - インストール編 - まめしば雑記
WebMatrix 2 Beta で WordPress をデプローイ！する (2) - ExpressWeb へデプロイ編 - まめしば雑記
そして忘れちゃいけない WebMatrix のスーパーヒーロー（非公式）であるウェブマトリクスマンのアカウント↓
CLR/H で喋ります
もはや毎年恒例という感じですが、2 月の CLR/H に参加します。これで 3 年連続、そしてチャックさんとも 3 年連続です。
話す内容は 12 月のコスプレ大合戦の時に少しだけ触った knockout.js が評判良かったらしいので、今回は 30 分間 knockout.js を説明しようかと思います。
タイトルは未定ですが、おそらく以下のどちらかになります。
- knockout.js で学ぶ、初めての M（ｒｙ
- マジカルしばやん先生が教える knockout.js の使い方☆（ゝω・）vｷｬﾋﾟ
2012-01-30
knockout.js の注意すべき点
相変わらず knockout.js でクライアントサイドコードを全力で書いてる男です。
最近、ちょっとした点でデバッグに時間をかけてしまったり、無駄なコードを書いてしまうことがあったので忘れないためにメモしておきます。
値の取得、設定は関数呼び出し
もう基本中の基本なんですが割と間違えます。例えば以下のようなコードを書いてしまったり。
// VM を作成 var viewModel = { name: ko.observable(), items: ko.observableArray() }; // name は ko.observable なので NG alert(viewModel.name); // 同じく ko.observable なので NG viewModel.name = "ほげほげ"; // items は ko.observableArray なので NG alert(viewModel.items[0]); // 同じく ko.observableArray なので NG viewModel.items[0] = "ほげほげ";
ついついやってしまって動かないと悩むことになります。正しくは以下のように書きます。
// VM を作成 var viewModel = { name: ko.observable(), items: ko.observableArray() }; // name を関数として呼び出す alert(viewModel.name()); // 同じく引数を与えて呼び出す viewModel.name("ほげほげ"); // items を関数として呼び出して配列を取得 alert(viewModel.items()[0]); // 同じく関数として呼び出して配列に値を設定 viewModel.items()[0] = "ほげほげ";
完全にプロパティとして動作してくれたら最高に便利なんですが、相変わらず古い IE がネックらしいです。
バインド式の内部で条件式を使う場合
visible バインディングや if バインディングでは条件式を指定することが出来ます。普通に考えると使えないとおかしいですよね。
しかし、ここにさっきと同様の罠があります。例えば以下のように書いてしまうと正しく動きません。
<!-- value が 10 以上の場合だけ表示したい --> <!-- ko: if value > 10 --> <span>OK</span> <!-- /ko -->
何故動かないのか想像がついた人もいると思います。そうです、条件式を使う場合には関数として呼び出して値を取得する必要があるからです。
例えば value が bool 値の場合は
<!-- ko: if value --> <span>OK</span> <!-- /ko -->
だけで正しく動作するので混乱してしまいがちです。主に私が。
なので正しくは以下のように書きます。
<!-- value が 10 以上の場合だけ表示する --> <!-- ko: if value() > 10 --> <span>OK</span> <!-- /ko -->
これで期待した通りの挙動になってくれます。
2012-01-29
WebMatrix 2 Beta で WordPress をデプローイ！する (2) - ExpressWeb へデプロイ編
前回では WebMatrix 2 Beta を使ってローカルに WordPress をインストールしました。今回はローカルにインストールした WordPress を ExpressWeb へデプローイ！してみたいと思います。やっとですね。
まずは ExpressWeb を使えるようにしておかないとダメなんですが、今は無料お試しがあるので非常に楽チンですね。
ExpressWeb > お申し込み > 無料お試しサービス
無料お試しから、そのまま本契約に出来るのが非常に便利だと思います。これはデータジャパンさんグッジョブすぎますね。
それでは ExpressWeb のコントロールパネルにログインにして、Web サイトを選択すると以下のような画面になります。今回、自分のアカウントではサブドメインを追加しているので、無料お試しとは少し違うかもしれません。
いろいろ消してありますが気にせずに。次はタブにある「管理」をクリックすると、パスワードを入力するフォームと「有効」ボタンがあるので、パスワードを適当に入力して「有効」ボタンを押すと完了です。
そして再度「管理」タブを読み込みなおすと、以下のように発行設定ファイルのダウンロードリンクが表示されるので、クリックしてダウンロードしておきましょう。
これで WebMatrix からデプロイする準備は終わりましたが、MySQL のユーザー作成とデータベース作成が必要になるので、こっちも行っておきます。管理画面の「データベース」から「MySQL 5.1」を選ぶと、データベースとユーザーの追加が出来ます。
これで管理画面での作業は終わりなので WebMatrix に戻ります。WebMatrix の「Run」ボタンの隣にある「Publish」ボタンをクリックしてください。すると、Web Deploy の設定を入力するフォームが表示されます。
基本的には Tasks にある「Import publish settings」をクリックして先程ダウンロードした発行設定ファイルを指定すると、ユーザー名とパスワード以外は入力されるので、あとは手動で未入力になっている部分を入力してください。
全て入力が完了したら「Validate Connection」をクリックして設定が正しいか確認しておきましょう。サーバへの接続に成功した場合には、ボタンの隣に以下のようにメッセージが表示されます。
接続に成功したら「Save」ボタンをクリックして設定を保存しておきます。すると、以下のようなダイアログが表示されますが、互換性をチェックするかどうか聞いているだけなので、とりあえず「Yes」を選んでおけば問題ありません。
すると WebMatrix が自動でデプロイ先のサーバに必要なコンポーネントがインストールされているか確認してくれます。
ExpressWeb は WordPress に公式で対応しているので、当然ながら全て Available になります。確認したら「Continue」をクリックします。
長かったですが、ようやくデプロイの手前まで来ました。これが最後のダイアログで、これから実際にデプロイされるファイルの一覧とデータベースが確認できます。一度デプロイしておけば、次回からは変更のあったファイルだけを自動で対象としてくれるので非常に便利です。
データベースは基本的に上書きされるので、更新する場合には注意が必要です。とりあえず問題がなければ「Continue」ボタンを「デプローイ！」という掛け声とともにクリックしてください。
デプロイが開始されると通知バーが表示されます。多少時間がかかる場合にもあるので、気長に待ってください。
デプロイが無事に完了すると URL リンクが表示されるので、早速クリックして確認してみましょう。
しかし、ExpressWeb にページ作りたての環境でデプロイを行うと、サンプルページが表示されてしまいます。
ﾎﾟｰﾝ( Д )⌒Y⌒Y⌒Y⌒Y⌒Y⌒...。....。ｺﾛｺﾛ
となるかもしれないですが、これはサンプルページである default.aspx の優先順位が WordPress の PHP よりも高いだけなので、FTP やファイルマネージャから default.aspx 削除してあげるだけで解決します。
削除が終わったら、もう一度確認してみましょう！
今度はばっちり WordPress が表示されました！これで WebMatrix を使って ExpressWeb へのデプロイはすべて完了です！
まだ書く元気があれば、WebMatrix で WordPress のファイルを編集したりしてみたいと思います。
