« 2010年11月 | メイン | 2011年01月 »

2010年12月 アーカイブ

2010年12月03日

JavaScript Advent Calendar 2010 三日目 インターネットチャンネル

2010年12月1日から25日まで、毎日違う人が JavaScript にまつわるブログ記事を書く企画です。
参加表明した順番が日付(12月◯日)となります。
ということで、三日目担当の私からは、随分前からあるけど余り知られていない、でも今でも使える入力デバイスのお話です。
今年の始めにFirefoxが加速度センサに対応し、iOS4.2.1でSafariがジャイロスコープセンサや加速度センサに対応しました。
そして、KinectがHackされChromeのExtensionからも使えるようになりました。
このようなセンサをブラウザから利用できるようになったのは、今年になってからとお思いの方もいらっしゃるかもしれませんが、もっと前から似たようなものがあります。
それは、インターネットチャンネルです。
インターネットチャンネルとは、Wii用のウェブブラウザです。
「Wiiショッピングチャンネル」からWiiチャンネルの形式でダウンロードできます。
ベータ版公開当時は無料、正式版に以降するときに500Wiiポイントになりましたが、現在はまた無料になっています。
インターネットチャンネルの中身は実はOperaで、JavaScriptも使用できます。
Wii用にJavaScriptの独自拡張もされており、ボタンの押下だけでなく、Wiiリモコンの動きをある程度取得することができます。
Wiiリモコンも4つまで同時に認識します。
インターネットチャンネルではCanvasも使えます。
Wiiリモコンをふたつ持って操作等の、他のデバイスではできないオリジナリティ溢れたゲーム作成もアイディア次第で可能です。
実際に値を取得しているスクリーンキャプチャをUpしましたので、カーソルの動きとそれぞれのプロパティの値の変化をご覧ください。
実際に動くコードは、以下のURLで公開しています。
(公開直前追記:インターネットチャンネルはURLが非常に打ちにくいので、「http://bit.ly/wiiremoteprop」でアクセスできるようにもしました。)
注意点としては、Wiiリモコンのうちどれかひとつは閲覧用のコントローラとなり、ボタンの値がほとんど取得できないことが挙げられます。
このため、ボタンを使ったもの作成した場合は、ふたつ以上のWiiリモコンが必要です。
ちなみに、閲覧用コントローラかどうかはisBrowsingプロパティで判断できます。
それぞれのプロパティの詳細は公式のページをご覧ください。
また、ポインタの位置を表すdpdScreenX/dpdScreenYは、座標をピクセルで取得できるため非常に便利なのですが、公式ページには載っていないため注意してください。

2010年12月05日

WebSocket APIを気軽に試せるアプリケーション「WebSocketBroadcaster」

2010/12/11 追記
「WebSocketBroadcaster」という名称が長過ぎ、一部の環境で正常に実行できないようなので、名称を「WSBroadcaster」に変更します。
本文中の文言も修正済ですが、タイトルはパーマリンクの関係でそのままです。
追記終わり
「WebSocketを使ってみたいけどサーバのスキルが...。」
そういう声をたまに見ます。
そこで、WebSocket APIを気軽に試せるように「WSBroadcaster」という、専用のアプリケーションを作成しました。実体は、JavaのライブラリのJetty7にブロードキャスト機能を追加し、実行ファイルの形式でラップしただけのものです。
以下のURLからzipファイルをダウンロードして、解凍してください。
Windowsの場合は、「WSBroadcaster-x.x.x.exe」を実行するだけです。Mac OS Xでは、「WSBroadcaster-x.x.x.dmg」をダブルクリックし、ディスクイメージを開き、中にある「WSBroadcaster.app」を適当な場所に移動して実行してください。Linuxの場合は、「WSBroadcaster-0.0.1.jar」が実行ファイルになります。
簡単ですね。

実行中は、ポート番号40320でWebSocketの接続を受け取ります。WebSocketで接続してきている全てのクライアントに対して、受信したメッセージを送信します。
学習用にチャットアプリケーションをサンプルとして同梱しています。クライアント側の処理は、サンプルを参照することで多分理解できるはずです。
クロスドメインを防ぐような処理は一切行なっていないため、ブラウザからアクセス可能な場所でWSBroadcasterを起動しておけば、サンプルは動作するはずです。

終了は、タスクバーやメニューバーに表示されるアイコンをクリックして、「Quit」を選択してください。

ライセンスは、Jetty7と同じく、「Apache License 2.0」と「Eclipse Public License 1.0」のデュアルライセンスです。
WSBroadcasterはWebSocketの学習用に作成しており、ローカルやLAN内での使用を想定しています。実運用でも動作すると思いますが、自己責任でお願いします。
うまく動作しない場合、ファイヤーウォールやウィルス対策ソフトが原因かもしれません。
リンク
以下、WebSocket関連のリンクです。

2010年12月18日

第13回HTML5とか勉強会の発表資料 - WebSocketRemote for iOS

今回の会場はソフトバンクのカフェテリアでした。
広い会場、本格的な中継機器、そして軽食・ソフトドリンクやビールの差し入れまでありました。
10名程の社員の方にもお手伝い頂きまして、本当にありがとうございました。
発表の録画映像
以前作ったWebSocketRemoteのデモ
WebSocketRemoteのダウンロードは以下のURLから。
発表時に言い忘れたこと
大量且つ大容量のデータ処理を行なっているため、不要になったデータはすぐに参照を外すようにしているはずなのですが、iOS版のWebSocketRemoteは、大体3分ぐらいでSafariが落ちます。JavaScriptの処理がiOSのCPUを占有し、SafariのGCが間に合わなくなっているのかもしれませんし、どこかに参照を開放し忘れているところがあるのかもしれません。ただ、iOS上のdebug環境が貧弱なため、調査しにくく原因究明には至っていません。
また、発表の途中で、効率の良かったセグメント長は8192Byteだったとお話しましたが、多分WebSocket固有のものではなく、実装等の他の要因によるところが大きいかと思います。
関連ページ
これまでのWebSocketRemoteのエントリー。

選択範囲をQRコードにするBookmarklet

選択範囲をQRコードにするBookmarkletです。
ブラウザ上の文字列を、携帯電話に取り込みたい時に便利です。
注意点として、Google Chart APIを使っているため、外部と通信が発生します。
/*
================================================================================
    Name        :   選択範囲をQRコードにするBookmarklet Ver1.0.0
    In          :   [none]      
    Out         :   [none]      
    Note        :   Google Chart APIを使って、選択範囲をQRコードに引用します。
--------------------------------------------------------------------------------
    Version     :   Ver1.0.0    |   2010/12/18  |   新規作成
--------------------------------------------------------------------------------
    License     :   MIT license
    URL         :   www.kanasansoft.com
================================================================================
*/

(
    function(w,d,g,p,s){
        if(d[p]){
            s=d[p].createRange().text
        }else if(d[g]){
            s=d[g]()
        }else if(w[g]){
            s=w[g]()
        }
        if(s){
            w.open("http://chart.apis.google.com/chart?cht=qr&chs=480x480&chl="+encodeURIComponent(s));
        }
    }
)
(window,document,"getSelection","selection")
Google

タグ クラウド