Previous month:
September 2009
Next month:
November 2009

Google WaveがHTML5ブラウザーへのシフトを加速する

 Internet Explorer 3.0/4.0 の開発に関わっていた人間として言うのも変な話だが、そろそろIEには主役の座を降りてもらった方が良いと思っている。いろいろな要因がからみあって今の状況があるわけで、その部分について今さらここであれこれ言うつもりはないが、実際のところ、

  • IEが他のブラウザー(Safari/Firefox/Chrome/Opera)と比べてHTML5やCSS3のサポートに関して大きく遅れている
  • そもそもIEの進化のスピードが(というかMicrosoftから出る製品すべての進化のスピードが)遅すぎる
  • にもかかわらずIEのシェアが大きいため、業界全体の足を引っ張っている

という現状があることは誰にも否定できない。

 HTML5やCSS3の新しい機能により可能になる新しいウェブアプリをどんどんと作って行きたいと考えているエンジニアは私だけではないわけで、その意味では「鶏と卵状態」を作り出して業界の足を引っ張っているIEの存在は本当に「迷惑」。

 Googleが自分自身がブラウザーを出したのも、決して「Microsoftからブラウザーのシェアを奪う」なんてちっぽけなことが目的ではなく、「(自分たちが得意とする)ウェブアプリの進化を加速したいから」である。

 そんなGoogleがホームページを使った「軽いジャブ」のように繰り出したのが、Techcrunchでも取り上げられた「Sexy Button」。FirefoxやSafariを使ってGoogleのホームページを尋ねた人にだけ少し見栄えの良いボタンを表示する、というものだ。

 しかしこんなものはまだまだ序の口で、そろそろ「このサービスを使うにはHTML5準拠のブラウザー(つまりIE以外のブラウザー)が必要です」とどうどうとうたったサービスがいろいろなところから出て来ても不思議ではないタイミングである。

 まずは(すでに複数のブラウザーを走らせている)開発者向けのサービスから始まり、(ブラウザーの切り替えに抵抗のない)アーリーアダプター向けの新規サービスが「IEを捨てる」もしくは「IEユーザーには機能限定のサービスのみ提供する」という勇気ある行動に出始めると私は見ている。

 その先頭に立つのがGoogle Wave。Google WaveはHTML5の新機能をふんだんに使っており、ターゲットユーザーを考慮しても、Googleのこれまでの行動から判断しても、「IEをばっさりと切り捨てる」行動に出ても全く不思議はないし、それだけの影響力はある。

 MicrosoftがExcelをGUI OSへのシフトの戦略兵器として使ったのと同じ様に、GoogleがGoogle WaveをHTML5へのシフトへの戦略兵器として使い、よりモダンなブラウザーへの切り替えを加速してHTML5の普及を促すのでは、とひそかに期待している私である。


DellのAndroidケータイが意味するもの

 CNet/WSJにも書かれていたが(参照)、DellがAndroidを使ったスマートフォンのリリースに向けて着々と準備を進めているらしい。

 Microsoft/Intel連合がOSとチップセットという組み合わせでパソコンビジネス(ハード)への参入障壁を極端に低くし、大量の新規参入組と自然淘汰により一気にパソコンの低価格化・コモディテぃ化が進んだことは記憶に新しいと思うが、それと同じような波がようやく携帯電話の世界に押し寄せて来ている。

 ここに来てはっきりと見えて来たことがいくつかある。

  • Androidにより参入障壁が大幅にさがり、中国・台湾・韓国などからメーカーが大量に参入してくる
  • そういったメーカーに製造をまかせ、自分はデザインとブランドだけで勝負する企業も参戦する(Dellはだぶんここに位置することになる)
  • スマートフォンとそれ以外の境があいまいになり、フルブラウザーを搭載するのがあたりまえになる。そして、WebKitがモバイル・ブラウザーのファクト・スタンダードになる。
  • Apple・RIMはユーザー層を絞り込んだ差別化路線を進み(1台あたりの粗利益は200ドル以上)、Android陣営は低価格化路線を進む(1台あたりの粗利益は高々数十ドル)。その狭間で立ち位置に苦労するのが、MicrosoftとNokia。
  • Windows Mobile 6.5は期待はずれとなり、7.0待ちのOEMはAndroidとの二股路線に走る。MicrosoftはWindows Mobile 7(もしくはWindows Phone 7)で大幅なUIの変更を試みるが、それを積んだ携帯が出るのは早くて2010年の後半、へたをすると2011年にずれ込み、対Appleという意味では3年以上の遅れとなる。
  • 日本のケータイメーカーは(1)このまま日本市場に特化した端末作りで突っ走る、(2)Androidに切り替えて世界と戦う、(3)撤退もしくは合併する、のどれかを選ばなければならない。
  • NTTドコモはあくまで日本メーカーの擁護の立場をくずさないだろうが、それよりも、お財布ケータイ・絵文字・日本独自のコンテンツが大きな参入障壁として海外メーカーに立ちふさがる。

 大体の世界の流れは見えて来たのだが、予想が一番難しいのが日本市場。今のまま日本独自路線を突っ走っても開発費が回収できないことは目に見えているが、海外メーカーにとって大きな参入障壁があることは事実。

 OSをAndroidに切り替えることにより開発費を下げながらも、海外メーカーを排除しつづけるというウルトラCもひょっとしたら可能かも知れないが、どうも長続きするとは思えない。

 それよりも、日本国内の会社(普通に考えてFUNAIとかBUFFALOとか、ひょっとするとバンダイとかツタヤもあり)が、実際の設計・製造は中国に外注しながら「お財布ケータイ・絵文字・日本独自のコンテンツ」の三種の神器だけはちゃんとサポートしたAndroidケータイを超安価で出したらバランスが大きく崩れるように思えるんだが、どうだろうか。


HTML5入門:アニメーションの実装方法3種

 HTML5・CSS3のような新しい技術の問題点は、HTML4やらFlashなどの枯れた技術と違ってノウハウ・ライブラリ・ツールとかがまだ十分にそろっていない事。普及のタイミングもまだはっきりとしていないこの段階で手を出せない・出しにくいと感じている人が多いのも良く理解できる。

 私から見れば、逆に「こんな楽しい状況は滅多にない」わけで、商売になるかならないかは二の次にしていろいろと試したくなる。

 今日作ったのは、HTML5+CSS3上で可能になる(ただし現在ではWebkit独自の拡張を含む)3つのアニメーション・テクニックの比較(左に貼付けたものがそれ、Safari/Chromiumだとすべて動く。Firefox/OperaだとDOMとCanvasのみ(ただし別ウィンドウで開かないとCanvasが動かないークロス・ドメインセキュリティのバグか?))。

 詳しくはソース(参照)を見ていただければ分かると思うが(MITライセンス)、簡単に解説するとこんな感じになる。

1. DOM Animation

 HTML ElementをJavascriptからDOM操作で位置(style.top)を動かす手法。HTML4でアニメーションを実現しようとしたらこの方法しかなかった。DOMの操作でアニメーションを実現するため、デバイスの能力やブラウザーの実装のされかたによっては、全フレームを描画してもらえない場合があり(DOMに変更をほどこしても、ブラウザーは画面への反映を非同期に行う点に注目)、アニメーションが多少カクカクすることがあるので要注意。

2. CSS Animation

 これはWebkitが先んじて実装した、transition (現時点では -webkit-transition)というスタイルを使って行うアニメーション(だから現時点ではWebkitベースのブラウザーでしか動かない)。DOMの操作は最初にトリガーとなるスタイルの変更(この場合は"bottom"というクラス属性を付けることで実現)を一度だけすれば、残りはブラウザーがしてくれる。JavaScriptをごりごりと走らせる必要はないのでCPUへの負荷は他のものより低いが、ゲームなどによくある「衝突判定」などができないので、メニューをプルダウンするなどの固定的なアニメーションの実装に適している。

3. Canvas Animation

 これがAppleがSafariで先に実装し、IE以外のほぼすべてのブラウザーに採用されている<canvas>タグを使ったアニメーション。DOMを一切操作しないが、1フレームごとにJavaScriptで再描画するため、CPUへの負荷は重い。ただし、DOM Animationと異なって描画のタイミングを自分でコントロールできるため、iPhoneのようなCPUの力がそれほどない場合、DOM Animationよりも一般的に見た目がスムーズになる。


「Flash vs. HTML5」という構図がはっきりと見え始めたぞ、と

 業界関係者(特にスマートフォン関係の仕事をしている人たち)少し前からすでに気がついていた話だが、今回のAdobeからの一連のアナウンスメントで明らかになってきた「HTML5対Flash」という構図。とてもワクワクする戦いだ。

 ウェブ上のリッチコンテンツという分野でリーダーシップ・ポジションを取りながらも、「無料Flashゲーム」と「ウェブサイトの見栄えをちょっと良くするアイ・キャンディ」というニッチなポジションに一度は追いやられるように見えたFlash(数年前の話)。しかし、動画フォーマットがReal Networks、Microsoft、Appleの三強いの間で中に浮く隙間を付いた戦略で、見事に「ウェブ上のマルチメディアのデファクト・スタンダード」のポジションをがっちりつかんだかに見えるFlash(現在)。しかし、その地位も安泰ではない。

 Adobeにとって一番頭の痛い問題はiPhone。技術と政治の両方の問題がからんでいるようで正確な理由はオープンにはされていないが、現時点で携帯電話からのトラフィックの大半を占めるiPhoneにFlashが載っていないということは、「パソコンでのポジションも利用してスマートフォンでもデファクト・スタンダードのポジションを取る」というAdobeの戦略に大きな陰を落としている。

 そもそも「Adobe一社がフォーマットをコントロールをする(その結果、実質的にオーサリング・ツールも独占する)Flashはけしからん、よりオープンなスタンダードを作ろう」、という動きは今に始まった話ではない。その代表がSVGで、AdobeとMacromediaが別会社だった時にAdobeが中心になって押し進めた規格だが、当初はプラグインが必要だった事やMacromediaのFlashに対抗できるオーサリング・ツールの存在がなかったことなどの理由で、Flashの地位を脅かすまでには至らなかった。

 しかし、ここに来て一挙に注目を浴びているのがHTML5。GoogleがChromiumにWebKitを採用した事、WebKitがスマートフォンのデファクト・スタンダードになりつつあること、Microsoftがブラウザーの技術で他社に大きく遅れをとっていることなどが理由で、スタンダードを決める上でのWebKitの影響力がいつの間にか大きくなり、それがHTML5という形で目に見えるようになって来たのが今年の話だ。

 HTML5にはさまざまな機能が含まれているが、「対Flash」という観点から言って意味があるのが、videoタグ、canvasタグ、CSSアニメーション、そしてSVG。これらの機能が入ったブラウザーが十分にかつ正しい形で普及してくればFlashは不要になる。

 HTML5の普及にとって一番のネックはMicrosoftのInternet Explorer。時代遅れとは言え、相変わらずパソコンの世界では70%近いシェアを持っているし、自分自身がスタンダードをコントロールしたいMicrosoftとしては、HTML5を本気で早急にサポートするのは自分で自分の首をしめることになりかねない。表向きには「HTML5をサポートする」と言いながら、「AdobeがHTML5に足もとをすくわれている隙にSilverlightを業界標準に!」などと考えるのがMicrosoftのDNA。

 パソコンだけを見ると、HTML5が十分に普及するのは(IEのシェアがWebKitベースのブラウザーのシェアに抜かれるだろう)2012〜2013年まで待たなくてはならなそうだが、ここで侮れないのがスマートフォン市場の動き。

 先に述べた様に、現時点で既に、スマートフォンからのトラフィックの大半はWebKitベースのmobile Safari を載せたiPhoneが大半。それに加えて、今年の後半から来年にかけて、同じくWebKitベースのブラウザーを載せたAndroidケータイが怒濤のようにリリースされるし、業界1・2位のNokia、SamsungもWebKitの採用を決定している。もちろんPalmのブラウザーもWebKitベースだ。Microsoftが足踏みをしている間に、WebKitがスマートフォンのデファクト・スタンダードになってしまう事はほぼ既成事実だ。

 つまり、パソコン側ではInternet Explorerのために数年かかるHTML5の普及が、スマートフォン側ではわずか1〜2年のうちに実現されてしまうことになる。それも、ウェブアプリを提供する側としては、「まずは今大半のトラフィックを稼いでいるiPhoneをターゲットにする」という大義名分のもとにあまり大きなリスクを取らずにHTML5のウェブアプリの開発に投資できるというメリットもある。

 そんなこんなで、パソコン側でこれほど有利な立場にありながら、スマートフォンの世界では土俵際に追いつめられた感のあるAdobe。WebKitという戦略兵器を軸に手をがっちりと手を組んだGoogleとApple。思いっきり出遅れてしまったがOS・ブラウザーのシェアと資金力だけは誰にも負けないMicrosoft。この戦いは目が離せない。

CSS3 Generatorを作ってみた

 最近は、HTML5で遊んでばかりいる私。今回作ったのは、左の"CSS3 Generator"(Safari、Chromeなどのwebkitベースのブラウザーが必要)。もちろん、iPhoneでもちゃんと動作する(http://www.widgetpad.com/694/)。

 ちなみに、HTML5関連のデモのアナウンスや、コメント、ヒントはwidgetpadというTwitterのアカウントでつぶやくので興味のある人はFollowをどうぞ。

【追記】ちなみに、ここでいうCSS3とは厳密な意味での「標準化されたCSS3」ではなく、「WebKitがいつのまにかスマートフォンのデファクト・スタンダードになってしまった結果できつつある、新しいCSSのデファクト」の意味なので要注意。"Box Shadow"が、"box-shadow"ではなく、"-webkit-box-shadow"なのはこれがまだ「WebKit独自の拡張」だからという点に注意。


HTML5 3 Days Hackathon参加者へのメッセージ

 今日、東京でHTML5 Hackathonというものが開催されるそうだが、そこへ参加される方でネタを探しているエンジニアの方々へのメッセージ。

 私が、WidgetPad (http://www.widgetpad.com/users/6) で公開しているHTML5アプリのすべては、オープンソース。Hackathon向けのアプリの素材として一部もしくは全部を自由に使っていただいてかまわない(MIT License)ので、どしどしと面白い作品を作っていただきたい。

 ちなみに、公開している13個のうち、"Blob Sallad"のみはBjorn Lindebergという人の公開作品(http://blobsallad.se/)を元にしたものなので、原著作者の名前を引用する場合には、私の名前に加えて、彼の名前およびリンクを明記することをお願いする。