HTML5が与えるインパクト(後編) - Webサイト制作最新トレンドの傾向と対策 | デザインってオモシロイ -MdN Design Interactive-

HTML5が与えるインパクト(後編) - Webサイト制作最新トレンドの傾向と対策

2024.4.26 FRI

【サイトリニューアル!】新サイトはこちらMdNについて
web creators特別号
HTML5・スマートフォン・SNS・Webアプリケーション
Webサイト制作最新トレンドの傾向と対策

Webデザイン 1-01
HTML5が与えるインパクト(後編)

HTML5の存在感がいよいよ増してきた。HTML5はWebブラウザを表示する言語という枠を超えて、Webアプリケーションという広大な環境への最適なプラットフォームとして急速に認知され、デジタルコンテンツを表現するツールとして無視できない存在へと大きく前進している。

制作・文/芳賀淳志(Suika Cube Inc.)



ゲーム業界におけるHTML5の動向

モバイルFlash開発終了の件で影響が大きいのがゲーム業界だ。これまでのWebゲームはほとんどがFlashで制作されてきたが、今後のモバイルプラットフォームではHTML5+JavaScriptをベースにしたゲーム開発が増えてくると思われる【01】。

制作者の立場で考えると、プラットフォームの変更は非常に大きな問題である。にも関わらず、制作現場からは環境変化に対する不満の声は驚くほど聞こえてこない。

その理由として考えられるのは、現在モバイル端末で人気を博しているモバイル・ソーシャル・ゲームと呼ばれるゲーム群の一部が、すでにHTML5を使って制作されているからだろう。現在のゲームを取り巻く状況はモバイル端末をプラットフォームとしたカジュアル・ゲーム抜きには語れない。専用機による大作ゲームへの興味が失われつつあるなか、相対的にスマートフォン等で遊べるWebゲームの人気が上がっている。一方の巨大なゲーム市場であるAppStoreにおいて、米Adobe社の声明を待たずともすでにFlashゲームが排除されている現状があった。制作側としては市場の要求に合致したアプリケーションの開発が急務であり、かなり早い段階からHTML5ベースのゲーム制作に着手していた【02】。

また技術的な理由もある。Webゲーム開発においては、現在もFlashが主流ではあるが、十分なクオリティを維持したゲームを継続的に制作するには相応の練度と技術とWebプログラムに対する広範な理解力が必要となる。それに比べるとHTML5+JavaScriptによるゲーム制作は敷居が低く、高度なプログラム知識を持たないWebデザイナーレベルでも発想次第で面白いゲームを制作できる。また新しい分野なだけに新規プログラマーが取り組みやすい環境があることも大きい【03】。

さらなる理由としては、モバイル環境においてレガシーな技術となったFlashを苦労して身につけるより、将来性豊かな技術をいち早く使いこなしたいという技術者のマインドの変化も大きい。実際スマートフォン開発者への求人率が現在の経済状況に比して驚くほど高い数値を示している。いまや業界全体がモバイルプラットフォームでの開発に完全にシフトしたといえよう。

以前はHTML5によるゲーム制作には技術的な限界があると指摘されてきたが、W3Cが策定するAPIである「WebSocket」やサーバー側と連動する高機能なJavaScriptライブラリなどを使用することで、かなりハイレベルな対戦ゲームなどの制作も可能になっている。ゲーム業界に対するHTML5の影響力はこれからさらに深化していくであろう。

【01】現在Web上にはHTML5の拡張機能を振る活用して作られたゲームが数多くアップロードされている。なかには驚くほど高機能なゲームもある。
【01】現在Web上にはHTML5の拡張機能を振る活用して作られたゲームが数多くアップロードされている。なかには驚くほど高機能なゲームもある。

【02】Adobe AIRを使用してFlashで開発されたPC版をAndroidに移植していた人気ソーシャルアプリ「アメーバピグ」も、現在ではHTML5の技術を使ってフロントエンド部分を開発している。
【02】Adobe AIRを使用してFlashで開発されたPC版をAndroidに移植していた人気ソーシャルアプリ「アメーバピグ」も、現在ではHTML5の技術を使ってフロントエンド部分を開発している。

【03】学生向けミニゲーム開発コンテスト「9leap<http://9leap.net/>」のホームページに掲載されているHTML5よって開発されたゲーム群。シンプルで楽しいゲームが数多く掲載されてい
【03】学生向けミニゲーム開発コンテスト「9leap<http://9leap.net/>」のホームページに掲載されているHTML5よって開発されたゲーム群。シンプルで楽しいゲームが数多く掲載されてい


HTML5版YouTubeの進化

米Adobe社のFlashに関する発表に呼応するように、YouTubeはこれまで優位性を保っていたFlash版に追いつく、最高解像度1080Pのデジタル映像フォーマットに対応したHTML5版を2011年11月にリリースした。

HTML5 対応のブラウザを使用すればFlash プレーヤーの代わりに HTML5 プレーヤーを使用できる。切り替え方法は簡単でYouTube HTML5 Playerのページ<http://www.youtube.com/html5>に行って、HTML5試用版を有効にするだけだ。※各ブラウザの対応は表【04】を参照。

これは単に動画フォーマットの最適化というだけではなく、動画の扱いに関して大きな変化を生み出す第一歩といえる。YouTubeはGoogle傘下だけあって率先してHTML5化を推し進めてきたが、現在のYouTubeは投稿動画をPC上で閲覧するサイトという位置づけから大きく飛躍し始めており、家庭用の液晶大型テレビやカーナビ等への対応も視野に入れている。今後のYouTube はHTML5での開発により、モバイル環境での利便性を大幅にアップさせるとともに、あらゆるシチュエーションに対応する動画閲覧スタイルを一気に実現化するはずだ。


HTML5版YouTubeの特徴をいくつか上げてみよう。

・再生速度の調整(スロー・倍速)【05】

・フルスクリーン機能

・高解像度(1080P)再生

・音声を文字に変換する

・キャプションを翻訳する


これらの機能は対応ブラウザによって多少の差はあるが、いずれも使いやすい仕様となっている。

モバイル環境におけるYouTube閲覧に限れば、最大のメリットは無駄なリソースの消費とFlash再生によるバッテリーの消耗を抑えられる、という点だろう。このあたりはまだ正確な検証が行われていないので、現段階ではなんとも言えない部分も多いのだが、YouTubeはいずれ確実にモバイル環境での最適な閲覧状態を探り当てるはずである。

現状でさえ面倒な検索を行わない限り、手持ちのiPhoneやiPadなどで動画を閲覧するほうが、わざわざPCを立ち上げるよりずっと手軽だ。

HTML5化が進めば、よりいっそうユーザビリティに優れたYouTubeを楽しめるようになる。HTML5が持つ動画への柔軟な機能や、PCに縛られないアプリケーション開発環境によって、YouTubeの動画閲覧機能はより高次元なレベルへと変化していくだろう。

【04】HTML5版はHTML5 の動画タグとH.264 動画コーデックまたはWebM 形式(と VP8 コーデック)をサポートしているブラウザを使用することで、対応動画の閲覧ができる。WebM 形式対応の動画を見つけるには、詳細検索オプションを使用すると容易だ。
【04】HTML5版はHTML5 の動画タグとH.264 動画コーデックまたはWebM 形式(と VP8 コーデック)をサポートしているブラウザを使用することで、対応動画の閲覧ができる。WebM 形式対応の動画を見つけるには、詳細検索オプションを使用すると容易だ。

【05】HTML5版YouTubeの速度調節機能。1/4倍速~2倍速に対応。
【05】HTML5版YouTubeの速度調節機能。1/4倍速~2倍速に対応。


HTML5による電子書籍へのアプローチ

電子書籍の閲覧環境は米Amazon.comなどによる活発な開発と幾度かの革新的な変化を経て、よりユーザー目線のサービスが展開され、進化を続けている。しかし日本国内における電子書籍を取り巻く環境は、相変わらず鈍いと言わざるを得ない。

そんな中、2011年12月1日、電子書籍の草分け的な存在であるボイジャーが、HTML5対応ブラウザを利用した電子書籍閲覧システム「BinB(ビーインビー)」をリリースした。同社は長年にわたりPCやMacで読める電子書籍ビューワである「T-TIME」を提供し、まだ電子書籍という存在の認知度が低い時代から電子書籍の普及に取り組んできた実績がある。

BinBはHTML5対応ブラウザで入手・閲覧できるシステムで、コンテンツの縦書きや横書きの変換機能、検索機能などを備えている。これまでよりiPadなどでの閲覧に強みを発揮しそうだ【06】。

これより約1か月前、米Amazon.comは電子書籍をWebベースで閲覧できるアプリケーションKindle Cloud ReaderをFirefoxに対応させたと発表した。Kindle Cloud Readerは専用アプリケーションを使わずにKindle向けコンテンツをWebブラウザ上で閲覧できる機能で、 HTML5をベースに開発された。今後はIEへの対応も予定している。

電子書籍に関しては米Amazon.comが世界市場へ多大な影響力を持っている。日本の大手出版社を中心とした策定グループが国内市場へ有効な手を打たないと、米Amazon.comに席巻されてしまうと予想しているシンクタンクもあるので、早急な対策が望まれている【07】。

国内において多種多様な電子書籍デバイスが登場している。機能においては非常に優れた機器もあるのだが、普及についてはまだまだこれからと言ったところだ。結局はハードの問題ではなく、必要とされるコンテンツをいかにスムーズに適正価格でユーザーのもとに届けるかということが一番重要なのだ。

こういった状況で、オープンな閲覧環境を非常に効率よく簡単に提供できるHTML5ベースの電子書籍リーダーは大きな可能性を秘めている。書籍の権利保持者はデバイスの製造に加わったりファイル形式の策定に注力するのではなく、閲覧環境はHTML5にまかせて、いかに効率よくコンテンツを配信し、その中で適正な利益を確保できるビジネスモデルを構築することが急務であろう。

【06】ボイジャーからリリースされたBinB。HTML5対応ブラウザで閲覧できる。手軽なデバイスでの読書がより身近になる。
【06】ボイジャーからリリースされたBinB。HTML5対応ブラウザで閲覧できる。手軽なデバイスでの読書がより身近になる。

【07】各社から一斉に発売されたブックリーダー。
【07】各社から一斉に発売されたブックリーダー。


[目次に戻る]

【本記事について】
2012年1月28日発売のweb creators特別号「Webサイト制作最新トレンドの傾向と対策」から、毎週記事をピックアップしてご紹介! HTML5・CSS3によるコーディングから、次々と生まれてくる新しいソーシャルサービス、Webアプリケーション、スマートフォンやタブレット端末への対応など、いまWeb制作で話題になっているトピックを網羅した内容になっています。

※本記事はweb creators特別号『Webサイト制作最新トレンドの傾向と対策』からの転載です。この記事は誌面でも読むことができます。

twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在