「第39回　HTML5とか勉強会～AndroidとWeb技術、ハイブリッドアプリの実情」活動報告

2013年5月28日、第39回目となる「HTML5とか勉強会」は「日本Androidの会」との初の合同勉強会というかたちで、東海大学の講堂をお借りして開催しました。

今回は「AndroidとWeb技術、ハイブリッドアプリの実情」といった部分に焦点を当てたセッションがありました。本稿では、今回の内容についてレポートします。

最近のHTML5はどうなっているのか

はじめに最近のHTML5の動向について、html5jの管理人である白石俊平さんから紹介いただきました。

まず、なぜHTML5が注目され続けているかについての説明がありました。大きく分けて次の3つの点があると言います。

マルチプラットフォーム対応
マルチデバイス対応
技術的な成熟を迎えつつある

今回は3つ目の「技術的な成熟」という点から、HTML5で注目すべき7つのキーワードをあげ、キーワードごとに説明しました。

オフラインWeb

アプリケーションキャッシュ
WebStorage
Indexed Database API
File API

上記の機能やAPIを使うことで、オフラインでもアプリケーションを利用することができるようになる。

リアルタイムWeb

Googleのスプレッドシートなどのように、複数人で同時に一つのドキュメントを編集するものなど、リアルタイム性が高いアプリケーションが増えている。リアルタイムWebの実現にはWebSocketやServer-Sent Events、WebRTCなどが用いられる。

レスポンシブWeb

レスポンシブWebデザインはブラウザの表示幅によって適切なデザインで表示する手法。レスポンシブWebに用いられるのはメディアクエリーやレスポンシブ・イメージなどがある。

セマンティックWeb

エンジニアがマークアップする際に、各要素に対して意味を込められるようになっている。人間だけでなく、コンピュータがHTMLの持っている意味を理解できるようになることで、検索結果がリッチになるなどの効果がある。

スピーディなWeb

SPDYという新しいプロトコルがある。SPDYは普通のhttpと違い、コネクションを維持したまま通信を行うことでよりスピーディなWebを実現する。

プラットフォームとしてのWeb

TizenやChrome OSやWindows 8など、プラットフォームとしてのWebが増えている。デバイス固有の機能にアクセスできるように機能が拡張されていっていることで、車載デバイスやテレビ、また電子書籍など様々なところで利用されるようになってきている。

インプレッシブWeb

今までWebではできなかった3Dを使ったものや、様々な感動を与えるような表現をしているものなどが増えている。WebGLやWeb Audio APIを用いることでWebで表現できることがどんどん増えてきている。

詳しくは資料と動画をご覧ください。

AndroidとChromeの統合について

つぎにAndroidの会の丸山不二夫さんより、WebアプリとAndroidのアプリの現状とこの先のChromeの展望についての予想を紹介いただきました。

Webアプリと言ったときに指すものが少しずつ変わってきています。今まではサーバサイドのアプリを指すことが普通でしたが、今ではサーバサイドのWebアプリにHTML5を利用したものを指すようになってきているとのことです。しかし一方でクライアント側単体で動くアプリケーションが出てくるなど、多様化してきてると話します。

そしてクライアント側のアプリケーションの中でも、特にPackaged Web Appを注目していると言います。Packaged Web Appは、次のような特徴を持っていると示しました。

ネットワーク接続を必須としない
デバイスの固有のセンサーなどへのアクセス
アプリマーケットでの配布
新しいセキュリティポリシー

講演ではAndroidのChromeへの言及もありました。AndroidのHTML5対応は標準ブラウザの存在から対応が遅れていました。しかし昨年AndroidにChromeが搭載され始めたことで、HTML5への対応が飛躍的に進んでいるとのことです。現在PC用のChromeとAndroid用のChromeにはバージョンの違いがありますが、遠くないうちに同一のバージョンになるだろうと述べていました。

講演では他にもAndroidとChromeのアプリマーケットの統合についての予想などがありました。詳しくは資料と動画をご覧ください。

ネイティブとHTML5をスマートに連携させる設計と実装のノウハウについて

3番目のセッションでは、クックパッドの日高一明さんからハイブリッドアプリについて紹介いただきました。

まず、最近のアプリケーションを取り巻く環境として、端末のスペックが向上しているため、WebViewでも一定のパフォーマンスが出るようになってきたと言います。それと合わせて、HTML5の仕様が固まってきていることで、各端末でのブラウザの実装も概ね共通化されてきていると指摘しました。

ハイブリッドアプリには、いくつかのタイプがあると説明しました。

WebViewをラッピングしたもの

コンテンツ（HTML）はサーバに置く

このタイプはガワネイティブと呼ばれるタイプのもので、Webアプリをそのまま移植できるという利点があるが、APIなどを使う場合と比べて通信量が多くなりがち。

WebViewをラッピング＋HTMLをアプリ内に埋め込む

ネイティブ実装の代わりにHTML5を使って実装する

このタイプもWebViewを使うが、サーバとの通信はAPIにて行う。

一部の画面でWebViewを利用する

基本的にはネイティブアプリ

このタイプはネイティブでの実装が適している部分はネイティブで、WebViewが適している部分はHTML5で実装する。WebViewが適さないものとしてはリストやギャラリーがある。これらはネイティブの機能を利用したほうが、よりよいユーザ体験が作ることができる。WebViewが適しているものとしては、レイアウト系の機能はHTMLのほうが優れている部分が多い。

講演では他にもハイブリッドアプリを実装する際につまづきやすい、画面遷移についての紹介や、どういった場合にハイブリッドアプリを採用するかといったものを取り上げました。詳しくは動画と資料をご覧ください。

ハイブリッドソーシャルアプリの現場

4番目のセッションでは、ポケラボの鈴木匠太さんと前田翔悟さんより、ソーシャルアプリにおいてのHTML5の利用例について紹介いただきました。

鈴木匠太さんは、ポケラボはもともとフィーチャーフォン向けのサービスの制作を行なっていたこともあり、社内にはWebエンジニアが多かったと言います。そのような中、スマートフォン向けのサービスを作るにあたり、Webエンジニアのリソースをうまく活用するためにハイブリッドアプリを採用したとのことです。

また、フィーチャーフォン向けのアニメーションをスマートフォンのネイティブアプリ向けに移植しようとしたとき、今までのFlashでの作成では対応できないといった壁にぶつかったそうです。そこでポケラボでは、SwiffyやCreateJSといったFlashの変換ライブラリを使うことで、ネイティブアプリでのアニメーションを実現してると説明しました。

ポケラボのソーシャルアプリではアニメーション演出の数がとても多いものがあります。その場合には、一度にすべてを読み込むのではなく、Require.jsを使って都度演出に必要なファイルを読み込んでいるとのことです。iPhone版はリリースされていますが、Android版はアニメーションのパフォーマンスに満足がいかず、リリースが遅れているとしました。

前田翔悟さんからは、ポケラボがハイブリッドアプリの実装の際に工夫している点について紹介しました。

ヘッダーとフッダーに固定のメニューを実装しようとした場合、WebView（HTML）ではCSSのpositionプロパティにfixedを指定して固定する方法があります。しかし一部の端末では意図した様な表示になりません。またJavaScriptによって固定する方法もありますが、端末によっては動作がとても重くなってしまいます。そこでWebViewでの表示をやめ、ネイティブでの実装に切り替えたとのことです。メニューもただネイティブで実装するのではなく、メニューに表示する項目などの情報をJSON形式で送ることで表示の変更などに対応できるようにしているとのことです。

講演では他にもアニメーションを高速化する手法などの紹介がありました。詳しくは資料や動画をご覧ください。

パネルディスカッション

最後にパネルディスカッションが行われました。その中からいくつかの発言をピックアップして紹介します。モデレータはPublickeyの新野淳一さんです。

Webアプリ≒ハイブリッドアプリの進化とは？

丸山さんは「クライアント側で処理するのであればHTML5でもネイティブでもどちらを使っても構わないが、それよりもサーバの負荷を下げる方の優先度が高い。まだまだHTML5だけではパフォーマンス的に足りないが、1つのソースでOS等関係なく動くというのは綺麗だと思う」と発言していました。

佐々木さんは「端末はチップレベルで評価しないときちんとした評価はできない。Tizenはチップレベルで最適化をしているし、Galaxy S4のChromeはパフォーマンスが高い。ネイティブは確かに早いが、HTML5はいろいろな技術をもってこれるため、Webの世界でしかできない方向に進化するのがおもしろい」と発言していました。

白石さんは「Webアプリでできないことはまだ多いが、それをどうにかしようと考えている人が大勢いる。速度の面やデバイスへのアクセスなど色々と変わるはずなので、Webの世界は明るいと考えている」と発言していました。

詳しい内容は動画をご覧ください。

HTML5とか勉強会について

本勉強会は、毎月1回の頻度で開催していますので、興味をもたれた方はぜひ参加ください。開催のアナウンスはhtml5jのメーリングリストで行われますので、こちらをご確認ください。

また、コミュニティサイトと勉強会スタッフのブログも公開していますので、ぜひこちらもご覧ください。

勉強会に対する希望・意見・取り上げて欲しいテーマ、レポートに対する感想などがありましたら、twitter（@nakajmg）まで気軽につぶやいていただければと思います。