png

CEATEC JAPAN 2013 『HTML5と最新動向』

  • このエントリーをはてなブックマークに追加

by [2013年10月07日]

10月1日から10月5日まで千葉県、幕張メッセで開催された「CEATEC JAPAN」

モバイルアプリ、モバイルサービス開発において、AndroidあるいはiOSのネイティブ言語を用いたネイティブアプリから、HTML5のWeb技術を用いた、いわゆるハイブリッドアプリや、サービス自体をWebで展開するWebアプリへのシフトは、穏やかにただし着実に進んでいるようです。そのシフトに掉さすのはHTML5の日進月歩とも言える進化。少し目を離すと、あっという間にテクノロジーに置いて行かれる世界。
今回は、急速に進化が進む「HTML5の今」を確かめるべく、株式会社オープンウェブ・テクノロジー代表取締役、白石 俊平氏によるコンファレンス『HTML5の最新動向』を取材してきました。以下はその内容です。

HTML5の最新動向

Web技術の基礎知識。HTML、CSS、JavaScriptという3つの技術から成っている。HTMLは文書構造や見出し。内容と構造だけでは綺麗なWebページとはならない。CSSはWebページの見た目を司る。同じWebページでもCSSを差し替えることで見た目をがらりと変えることができる。JavaScriptはプログラム言語でアプリケーションを作るためにある。昔は不遇な技術であったが、時代の流れより、メインストリームのWeb技術である。なぜならばWebページを美しく見せ、アプリケーションを作るためにはこの言語しかないから。

これらWeb技術の重要な特徴としては、世界標準に支えられていることである。JavaScrptはECMA、通信関連はIETF、3DはKhronos(クロノス)という標準化団体が存在している。

「標準」が存在して完結するものではなく、それを採用した「実装」を伴わなければならない。世界標準がなぜ重要なのかといえば、力のない標準であると、誰にも実装されずに終わってしまう可能性がある。力のある標準はものすごい勢いで世界に拡がっていく。例えば、車載用の情報端末や電子書籍、TVといった具体にWebを超えて拡がっていく。これは「標準」だからこそである。

標準の取り巻く環境とは?

1.W3Cが標準化を行い、仕様を策定・メンテナンスを行う
2.仕様を参照し、ベンダーがブラウザといった製品を開発する
3.同様にWebエンジニアは仕様を参照し、Webページを開発する
4.ユーザーはHTMLによってもたらされた新しいWeb体験をする

HTML5という「仕様」

HTML5の仕様書は3つある。Webを進化させつつ安定させることを実現しようとしている。進化と安定は反対の関係であるが、実現させるため、仕様書が3つに分かれている。安定を担うのはW3Cによるバージョン。HTML Living Standardは進化させるためのもの。WHATWGというW3Cとは別な団体がオープンなメーリングリスト上で日々、仕様を変更している。HTML5.1はW3Cによって、HTML Liging Standardの変更を取り込んで次期バージョンを作っている。

Web技術者からすると、最先端であるHTML Living StandardやHTML5.1がどうなっているのか?が気になるところであるが、一般的にはHTML5がどうなるのかが重要である。

それについては、昨年の2012年に今後のスケジュールが発表された。「勧告候補」とは『仕様が固まった』という意味。『仕様が固まった』ということと、『仕様が完成した』というのは全く別物である。固まった仕様の実装と修正を繰り返しながら、仕様を煮詰めていく。2014年HTML5.0勧告が行われる。勧告という言い方をする理由は、標準を採用してもらえるかどうかは別な話であるため、あくまで「勧める」という言い方をしている。2年刻みで2016年にHTML5.1が勧告されていく予定である。

Web関連技術は広く、深い

情報はやや古いが、HTML要素数は109個、JavaScript API仕様は66個、CSS関連仕様は66個もある。Webエンジニアはこれらを把握しておくことが望まれており、非常に広く深い世界になっている。

これらの広く深いWebをある程度、整理立てて説明するために、『9つの「○○Web」』という言い方を用いている。
・オフラインWeb
・リアルタイムWeb
・レスポンシブWeb
・セマンティックWeb
・ハイパフォーマンスWeb
・Webプラットフォーム
・Webコンポーネント
・マルチメディアWeb
・グラフィカルWeb

オフラインWeb

ブロードバンドが普及したとはいえ、ネットワークが使えない、あるいは途切れる場面はいまだ多い

GoogleのプレゼンテーションWebアプリであるSlidesはオフライン技術を用いている。ネットワークの有無を判断し、ネット復帰後、自動的にデータを同期する。

インターネット接続がなくてもアプリケーションやWebサイトを利用することができる。代表的な例は「Google Slides」。オフラインで作業可能で、接続復帰した際、情報が同期される。

オフラインWebを実現するテクノロジー
・アプリケーションキャッシュ
・Web Strage
・Indexed Datebase API
・File API

リアルタイムWeb

これまでにもリアルタイムで動作するアプリは多かったが、開発には非常に手間が掛かった。HTML5によってハードルが大きく下がった。リアルタイムなWebアプリケーションは今後、沢山出てくる。

地球の裏側からでもリアルタイムに動向を反映するサービスはこれまでも存在したが、Web標準の技術となることで開発のハードルが下がる。

動画といったコンテンツもWeb標準技術を用いてリアルタイムに利用することができる

リアルタイムWebを実現するテクノロジー
・WebSocket
・Server-Sent Eventes
・WebRTC(Web Realtime Communication)
WebRTCはサーバーを介することなく、ブラウザ to ブラウザでデータをやり取りすることができる。今後、ブレイクスルーが期待されている。海外ではWebRTCカンファレンスが開催されており、海外のベンチャー企業はWebRTCを利用したサービスを開発している。

レスポンシブWeb

スマートフォンの登場以来、PC向けサイト、タブレット向けサイト、スマートフォン向けサイトをバラバラに開発してきた経緯があったが、メンテナンス性が下がる等の課題があった。一つのURL、一つのHTMLで多デバイスに対応できるのが、レスポンシブWebである。クライアントの環境に合わせてCSSを変更するという技術。

WebApp Field Guideはページめくり演出のあるWeb電子書籍。単なる多ディスプレイ対応ではなく、インタラクティブ要素を兼ね備えつつ、レスポンシブを実現している。

レスポンシブWebを実現するテクノロジー
・CSSメディアクエリ
・レスポンシブ・イメージ
・グリッドレイアウト

セマンティックWeb

「セマンティック」は新しいキーワードではない。2000年になる少し前からティム・バーナーズ=リー氏によって言われていた。Webを巨大なデータベースにするというコンセプトであり、データベースとするためには、Webページに埋め込まれた情報を意味を定義するためのメタデータが必要になる。メタデータを入れることによって、メタデータを解釈できるプログラムが多く生まれる。例えば検索エンジンなどがある。セマンティックWebの可能性は大きいと言われ続けているが、今のところ、検索エンジンでの結果表示が主である。

ソースコードの酢にペットを解釈し、よりリッチな検索結果を返す。

セマンティックWebを実現するテクノロジー
・HTML5 Semantic Elements
・HTML5 Microdata
・RDF / RDFa / RDFa Lite
・Microformats
・…

ハイパフォーマンスWeb

これは説明が簡単でWebのスピードが異なる。アイコンを150個ダウンロードするデモで比較すると従来のWebとHTML5では歴然とスピードが上がっている。このようにHTML5が到来したことによって、これまでWebの悪いところを修正しようという気運が高まっている。WebはこれまでHTTPという簡単で理解しやすいプロトコルで書かれていたが、反面、遅いという欠点があった。HTTP2.0という次世代の通信プロトコルが控えている。

アイコンを150ダウンロードするまでのスピート比較。HTTPによるスピードは1698msec。

SPDY通信プロトコルを用いると818msec。

他にもWebページの実行速度へも対策がなされつつある。遅い理由はJavaScript言語自体が遅いということに起因する部分が多い。JavaScriptは型がないことによって、書きやすい半面、遅い。

・JavaScriptの速度限界突破のための様々な取り組み
-asm.jp
-NaCL
-PNaCL

・-HTML5関連API
-パフォーマンスモニタリングAPI
-バックグラウンドプロセス
-オフライン技術

パフォーマンスWebを実現するテクノロジー
・SPDY
・HTTP/2.0
・オフライン技術
・Web Workers
・window.performance

Webプラットフォーム

Webがプラットフォーム化する概念。実はHTMLが作られたときから、HTMLがアプリケーションプラットフォームを目指すことは言われていた。かつてはHTMLは文章のプラットフォームであったが、Google MapsやGmailといったアプリケーションがリリースされてきた。WebはHTML5からアプリケーションプラットフォームを目指す、と2007年頃から言われていた。実現してきたのはこの頃である。

いわゆるWebブラウジングにとどまらず、IVI(車載)、電子書籍、TVのプラットフォーム技術にまで波及しつつある。

Webコンポーネント

ついに、Web標準もUIコンポーネントのプラットフォームになりつつある。WebのUIを作るのは結構、泥臭い作業である。具体的に言えば、HTMLで新しいタグを作れるようになった技術といっても過言ではない。つまりカスタムタグ。ただし、Webコンポーネントは新しい技術であるため、完全に対応しているブラウザはないが、それを補完するフレームワークは「Polymer」などがある。

マルチメディアWeb

マルチメディアがWebに乗っていたのは新しくはない。例えばYouTube。ただしそれがFlashプレイヤーで動作していたのか、標準、つまりブラウザに組み込まれた機能で動いているかの違い。一つの例としてはマイクロソフトの「bing 検索」がある。検索のTOPページの背景に動画が埋め込まれている。もしFlashしかなかった場合、マイクロソフトは間違いなく使わなかったであろうし、検索というポータルTOPの背景に動画を採用することもなかったであろう。

・マルチメディアに関する様々なユースケースを満たす仕様群
– Encrypted Media Extensions:デジタル著作権管理s
– WebVTT / track要素:字幕・サブトラック
– Media Source Extensions:動画の動的生成

グラフィカルWeb

HTML5以前と以後は見た目の派手さが異なってくる。Webの標準技術を使うだけで、様々な派手な挙動が可能になる。

グラフィカルWebを実現するテクノロジー
・HTML5 Canvas
・SVG (Scalable Vector Graphics)
・WebGL
・CSS3

実装状況

これまで説明した様々な機能はHTML5の標準技術を使えば実現するものだが、仕様は実装を伴わなければならない。ブラウザ毎の実装度合いを示しすサービスが「When can I use…」。ブラウザでの対応状況が逐次アップデートされている。対応状況は低いように見えるが、Webエンジニアにとって必要な機能から対応しているため、だいぶ使える状況である。

Webに足りないもの

現時点ではWebに足りないものも多い。

「動作速度が遅い」
最近だとモバイルアプリをWeb技術で作る、いわゆるハイブリッドアプリ開発がある。その場合、ネイティブと比べた時の速度の遅さが指摘される。確かに遅い。ただしマルチプラットフォーム性とのトレードオフと思われる。

「デバイスの機能へのアクセス」
Web技術はオープンな技術であるから「仕様」ありきである。仕様が策定されないと使うことができない。

「アプリストア的な導線」
利用する際、アプリストアからアプリをダウンロードするのが一般的な導線となっている。Webはそういった(導線)が欠けている。

これらの課題へのアプローチも存在する。

コメントは受け付けていません。

PageTopへ