レポート

「第11回 HTML5とか勉強会」活動報告

この記事を読むのに必要な時間:およそ 2.5 分

10月13日,第11回となる「HTML5とか勉強会」を,Opera Softwareのオフィスをお借りして開催しました。Opera Softwareのオフィスはフランクでフレンドリーなため,毎回アットホームな雰囲気の中,勉強会を進行することができます。そんな雰囲気の中,今回も内容の濃いさまざまな講演をいただきました。その模様をUstreamでのアーカイブ含め報告します。

今回は,前回に引き続きスマートフォンにフォーカスをあてました。前回はSench TouchjQTouchなどのスマートフォンでの開発プラットフォームを特集しましたが,今回は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として抽象化し,画面遷移のアニメーション,構成部品(ボタンなど)⁠表示テンプレートなどをオブジェクトとして定義していくことで,みるみるアプリケーションが生成されていく様子が見事でした。

著者プロフィール

小松健作(こまつけんさく)

NTTコミュニケーションズ 先端IPアーキテクチャセンタ リサーチエンジニア。上位層プロトコル及びWebテクノロジの技術開発に取り組む。また,「html5とか勉強会」のスタッフをつとめる。 好きな言語は,JavascriptとRuby。

Blog:http://blog.livedoor.jp/kotesaki/

Twitter:@komasshu

コメント

コメントの記入