S7S と IE10 で Device Orientation API

どうにも Series 7 Slate を活用しきれていない男です。

これじゃもったいないので、IEBlog に出ていた Device Orientation API を使うサンプルを S7S に入れてみました。Windows 8 スレートは 3 軸の加速度センサーぐらいついてくるはずなので、活用する方法を用意してほしかったところです。

Exploring Device Orientation and Motion - IEBlog - Site Home - MSDN Blogs

デバイスの方向と動きを活用する - IEBlog 日本語 - Site Home - MSDN Blogs

IE10 自体は Device Orientation API に対応してないんですが、HTML5Labs にて ActiveX プラグインとそれをラップした JavaScript が公開されたという話なのです。
http://html5labs.interoperabilitybridges.com/prototypes/device-orientation-events/device-orientation-events/info

ちなみにインストールすると、ボールを転がすゲームのサンプルが同時に入ります。センサーの値も表示されるので、結構面白いです。

一応、IE10 でも CSS の Media Queries を使えば、画面の縦横が変わったときに画面のレイアウトを変えたりは出来ると思うんですが、もうちょっとリアルタイムに情報を取りたいとき用の API がこれです。

細かい説明と言うか仕様は W3C を見るのが手っ取り早い。

DeviceOrientation Event Specification

要約すると、window のイベントとして deviceorientation と devicemotion が飛んでくるので、それを捕まえて処理すれば OK。

window.addEventListener("deviceorientation", function (e) {
    // alpha, beta, gamma の説明は W3C の図を見た方がわかりやすい。回転角だけど
    console.log("alpha: " + e.alpha + ", beta: " + e.beta + ", gamma: " + e.gamma);
});

window.addEventListener("devicemotion", function (e) {
    // e.acceleration は加速度、x,y,x の 3 要素を持つ
    // e.accelerationIncludingGravity は重力加速度 (9.81m/s^2) を含む加速度、x,y,z の 3 要素を持つ
    // e.rotationRate は回転加速度、alpha,beta,gamma の 3 要素を持つ
});

DOM のイベントを直接触らなくても、jQuery を使っても書ける気がする。確認してないけど。

$(window).bind("deviceorientation", function (e) {
    var ev = e.originalEvent;

    // ev.alpha, ev.beta, ev.gamma で取れる
});

$(window).bind("devicemotion", function (e) {
    var ev = e.originalEvent;

    // ev.acceleration, ev.accelerationIncludingGravity, ev.rotationRate で取れる
});

この Device Orientation API と SignalR を組み合わせたら何か面白いアプリとか作れそうな気がしますね。JavaScript から扱えるので相性は抜群にいいはずですし。

jQuery UI Widget Factory を使って独自のダイアログを実装してみた

こんばんは、最近は PHP や C# よりも JavaScript ばかり書いてる男です。Visual Web Developer 2010 のおかげでインテリセンスが使えてますが、やっぱりドキュメントコメントは便利ですね。

今日は jQuery UI の話ですが、Project Silk でも取り上げられている内容だったりします。

Chapter 3: jQuery UI Widgets

自分も正直なところ、Project Silk を見るまでは存在すら知らなかったんですが、jQuery UI の各種コンポーネントは Widget Factory を使って作られているらしいです。

jQuery UI Development & Planning Wiki / Widget factory

Wiki にプロトタイプのコードが載ってますので、参考にすれば簡単に独自のコンポーネントは作れそうですね。

しかし、実際のところは既に用意されている UI コンポーネントを拡張して、独自のコンポーネントを作りたいこともあると思います。そんな時には Widget Factory を使えば、既存コンポーネントを継承して新しく作ることが出来るようになっています。オブジェクト指向ですね。

簡単にサンプルとして、コンテンツがスライドダウンして表示されるダイアログを作ってみました。

$.widget("ui.customDialog", $.ui.dialog, {
    // デフォルトの設定をオーバーライド
    options: {
        width: 300,
        height: 200,
        autoOpen: false
    },
    // _create メソッドをオーバーライド
    _create: function() {
        // 継承元の _create メソッドを呼び出す
        $.ui.dialog.prototype._create.apply(this, arguments);

        // コンテンツを入れ替える
        this.element
            .find("p")
            .text("new contents");
    },
    // open メソッドをオーバーライド
    open: function() {
        // 継承元の open メソッドを呼び出す
        $.ui.dialog.prototype.open.apply(this, arguments);

        // 非表示にしてスライド表示
        this.element.hide().slideDown("slow");
    }
});

$.widget の 2 つめの引数に継承したいコンポーネントを指定するという簡単な仕様です。

後はオーバーライドしたいメソッドを定義してあげるだけですが、メソッドを定義してしまうと、継承元のメソッドが完全に隠れてしまいます。このままだと呼び出せないので、継承元のプロトタイプを使って呼び出しています。*1

基本的にオーバーライドしたメソッド内で、元々のメソッドを呼び出しておかないと動作しなくなるので忘れないようにしてください。ちなみに定義されているプロパティとメソッドは

jQuery UI Development & Planning Wiki / Widget factory

に全て載っています。

作成したダイアログの動作は http://jsfiddle.net/shibayan/AXfPN/ で確認できます。インフラが整備されているので、完全に自前で作成するのも簡単そうですね！

*1:jQuery UI 1.9 では _super メソッドが用意されるようです。

SoftBank が JavaScript 対応

今までも SoftBank の端末は JavaScript に対応していたんですが、この前発表された端末の一部で JavaScript が利用可能だと発表されました。

既に SoftBank の Mobile Creation ページに技術資料が上がっています。

それによると JavaScript は ECMA-262 3rd edition 準拠で DOM は level 2 までしっかりと対応しているようです。XMLHttpRequest も使えるようですが、i モードブラウザ 2.0 と同様に setRequestHeader に制限がかかっててがっかりな感じです。

今まで SoftBank の VGA 端末は独特な挙動をしてましたが、i モードブラウザ 2.0 と同じ meta タグで指定することで VGA, QVGA 表示を強制できるようです。気になるのが QVGA 端末で VGA が指定されている場合に、テキストや画像が 1/2 に縮小されるという記述。これ、本当なんですかねぇ。