HTML5の今とこれから

1. WEBディレクター・企画担当者向け HTML5の今とこれから

2. 山本卓也（31）・株式会社イノセントグリーン代表 -フロントエンジニア・ザオリア株式会社取締役 -Webディレクター自己紹介あだ名：やまたく【仕事】

3. 海浜幕張でWEB設計・デザイン・コーディング・運用を行う制作会社です。 WEBディレクション・フロントエンジニアを担当してます。スマホユーザーにアプリを使ってもらって、使用感や問題点などのフィードバックをもらえる、ユーザビリティテストをオンラインで行えるサービスをやってます。普段やっている仕事

4. HTML5とはまずは整理

5. HTML5の意味する範囲「HTML5（エイチティーエムエルファイブ）」という言葉の意味ですが、厳密には、WEBサイトをつくるためのHTMLという言語で5番目にルールが変更されたバージョンのもの、になります。ただ、いろいろなところで話題になっているHTML5は、もっと広範囲のものを指していて、Javascriptでリッチにしてみたり、現在ルールが決められている新しい機能群だったり、CSS3だったり、最新のウェブ技術全般のことをHTML5と呼ぶことが多いようです。僕は一般的な意味のほうをHTML5と呼んでしまっていいのではないかと思っています。（以降、この定義でHTML5という名称を使います）

6. 含まれる技術 HTML5の新技術群というのは、これだけたくさんあります。それぞれ一つ一つが、新しい技術仕様になっていて、それぞれにワーキンググループというチームが作られて仕様（ルール）づくりをしています。これらの技術群によって、WEBの世界がとてもおもしろいことになる、と期待されています。

7. 戦いの歴史戦いの歴史と言ってしまうと大げさですが、HTML5が出来上がるまでには二つの団体の衝突がありました。もともとHTMLのルールを作っていたのは、W3Cという組織で、インターネットの生みの親とも言えるティムバーナーズリーという人が率いています。W3Cは厳格なルールを作ることを目指してXHTMLというルールを作っていたのですが、それに異議をとなえたのが、オペラやアップルやモジラなどのブラウザ会社達でした。時代が進むにつれて、WEBサイトは、ただ情報をみるためだけのものから、アニメーションしたり、動画があったり、ゲームのようなものができたりと、より高機能なものになっていきました。そのため、厳密なルールよりも、もっといろいろな高機能が使えるようなルール作りを優先するべきだとして、ブラウザ会社達はW3Cとは別の標準化団体WHATWGをつくってしまいました。そのWHATWGが提案していたものが今のHTML5の元になるもので、WEBの世界の流れはそちらを向いていると判断したW3Cは、XHTMLのルールづくりを進めることをやめて、WHATWGと共同でHTML5をWEBの標準技術としてつくっていくことに決めました。

8. 2012年12月17日ついに勧告候補に。仕様作りはほぼ終わりましたよ。みんな使ってみてネ First Public Working Draft Working Draft Last Call Candidate Recommendation Rroposed Recommendation Recommendation HTML5は仕様が完成（正確にはHTML5とCanvas 2D context） 2008年1月 2012年12月 HTML5タグの仕様は、2012年の12月17日にようやく勧告候補という段階にいきました。「勧告候補」とは、仕様づくりがいったん終了した状態。広くみんなに利用を呼びかけて何か不具合があったら教えてね、という段階です。英語ではcandidate Recommendationといい、 CRと略されたりします。この段階までくると大幅な変更はもうないと言われていて、安心して使えるようになったな、という感覚です。（追記）とはいえ2013年4月には、<main>タグが追加されるという比較的大きな変更がありました・・。

9. なぜ注目されるのか

10. 2008年1月 HTML5草案発表 2008年7月 iPhone3G発売ジョブズ「Flashをサポートしないから HTML5でやってね」きっかけはiPhone(？) HTML5って？ 2004年 Web application 1.0発表（WHATWG) ざわざわざわざわ HTML5が注目されるようになった理由は諸説ありますが、やはり大きなきっかけは iPhoneの登場なのかなと思います。 iPhoneが発売された際、アップル社の故スティーブ・ジョブズは「iPhoneではFlash をサポートしない。動画などのコンテンツはHTML5を使って欲しい」といった趣旨のコメントを出しました。これまで動画含めリッチなコンテンツは Flashで作るというのが当たり前になっていたので衝撃が走りました。そのときに「で、HTML5っていったいなに？」と注目されていきました。

11. WEBサイトをつくるための技術だったHTML CSS Javascriptがアプリケーションを作れるくらいに進化 WEBサイトを超えて WEBサイトアプリケーションこれまでのHTMLは、動きのないWEBページを作るための言語でした。 HTML5になってもっとも大きな変化は、その用途が変化したというところです。ゲームや普段パソコンにインストールして使っているような、アプリやソフトウェアと言われているものまで作れるように進化したものがHTML5です。

12. どのような環境でも、アプリ（ソフト）を開発するなら HTML5で行えるようになるアプリ開発のプラットフォーム僕達が日常的に使っているアプリケーションはOSに依存しています。 windows用に作られたアプリはwindows上でしか動きませんし、macOS用に作られたものはmac上でしか動きません。 HTML5で作られたアプリは、あたりまえですが、ブラウザで動きます。ブラウザは windowsでもmacでも搭載されています。そのため、HTML5で作られたアプリはどのようなOSでもブラウザさえあれば動かすことができます。つまりOSに依存せずにアプリが作れるため、HTML5がアプリ開発のプラットフォームになるのではないかと期待されています。

13. あらゆるアプリはブラウザ上で動くようになり、ブラウザがかつての OSのようになる。ブラウザがOSに？（OSに依存しない） OSに依存せずにブラウザ上でアプリが動くということは、ユーザーにとって、OSの違いはさほど重要じゃなくなってくることを意味します。アプリが使えるかどうかは、むしろブラウザの差が関わってきます。そのため、これまでOSでおきていたような覇権争いは、HTML5 の普及にともなって、ブラウザでの争いに移行していくと言われています。

14. HTML5でサイト制作

15. HTML5利用はiPhoneやiPadで見られることを想定するケース FlashでもOK HTML5 HTML5での制作現場 PC向けサイトでは複雑な動きや高機能部分は当分Flash HTML5ではアプリまで作れるほどの機能群がある、と言いましたが、WEBサイト制作の現場では、アプリというよりはこれまで同様にページ制作として、すでに使われ出しています。HTML5ではリッチなコンテンツを作ることができますが、その表現力やパフォーマンスにおいては、まだまだFlashに及びません。 PC用のサイトでは、Flashが使えますから、わざわざHTML5を使う必要はなく、当面 Flashが使われていくものと思います。ただ「PCでも、iPadなどのタブレットやスマートフォンでも見られるようなサイトを作って欲しい」という要望は増えており、その際にはHTML5で作るという選択がとられるケースが増えています。

16. HTML5に強いブラウザ98％ブラウザシェア(日本) PC スマートフォン IE7 : 4% IE8 : 22% IE9 : 20% 2%1% 45% 52% iOS Android Opera 他 HTML5に強いブラウザ50% 2013年2月ブラウザシェア HTML5のさまざまな機能は、実はPC用サイトでは、まだそれほど使えません。ブラウザのシェアでIE8と9が大きな勢力を持っており、このIE8と9はHTML５の機能にほとんど対応していないためです。一方、スマートフォンでは、 iPhoneのsafariとAndroidの Browserで98%のシェアをわけあっています。これらの2つのブラウザは HTML5にある程度対応しているため、HTML5はスマートフォンサイトで主に利用されています。

17. 必須ライブラリマークアップは準備OK ・ECサイト・コーポレートサイト・動きのあるキャンペーンサイトいわゆるWEBサイト・html5shiv.js ・ie9.js ・css3pie ・jquery.js いくつかのライブラリを使えば HTML5+CSS3でマークアップできます。サイトをマークアップするためのタグをHTML5にするという意味では、PC用サイトでもすでに十分利用することができます。僕がお客様のWEBサイト制作を行う場合も、特別な事情がない限りはHTML5を使ってマークアップしています。その際は、いくつかのライブラリを使います。 html5から登場したタグをIEで使えるようにする html5shiv.jsや、css3の機能をIEで使えるようにするためのcss3pieなどを利用することで、IE8以降をターゲットブラウザとする制作では、問題なく HTML5を使うことができます。（IE８以降のブラウザシェアは95%）

18. アプリ化機能たちは限定的 Drag & Drop Canvas Videoタグ Web Storage 【現状でも限定的に使える機能例】 HTML5をつかってPC用のアプリを作っていくのはまだ時期尚早と言えそうです。さきほども言ったとおり、HTML5に対応していないブラウザがシェアの半分を占めているためです。 IE8や9が根強く残っているうちは、いくつかの機能しか使えません。 IE10からは本格利用OK！現在の最新バージョンであるIE10 はHTML5をサポートしています。 IE8,9が少数派になり、IE10以降が大きなシェアをもつようになって、ようやくアプリ化機能が安心して使えるようになります。予想としては2年後くらいになるのかなと思っています。

19. http://caniuse.com/ ブラウザ対応表があります caniuse.comはHTML5やCSS3の機能別に、どのブラウザで使えるのかがまとまっているサイトです。「あの機能つかっていいのかな？」と思ったときに確認すると便利です。

20. スマホアプリ開発

21. スマホのブラウザはHTML5に（ある程度）対応している。スマホアプリをHTML5で Android ブラウザ iOS Safari HTML5サポート率72%(iOS6.0)HTML5サポート率60%(Android4.2) HTML5の利用はスマホで先行しているスマートフォンでは、Android標準ブラウザと、iOSサファリがほとんどのシェアをとっています。そのため、IEを気にしなくてはならないPC用サイトに比べて、ずっと HTML5が使いやすい環境です。そのためHTML5でのアプリ開発は、 PCサイトよりも、スマートフォンサイトが主戦場となっています。

22. いまのスマホアプリはネイティブアプリ Objective-C Java C# Vidual Basic それぞれの端末で、別々の言語スマートフォン用のアプリを作る際、現状では、OSによって別々の言語でそれぞれ作る必要があります。例えば、iPhoneはObjective-Cという言語をつかってアプリを作らなくてはいけませんし、Android用にはJavaを使って、Windows Phone用にはC#などの言語を使ってアプリを開発しなくてはいけません。これらの端末でアプリが使えるようにするには、１つのアプリを提供するのにも、３つの言語でそれぞれ作ることになります。

23. これからのスマホアプリは HTML5アプリ 1つの技術でマルチデバイス HTML5 (HTML+CSS+Javascript) 開発・運用費用は半分という人もいる一方、HTML5を使ったアプリでは、 OSに依存せずブラウザ上で動くため、１つのプログラムで作られたアプリが、すべてのOSで動きます。（1ソース、マルチデバイス） OSごとに別々のプログラムで開発していく必要がなく、HTML5という１つの技術で済むので、アプリ開発がぐっと楽になります。

24. HTML5でネイティブアプリと同じようなものが作れる？

25. ネイティブのような機能・Application Cache ・Web storage ・Device API たとえば上記の機能をつかえば、 HTML5アプリでもネイティブのような体験が提供できる。オフラインでも動いちゃう！カメラやセンサーなどを使えちゃう！ HTML5アプリで、ネイティブアプリのようなアプリを作ることができるのでしょうか？ HTML5アプリとはブラウザ上で動くプログラムなので、ネイティブアプリのようにiPhone の傾きを使った機能が使えなかったり、電波の届かないところでは画面が消えてしまったりするのではないか？と思う方もいます。しかし、一般的に思われている以上にHTML5 ではいろいろなことができます。たとえば、Application Cache（アプリケーションキャッシュ）や、Web storage（ウェブストレージ）といったHTML5の機能を使うことで、オフラインでも動くアプリが作れますし、Device APIを使うことで、iPhoneのセンサーを使ったアプリをつくることができます。工夫次第でネイティブアプリと同様のユーザー体験を提供することができるのです。

26. DEMOを作ってみました HTML5の機能を使って、シンプルなTODO管理アプリを作ってみました。スマートフォンで以下のURLに接続してみてください。 HTML5を使って作ったアプリですが、オフライン機能を使っているため、一度接続したあとは、オフラインになったあとも引き続き使うことができます。また、iPhoneでホーム画面にアイコンを追加したあとは、アプリが立ち上がる起動画面を見せることもできます。 tacshock.com/html5/stodo/

27. しかし現状は問題も APIがそろっていない（細かな機種依存など） AndroidとiPhoneで CSSやjavascriptの動きが違うネイティブに比べてレスポンスが悪い（遅い） AppstoreやGoogle Play 経由以外では配布しずらいゲームなどで特に問題になってるようです。ビジネス的な面技術的な面技術的な面技術的な面良いことずくしのように書きましたが、現状では課題も多くあります。よく言われているのは以下のような課題です。特に、Androidブラウザーでは、プログラムしたとおりに動かないケースも多く、開発者を悩ませています。現在、各所でAndroid対応のためのノウハウが貯められていますし、ブラウザの差を吸収したライブラリなども盛んに作られています。

28. Androidのシェア推移モバイルは機種変更がデスクトップよりも速い 0% 20% 40% 60% 80% 100% 2012年4月 2012年10月 2013年4月 Android4 Android2系モバイルは機種変更のペースがPCよりもずっと早いことも、課題の解決を後押ししています。バグの多いAndroid2系の端末は、2012年の4月時点では、9割ものシェアをもっていましたが、新しく発売されたAndroid4系への機種変更がすすみ、１年で半減しています。PCにはない機種変更の早さです。 Android4系ですべてのバグを解消しているわけではありませんが、素早いペースで技術的な課題は解決されていくことが期待できます。

29. ネイティブアプリ Objective-C Java C# Vidual Basic それぞれの端末用に開発スキルが必要 HTML5アプリ HTML+CSS+Javascript 1つの言語でOK（低コスト）独自に配布しないといけないネイティブに比べて遅い ○ バージョンアップや変更も簡単○ 決済・広告配信等の機能を時前で用意デバイス固有の機能が統一されていない内容に制限がない○ ストアを通じて配布できるレスポンスが良いバージョンアップや変更に時間がかかる決済機能がついているデバイス固有の機能内容の審査がある（主にiPhone） ○ ○ ○ ○ ネイティブアプリとHTML5 アプリのメリット・デメリットを整理してみました。現時点で、それぞれ一長一短あり、どちらが優っているとは言えませんので、アプリの種類やビジネスモデルに応じて開発方法が選択されています。 HTML5で現状もっとも問題視されているのは、「ネイティブに比べて遅い」ということです。特に多くのグラフィックを動かすゲームなどのアプリでは問題となっています。

30. HTML+CSS+Javascript 1つの言語（+α）でOK（低コスト）○ ツールデバイス固有の機能○ ストアで配布できる○ ハイブリッドアプリネイティブアプリ一長一短あるネイティブアプリとHTML5アプリですが、それぞれの良さを持ち寄った開発手法として、ハイブリッドアプリというスタイルがあります。これは、HTML5で作られたプログラムを、ツールを使って、それぞれのデバイス用のネイティブアプリに変換してしまうという方法です。ネイティブアプリが出来上がるため、ストアで配布でき、デバイス固有の問題の多くもツールが解決してくれます。急増している開発スタイルです。ツールとしては有名なものがいくつかあります。 Phonegapやtitanium、appmobiなどが話題になっています。 Phonegap

31. HTML5アプリ化踏み出すメリット

32. 30%の手数料がかからない（売上アップ）開発、運用費用の大幅なコストダウン HTML5アプリのメリット利益額のアップ HTML5アプリに踏み出す最大のメリットは、AppStoreやGoogleplayに支払う手数料の回避と、開発・運用費用の削減ではないかと思います。売上アップと同時にコストダウンができるため、同じサービスを提供するにしても利益をアップさせることができます。アメリカのFinancial Timesという新聞社が提供するアプリは、2011年にネイティブアプリから撤退し、HTML5アプリに移行しました。ユーザー数は減らず、むしろ1年で77%も増加し、HTML5アプリの成功事例として有名です。最近では、AmazonなどもHTML5アプリ化への動きを見せています。

33. カスタマーリーチが条件 AppStoreやGoogle Playの告知効果に頼らなくてもユーザーにリーチできるのであればHTML5化するメリットは大きい。ネイティブアプリは、AppストアやGooglePlay上での販売に大きく依存します。ユーザーがアプリを探してダウンロードする経路は、ほぼストアしかないため、ストアで流通させることができないHTML5アプリをユーザーに届けるのは簡単ではありません。しかし、すでに運営しているサービスでユーザーを抱えているなどの場合は、ストアに頼らなくても効果的に告知することで、HTML5アプリを端末に登録してもらうことはできます。ユーザーへのリーチをもっている企業にとっては HTML5アプリ化のメリットが大きいと言えそうです。

34. これからのHTML5

35. HTML5でアプリ開発が進む 2016年までに業務アプリの50%以上が HTML5で作ったハイブリッドアプリになる（米調査会社ガートナー） “モバイルアプリケーションのニーズに対応するため、企業ではマルチプラットフォーム対応へのてこ⼊入れをすることになる。HTML5アプリケーションをネイティブコンテナに載せたハイブリッドアーキテクチャでは、デバイスのネイティブな機能にもアクセスできる利利点があり、多くの企業はこれに魅⼒力力を感じるだろう。” docomoがHTML5アプリを月額で使い放題サービス開始 NTTドコモがスマートフォン向けに、ニュースや天気情報、交通案内など様々なコンテンツを⽉月額固定料料⾦金金で使い放題にするサービスを6⽉月にも開始する。〜～中略略〜～初年年度度は500万⼈人の会員獲得を⽬目指し、3年年後には最⼤大 800万⼈人にまで広げる⽬目標を掲げている。〜～中略略〜～ドコモがコンテンツ制作会社に要請しているのは、コンテンツの表⽰示にウェブ表⽰示⾔言語の最新⽅方式である「HTML5」を使った「ウェブアプリ」だ。 HTML5は今後ますます浸透していくと考えられており、アメリカの調査会社ガートナーは、3年後までに業務用アプリの過半数がHTML5で作られたアプリになると予想しています。また、docomoも月額で使い放題のHTML5アプリサービスの開始を発表するなど、HTML5アプリ化への動きはますます続いていきそうです。

36. 各社HTML5推進日米の影響力のある大きな企業たちが、こぞって HTML5推進を表明していることからも、一時的なブームではなく、長期的に標準技術として浸透していくことが予想できます。もともとHTML5の発起人であったアップル社や、 HTML5推進を強く表明していたGoogleの立ち位置は微妙なところですが・・。

37. HTML5ベースのモバイルOS TIZEN OS TIZEN（タイゼン）というOSの搭載された端末が 2013年にドコモから発売されます。この端末では、最初からHTML5アプリの利用を前提として作られており、HTML5で開発されたアプリを手軽にインストールし、ネイティブアプリのように使うことができるようになっています。スマートフォンのアプリを、iOSやAndroidのように閉じられたものにするのではなく、オープンに自由に開発・配布・インストールできるようにしよう、という考え方に多くの企業が賛同しているようです。他にもFirefox OSやubuntu touchなど、モバイルOS 第3極と呼ばれる競争も起き始めています。 HTML5アプリが盛り上がるに連れて、どこかのタイミングでiPhoneやAndroidでもHTML5アプリが簡単にインストールできるような仕組みに変化するのではないかと、僕は考えています。

38. 増えていくWebデバイスパソコンや携帯電話だけでなく、インターネットにつながるデバイスはますます増えていきます。たとえば、腕時計やメガネ、あるいは、冷蔵庫や洗濯機まで、インターネットに接続するようなものが発表されています。こういったものにすぐにブラウザが搭載されるかはわかりませんが、端末が増えれば増えるほど、共通して開発できる標準技術の重要性は増して行きます。 HTML5なら、腕時計から冷蔵庫の操作をしたり、メガネからエアコンの操作をするなど、デバイス間のやりとりをすることも容易になり、新たな便利をうむサービスの芽が大量に出てくるだろうと思います。

39. これから登場してくる新たなデバイス向けのHTML5アプリを今から考えてみるのもいいかもしれません。これからの未来にワクワクしますね!

40. おしまい twitter：tacshock

HTML5の今とこれから

HTML5の今とこれから

Recommended

More Related Content

What's hot

What's hot(20)

Viewers also liked

Viewers also liked(8)

Similar to HTML5の今とこれから

Similar to HTML5の今とこれから(20)

Recently uploaded

Recently uploaded(13)

HTML5の今とこれから