HTML5

HTML5講座 第一講 ~HTML5の変更点とHTML5の意義~

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

by [2013年9月20日]

HTML5がやってきた

現在のインターネットおよびWebサービスが、HTMLと呼ばれる技術に支えられて成立していることは、恐らくほとんどの人に同意していただけるのではないでしょうか。

Hyper Text Markup Languageを略してHTMLと名付けられたこの技術は、最後に「Language」、つまり「言語」、とあることでも明らかなように、元々は学術論文の文字修飾表示や他論文参照のためのリンクを指示するために開発された、テキスト表示のための言語です。

そしてその最新の改訂版が、今回扱うHTML5です。

しかし、最新版である、として開発環境や対応ブラウザなど、あちこちで色々話題になっている割に、これが一体どのようなものであるのか、については意外と理解されていないようです。

そこで今回は、3回に分けてそんなHTML5の実態に迫ってみたいと思います。

 第二講「ゲーム業界のHTML5対応とHTML5の利点」
 第三講「HTMLの歴史とタダで使えるHTML5開発環境」

HTML5で変わったところ

このHTML5、HTMLの現行最新版(といっても10年以上これが最新版のままだったのですが・・・)であるHTML 4.01と比較した場合、具体的にどこがどう変わったのでしょうか?

代表的な相違点を挙げると、

 1:従来であればAdobeのFlash Playerをはじめとするプロプライエタリなプラグインソフトなどに依存する必要のあった、3D CGを含むグラフィック描画やムービー・サウンドの取り扱いがCanvas・WebGL・WebStrageなどオープンな技術による標準あるいは拡張仕様として取り込まれ、Webページ上でのマルチメディアコンテンツ表示・再生の手順がオープンな規格として標準化されること

 2:従来は煩雑であった構文、特に定義文が大幅に簡素化され、タグや属性も重複するものの整理が進められたこと

 3:拡張仕様により、オフライン状態でもコンテンツを扱えるような手段が提供されるようになったこと

 4:主にモバイル機器での利用を想定し、マシンに接続されたWebカメラやマイク、それに各種センサーなどの周辺機器を扱うためのAPIが整備されたこと

といったあたりが特筆できます。

1は特に、これまでその利便性と表現力の高さゆえに多用されてきたものの、互換性やセキュリティホール、消費電力などで何かと問題になってきたAdobeのFlash技術を代替するものです。

Webページでリッチなグラフィックやサウンドを扱えるようにするマルチメディア拡張機能であるFlashの代替については、その処理の重さなどの事情から現段階では完全には実現できていない、という見方もあります。

しかし、2010年4月にAppleが(恐らくは自社AppStoreの戦略上の都合もあって)iOSからのFlashの締め出しを図り、2011年11月にはAdobe自身がモバイル機器向けのFlash Playerの開発中止とHTML5への注力を発表、2012年8月にはGoogleがAndroid端末へのFlash Playerの新規インストールを停止しています。そのため、市場でのシェアが急増しているスマートフォン・タブレットの大半でFlashで作成されたコンテンツが閲覧不能となっている、という実情を考えると、広範な機種での動作が期待できるHTML5の正式規格化とWebコンテンツのこれへの移行は、もはや待ったなしの状況になりつつあると言えます。

2については、自分でHTMLのタグを打ったり修正したりしてWebページの作成・編集を行ったことがある方ならばご理解いただけると思いますが、HTML 4.01以前ではその仕様上、必ず書かねばならない上に記述内容が変更される可能性がほとんど無いにもかかわらず、延々と長いDOCTYPEやlangなどの定義を記さなければなりませんでした。HTML5ではそれらの煩雑な定義が大幅に整理・簡素化され、また文字コード指定を行うmetaタグなどの記述も大幅に簡素化されたため、全体的にシンプルかつ見通しの良いコーディングができるようになりました。

例えば、DreamweaverなどのWebページ作成ソフトを利用してWebページを作成する分には、このあたりの定義文はページ作成の最初に暗黙の了解事項として自動で挿入されますし、直接タグを打つ場合でも、テンプレートを用意しておいてそれをコピー&ペーストすればよいため、これらはそこまで気にする話でも無いのですが、記述がシンプルに行えるようになってソースコードの見通しが良くなった、というのは後々のページメンテナンスやデバッグを含めて考慮すると、朗報です。

3は、従来であればHTMLで書かれたWebアプリケーションはWebサーバとの常時接続による通信の維持が大前提で、オフラインでの動作をほとんど考慮していませんでした。

これは、これまでのHTMLの動作環境がほとんどモバイル機器を考慮していなかった/する必要が無かったためです。

しかし、モバイル機器の激増した昨今の情勢では、電波状況に由来する通信途絶は頻繁に発生しうる現象です。そのため、今回のHTML5では後述するようにWebStorageと呼ばれるアプリケーションキャッシュ機能のサポートにより、Webアプリのコードを可能な限り各マシンのキャッシュ領域に一時保存しておくことで、ネットワークとの通信が絶たれた状況でもアプリのスタンドアローン動作が可能なようにコーディングできるようになりました。

4は、HTMLで従来直接扱えなかった振動センサーや位置測定システムなどを呼び出すためのAPIが整備され、また1で述べたマルチメディア拡張機能のサポートが大幅強化されたことで実現したもので、特にこれらの周辺デバイスを標準搭載するタブレットやスマートフォンでは非常に有益な機能拡張となります。

なぜHTML5なのか?

さて、文字表示に限れば現行バージョンでほぼ完成の域に達していたHTMLが上掲のような機能強化や改良を施されて新バージョンとなるのは、何故でしょうか?

その鍵となるのは、マルチメディアコンテンツの問題です。

角川書店・DMM 艦隊これくしょん~艦これ~
「いつまで経ってもサーバが満員で、さっぱり新規着任(プレイ開始)できない」と大好評(?)のWebゲームの代表例。Flash技術を使用しているため、標準状態の現行スマートフォン各機種では正常に表示・プレイできない。

現在のいわゆる「ブラウザゲーム」、つまりHTMLで記述されたWebページをブラウザで表示させることでプレイ可能なタイプのゲームの場合、「パソコン上では問題なく動作し遊べるのに、スマートフォンのWebブラウザでは正常に表示されず遊べない」というタイトルが少なくないことは、既にお気づきの方も多いことと思います。

例えば最近一部その筋で話題沸騰中の「艦隊これくしょん~艦これ~」がその典型例ですが、こうしたタイトルがそのままでは正常に動作しない理由、それは簡単に言ってしまえばそのグラフィックおよびサウンドの再生に利用されているAdobeのFlash技術が、現在のスマートフォン用OSに標準で搭載されているWebブラウザに対応していないためです。

このFlash技術は、お手軽にリッチなグラフィックやムービー、サウンドをWebページから扱えるようにできるということで長らくパソコン用Webブラウザやその対応ページなどで愛用されてきたものです。

しかしこれはAdobe(あるいはAdobeに買収されたMacroMedia)のプロプライエタリなソフト、つまり一企業によって開発されたクローズドな技術に基づくもの(※ただし現在ではある程度まで技術情報が開示されています)であるため、Adobe自身がFlash Playerを移植していない、あるいはその技術についてライセンスを供与していないOSやWebブラウザ(その数はそれほど多くはないのですが)でのコンテンツの正常な再生が難しいという問題があります。

また、そのプレーヤーやプラグインのバージョンアップによる最新機能拡張などへの対応時期が完全にAdobeの思惑次第となることや、ここ数年Flash Playerおよびプラグインにセキュリティホールが発見される事態が相次ぎ、その度に同社が応急措置あるいは暫定措置を含めた対策を講じるまでFlash関連アドオンソフトの無効化が推奨される状況となっていたこと、それにそうした対策の過程で、従来のバージョンで正常に表示・動作していたFlashコンテンツが最新版Flash Playerで動作せず、多くのWebサイトなどでコンテンツ側の修正が強いられる事態となったことなどから、Adobeの都合に振り回されるのを嫌うWebブラウザメーカーを中心に、この技術からの脱却、言い換えればFlashの代替技術の開発が進められるようになりました。

AdobeのFlash Playerロードマップ公開ページ
モバイル機器のサポートが切られたことが示されている。

もちろん、Adobe側にはそれ相応に同社側の都合や主張というものもあったのでしょうが、こうした状況下で、まずAppleが2010年に自社のiOS搭載製品に従来標準でインストールされていたFlash Playerのインストール打ち切りを断行、これに関するAppleとの様々なやりとりの末、モバイル機器向けでのFlash技術の普及に見切りをつけたAdobeが2011年11月にモバイル機器向けFlash Playerの開発打ち切りを発表、以後モバイル機器向けについてはHTML5への注力を表明しました。さらに、Googleも2012年8月15日にAndroid OS向けFlash Playerの新規インストール対応を終了しました。

こうした動きの背景には例えばAppleの場合、自社のAppStoreでの商品展開に競合するため大変に都合の悪いFlashコンテンツの排除を図った、という事情もあったようですが、今は亡きスティーブ・ジョブズを含む当時のApple幹部による、Flashサポート打ち切りについての発言や公開書簡の内容を見ると、自社のコントロール外の部分でOSのセキュリティや安定動作に障害となる、という状況に対するOS開発メーカー側の苛立ちは相当なものだったことが示唆されています。

ともあれ、ことの経緯はともかくOSメーカーサイドから起こされたこうした「Flash外し」の動きが、当時進められていたHTML5の規格制定作業に大きな影響を及ぼしたことは明らかです。

HTML5 LABS
HTML5普及促進のため、マイクロソフトが公開しているHTML5関連情報ページ。W3C などの Web 標準化団体が策定している初期仕様に関する技術情報やプロトタイプなどを公開している。

こうしてFlash代替の標準技術策定を大きな目的の一つとして規格制定作業がスタートしたしたHTML5ですが、HTMLの後継最新バージョンという位置づけであるため、この規格が(最終的にどのような形に落ち着くにせよ)Webの標準規格として普及・定着するのはほぼ約束されています。

また、先に述べたようにスマートフォンをはじめとするモバイル機器では、Flash技術で作成されたコンテンツが(特に2012年8月以降の機種ではイレギュラーな手段を用いない限り)表示・再生できないため、その種の技術の代替手段として、否応なくこの新規格に対応せざるを得ない状況となっています。

しかし、そんな消極的というか後ろ向きな背景事情や、次節で説明する批判的な論調はともかくとしても、HTML5には積極的にこの技術を採用すべき理由が幾つもあります。

HTML5はイケてない?

キーワード「html5 批判」でググってみた結果
ご覧の通り結構な数の批判的見解が示されているが、よくよく調べてみると、Webブラウザ側での対応が本当に不十分だった2012年までのものが大半を占めていたりする。

HTML5についてはこれまで、対応開始初期のWebブラウザ各種であれこれおかしな挙動が頻発したことや、これまで蓄積されてきたノウハウがご破算になってしまう、といった事情から、特に日本ではFlash技術を信奉するWebデザイナーなどを中心に厳しい批判がありました。

実際、昨年夏の段階ではあのFacebookのマーク・ザッカーバーグCEOがFacebookのアプリについて、コーディングをHTML5へ全面移行したことは時期尚早だった、と反省の弁を述べたほどに各Webブラウザ上でのHTML5+CSS3+Javascriptで書かれたコンテンツの解釈・処理が重く遅くなっていて、しかも各ブラウザごとの各機能についての動作互換性が満足に確保できていない(※例えば当時最もHTML5の仕様実装が進んでいたChrome上でGoogleがデモンストレーションしていたリッチなHTML5コンテンツを他のブラウザで表示した場合、ひどいものだとぴくりとも動かない、などということが少なくありませんでした)、という惨憺たる有様でした。

しかし、これは過渡期ならではの現象と見るべき(※事実、先に挙げたザッカーバーグCEOも、HTML5版Facebookアプリのネイティブアプリへの逆戻りを発表する際に、将来的にはHTML5へ移行することになる、という見通しを示しており、最終的にネイティブアプリがHTML5を用いたWebアプリへ移行する、というシナリオそのものは否定していません)で、昨年夏と比べれば各ブラウザ側の機能実装が進んでいる(それでも、Webアプリケーション関係や3Dグラフィック描画などではまだまだ問題があるようですが)ため、状況が大幅に改善されてきています。

そのため、このような現時点でのHTML5の産みの苦しみというべき惨状を見て、Flashではこうした問題はほとんどなかった、今のHTML5ではFlashコンテンツを完全再現できない。だからFlashは素晴らしい、といってしまうのは拙速が過ぎるというものです。

そもそも、現段階のHTML5で各ブラウザの間でのコンテンツ動作互換性に問題があるのは、仕様の整備途上であり、またその動作のための技術的なノウハウが充分蓄積されていないことを考えれば、致し方ない部分があります。特に動画再生については映像コーデックとしてMPEG LAからのライセンス供与が必要なH.264を推すマイクロソフトやAppleと、オープン規格であるWebM(VP8)を推すGoogleその他の間で対立があり、これについては特許問題も絡んで、未だに解決がつかないままになっています。

もっとも、こうした形でその仕様について各者の知恵を尽くした議論とそれによる揺らぎがあるからこそ、そのようなやや混乱した状況になっているとも言え、それはこの規格がオープンな存在であることを逆説的に証明しているとも言えます。

Adobe Flash Player 11の必要システム要件
ご覧のとおりパソコン版ではWindows、Mac OS X、Linux(Solarisを含む)の3種(厳密にはWindowsとLinuxはx86版とx64版が存在するため5種)に限られている。現状でのFlash互換プラグインやプレーヤーの動作は本家のものに及ばないため、これら以外のOSを使用している場合、Flash技術を使用したコンテンツの表示・再生には少なからぬ問題が発生することになる。

一方、先にも少し触れましたが、2008年にライセンスの内容が変更され、互換再生ソフトの作成が許容されるようになったとはいえ、Flash Playerおよびプラグインは基本的にはクローズドなライセンスによる、いわゆるプロプライエタリなソフトであることには変わりはなく、実質的にAdobe純正のプレーヤーまたはブラウザ向けプラグインソフトが提供されていない環境での正常なコンテンツ再生は期待できません。

純正では現時点でWindows、Mac OS X、Linuxの3種が公式サポートされていますが、遺憾ながらパソコン用OSでさえ、BSD系UNIX互換OSをはじめ、正常なFlashコンテンツの再生が保証されない/期待できない環境が(決して多くはないとは言え)確かに存在しているのです。

「(パソコンで)大多数のユーザーが利用できるのだからそれで良い」としてFlash技術があればOK、とするのは全くWebデザイナーの傲慢というもので、また開発途上のバージョンを見て機能的に未完成で互換性面でも混乱しているから、とHTML5を全否定するのは、大樹の苗を見て枝振りが十分ではない、とあざけり笑うのと同じ程度には愚かしい行為であると言えるでしょう。

Adobe Flash Professional CC / Toolkit for CreateJS 紹介ページ
AppleによるiOS搭載機器からのFlash技術排除の後、Adobeはモバイル機器向けとしてHTML5対応を進めている。これもその一つで、未サポートの技術もあるがFlashコンテンツをHTML5対応に変換する。

もっとも、そうしたFlash肯定・HTML5否定の立場をとる人間は(これまで覚えたノウハウを捨てることを強いられるのが嫌なためか)日本には今も結構多くおられるようですが。

なお、Flashの元締めであるAdobeは現在、「HTML5とFlashは共存しうる」としつつも「Flash Professional CC / Toolkit for CreateJS」としてFlash技術を用いて作成されたファイルをHTML5コンテンツに変換するためのユーティリティを提供しています。

第二講では、急速にHTML5への対応を進めつつあるゲーム業界の動向と、HTML5を導入するメリット、そしてHTML5での具体的な変更点などについて扱います。

(以下、第二講に続く)

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

タグ:
PageTopへ