2012年02月07日

Chrome19でWebIntentsのインプリが始まった?

今日は仕事でシリコンバレーに来ています。よくよく考えてみると、最近半年で3回シリコンバレーに来ている気が・・・まぁ、来るたびに「もっと英語がんばんなきゃ・・・」と毎回反省するへたれなわけですが。
ということで、時差ぼけ全開モード!!現地時間は am 2:00です。あんまり頑張ると、明日猛省することになりそうなので、今日はショートな感じで。

WebIntents on Chrome19 (Canary build)

僕は通常 ChromeのCanary build(執筆時点のバージョンは19.0.1031.0 canary)を使っているのですが、今日 dev tool を何気に見ていたところ、どうやら WebIntents のインプリが始まった様子。下の図は、window.navigatorオブジェクトに対する自動補完。startActirvity()が表示されていることが分かります。

22

僕が以前作成したページhttp://webintents.cloudfoundry.com/で試してみたとところ、WebStoreへのリンクがアドレスバーのところにポップアップされる動作になっていました。

Gregさんのpostによると、chrome extensionでのサポートを開始した様子。実際 WebStoreで"webintents"で検索すると、様々なExtensionsが見つかります。

その中から、"Shorten with Bit.ly"をインストールし、再度発動してみるとポップアップにbit.lyのアイコンが表示されます。
45
で、これをクリックすると bit.ly で短縮URLが生成されます。きちんと動作を追わないとなんとも言えませんが、extensionがintentsをチェックして、パラメータを受け取り(短縮する対象のURL)、bit.lyにURLパラメータで指定している感じのように見えます。

先のGregさんのポストにあるように、intentタグによるregistrationについては、under discussionってことで、現状ではインプリされていない様子。今回のインプリで、shimは動かなくなりますので、この辺が試せなくなるのは、ちょっと痛いですが。。。(Chrome使わなきゃいいっちゃいいんですが) ま、なんにしても実装が進むのはとてもいいことです。楽しみですね;-)


人気ブログランキングへ
kotesaki at 18:56|PermalinkComments(0)TrackBack(0)clip!

2012年01月17日

Web Intentsで persistent connectionを実現するには

今日のエントリーでは、 Web Intents で persistent connection (継続接続)を実現するための方法について紹介します。

先日のWeb Intents についてのエントリーで、今のWeb Intentsの状態を『(何しろ、W3Cのサイトにドラフトもあがっていない状態なので)』 などと書いていたのですが、既にあがっていました・・・orz
120117-0

Web Intents の仕様が記述されているのは、もちろんなのですが、W3C の Mailing Listでのこれまでの議論を踏まえたものも記述されており、なかなか参考になります。それに該当するのが Section 4 & 5 なのですが、今日のエントリーでは、その中から 5.3 Persistent connctions (継続接続)について取り上げたいと思います。

Web Intents は RPC モデル

Web Intentsは、RPC (Remote Procedure Call) モデルとなっています。ここで、Web Intentsを呼び出す側を Client, 呼び出される側を Server とすると、Client からの要求に対し、Serverが何かしらの処理を行い、その結果を返すというのが一連の流れとなります。前々回のエントリーで紹介した短縮URLは、その一例です。

この RPC モデルの欠点は、一度結果を返すと、それ以降 Server から Client にデータを渡すことが、出来なくなること。例えば、Server がチャットサービスだとして、Clientから「チャットにメッセージを送りたい」という要求をしても、Server側でやりとりされている他のユーザーからのチャットメッセージを受けることは出来ません(一つだけは返信を受けることが出来ますが、あまり意味はないですよね)。RPCモデルにしばられない、何かしらの Persistent connection を行う手立てが欲しくなります。
120117-1

Persistent connections on Web Intents

この Persistent connection を実現する手段が、Web Intents APIのEditor's Draft 5.3 Persistent connections に記述されています。その中で、比較的簡単に出来る(現在公開されているエミュレーションライブラリで簡単に試せる)、iframeを用いた方法について、ここでは取り上げます。

この部分について、先のDraftでは以下のように述べられています。

One is returning URIs which can be loaded by clients in an iframe and then messaged using other web platform features.

(以下、意訳)
〜一つの方法は、返されたURIから client 側で iframe を開き、(Web Intents以外の)Webの機能を使って、メッセージングをするものです〜
つまり、先程のチャットの例であれば、チャットに接続するためのURL情報を Web Intents で取得し、それを iframe で開く。そして、client と iframe(server) との間で、HTML5 Web Messagingなりを用いれば、Persistent Connectionが実現できるというわけです。
120117-2

例えば、Clientは、以下のコードで Web Intents を発動します。(actionは、僕の管理下のURLをshema-URLとして用いました)

var intent = new Intent(
  "http://webintents.cloudfoundry.com/chat",
  "text/url-list",
  "");
window.navigator.startActivity(intent, function(data) {
  // 後述
});
Web Intents経由で発動された server は、クライアントに対し、以下のコードで自オリジン内のチャット機能にアクセスするURLを返します。
if(window.intent && window.intent.postResult) {
  window.intent.postResult(location.origin+"/chat");
}
Clientは、上記のURLを受け取ると、それを iframe で開き、HTML5 Web Messaging(postMessage)を用いメッセージングを行うことで、チャットの機能を利用することが出来るようになります。具体的には、以下のようなコードになります(先に上げた、startActivity()の第二引数でコールバックとして与える)。
var ifr_ = document.createElement('iframe');
ifr_.id = "chatifr";
ifr_.src = data;
ifr_.style.display = "none";
document.body.appendChild(ifr_);

$("#chatifr").load(function(){
  var subwin_ = ifr_.contentWindow;
  subwin_.postMessage("init", "*");

  $("#chat .after form").submit(function(){
    var box_ = $("#chat .after input[name='chatmesg']");
    subwin_.postMessage(box_.val(), "*");
    box_.val("");

    return false;
    });

  window.addEventListener("message", function(e){
    $("#chat .after output")
      .append([e.data.username," => ",e.data.body,"
"].join("")); }); });
当然ながら、iframeで開かれる側のURLについても、HTML5 Web Messagingのコーディングが必要ですが、ここでは割愛します。

Web Intentsをチャネル情報交換として用いるということ

つまり、Web Intentsを、『コネクション接続用のチャネル情報を交換するために用いれば良い』と考えれば良いことになります。この点については、Working Draft でも以下のように述べられています。

In these cases, Web Intents is acting as a way for the user to attach a particular client page to a persistently-available service.

(以下、超意訳)
これらのケースでは、Web Intentsは、特定のページより persistent サービスにアクセスするのに必要な情報を取得するための方法として用いられています。
このような考え方にたつと、柔軟な Web アプリ間連携が可能になります。Web Intents は、ユーザーが自由に Web アプリケーションを選択するための仕組みですので、その情報のやりとりは Web Intents の中に縛られる必要はないということになります。

例えば、デバイス連携の例で言えば、このような考え方を用いることで、Device(client)上のビデオコンテンツをソースとして、リビングのテレビ(server)にそれをストリーミング配信することが可能になります。Web Intents経由で、データを連携するためのチャネル情報をやりとりし、そのチャネルを用いて、HTML5 の各種 API を用いて取得した Blob データを Web Socket を使ってテレビにストリーミング配信すればいいのです。

上で説明した、チャットの例のサンプルを、http://webintents.cloudfoundry.com/にあげておきました。一度、http://webintents_chat.cloudfoundry.com/にアクセスした後、"connect to 3rd party chat"ボタンをクリックすると、Web Intents が発動します。picker windowから"chat"を選ぶと、Inline で login 画面が表示されますので、名前を入力後 "start" ボタンをクリックしてください。すると、元の画面にチャットの入力ボックスが表示され、チャットを利用出来るようになります。
120117-3

ここで2点興味深い点があります。一点目は、http://webintents.cloudfoundry.com/ では、チャットの機能(要は、WebSocketのコーディング)は全く行っていない点です。このページでは、あくまでチャットメッセージの入出力だけを受け持っており、チャットサーバーとのメッセージのやりとりは、全て http://webintents_chat.cloudfoundry.com/chat に任せています。このURLは、非可視の iframe でオープンされており、擬似的なバックグラウンドワーカーとして動かしています。このようにすることで、自然な形で、チャット機能を各自の Webサイトに取り込むことが出来ます。

もう一点目は、チャットサービスを自由に選択できる点です。今回の例では、サンプルのチャットサービスだけですが、もし Intent として facebookのチャットや、Google Talkが登録されるようになると、そのページにとどまったままで、自由に好みのチャットサービスを選択して利用することが出来るようになります。これまで、チャットを使うためには、チャットのサイトに移動しなければいけませんでしたが、このような考え方に立つと、どのサイトからでもGoogle Talkなどを利用でき、かつ、それらを選択 出来るようになるのです。

今回紹介したサンプルサイトは、githubに公開してあります。clientは https://github.com/KensakuKOMATSU/webintents_test、server はhttps://github.com/KensakuKOMATSU/webintents_chat_testです。


人気ブログランキングへ
kotesaki at 04:07|PermalinkComments(0)TrackBack(0)clip!html5 | WebIntents

2012年01月14日

Cloud FoundryをMacで動かしてみた

今日のエントリーは、久々のCloud Foundryネタです。

What's the idea of this entry?

オープンPaaSの Cloud Foundry は、通常このページ(github/vcap)に書かれている "Automated Setup" を使ってインストールします。で、このSetupスクリプトですが、Ubuntu 10.04.2 server 64bit で動かすことを前提に作られています。このため、Cloud Foundryの動作を確かめたり、色々弄ろうとするときに、わざわざリモートのサーバーにssh張って。。。とか何かと面倒です。やはり、「手元のMacで動かしたいよな〜そのほうが何かと楽だし」ということで、MacにCloud Foundryをマニュアルインストールしましたので、それのメモです。

Does it work on Mac?

さて、先のSetupスクリプトが何をやっているのかを簡単に書くと、大きく二つに分かれます。一つは、Cloud Foundry カーネル(上のgithubで公開されている Cloud Foundry の各種コンポーネント)のインストール。もう一つは、それと連携して動くミドルウェア類(nginxやら、mysqlやら、rabbitMQやら、rubyやらnodeやら)のインストールです。より詳しくは、publickey での紹介記事を参照してください。

で、Ubuntuしばりになっているのは、この時に apt-get なりを使っているため。なので、それぞれを個別にインストールすれば、別にMacでも動くよ!!というオチです。

ここで、Cloud Foundryは連携ミドルウェアの全てを入れないと、動作しないわけでは無く、最低限必要なものは、それほど多くありません。例えば、rabbitMQを使わないのであれば、それをインストールする必要はないといった感じ。なので、手動でインストールするといっても、その辺りを絞ってしまえば、それほど大変ではありません。(手動で入れることで、Cloud Foundryの動きを理解できますし。Automatic Setupを使うと、どうしてもブラックボックスな感じを持ってしまいますよね...)

最低限必要なもの

以下に、Cloud Foundryを動かすにあたって、最低限必要なものを列挙します。ちなみに、バージョンやらは、このバージョンで僕のMacで動いたよ!!というものです。

  • rvm
  • ruby-1.8.7 (これは、ひょっとしたら必要ないかも)
  • ruby-1.9.2
  • Rails 3.0.5
  • sqlite3 (3.7.9) (Cloud Foundry Controllerをdevelopmentモードで動かす場合)
  • redis (2.4.4) (sudo port install redis; sudo port loas redis)
てなぐらい。多分。ちなみに、rubyはrvmで入れてくださいというのと、当然rubygemも必要です。念のため。

あとは、僕にとっては、Mustな

  • node (0.6.6)
も入れてあります。

作業ディレクトリの作成

Cloud Foundryでは、作業ディレクトリとして、

  • /var/vcap
  • /var/vcap.local
が必要なので、
$ mkdir /var/vcap
$ chown komasshu.staff /var/vcap
$ mkdir /var/vcap.local
$ chown komasshu.staff /var/vcap.local
をやっておきます。ちなみに、Cloud Foundry自体は、rootの権限は不要ですので、chownのユーザー名とグループ名は、各自のログイン環境のものとして下さい。

Cloud Foundryのインストール

Cloud Foundry系のファミリーでは、以下が必要です。

vcap
cloud foundryのコアコンポーネント
vcap-service
cloud foundryで、各種ミドルウェアを動かすためのコンポーネント
nats
cloud foundryで使っているlightweight pub-sub messaging
vmc
cloud foundryを使うためのコンソールクライアント
任意のディレクトリを作って、それぞれを git cloneします。
$ cd ~
$ mkdir cloudfoundry
$ cd cloudfoundry
$ git clone https://github.com/cloudfoundry/vcap.git
$ git clone https://github.com/cloudfoundry/vcap-services.git
$ git clone https://github.com/derekcollison/nats
また、vmcについては、gemで入れます。
$ gem install vmc
なお、Mac標準インストールのrubyだとvmcが上手く動きません。僕は rvm でruby-1.9.2に切り替えて動かしています。

githubが終わったら、セットアップです。なお、以下の手順では bundler が必要ですので、

$ gem install bundler
で入れておいてください。
まず、vcapから、vcap-servicesを使うために、symboli linkを生成します。
$ cd vcap
$ rmdir services
$ ln -s ../vcap-services services
そして、vcapの各モジュールに対し、bundle installを行うことで、必要なgemを取得します(cloud foundryだけ Rails アプリになっていますので、rake db:migrateが必要です)。
$ cd ~/cloudfoundry/vcap
$ cd router
$ bundle install

$ cd ../cloud_controller
$ bundle install
$ rake db:migrate

$ cd ../dea
$ bundle install

$ cd ../health_manager
$ bundle install

$ cd ../stager
$ bundle install

$ cd ../services/redis
$ bundle install

$ cd ~/cloudfoundry/nats
$ bundle install
なお、今回はredisのみserviceとして登録する場合を例としています。

各種設定ファイルの変更

次に、Cloud Foundryの各種設定ファイルを変更します。

cloud_controller/config/cloud_controller.yml
今回の系では、nginxを使っていないため、routerに直接アクセスします。このため、routerのデフォルトポート2222を指定します。
-external_uri: api.vcap.me
+external_uri: api.vcap.me:2222
管理者アカウントを変更します。
-admins: [derek@gmail.com, foobar@vmware.com]
+admins: [admin@vcap.me]
あと、後述のvmcコマンドで管理者アカウントを作成したら、以下の設定変更を行ったほうがいいでしょう。デフォルトでは、管理者権限がなくてもアカウントが作成可能になっていますので、これをオフにします。
-allow_registration: true
+allow_registration: false
dea/config/dea.yml
デフォルトでは、node.jsのバージョンが0.4.12になっていますので、これを変更します。
node:
     executable: node
-    version: 0.4.12
+    version: 0.6.6
bin/vcap
今回の系では、serviceとしてredisしか動かしませんので、その変更を行います。
def self.services
-    %w(redis mysql mongodb neo4j)
+    %w(redis)
end
他にも、vmcへの表示を変更するために、色々変えたほうがいいところもあるかなという気はしますが、とりあえず動かすだけなら、これぐらいでOKです。

run!!

といったところで、準備は整いましたので、あとは動かすだけです。

$ cd ~/cloudfoundry/nats
$ bin/nats-server
でnatsを動かし、
$ cd ~/cloudfoundry/vcap
$ bin/vcap start
で、cloud foundryを動かします。これでめでたく起動 :)

実際に動かしてみる

今回の系では nginx を動かしていないため、vmc の target は

http://api.vcap.me:2222
になります。なので、/etc/hostsで、api.vcap.me を127.0.0.1に変更した後、このターゲットでアカウントを登録します。
$ vmc target api.vcap.me:2222
$ vmc add-user --email admin@vcap.me <- 管理ユーザ
$ vmc add-user --email test@vcap.me  <- 一般ユーザ
あとは、この作成したユーザーで vmc login を行い、アプリケーションのdeployが出来るようになります。アプリケーションdeploy方法などなどは、https://github.com/cloudfoundry/vcapを参考に。更に、詳しい情報は@u1さんのブログがオススメです。

ローカルMacにインストールされていると、色々と確認が楽になります。例えば、Cloud Foundryのコントローラーは、Railsで動いているので、現在の管理情報は、sqlite3のテーブルを見れば一目瞭然。

$ cd cloudfoundry/vcap/cloud_controller/db
$ sqlite3 cloudcontroller.sqlite3

sqlite> select * from apps;
4|4|hello|sinatra|ruby18|128|1|STARTED|STAGED|f781071b01a446deac76cf5dfcb7626700d018aa|ccGixGg0FNk=|---
:debug: !!null
|f|2012-01-13 04:36:53.932974|2012-01-13 04:36:58.544203|bc5dd7d1409a13c7a73c4d11781be19f61904ca8|256|2048|2|1
7|4|hello2|sinatra|ruby18|128|1|STARTED|STAGED|4bcaa6f4a83edcc22d5f4b51ffd54e2917798f4e|ccGixGg0FNk=|---
:debug: !!null
|f|2012-01-13 04:53:22.330493|2012-01-13 04:53:25.575726|bc3f25c248866b944a80c89607a66dc6d0ee360b|256|2048|2|1
8|4|chat|node|node|64|1|STARTED|STAGED|e1cf880a9ccec05203f4f2883b2bffdfbb4148dc|ccGixGg0FNk=|---
:debug: !!null
|f|2012-01-13 05:14:23.285442|2012-01-13 11:19:40.286418|7c136c0f666bc8ce8c89e5da78bb74c994c1fe0c|256|2048|4|1
9|4|chat2|node|node|64|1|STARTED|STAGED|a7f04c2fe2845abf0f2c0f647cee52093f4bfc43|ccGixGg0FNk=|---
:debug: !!null
|f|2012-01-13 05:38:44.459637|2012-01-13 05:40:33.890639|b7434917bc408e8ef8914ec15bb3f5427f75196c|256|2048|4|1

sqlite> select * from routes;
2|4|hello.vcap.me:2222|t|2012-01-13 04:36:54.084230|2012-01-13 04:36:54.084230
5|7|hello2.vcap.me:2222|t|2012-01-13 04:53:22.346050|2012-01-13 04:53:22.346050
6|8|chat.vcap.me:2222|t|2012-01-13 05:14:23.442924|2012-01-13 05:14:23.442924
7|9|chat2.vcap.me:2222|t|2012-01-13 05:38:45.575668|2012-01-13 05:38:45.575668
また、動作中のアプリは /var/vcap.local/dea/apps に配置されているとか、色々確認することが出来ます。

あと、アプリケーションdeployしたら、 /etc/hosts にFQDN のホスト名登録をお忘れなく!!例えば、こんな感じ

127.0.0.1  localhost api.vcap.me hello.vcap.me chat.vcap.me hello2.vcap.me

他のサービス(mongodbなど)を動かしたい場合は、redisを動かすところを参考に、チャレンジしてみてください。


人気ブログランキングへ
kotesaki at 11:21|PermalinkComments(0)TrackBack(0)clip!Cloud Foundry 

2012年01月09日

マルチデバイス連携を実現する Web Intents 〜マルチデバイス連携編〜

前回のエントリーに引き続き、今回も Web Intents に関するポストです。今回は、「なぜ、Web Intents が Web でのマルチデバイス連携サービスを実現するにあたり、重要な API となるのか?」について説明します。なお、Web Intents の基本と使い方については、前回のエントリーを参照下さい。

Device APIs の最新動向

Web Intents とマルチデバイスとの関係に入る前に、Device APIs の最新動向について触れたいと思います。

スマートフォンなどの Device のネイティブ機能を Web から利用する API について、 W3C では、主に Device APIs Working Group で仕様化が進められています。例えば、住所録情報を取得する "Contacts API" や、カメラを起動し、撮影した写真画像を取得する "HTML Media Capture API" などの仕様化検討を進めているのは、このWorking Groupです。

ここで、この Device APIs Working Group では、これまで Device の機能にアクセスするために、それぞれ専用のAPI仕様化を進めてきました。これは、Deviceの個々の機能(住所録やカメラなど)の数だけ、APIの仕様書が必要なことを意味します。結果として、API数の肥大化をまねくという結果となりました。具体的には、 Device APIs Working Groupのページで確認できる API 一覧を見れば一目瞭然です。
120109-0

さらに、この方針は、以下に示す二つの問題を起こします。

  1. 新しいDevice機能が出るたびに、仕様化策定が必要となり、Webからその機能を利用出来るようになるまで、時間が必要となってしまう。
  2. Device と Cloud が同様の機能を提供しているにも関わらず、開発者は異なるインタフェースのAPIを用いなければならない
一点目の問題については、自明だと思いますので、ここでは二点目について説明します。

例えば、Contacts APIは、デバイス(携帯電話など)内の住所録からデータを取得することを目的に仕様化検討が行われています。しかし、住所録は Google Contacts のように、 Cloud上でも管理できます。そして、Cloudで管理している場合は Web-API を用いれば RESTful に普通の HTTP で住所録情報を取得できます。となると、同じ住所録でも、「ローカルデバイスに対してアクセスする場合は、専用の Javascript API を用い、Cloud 上のデータにアクセスする場合は、RESTful インタフェースを用いる」ということになります。そして、今既に広く使うことが出来、かつ柔軟性に富むのはどちらのインタフェースかということは、Web developer であれば一目瞭然です。少なくとも僕は、Cloud 的なアプローチを好みます。

同様のことは、カメラから写真を取得する Media Capture API に対しても言えます。この API は、ローカルデバイスのカメラに対して、Contacts API 同様、専用のAPIを用いアクセスするものですが、こちらについても、Cloud 上の Web カメラであれば、RESTful にアクセスでき、専用の API は不要です。

このように、Device APIs Working Groupのこれまでのアプローチは、ローカルデバイスとCloudとで異なるインタフェースを提供する事態を招いたのです。(Contacts APIもMedia Cature API も、それほど広く実装されていませんので、現状はさほど問題にはなっていませんが・・・)
120109-1

TPAC2011 f2f minutes

昨年11月にアメリカのシリコンバレー(サンタクララ)で開催された W3C の "TPAC2011" で、この問題に対し、Web Intentsを使って解決していこうとする議論が行われました。その様子を Device APIs WG の f2f (face to face) ミーティングの minutes(議事録) から垣間見ることが出来ます。

例えば "Contacts API" に関するディスカッションが始まってすぐに、こんなつぶやきがあります。

Do we care (at all) about contacts? In the "cloud" era, there will be many online services that do this and anyone can write a web app that connects to them already. Just curious.
〜Contacts API について、ケアしなきゃいけないのか?"cloud"では、たくさんのオンラインサービスがあり、誰でもそれを扱うWebアプリを書くことが既に出来ているのに。馬鹿げている〜
そして、ある程度議論が進んだ後、以下のような発言がありました。
wondering why the API approach when Web Intents is being considered now
〜Web Intentsの検討が始まっている今、なぜにAPIアプローチを検討しているのか?〜
それに対し、以下のような回答がなされています。
as currently specified it is mostly about what does a contact look like, so most of the API would not change even with Web Intents
〜今の議論は、Contactの見た目に関する議論が殆どだから、Web Intentsになっても(今議論している)APIのほとんどは変わらないんじゃないかな〜
そして、以下のようなACTIONリストが作られました。
Contacts find() may be replaced with Intents
〜Contacts API のfind()は、Web Intentsに置き換えられる〜
つまり、Contacts APIについては、Web Intentsでリプレースする検討が始まったということです。

さて、ここで何故に Contacts API のような Device APIs の問題を解決するのに、Web Intentsが関係するのでしょう?それについては、Contacts APIの先に行われた、TAG(W3Cの技術諮問委員会)との議論から垣間見ることが出来ます。

my prejudice will be there are certain tangible benefits of URIs and accessing via ReST. if you have a Camera on a machine and you can access it remotely When you name things with URIs that support http, you can access it transparently
〜私の偏見(意見?)は、RESTでアクセスできるURIsには明白なベネフィットがあるということ。デバイス上のカメラにHTTPでアクセスできるURIsを付け、リモートからもアクセスできるようにすれば、(ローカルもリモートも)透過的にアクセスするこが出来るようになる〜
他の発言も見てみましょう。
I remember 30 years ago that Printer vendors looked puzzled when asked about Web Servers on them and today I can talk to an average printer over HTTP
〜30年前、プリンターベンダーにWebサーバーをプリンターに載せることについて尋ねた際、困惑していた。しかし、今や標準的なプリンターは(Webサーバーをプリンターに搭載しているため)HTTPでアクセスすることが出来る〜
つまり、個々のデバイスにWebサーバーを搭載すれが、カメラへHTTPでRESTfulにアクセスできるようになる。そして、ローカルデバイスもWebカメラのようなクラウドデバイスも透過的に同じ手順で扱うことができるようになるという訳です。内部のWebサーバーからであれば、デバイスのネイティブ機能を自由に扱うことができます。従って、専用の標準APIを策定する必要もなくなりますので、最新のデバイス機能を利用することも簡単に出来るわけです。
(ちなみに、従来手法を完全に辞めるという訳ではありません。あくまで、適材適所でAPIを考えようという感じです。例えば、Battery APIや、バイブレーションAPIについては、従来通り専用のJavascript APIでいこうという感じになっています。)
120109-2

そして、ローカルもクラウドも、共にWebアプリとしてアクセス出来るようになれば、ユーザーは任意のWebサイトからカメラを撮りたい時に、それらを選択し、アクセスできなければなりません。その機能を提供してくれるAPIが、まさにWeb Intentsなのです。Deviceの機能へのアクセス自体には、Web Intentを使う必要は特にありませんが(ローカルのWebサイトにアクセスすればいいだけですので)、それを有効に使うためには、Web Intentsは不可欠なAPIとなります。
120109-3

ただし、Web Intents API の Registration の現状の仕様は、前回のエントリーで紹介したように、ユーザーがIntentとしてのサービスを提供してくれるサイトにアクセスすることです。ユーザーが、ローカルのカメラサイトに事前にアクセスするということはまず考えられません。従って、ローカルのWebサービスを何らかの手順で登録できることが不可欠です。その点については、以下のようなやりとりが行われています。

we expect device-local resources to use Web Intents to register themselves as potential providers?
〜デバイスローカルの(Webサーバー)リソースを Web Intents で使うために、それ自身をプロバイダーとして登録できると思っていい?〜
Yes
〜できる〜
これは、現状のRegistrationの仕様が、まだ検討途中の段階であり、それ以外のRegistration方法も考えられる(例えば、工場出荷時にベンダーがブラウザにプリセットする)と読むことが出来ます。
そして会議の結論として、Device API WGと、WebApps WG(Web Intentを元々検討していた)で、共同で議論するタスクフォースを作ることが決定しました。

Web Intents を用いたマルチデバイス連携

さて、このように 全てのデバイスに、Webサーバーを搭載する という発想に立つと、Web Intents は、さらにその可能性を拡げることが出来ます。それが、マルチデバイス連携です。

これまで、カメラを例にして、ローカルのカメラとWebカメラを引き合いに出しましたが、こうなってくると、Web Intents から利用出来るカメラは、身の回りにあるデジカメでも携帯電話でも良いことになります(それが、Webサーバーを積んでしまえば)。ローカルデバイスのカメラの解像度が不満であれば、Web Intents を使って、デジカメを利用することが出来ますし、カメラを積んでいないPCから、スマートフォンのカメラを利用するといったことも出来るようになります。
120109-4

僕は、「マルチデバイス連携」という言葉を、「あるデバイスでは満たしていない機能を、他のデバイスを利用することで、Webサービスを快適に利用出来るようになること」と考えています。それぞれのデバイスは疎結合で、「その時々のサービスに応じてユーザーが連携するデバイスを自由に選ぶことができる」こと、それが出来るものが、オープンな仕様に基づくWebであると僕は考えています。

このようなマルチデバイス連携を "Device Orchestration" と呼んだりします。個別の楽器が、それぞれの楽曲ごとにオーケストラ編成し、協奏曲を奏でるように、それぞれのデバイスが、提供するサービスごとに編成され、ユーザーにとって最も快適なサービスを提供するというものであると、僕はこの言葉について理解しています。

Web Intentは、このような Device Orchestration を行うときに、欠かせない API となるでしょう。利用出来るデバイスの中から、「その時ユーザーにとって」最も最適なデバイスを選択し、それらを用いて、一つのサービスを利用することが可能になります。

スマートフォンで見ていた映像を、リビングのテレビに移動して、家族みんなで見ることも可能になりますし、パソコンゲームのコントローラーとして、手元のスマートフォンを利用することも可能になるかもしれません。Apple TVの AirPlay のようなサービスが、標準的にあらゆる機器で出来るようになるでしょう。特定のデバイスとの間でしか現状は利用できなかったり、特定の作り込みが現状必要な、このようなサービスが、あらゆるデバイスを使って気軽に利用出来るようになると期待されます。

Service Discovery

さて、これまでで述べたシナリオには、一点足りないものがあります。「身の回りのデジカメやテレビと連携できる・・・」といったシナリオを実現するためには、それらのWebサービスを、ブラウザのWeb Intentsに登録する必要があります。なるほど、ローカルデバイスの機能であれば、出荷時にプリセットすることも可能でしょうが、その時々、状況によって変わる身の回りのデバイスを、事前に登録しておくことは普通に考えると困難です。

そのためには、DLNAのように「その時に身の回りにあるデバイスを、自動で発見し、サービス登録する仕組み」が必要です。そのような「Deviceを自動で発見する」Service Discovery APIは、これまでWeb and TV Interest Groupで、検討が進められ、Device APIs WG で仕様提案活動を行っていました。そしてこの検討は、Web Intents Task Forceに引き継がれ、議論が続けられています。
120109-5

Service Discoveryの仕組みが、Web Intents の仕様に含まれるようになるかは、個人的には微妙かなと思っていますが(常に、service discoveryを行うのは、ちと Too, much かなと。。。前回のエントリーで紹介した、短縮URLのユースケースなどには、Service Discovery は不要でしょうし)、必要なAPIであることは間違いありません。上手くWeb Intents と Service Discovery の仕組みとが連携できるようになればいいなと思っています。

まとめ

今回は、前回に引き続き、Web Intentsについて取り上げました。今回紹介したのは、「なぜ、Web Intentsがデバイス連携で重要になるのか?」という話。Webカメラのようなことを考えると、ローカルデバイスとクラウドとを個別に考えるよりも、全てのデバイスにWebサーバーが搭載され共通的に扱えるようにしようという流れになっていること。そうすると、Webサービスとして、全てのデバイスが抽象化されるため、Web Intents を使うことで、連携可能になることを述べました。

また、マルチデバイス連携サービスが、より進展するためには、Service Discovery(機器発見)が重要となることと、それに関する現在の標準化動向についても触れました。

個人的な感覚として、これまでの「マルチデバイス連携」というシナリオには、「一台のリッチなマシン(時に、ホームゲートウェイとか呼ばれる)」が「その他のプアなマシンをコントロールする」という匂いがしていましたが、Web Intents では「全てのデバイスが同等で、それらが有機的に結合する」という雰囲気を感じています。そんなところが Web っぽくていいですよね。

Web Intents が普通に使えるようになるまでは、今しばらく時間が必要ですが(何しろ、W3Cのサイトにドラフトもあがっていない状態なので)、これからのWebを占う上で、目が離せません。

最後に、Web でのマルチデバイス連携「M2M (Machine to Machine)」を取り扱っている書籍『ウェブ進化 最終形 「HTML5」が世界を変える』 を紹介して、本日のエントリーは締めたいと思います。こちらの書籍では、Web Intents については触れていませんが、Web でのマルチデバイス連携や、今後のWebの進展に対して、日本の進むべき方向について、大変分かりやすくまとめられています。この分野に興味のある方は、是非一読されることをお薦めします。


ウェブ進化 最終形 「HTML5」が世界を変える (朝日新書)


人気ブログランキングへ
kotesaki at 10:59|PermalinkComments(0)TrackBack(0)clip!html5 | WebIntents

2012年01月07日

マルチデバイス連携を実現する WebIntents 〜基本と使い方編〜

新年明けましておめでとうございます。本年も宜しくお願いします。

さて、今年最初のPOSTは、僕が今一番興味を持っているAPIの "Web Intents" について取り上げます。
この、"Web Intents"は、Androidの "Intent" に非常に良く似た仕組みで、異なるWebアプリケーションを自由に連携することを可能とするAPIです。Webサイトの不足機能に対し、他のWebアプリの機能を利用することが可能になるため、スピーディーなWebアプリの開発を実現してくれます。利用するユーザーにとっても、手慣れたWebアプリを利用できるメリットが有ります。

このAPIの更に興味深いところは、

Device機能の利用
デバイス内の固有の機能(カメラや、住所録など)をブラウザから利用する。
Web of things
スマートフォンやテレビなどのマルチデバイス連携サービスをWebで実現する。あらゆるものが繋がるWeb
といった、今後 Web が進化を遂げていく中で注目されているこれらのサービスを実現するにあたり、重要な位置づけを示すと考えられるからです。
Android Intentによく似たAPIが、「Device機能やマルチデバイス連携サービス実現に必須となる」といっても、イマイチピンと来ないかもしれません(僕も最初はピンときませんでした)。この点については、次回のエントリーで紹介することにして、今日のエントリーでは "Web Intents" の基本的な考え方とその使い方について紹介します。

What's Web Intents?

Web Intentsは、先にも述べたように Android Intent のように、Webアプリケーションどうしを連携するAPIです。Webサイトから Web Intents のAPI を呼び出すと、pickerウィンドウが立ち上がり、登録済みのWebアプリケーションがリスト表示されます。ユーザーは、その中から任意のWebアプリを選択し、そのサービスを利用することができます。

例えば、現状のWebページで mailto: を指定すると、OSに登録されているメーラーが自動起動しますが、これを「GMailを使いたいな」と思ったことがある人は多いのではないかと思います。このようなケースで Web Intents を使うと、ユーザーは自分の使いたいWeb Mail Serviceを選択できるようになるといった感じです。例えば、GMailが立ち上がり、送信先アドレスなどが自動入力された状態で、メールの新規作成画面が表示されるといった具合。異なるWebサイト間で、データを受け渡し、連携することが可能になるわけです。

これまででも、複数のWebアプリケーションを連携させることは可能でした。例えば、ガジェットサービスのように、他のWebサイトのコンテンツを iframe で埋め込み、HTML5 Messaging ( PostMessage() ) を使うことで、異なる Webアプリ間でデータ連携を行うことは可能です。
しかしながら、連携するWebアプリは、サイトの開発者が指定する形態となっており、利用者は連携するWebアプリを基本的には選択することは出来ませんでした。先程のメールの例で言えば、サイトの開発者が GMail を選択すると、ユーザーは Yahoo!メール を使いたくても、それを直接利用することは出来ないのです。
このような状況を解決するものが、Web Intents です。すなわち、連携する Webアプリの選択権を開発者から利用者に渡し、その時々のユーザーの嗜好や状況に応じて、自由にWebアプリを選択することが可能になります。そして、この特徴が、Web アプリによるデバイス機能の利用や、マルチデバイス連携のシナリオを、現実的なものとします(この辺りの詳細は、次回説明します)。
wi-0

How to use Web Intents API

それでは、具体的な使い方について説明します。なお、以下の説明は、執筆時点の仕様に基づくもので、今後変更になる可能性があることをご承知ください。

Registration

Web Intentsでは、まず連携するWebアプリをブラウザに登録する必要があります。Android Intentであれば、アプリをインストールするときに登録されるわけですが、Webアプリではそういうわけにはいきません。このため、登録したいWebサイトの<head>内に、<intent>タグを書くことで、ブラウザに、そのサイトを登録します。具体的には、以下のような手順です。

  1. Web Intentとして利用して欲しい Web サイトに <intent> を記述する。
  2. 利用者が、上記のWebサイトにアクセスする
  3. ブラウザは、<intent>内の情報を見て、ブラウザにそのサイトを Web Intent として登録する。
ここで、<intent>は、以下のように記述します。
<intent
  action="http://webintents.org/share"
  type="image/*"
  title="image share"
  href="share.html"
  disposition="window"
/>
action (required)
Webアプリが「何の機能(動作)を提供するか」を示す。任意の文字列を指定可能。上の例はスキーマURLとなっており、共有機能を提供することを現している。なお、http://webintents.org/shareでは、このスキーマURLを用いる場合の仕様が記述されている。
type (optional)
Webアプリが「何を扱えるか」を示す。任意の文字列を指定可能。上の例では MIME type を示しており、あらゆるフォーマットの画像を扱えることを意味している。
title (optional)
このWebアプリのタイトル。Web Intentsのピッカーに、このタイトルが表示される。
href (optional)
Intent登録するWebアプリのURL。上のIntentタグが、http://example.com/ に記述されている場合、http://example.com/share.html がIntentのサイトとして登録される
disposition (default="window")
Webアプリが、どのように表示されるかを示す。windowinlineを指定可能となっており、windowの場合は、異なるWindowに表示される。inlineの場合は、ピッカー内に表示される。
以上により、所定のtypeactionに対するIntentをブラウザに登録することが出来ます。

Invocation

次は、あるWebアプリから、Web Intents を利用する手順です。他のWebアプリに処理を任せたい typeaction を指定して、Web Intentsを呼び出し、ピッカーを表示します。

まず、以下の例のように Intent オブジェクトのインスタンスを生成します。

var intent = new Intent(
  "http://webintents.org/share",
  ‘image/png’,
  'http://hoge.com/image.png');
これは、画像を共有する場合を例としています。コンストラクタの引数は、それぞれ以下のようになります。
第1引数: action (required)
Intentに対して依頼する action を指定する。任意の文字列を指定可能。上の例では、スキーマURLにより、share(共有)を指定している
第2引数: type (required)
Intentに処理を依頼するデータの type を指定する。任意の文字列を指定可能。上の例では、MIME type(image/png)を用い、png形式の画像を用いることを示している
第3引数; data (required)
Intentに渡すデータを指定する。任意のObjectを指定可能(structured cloneアルゴリズムが適用される)。ただし、引き渡すデータの形式は、action と type のペアごとに固有のフォーマットで渡す必要がある。上の例では、その仕様がスキーマURLの http://webintents.org/share で規定されているため、その仕様に則り、画像のURLを指定している。(※ canvasなどを用い、data-urlを生成して、引き渡すことも可能)
そして、以下のように startActivity メソッドを呼ぶことで、Web Intents のピッカーが表示され、コンストラクタで指定した type と action にマッチする Intent のリストがピッカーに表示されます。
window.navigator.startActivity(intent, onSuccess, onError);
intent (required)
生成した Intent オブジェクトのインスタンスを指定
onSuccess (optional)
Intentからデータが返ってきた時(Intent側でpostResult()を呼んだ時)の callback 関数。この関数の第一引数に Intent からのデータが格納される。
onError (optional)
Intentで、処理が失敗したとき(Intent側でpostFailure()を呼んだ時)の callback 関数。この関数の第一引数に Intent からのデータが格納される。
上記手順で、表示されたピッカーからユーザーがWebアプリを選択すると、Intent側で処理が引き継がれます

Intentで呼び出された際のデータの処理方法

ピッカー経由で、Webアプリが呼ばれると、

window.intent
に、各種データが格納されています。例えば
window.intent.data
に、呼び出し側から指定されたデータが格納されていますので、それに対する処理を行った後、
window.intent.postResult(some_data);
として、処理後のデータを指定して intent.postResult() を呼ぶことで、データが呼び出し側に戻ります(startActivity()の第二引数で指定した関数が呼ばれます)。この時のデータの形式は、action と type のペアで規定される仕様に従います(上の例ではhttp://webintents.org/shareに、この仕様が記載されています)。
なお、処理に失敗した場合は、intent.postFailure()を呼んでください。呼び出し側に処理が戻り、startActivity()の第三引数で指定した関数が呼ばれます。

エミュレーションライブラリ

現在、Web Intentsをサポートするブラウザはありませんが、これをエミュレーションするライブラリが公開されています。Intentを呼び出す側、呼び出される側双方で、以下のJavascriptを読み込むことで、Web Intents を試すことが出来ます。

<script src="http://webintents.org/webintents.min.js"></script>

サンプルサイト

http://webintents.cloudfoundry.com/に、Web Intentsのサンプルサイトを作ってみました。
wi-1
このページの head タグ内には、

<intent
  action="http://webintents.org/shorten"
  type="text/uri-list"
  href="shorten"
  title="Link Shortener(test)" />
<intent
  action="http://webintents.org/share"
  type="image/*"
  href="imageshare"
  title="Image Share(test)" />
と、二つの intent タグが記載されており、http://webintents.cloudfoundry.com/shortenで URL の短縮化サービス(shorten)を、http://webintents.cloudfoundry.com/shareで、画像の共有サービスをWeb Intentsとして登録しています。(注記:エミュレーションライブラリでは、現状 http://webintents.org の Origin の localStorage に登録しています。)

ここで、例えば "shorten" と書かれたボタンをクリックすると、以下のコードが実行されます。

$("#urlshortner button").click(function(){
  var url = $("#urlshortner input").val();

  var intent = new Intent(
    "http://webintents.org/shorten",
    "text/uri-list",
    url);
  window.navigator.startActivity(intent, function(data) {
    $("#urlshortner .out").text(data);
  });
});
ここでは、action = http://webintents.org/shorten, type = text/uri-list で、インスタンス(intent)を生成し、startActivity()で、Web Intentsを呼び出しています。ここで、この type と action に対して、先に示したように "http://webintents.cloudfoundry.com/shorten" が登録されていますので、ピッカーにはこのURLが表示されます。このリンクをクリックすると、処理がこのサイトに引き継がれます。
wi-2

http://webintents.cloudfoundry.com/shorten では、最初に

var url = window.intent && window.intent.data || null;
と、Web Intents で渡されたデータを取得し、
var shorten = url.length > 8 ? url.slice(0,8) : url;
と、渡されたURLを最初の8文字に短縮します(無茶苦茶インチキですが、まぁサンプルということでご容赦ください (^^;) )。
wi-3

ここで、"back to caller"のボタンをクリックすると、以下のコードにより、データが呼び出し側に戻されます。

window.intent.postResult(shorten);

setTimeout( window.close, 500);
postResult()で、短縮後のURLデータを呼び出し側に戻し、window.close() を呼ぶことで、このサイトを閉じています。
なお、Web Intents のエミュレーションライブラリでは、データの受け渡しにpostMessage()を用いているのですが、即座にwindow.closeを呼んでしまうと、postMessageの処理が完了しないうちにwindowが閉じてしまい、データを戻せないため、500msec待った後、closeする処理を行っています。

このようにpostResult()で、データが返されると、呼び出し側では startActivityの第二引数で指定された callback 関数が呼び出され

function(data) {
  $("#urlshortner .out").text(data);
}
画面に短縮後URLが表示されます。
wi-4

ここで、さらに以下のURLにアクセスします。


wi-5
上のページは、Web Intentsのデモサイトとなっており、やはり短縮URLを示す Intent タグが記述されています。
<intent action="http://webintents.org/shorten"
  type="text/uri-list"
  href="shorten.html"
  icon="favicon.ico"
  disposition="inline" />
これにより、action = "http://webintents.org/shorten", type = "text/uri-list" に対して、新たに http://demos.webintents.org/shorten.htmlがWeb Intent として登録されました。

この状態で、もう一度先程のデモサイト(http://webintents.cloudfoundry.com/)にアクセスし、"shorten"のボタンをクリックしてみましょう。pickerには、新たに追加登録したWebアプリが表示されます。
wi-6

さて、新たに登録した Intent では disposition="inline" と記述されていました。このため、このリンクをクリックすると、ピッカーウィンドウ内にアプリが表示されます。
wi-7
ここで、"return" ボタンをクリックすると、呼び出し元のサイトに短縮URLが返されます。
wi-8
今度は、きちんとした短縮URLですね :)

このように Web Intents を使うことで、その時々の好みに応じて、好きな短縮URLサービスを利用することが出来るようになります。他にも、画像編集サイトやURLの共有サイトなどを、ユーザーが自由に選択できるようになるなど、ユーザー中心型のWebアプリケーション連携が実現できます。

まとめ

今回は、Web Intentsの基本的な考え方や使い方を紹介しました。Web Intentsを使うことで、ユーザー中心型のWebアプリケーション連携を実現し、Android インテントのように、不足機能に対し、他のWebアプリの機能を利用することで、スピーディーなWebサイトの開発が可能となることがお分かりいただけたかと思います。

ただし、現在、WebIntentsの仕様は盛んに議論されている最中ですので、今回紹介した仕様は変更になる可能性が高いことにご注意ください。

さて、Web Intentsは、Device 機能の利用や、マルチデバイス連携サービスを実現するための重要なAPIとして、現在W3Cで検討が進められています。次回は、この点の詳細について紹介したいと思います。

Useful Links about Web Intents


人気ブログランキングへ
kotesaki at 22:36|PermalinkComments(0)TrackBack(0)clip!html5 | WebIntents

2011年12月31日

WebSocketから、これからのWebを予想してみる

WebSocket が、12月12日についにRFCになりました(RFC6455)。テキスト転送だけでなく、バイナリー転送もサポートされ、コネクションをキープするための ping/pongなどコントロールフレームも定義されました。rfcになる過程で様々なバージョンと、その実装系が出ていますので、そこのネゴシエーションの仕組みが入っていたり、以前は割と自由に使えそうだった subprotocolが、IANAにレジストレーションが必要になったりと、なかなかしっかりしたプロトコルに仕上がっている印象です。

さて、今年最後となる、今日のポストでは、このWebSocketにより、今後のWebはどうなっていくのかについて、僕が最近感じている妄想を書き連ねてみます。

WebSocketとは、いったい何なのか?

さて、WebSocketとは、いったい何なのでしょうか?この問に対して、一般的には、

  1. WebでPush通信が可能になる
  2. Webで双方向通信が可能になる
  3. Webを高速化できる
といった説明がなされることが多いように感じられます(それぞれ、よく僕が耳にする説明で、ソートしました)。ただ、このような説明は「具体的な使い方」にフォーカスをあてており、WebSocketの全体像を示しているとは言えません。もう少し、俯瞰的に "What's WebSocket?" を考えたくなります。

結論から先に言うと、「WebSocketはWeb上に、個々のVPNを作る技術である」と僕は思っています(あくまで、僕の私見です)。

ここで、VPNとは、インターネットを介して、個別のプライベートネットワークに接続するための技術の総称です。具体的には、IPパケットのデータ部分に、接続したい相手先のアドレス(IP-VPNで、社内網に接続する場合は、社内のプライベートアドレス)を記述しておき、

  1. グローバルのIPアドレスで、IPパケットがVPNの入り口(ゲートウェイ)まで届き
  2. ゲートウェイで変換処理がなされ、データ部分に書かれている宛先のアドレス(プライベートアドレスなど)にデータが届けられる
といった手順で、個別のネットワークに入ることが出来ます。

VPNの観点で、WebSocketを再検証してみる

さて、WebSocketに話を戻すと、WebSocketのプロトコル自体が、上のVPNの仕組みに非常に似ています。IPパケットのデータ部分で、接続するWebSocketサーバのURL(ws://example.netなど)が指定されており、実際の通信は、このサーバーに対して行われます。システム依存ではありますが、IPパケットで指定されているIPアドレスは、あくまでゲートウェイ(具体的には Load barancer, proxy, URL routerなど)を指定するものであり、ブラウザが直接的に接続する、サーバーとは異なります。ユーザーが本当に接続するのは、URLで指定されたWebSocketサーバーになりますので、これはVPNの仕組みと非常に似たものと言えます。
111231_0

具体的な例をあげましょう。通常のVPNのユースケースとして、VPNで社内網に接続し、リモートデスクトップで自席のPCに接続するというものがありますが、このユースケースを WebSocket で実現するサービスを ERICOMという会社が提供しており、ブラウザからリモートデスクトップ(VMWare View)を利用することが出来ます(デモサイト)。ただ、執筆時点(2011.12.31)ではエラーとなり接続できません
111231_2

従来のVPNとの違いとして、マルチデバイスへの対応の容易性があげられます。実際、先にあげたデモは、個別のソフトウェアのインストールはもちろん不要ですし、iPadなどのデバイスでも利用することが出来ます。これだけでも、従来のVPNを用いたリモートデスクトップの利用に比べ、格段にアドバンテージがあると言えます。

更に、僕が注目するポイントは、その利用の容易性です。従来のリモートデスクトップ利用の場合、

  1. 接続用ソフトを起動し、VPNに接続する
  2. リモートデスクトップのソフトウェアを起動し、サービスにアクセスする
といった手順が必要でした。一方、先ほど紹介した例では、
  1. そのURLにアクセスする
だけで終わりです。ユーザーは、「VPNに接続している」と意識することもなく、シームレスにVPNサービスを受けることが出来ます。従って、「無意識のうちに、VPNを渡り歩いていく」ということがWebSocketにより可能になるわけです。

Webをベースプラットフォームとして、異なるネットワークが作られていく

こうなってくると、Webは、単にWebページ(コンテンツ)にアクセスするための仕組みとは言えなくなります。むしろ、Webが基本のプラットフォームとなり、そこの上に個別のポリシーのネットワークが形成される。そして、ユーザーは、それらのネットワーク上を自由に行き来するという世界観で捉えるほうが妥当であると僕には感じられます。 111231_1

実際、このような流れは、既に存在します。Facebook, Twitter, Google+などのソーシャルサービスが、既にそれを具現化しており、ユーザーは、それぞれのネットワークの中で生活しています。そのネットワークの、それぞれのFriend Listの中で、メッセージがダイレクトに交換され、コミュニケーションなどのサービスを利用している図式は、まさにWeb上のVPNの中で、サービスが提供されていると考えられます。

そして、今既に提供されているこれらのサービス。それは、現状Cometと呼ばれる HTTP のポーリングを駆使した技術の上で成り立っています。それ故に高コストであったり、制御が面倒など自由なサービスを実現するのに様々な制約が課され、従来のVPNのように自由自在なサービスを提供するのが困難なものでした。しかし、WebSocketは、そのような制限を解放します。開発者は従来のVPNのように自由なサービスを実現することが可能になり、ユーザーはそれらを自由に利用出来るようになります。それは、ユーザーから見たネットワークが、IPではなくWebになると捉えることも可能でしょう。IPはそこ(Gateway)に到達するための橋渡し役となり、本当に意味を持つもの(ネットワークの最終到達点)は、URLになるというわけです。

提供されるサービスは、従来からWebで既に提供されているサービスかもしれません。オフィス系のアプリケーションかもしれませんし、ゲームかもしれませんし、テレビ電話かもしれません。しかし、従来提供されていたもののレスポンス性や機能性ががあがったり、他のサービスと連携可能となったりなど柔軟に利用出来るようになることで、とんでもないブレークスルーが生まれることは実証済みです。GMailや、Google Maps、Twitter, Facebookなどが、これまでのWebの歴史の中でそれらを実証してきました。

WebSocketが通信面で、その制限をなくし、HTML5の他のAPIと結びつくことで魅力的なサービスが生まれていくでしょう。「ソーシャルサービスを加速し、より魅力的なものに変えていく、それを底辺から支えるものが WebSocket である」と僕は確信しています。

ネットワーク屋さんの観点で、さらに考察してみる

さて、ネットワーク屋さんの観点で見ると、これまで TCP/IP をベースとし、プロトコルや設計を行って来たこれまでの考え方が、URLに置き換わることに他なりません。現在でも、
「これからのインターネットの進化はコンテンツをベースに考えなければならない」
と言われていますが、WebSocketは、さらにこの考え方を一歩前進させるであろうと僕は考えています。
「これからのインターネットの進化は URL で識別される仮想的なネットワークをベースに考えなければならない」
といったところでしょうか(もっと突っ込んで言うと、識別されるネットワークの単位は Origin になるんだろうなと想定しています)。

URLは、従来のインターネットで言うと IPアドレスに相当しますので、そのメタファーで行くと、TCPのポート番号のように、WebSocketの上で動く個別のプロトコルを識別するものと、そのプロトコルの実体が必要になってきます。 それに該当するのが、WebSocketの subprotocol になるでしょう。WebSocketが RFC となった今、次に来るのは、その上で動く subprotocol になるのは必然なんじゃないかなと。それにより、WebSocket上でやりとりされるデータの相互接続性が得られ、Webは更に進化していくでしょう。(subprotocolがRFCの過程で、IANAへのregistryが必要になった点も、大きくそれを後押しします)
111231_3

また、Webで提供されるサービスが大きく変わり、テレビ電話のようなリアルタイムサービスが提供されるようになると、それを下から支えるIP網やその下のデータリンクレイヤには、これまで以上に品質が求められるようになるでしょう。遅延が大きく、ロスが大きく、帯域の狭い網や簡単にセキュリティの攻撃を受けるような網では、これからのWebで満足のいくサービスを提供することは出来ません。網は単なる土管では決してありません。

そして、インターネットとのメタファーで、もう一つ重要になるのはルーティングプロトコルです。SNSの世界で、ルーティングテーブルは、ソーシャルグラフがそれにあたり、Internal なルーティングプロトコル(RIPやOSPFに相当)は、ユーザーが「いいね!」を押したときや、「フォロー」したときのシステムでのDBの変更に相当します。

そう考えてくると、「BGPのような Externalなルーティングプロトコルはどうなるんだろう?」ということが頭をよぎります。ソーシャルグラフを、個々のプロバイダがリアルタイムにやりとりできるようになると、例えば FacebookのVideo callingと、Google+ のHangouts間でダイレクトにテレビ電話ができるようになります。僕は、ソーシャルグラフの事情にあまり詳しくありませんので、これぐらいで留めておきますが、想像するだけでワクワクしてきます。

最近のDevice系の話も考えると、ソーシャルグラフに、テレビや車などの各種機器・デバイスが含まれるようになるかもしれません。そんな人とモノがWebの上で結びつく、すなわち SNS と Web of things が融合し、それが、ある規定のもとに相互接続されていくようになるんじゃないかなと。

VPNという言葉は不適切?

さて、ここまで「VPN」という言葉を連発してきました。ここで、VPNという言葉には、他と繋がっていない独立したネットワークというニュアンスが強いように思われます(社内網に繋ぐといったユースケースは、その典型)。しかし、Webはオープンなもので、相互接続されているからこそ今のWebが形成されてきましたし、今後の進化もそれが大前提となるでしょう。そう考えると VPN と言う言葉は相応しくはないだろうなと思います。

インターネットの上に、異なるWebというプラットフォームが作られる。個々のポリシーに基づくネットワーク(インターネットで言うとASみたいなもの)が作られ、それらが相互接続することで、Webという巨大なネットワーク 〜 One Web 〜 が形成されていく・・・という考え方が適切で、そうなるとVPNという言葉は不適切なように思えます。今の技術とのメタファーでVPNというのは構わないでしょうが、実のところそれは違うでしょうね。


人気ブログランキングへ
kotesaki at 11:04|PermalinkComments(0)TrackBack(0)clip!websocket | html5

2011年11月17日

第23回HTML5とか勉強会 Unconferenceの巻

今日。。。と思ったら、既に日を跨いでいるので昨日になりますが、毎月定例のHTML5とか勉強会を開催。今回は、僕がモデレータを行いました。

HTML5とか勉強会は毎回開催しているといいつつ、実は一回だけキャンセルしているので、なにげに今回は記念すべき2周年(今日気づいた)。そんなこととは露知らず、今回はちょっと実験的な取り組みを行いました。それがUnconference。

Unconferenceって何?について、正確な定義は実のところ僕も理解していません。Wikipediaによると、

An unconference is a participant-driven meeting. ... to avoid one or more aspects of a conventional conference
と、一方的に主催者が企画して講演するんじゃなくて、出席者が「これを話したい!!」というネタを持ち寄り、少人数のグループに分かれて、それについて議論する感じです。今回は、この形式を実験的に開催しました。

おかげさまで、HTML5とか勉強会は毎回盛況で、主催側としては大変嬉しい限りなのですが、一点気になっていたのが、「参加者どうしがコミュニケーションがとれていないのでは?」ということ。一方的に聞くだけのカンファレンス形式では、なかなかコミュニケーションするのは難しいですし、懇親会にしても、初対面どうしが活発にコミュニケーションしているか?というと疑問はあったりしました。

コミュニティの目的として
日本が世界のWebシーンをリードするような存在になる
を挙げており、その為には勉強会に参加した人たちが、お互いに仲良くなり、そこから相乗効果が得られることが必要だと真剣に考えているのですが、今までそれが出来ていなかった。で、それを打開するために、今回Unconferenceを開催しました・・・というのが意図です。何かしらのテーマで議論することでHTML5に対する理解や関心も深まりますし、参加者どおしの親交も深まるでしょう。

もう一つの狙いは、「出席者の個々のニーズを満足できるのでは?」というものです。カンファレンス形式で、最新事情に卓越した識者の話を聴くことができるのは勉強会の醍醐味ではあるのですが、かといって日頃の問題や疑問点に直結するかというと、ややギャップがあるのも事実です。かといってそういった現実的なネタを、100人規模の聴衆の前で議論するのは躊躇するところです。ここで、Unconferenceであれば、少人数のグループで議論する形式であり、気軽に日頃疑問に感じているネタを議論することが出来ます。従って、各参加者の個別のニーズを満足できるのでは?と考えたわけです。

とまぁ、そんな意図のもと、今回Unconferenceを開催しました。Unconferenceは日本人には馴染まないという話は通説であり(積極的に参加者がネタを持ち寄る形式なので、日本人だとネタ出しの時点でシーンとしかねない)、実際のところ海外での開催に比べると、最初のネタ出しで、そんな雰囲気は感じられました(Unconference自体が、日本で浸透しておらず、慣れていないといのも一因だと思います)。とはいえ、8つのネタを出して頂き、それぞれのディスカッションテーブルでは熱い議論が繰り広げられ、盛況を得ることが出来ました。勉強会主催側としては、今後の運営にあたり有益な提案をいただいたり・・・やって良かったなぁというのが素直な感想です。

twitterを見ると、Unconferenceに関してポジティブな意見が多数を占めています。嬉しい限り:)。今回は、正直言って主催側も、参加者側も手探りな感じがあったのは否めませんが、ここは慣れだけの問題なので、回を重ねる事で解決されると思います。ファシリティーの問題もありますので、毎回開催するのはキツイかもしれませんが、ある程度コンスタントにUnconferenceを開催していきたいと思っています。

最後に今回出席いただいた皆様、とても楽しい時間を過ごすことが出来ました。本当にありがとうございます!!


人気ブログランキングへ
kotesaki at 02:38|PermalinkComments(0)TrackBack(0)clip!

2011年10月29日

「徹底解説 HTML5 オフライン系API編」を執筆しました

今年の前半、執筆していた書籍が、先日出版されましたので、今日はその紹介です。

徹底解説HTML5 APIガイドブック オフライン系API編

タイトルは、「徹底解説HTML5 APIガイドブック オフライン系API編

Application Cacheや、WebStorageなどのHTML5のオフライン系APIに関する解説書となっています。「徹底解説HTML5」は羽田野さんと僕とで、シリーズとして書いており、その4冊目となります。

僕に関しては、WebSocketなどの通信系APIの印象が強いと感じられている方が多いかと思います。そんな僕が「なぜオフライン系を?」ですが、その辺りを冒頭の”はじめに”に記載していますので、そこから抜粋。

その時の資料を改めて見てみると、最後に「PCリソース(HDD)がcloudの部品になったようなイメージ?」と書かれています。クラウドサービスというと、メインの処理系は、サーバーサイドにあり、クライアント(ブラウザ)はプレゼンテーションレイヤを受け持つものというのが、常識であった訳ですが(2年後の今でも、そのように捉えている方は多いと思います)、「Web SQL Database のようなオフライン系APIは、その概念を覆す物である」ということを言っていたわけです。

 クラウドサービスの根幹は、データ管理です。その機能が、オフライン系APIの特にDatabase系APIにより各ブラウザにまで広がるわけで、自然と付随するデータ処理部分も、各ブラウザへと分散されます。従って、これは、データの管理と処理系が、サーバーと各ブラウザに分散された巨大なクラウドが形成されることを意味しており、実に大きな意味合いを持っているというわけです。

つまるところ、「オフライン系APIは、クラウドサービスの根幹を変容させるもので、(上には書いていませんが)通信系APIと結びつくことで新たなイノベーションが起きる」というのが僕の持論で、そこで今回本を執筆させていただいたというのが僕のモチベーションです。

書籍の構成は大きく2部に分かれていて、前半は個々のAPIの紹介です。WebStorageに始まり、Indexed Databaseや、File API:Directories and System などの最新のAPIも取り上げました。特にIndexed Database や File API: Directories and Systemは全体のコーディングの流れが分かりづらいAPIですので、その辺りをなるべく分かりやすく解説しました。後半は、オフライン系APIの使い方。WebStorageを用い、サーバーDBとブラウザDBを分散同期させるためのコーディングをサンプルアプリケーションを例として解説しています。

DBの分散同期プログラムは、名前からも推測されるように、難度の高い代物で、Javascriptコーディングについて、一定レベルの知識を必要とします。このため、Javascriptコーディング技法(jQueryの使い方や、オブジェクト技法、MVCなど)をかいつまんで第8章で説明した後、具体的なサンプルに移る構成としています。

今回のブログPOSTの最後に、先程とりあげた「はじめに」の結びの文書を紹介して締めたいと思います。

 しかしながら、本書で述べていることは最初の出発点です。先に述べたように、オフライン系APIは、クラウドサービスの根幹を大きく変えるもので、クライアント同士が、互いに協調し自律的にサービスを形成する、全く新しい概念のサービスを生み出す可能性を秘めていると筆者は信じています。

 本書を読み終えた際には、今一度「このAPIが、どのような新しいクラウドサービスを生み出すだろうか?」と考えて頂ければと思います。もちろん、オフライン系APIだけで新しいサービスが生まれるわけではなく、他のHTML5のAPIも必要ですし、更に現状では足りないAPIもあるかもしれません。足りないことを認識することが、新たなイノベーションの第一歩です。本書が、そのきっかけとなれば幸いです。


人気ブログランキングへ
kotesaki at 14:34|PermalinkComments(1)TrackBack(1)clip!

2011年10月20日

Cloud Foundryについて

昨日、知人が開いている Cloud Foundry の輪読会でLTをしてきましたので、今日はその話。

Cloud Foundryって何?」について、簡単に触れておくと、VMwareが提供しているオープンソースのPaaSフレームワークで、Google App EngineHerokuのようなaPaaS(アプリケーション開発用のPaaS)を簡単に構築出来る代物です。

cloudroundrylogo

個人で開発する分にはHerokuは大変便利ですが、オフィシャルな開発でHerokuを使おうとすると、何かとバリアーがあったり(技術的な理由というより、ポリシーとかトラディショナルな理由が殆どだったりしますが)するのも事実。一方、Cloud Foundryであれば、オープンソースのソフトウェアで、githubで公開されています。従って、社内の開発環境などに簡単に利用可能です。使える言語も、rubyやnode, Java, PHPなど多彩な環境が整備されており、mysql, mongodbなどのDB, NoSQLも簡単に利用できます。これらの環境をスクラッチからセットアップしようとすると、一日がかりの仕事ですが、CloudFoundryを使えば、セットアップに要する時間は1時間程度。その後は、Heroku感覚で簡単に各種Webアプリをdeploy可能。とても魅力的なものとなっています。

また、普段便利に使っているPaaSが、「実際、どんな風に組まれているんだろう?」と興味を持たれている方にもオススメです。もちろん、PaaS実装の一例ではあるのですが、先にあげたgithubでコードは、公開されていますので、アーキテクチャの全てを知ることが出来ます。全てのコードが、ruby(Railsやsinatraで書かれているものもあり)で書かれており、可視性に優れているのも特徴です。

Cloud Foundryは、システムリソースを無駄に消費せず、また、アプリ追加時のシステムダウンを防ぐため、非同期 I/O を多用しています。具体的には、rubyの非同期I/Oに Event Machineを利用し、イベント駆動のメッセージバスとして、NATS(Cloud Foundryの開発メンバーで、VMware CTOのDerekさんが開発)を用いるアーキテクチャとなっています。

システムアーキテクチャの詳細は、当日@u1さんが発表された資料を確認ください(講演資料)。また、利用するパターンは複数あり、VMware自体が提供しているPaaSサービス Cloud Foundry.comで試すことも可能ですし、githubで公開されているコードを利用することも可能です。詳細は、同じく当日VMwareの池田さんが講演された資料 を確認してみてください。

ここで、ユーザー端末からWebアプリケーションのdeployなどを行うCLIとして、"vmc"というツールが提供されているのですが、CLIだけでは、なかなか面倒なのも事実。そこで、vmcのWeb-GUI版を作ってみました。。。というのが、当日僕がLTで話した内容です。

Web GUIのURLはhttps://komportal.cloudfoundry.com/Cloud Foundryでdeployしているアプリを管理できるようになっており(利用にあたっては、Cloud Foundry.comのアカウント申請が必要です)、アプリの開始/停止やサービス(DBなど)のbind処理、ログの確認などが可能になっています(アプリのdeployやupdateには、現状対応していません)。なにかと、便利かと思いますので、Cloud Foundryを利用する際に、活用頂ければと思います。なお、このWeb-GUI自体も、CloudFoundryで動いています。

現行WebSocketは動きませんが、ソースを変更すれば、動かすことは不可能ではないと思います(node.js自体は、動作しますし)。それ以外にも、必要に応じて機能を変更・追加することも可能。PaaSがオープンソースになることで、様々な夢が広がります。単純にわくわくしますね。


人気ブログランキングへ
kotesaki at 00:43|PermalinkComments(1)TrackBack(0)clip!

2011年10月19日

わかちデモをリニューアルしました。

 早いもので10月も半ば、残暑も終りを告げ、だいぶ過ごしやすくなってきました。先週末は、自宅の庭にチンゲン菜と小松菜を植えました。最近、大雨が多く葉物は傷みやすいため、ちょっと心配ではあるのですが、美味しく育ってくれればなぁと水をあげる毎日です。

 他には、先週末手持ちのiPod TouchをiOS5にバージョンアップしたところ、iPod TouchからもMBAからも音楽データががっさり消えてしまいました。。。サポートに電話しても繋がらないし、似たような方が他にもいらっしゃ るようで、ブログなどをみると泣き寝入り(買いなおし)しか無い様子。なんか、どうでも良くなりつつ「これでiTunesで、また買ったら完全負け組だよね」とも思ったのですが、結局失ったCDを購入しました。すっかり負け組です。ダイアログメッセージで、「以前買ったものですが、よろしいですか?」みたいな確認が出て、負け組オーラは更に全開です。

わかちデモのリニューアル

さて、本題です。Chromeの14が、devで出てから気にはなりつづけていたのですが、WebSocketのブラウザ実装バージョンが新しくなり(多分rev10)、僕が以前から公開していた「わかちデモ(紹介ブログはこちら)」は、すっかり動かなくなっていました。(以前のrev(00)とはプロトコルに互換性がない)

ここで、socket.io v0.8がrev10に対応したこともあり、WebSocketのライブラリ更新を行いました。以前の版では、pywebsocket + apacheを利用していたのですが、どうもインストールが上手くいかなかったため、node.js + socket.ioの組み合わせで改めてリニューアルしました。(この際、これまで使っていたVPSが、どうも動作が不安定だったため、新たに「さくらのVPS」に新たに契約しました。)

wakachi

サイトのURLは、http://www19072u.sakura.ne.jp/。微妙なホスト名ですが、僕が生まれた年(1972年)を連想させるURLなので、「めんどくさいし、まぁいいかな」って感じ。せっかくなので、デザイン含め(英語対応も)思いっきり変更しました。

WebSocket pipelineと従来のHTTPとで、わかちの処理時間が10倍以上異なるのはそのままで、最新のFireFox7にも対応。様々なプラットフォームで試せるようになりました。測定してみると、FireFox7は、全体的に処理時間がChromeやSafariに比べ、WebSocketもHTTPもスローな結果が得られました。以前node.jsのメーリングリストで、FireFoxだとモバイル環境でもsocket.ioの通信が安定するというポストがありましたが、この辺が関係している(スローな分、ネットワークなどに優しい)のかもしれません。

ちなみに、現状のブラウザで測定してみると、safari5が爆速です。ただ、これはsafari5のみが以前のバージョンで動いており、平文のままで動作している(WebSocketの最新バージョンでは、XORでマスキングされたデータが交換される)ことから、処理が軽いためかな?と考えています。

他にも、色々と機能拡張したい点もあるため、ちょいちょい改修していくと思います。やっぱり、楽しいですね:)


人気ブログランキングへ
kotesaki at 02:06|PermalinkComments(1)TrackBack(0)clip!html5 | websocket