10月13日、第11回となる「HTML5とか勉強会」を、Opera Software のオフィスをお借りして開催しました。Opera Softwareのオフィスはフランクでフレンドリーなため、毎回アットホームな雰囲気の中、勉強会を進行することができます。そんな雰囲気の中、今回も内容の濃いさまざまな講演をいただきました。その模様をUstreamでのアーカイブ含め報告します。
今回は、前回 に引き続きスマートフォンにフォーカスをあてました。前回はSench Touch やjQTouch などのスマートフォンでの開発プラットフォームを特集しましたが、今回はAndroid2.x対応デバイスが各キャリアからリリースされることも相まってさらに盛り上がりを見せているスマートフォンブラウザについてOpera SoftwareとMozilla Japanに講演していただきました。さらに、スマートフォン関連で3本のLTがありました。
「HTML5事情@Android&iPhone」
はじめに、株式会社アクセラートジャパン の小林悠さん より、AndroidとiPhoneブラウザでのHTML5関連のAPIについて、PCとの比較含め各種TipsをLTで紹介していただきました。
スマートフォンとPCとの違いで最初に突き当たるのがスクリーンサイズの違い。特にAndroidに関しては、各社から様々なサイズのデバイスが提供されています。このため、アンドロイドでは（多分）物理ピクセルではなくスケーリングされたサイズでscreen.widthなどの値が取得されていると説明しました。
また、canvasタグではiPhone3.1までは文字に関するバグが山積で、audioタグでは音楽をバックグラウンドで再生することができず、ゲームでは非常に困ることが示されました。そのほか、マルチタッチAPIは、AndroidでJavaScriptとして定義はされているが、困ったことに取得できないことなどが紹介されました。
LTの後半では、canvasの描画速度について、PC・Flash・Androidをベンチマークの比較も取り上げられました。
講演資料はこちら で公開されています。
「モバイルブラウザ」
次に、Opera Software のフロリアンさんより、Operaのモバイルブラウザ「Opera Mobile」およびOpera Miniのアーキテクチャなどを紹介していただきました。
Operaのアーキテクチャは、「 プラットフォーム層」「 コア層」「 UI層」の3層構造で構成されていることが説明されました。プラットフォーム層ではデバイス（PCやモバイルなど）の違いを吸収し、UI層でも（スクリーンサイズや入力系の違いなどに起因する）固有の問題を解決するための実装がなされていると語ります。しかしコア層は、プラットフォーム共通となるアーキテクチャを採用しているとのこと。コア層が共通なのは、PC、モバイルなど、すべてのデバイスで共通の機能を提供することを目的としているためと説明されました。
Opera Mobileは、基本的にPC版ブラウザと同様の機能を実装しており、Opera Miniはサーバーでレンダリングなどを行ない、ビューワーとして動作する（おかげで、Appleの審査が通った）ことが紹介されました。
また、東南アジアなどのEmergency Marketではデバイス性能が低く、通常のブラウザでは十分な機能が提供できないため、（ 処理をサーバで行うため、デバイス性能を要求しない）オペラミニの普及率が高いことが紹介されました。
後半は、Operaのデバッガ「Dragonfly」の機能の一つ「Remote debugging 」が、デモを交えて紹介されました。Remoto debuggingはPCからモバイルブラウザのデバッグを行うもので、開発を進めるにあたって問題となりがちなモバイルブラウザでのデバッグが簡単に行えることが示されました。
なお、講演中のネットワーク状態が不調だったため、以下のUstreamの録画は一部のみとなっています。ご注意ください。
「Sencha Touchライブコーディング」
休憩時間をはさみ、LT第2弾としてExt Japan, LLC の直鳥さん より、Sencha Touchを用いたライブコーディングを披露していただきました。
今回ライブコーディングで開発されたのは、search APIを利用したTwitter クライアント。Sencha Touch を用い、わずか5分のコーディング（＆コピー・ペースト）でいとも簡単に開発可能なことが実証されました（あまりの感動に、参加者全員が画面に釘付けとなってしまいました） 。
直鳥さんには前回の勉強会でも講演いただいたのですが、その際の「Sencha TouchはMVCを意識したフレームワークとなっており…」という説明のとおり、TwitterのSearch APIをModelとして抽象化し、画面遷移のアニメーション、構成部品（ボタンなど） 、表示テンプレートなどをオブジェクトとして定義していくことで、みるみるアプリケーションが生成されていく様子が見事でした。
「サウンドAPI」
LTの最後を飾っていただいたのは、gyuqueさん 。HTML5のサウンドAPI全般について、従来のAudioタグに始まり、最新のAPI事情含め、そのユースケースを紹介していただきました。
これまでのaudio apiでも、data URIを用いることで、JavaScriptで音声ファイルを生成し、再生することができたと話します。それを利用して作ったのが、ブラウザベースのモデム。テキストデータを変調してwavファイルを生成して、生成した音（ピーヒョロヒョロ……という昔懐かしい、あの音）を他のデバイスのマイクで受信し、データを復号するデモが行われました。
そして、FireFox4βで実装されたAudio Data APIでは、音楽フレームデータを取得・加工が可能になるため、ストリーミングデータとして活用したり、オーディオビジュアライゼーションが可能となることが示されました。さらに、chromium では<input>タグにspeech属性を指定できるようになり、英語限定ながら、マイクからブラウザのフォームにデータを入力することが可能となったことが説明されました。
講演資料はこちら で公開されています。
「Mozilla & Mobile」
トリを飾ったのは、Mozilla Japan の浅井さん 。Android2.xで提供されるFireFox Mobile（開発コードは"Fennec"）を中心に、スマートフォンでのWebアプリ開発手法なども交えて講演していただきました。
FireFox Mobileは、FireFox4をベースとしたAndroid2.x対応のモバイルブラウザで、Opera Mobile同様にPCとモバイルで個別の実装とはしないこと、PCとモバイルで同じユーザーエクスペリエンスを提供することがMozillaの基本理念であることが説明されました。そして、「 レンダリングエンジンはPCと同じ」「 VideoとしてOgg/WebMに対応」「 WebGL、SVGもサポートしている。WebGLについては、PCよりも普及が進むかもしれない」「 ファイルの送受信にも対応」といったことが紹介されました。
講演内容はFireFox Mobileの紹介に留まらず、スマートフォンでのWeb開発手法に及びました。例えば、「 Media Queriesを活用し、デバイスサイズによるデザインの変更をCSSで行う」「 CSS3（border-radiusやgradients）を活用すると、画像ファイルを削減する」ことがGood Practiceであると指摘しました。これにより通信環境が不安定なモバイルでも、レスポンス性の高いWebアプリを提供できると話されました。また、「 アニメーションなどの効果はCSS3 TransitionやSVGアニメーションを活用する」「 SVGはベクターグラフィックのため、スクリーンサイズの違いに対し共通のユーザー体験を提供できる」ことが紹介されました。
そしてWebの進化のためには、各ブラウザベンダの競争が重要であると述べられました（これは、現状のPCで可視化されている問題、すなわちIE6が数年間市場を占有していたことに端を発する様々な問題を見れば明らかだと思います） 。
また、圧倒的なインパクトで話題となっている、Mozilla Seabird についても言及がありました（筆者がリクエストしたのですが） 。あまりのインパクトのため「Mozillaがスマートフォンを作るのでは!?」と物議を醸し出しているSeabirdですが、Mozillaの基本コンセプトは「Webをよりよくする非営利団体」であり、その活動の一環としてWebを進化させるためのコンセプトプランも募集しているそうで、それがSeabirdであることが語られました。
講演資料は、こちら で公開されています。
最後に
本勉強会のレポートも6回目。ようやく会の運営やレポートの執筆にも慣れてきました。レポートに対する感想や、勉強会に対する希望・意見・取り上げて欲しいテーマなどありましたら、twitter(@komasshu) までお気軽につぶやいていただければと思います。
本勉強会は、毎月第3水曜日に開催していますので、興味を持たれた方は是非ご参加ください。開催のアナウンスはhtml5-developers-jp で行われますので、こちらをチェック願います。来月も開催予定です。お楽しみに。
なお、筆者が管理しています、こちらのサイト（Events in HTML5-jp ）で開催状況や、過去のアーカイブなども公開しておりますので、是非ご活用頂ければと思います。
