Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5の今とこれから

9,287 views

Published on

WEBディレクターと企画担当者の方向けに行った「HTML5の今とこれから」という発表スライドを整理したものです。

Published in: Technology

HTML5の今とこれから

  1. 1. WEBディレクター・企画担当者向けHTML5の今とこれから
  2. 2. 山本卓也(31)・株式会社イノセントグリーン代表-フロントエンジニア・ザオリア株式会社取締役-Webディレクター自己紹介あだ名:やまたく【仕事】
  3. 3. 海浜幕張でWEB設計・デザイン・コーディング・運用を行う制作会社です。WEBディレクション・フロントエンジニアを担当してます。スマホユーザーにアプリを使ってもらって、使用感や問題点などのフィードバックをもらえる、ユーザビリティテストをオンラインで行えるサービスをやってます。普段やっている仕事
  4. 4. HTML5とはまずは整理
  5. 5. HTML5の意味する範囲「HTML5(エイチティーエムエルファイブ)」という言葉の意味ですが、厳密には、WEBサイトをつくるためのHTMLという言語で5番目にルールが変更されたバージョンのもの、になります。ただ、いろいろなところで話題になっているHTML5は、もっと広範囲のものを指していて、Javascriptでリッチにしてみたり、現在ルールが決められている新しい機能群だったり、CSS3だったり、最新のウェブ技術全般のことをHTML5と呼ぶことが多いようです。僕は一般的な意味のほうをHTML5と呼んでしまっていいのではないかと思っています。(以降、この定義でHTML5という名称を使います)
  6. 6. 含まれる技術HTML5の新技術群というのは、これだけたくさんあります。それぞれ一つ一つが、新しい技術仕様になっていて、それぞれにワーキンググループというチームが作られて仕様(ルール)づくりをしています。これらの技術群によって、WEBの世界がとてもおもしろいことになる、と期待されています。
  7. 7. 戦いの歴史戦いの歴史と言ってしまうと大げさですが、HTML5が出来上がるまでには二つの団体の衝突がありました。もともとHTMLのルールを作っていたのは、W3Cという組織で、インターネットの生みの親とも言えるティムバーナーズリーという人が率いています。W3Cは厳格なルールを作ることを目指してXHTMLというルールを作っていたのですが、それに異議をとなえたのが、オペラやアップルやモジラなどのブラウザ会社達でした。時代が進むにつれて、WEBサイトは、ただ情報をみるためだけのものから、アニメーションしたり、動画があったり、ゲームのようなものができたりと、より高機能なものになっていきました。そのため、厳密なルールよりも、もっといろいろな高機能が使えるようなルール作りを優先するべきだとして、ブラウザ会社達はW3Cとは別の標準化団体WHATWGをつくってしまいました。そのWHATWGが提案していたものが今のHTML5の元になるもので、WEBの世界の流れはそちらを向いていると判断したW3Cは、XHTMLのルールづくりを進めることをやめて、WHATWGと共同でHTML5をWEBの標準技術としてつくっていくことに決めました。
  8. 8. 2012年12月17日ついに勧告候補に。仕様作りはほぼ終わりましたよ。みんな使ってみてネFirst Public Working DraftWorking DraftLast CallCandidate RecommendationRroposed RecommendationRecommendationHTML5は仕様が完成(正確にはHTML5とCanvas 2D context)2008年1月2012年12月HTML5タグの仕様は、2012年の12月17日にようやく勧告候補という段階にいきました。「勧告候補」とは、仕様づくりがいったん終了した状態。広くみんなに利用を呼びかけて何か不具合があったら教えてね、という段階です。英語ではcandidate Recommendationといい、CRと略されたりします。この段階までくると大幅な変更はもうないと言われていて、安心して使えるようになったな、という感覚です。(追記)とはいえ2013年4月には、<main>タグが追加されるという比較的大きな変更がありました・・。
  9. 9. なぜ注目されるのか
  10. 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. 11. WEBサイトをつくるための技術だったHTML CSS Javascriptがアプリケーションを作れるくらいに進化WEBサイトを超えてWEBサイト アプリケーションこれまでのHTMLは、動きのないWEBページを作るための言語でした。HTML5になってもっとも大きな変化は、その用途が変化したというところです。ゲームや普段パソコンにインストールして使っているような、アプリやソフトウェアと言われているものまで作れるように進化したものがHTML5です。
  12. 12. どのような環境でも、アプリ(ソフト)を開発するならHTML5で行えるようになるアプリ開発のプラットフォーム僕達が日常的に使っているアプリケーションはOSに依存しています。windows用に作られたアプリはwindows上でしか動きませんし、macOS用に作られたものはmac上でしか動きません。HTML5で作られたアプリは、あたりまえですが、ブラウザで動きます。ブラウザはwindowsでもmacでも搭載されています。そのため、HTML5で作られたアプリはどのようなOSでもブラウザさえあれば動かすことができます。つまりOSに依存せずにアプリが作れるため、HTML5がアプリ開発のプラットフォームになるのではないかと期待されています。
  13. 13. あらゆるアプリはブラウザ上で動くようになり、ブラウザがかつてのOSのようになる。ブラウザがOSに?(OSに依存しない)OSに依存せずにブラウザ上でアプリが動くということは、ユーザーにとって、OSの違いはさほど重要じゃなくなってくることを意味します。アプリが使えるかどうかは、むしろブラウザの差が関わってきます。そのため、これまでOSでおきていたような覇権争いは、HTML5の普及にともなって、ブラウザでの争いに移行していくと言われています。
  14. 14. HTML5でサイト制作
  15. 15. HTML5利用はiPhoneやiPadで見られることを想定するケースFlashでもOK HTML5HTML5での制作現場PC向けサイトでは複雑な動きや高機能部分は当分FlashHTML5ではアプリまで作れるほどの機能群がある、と言いましたが、WEBサイト制作の現場では、アプリというよりはこれまで同様にページ制作として、すでに使われ出しています。HTML5ではリッチなコンテンツを作ることができますが、その表現力やパフォーマンスにおいては、まだまだFlashに及びません。PC用のサイトでは、Flashが使えますから、わざわざHTML5を使う必要はなく、当面Flashが使われていくものと思います。ただ「PCでも、iPadなどのタブレットやスマートフォンでも見られるようなサイトを作って欲しい」という要望は増えており、その際にはHTML5で作るという選択がとられるケースが増えています。
  16. 16. HTML5に強いブラウザ98%ブラウザシェア(日本)PC スマートフォンIE7 : 4%IE8 : 22%IE9 : 20%2%1%45% 52%iOS AndroidOpera 他HTML5に強いブラウザ50%2013年2月 ブラウザシェアHTML5のさまざまな機能は、実はPC用サイトでは、まだそれほど使えません。ブラウザのシェアでIE8と9が大きな勢力を持っており、このIE8と9はHTML5の機能にほとんど対応していないためです。一方、スマートフォンでは、iPhoneのsafariとAndroidのBrowserで98%のシェアをわけあっています。これらの2つのブラウザはHTML5にある程度対応しているため、HTML5はスマートフォンサイトで主に利用されています。
  17. 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を使うことができます。(IE8以降のブラウザシェアは95%)
  18. 18. アプリ化機能たちは限定的Drag & DropCanvasVideoタグWeb Storage【現状でも限定的に使える機能例】HTML5をつかってPC用のアプリを作っていくのはまだ時期尚早と言えそうです。さきほども言ったとおり、HTML5に対応していないブラウザがシェアの半分を占めているためです。IE8や9が根強く残っているうちは、いくつかの機能しか使えません。IE10からは本格利用OK!現在の最新バージョンであるIE10はHTML5をサポートしています。IE8,9が少数派になり、IE10以降が大きなシェアをもつようになって、ようやくアプリ化機能が安心して使えるようになります。予想としては2年後くらいになるのかなと思っています。
  19. 19. http://caniuse.com/ブラウザ対応表がありますcaniuse.comはHTML5やCSS3の機能別に、どのブラウザで使えるのかがまとまっているサイトです。「あの機能つかっていいのかな?」と思ったときに確認すると便利です。
  20. 20. スマホアプリ開発
  21. 21. スマホのブラウザはHTML5に(ある程度)対応している。スマホアプリをHTML5でAndroid ブラウザ iOS SafariHTML5サポート率72%(iOS6.0)HTML5サポート率60%(Android4.2)HTML5の利用はスマホで先行しているスマートフォンでは、Android標準ブラウザと、iOSサファリがほとんどのシェアをとっています。そのため、IEを気にしなくてはならないPC用サイトに比べて、ずっとHTML5が使いやすい環境です。そのためHTML5でのアプリ開発は、PCサイトよりも、スマートフォンサイトが主戦場となっています。
  22. 22. いまのスマホアプリはネイティブアプリObjective-C Java C# Vidual Basicそれぞれの端末で、別々の言語スマートフォン用のアプリを作る際、現状では、OSによって別々の言語でそれぞれ作る必要があります。例えば、iPhoneはObjective-Cという言語をつかってアプリを作らなくてはいけませんし、Android用にはJavaを使って、Windows Phone用にはC#などの言語を使ってアプリを開発しなくてはいけません。これらの端末でアプリが使えるようにするには、1つのアプリを提供するのにも、3つの言語でそれぞれ作ることになります。
  23. 23. これからのスマホアプリはHTML5アプリ1つの技術でマルチデバイスHTML5(HTML+CSS+Javascript)開発・運用費用は半分という人もいる一方、HTML5を使ったアプリでは、OSに依存せずブラウザ上で動くため、1つのプログラムで作られたアプリが、すべてのOSで動きます。(1ソース、マルチデバイス)OSごとに別々のプログラムで開発していく必要がなく、HTML5という1つの技術で済むので、アプリ開発がぐっと楽になります。
  24. 24. HTML5でネイティブアプリと同じようなものが作れる?
  25. 25. ネイティブのような機能・Application Cache・Web storage・Device APIたとえば上記の機能をつかえば、HTML5アプリでもネイティブのような体験が提供できる。オフラインでも動いちゃう!カメラやセンサーなどを使えちゃう!HTML5アプリで、ネイティブアプリのようなアプリを作ることができるのでしょうか?HTML5アプリとはブラウザ上で動くプログラムなので、ネイティブアプリのようにiPhoneの傾きを使った機能が使えなかったり、電波の届かないところでは画面が消えてしまったりするのではないか?と思う方もいます。しかし、一般的に思われている以上にHTML5ではいろいろなことができます。たとえば、Application Cache(アプリケーションキャッシュ)や、Web storage(ウェブストレージ)といったHTML5の機能を使うことで、オフラインでも動くアプリが作れますし、Device APIを使うことで、iPhoneのセンサーを使ったアプリをつくることができます。工夫次第でネイティブアプリと同様のユーザー体験を提供することができるのです。
  26. 26. DEMOを作ってみましたHTML5の機能を使って、シンプルなTODO管理アプリを作ってみました。スマートフォンで以下のURLに接続してみてください。HTML5を使って作ったアプリですが、オフライン機能を使っているため、一度接続したあとは、オフラインになったあとも引き続き使うことができます。また、iPhoneでホーム画面にアイコンを追加したあとは、アプリが立ち上がる起動画面を見せることもできます。tacshock.com/html5/stodo/
  27. 27. しかし現状は問題もAPIがそろっていない(細かな機種依存など)AndroidとiPhoneでCSSやjavascriptの動きが違うネイティブに比べてレスポンスが悪い(遅い)AppstoreやGoogle Play経由以外では配布しずらいゲームなどで特に問題になってるようです。ビジネス的な面技術的な面技術的な面技術的な面良いことずくしのように書きましたが、現状では課題も多くあります。よく言われているのは以下のような課題です。特に、Androidブラウザーでは、プログラムしたとおりに動かないケースも多く、開発者を悩ませています。現在、各所でAndroid対応のためのノウハウが貯められていますし、ブラウザの差を吸収したライブラリなども盛んに作られています。
  28. 28. Androidのシェア推移モバイルは機種変更がデスクトップよりも速い0%20%40%60%80%100%2012年4月2012年10月2013年4月Android4Android2系モバイルは機種変更のペースがPCよりもずっと早いことも、課題の解決を後押ししています。バグの多いAndroid2系の端末は、2012年の4月時点では、9割ものシェアをもっていましたが、新しく発売されたAndroid4系への機種変更がすすみ、1年で半減しています。PCにはない機種変更の早さです。Android4系ですべてのバグを解消しているわけではありませんが、素早いペースで技術的な課題は解決されていくことが期待できます。
  29. 29. ネイティブアプリObjective-C Java C# Vidual Basicそれぞれの端末用に開発スキルが必要HTML5アプリHTML+CSS+Javascript1つの言語でOK(低コスト)独自に配布しないといけないネイティブに比べて遅い○バージョンアップや変更も簡単○決済・広告配信等の機能を時前で用意デバイス固有の機能が統一されていない内容に制限がない○ストアを通じて配布できるレスポンスが良いバージョンアップや変更に時間がかかる決済機能がついているデバイス固有の機能内容の審査がある(主にiPhone)○○○○ネイティブアプリとHTML5アプリのメリット・デメリットを整理してみました。現時点で、それぞれ一長一短あり、どちらが優っているとは言えませんので、アプリの種類やビジネスモデルに応じて開発方法が選択されています。HTML5で現状もっとも問題視されているのは、「ネイティブに比べて遅い」ということです。特に多くのグラフィックを動かすゲームなどのアプリでは問題となっています。
  30. 30. HTML+CSS+Javascript1つの言語(+α)でOK(低コスト)○ツールデバイス固有の機能○ストアで配布できる○ハイブリッドアプリネイティブアプリ一長一短あるネイティブアプリとHTML5アプリですが、それぞれの良さを持ち寄った開発手法として、ハイブリッドアプリというスタイルがあります。これは、HTML5で作られたプログラムを、ツールを使って、それぞれのデバイス用のネイティブアプリに変換してしまうという方法です。ネイティブアプリが出来上がるため、ストアで配布でき、デバイス固有の問題の多くもツールが解決してくれます。急増している開発スタイルです。ツールとしては有名なものがいくつかあります。Phonegapやtitanium、appmobiなどが話題になっています。Phonegap
  31. 31. HTML5アプリ化踏み出すメリット
  32. 32. 30%の手数料がかからない(売上アップ)開発、運用費用の大幅なコストダウンHTML5アプリのメリット利益額のアップHTML5アプリに踏み出す最大のメリットは、AppStoreやGoogleplayに支払う手数料の回避と、開発・運用費用の削減ではないかと思います。売上アップと同時にコストダウンができるため、同じサービスを提供するにしても利益をアップさせることができます。アメリカのFinancial Timesという新聞社が提供するアプリは、2011年にネイティブアプリから撤退し、HTML5アプリに移行しました。ユーザー数は減らず、むしろ1年で77%も増加し、HTML5アプリの成功事例として有名です。最近では、AmazonなどもHTML5アプリ化への動きを見せています。
  33. 33. カスタマーリーチが条件AppStoreやGoogle Playの告知効果に頼らなくてもユーザーにリーチできるのであればHTML5化するメリットは大きい。ネイティブアプリは、AppストアやGooglePlay上での販売に大きく依存します。ユーザーがアプリを探してダウンロードする経路は、ほぼストアしかないため、ストアで流通させることができないHTML5アプリをユーザーに届けるのは簡単ではありません。しかし、すでに運営しているサービスでユーザーを抱えているなどの場合は、ストアに頼らなくても効果的に告知することで、HTML5アプリを端末に登録してもらうことはできます。ユーザーへのリーチをもっている企業にとってはHTML5アプリ化のメリットが大きいと言えそうです。
  34. 34. これからのHTML5
  35. 35. HTML5でアプリ開発が進む2016年までに業務アプリの50%以上がHTML5で作ったハイブリッドアプリになる(米調査会社ガートナー)“モバイルアプリケーションのニーズに対応するため、企業ではマルチプラットフォーム対応へのてこ⼊入れをすることになる。HTML5アプリケーションをネイティブコンテナに載せたハイブリッドアーキテクチャでは、デバイスのネイティブな機能にもアクセスできる利利点があり、多くの企業はこれに魅⼒力力を感じるだろう。”docomoがHTML5アプリを月額で使い放題サービス開始NTTドコモがスマートフォン向けに、ニュースや天気情報、交通案内など様々なコンテンツを⽉月額固定料料⾦金金で使い放題にするサービスを6⽉月にも開始する。〜~中略略〜~初年年度度は500万⼈人の会員獲得を⽬目指し、3年年後には最⼤大800万⼈人にまで広げる⽬目標を掲げている。〜~中略略〜~ドコモがコンテンツ制作会社に要請しているのは、コンテンツの表⽰示にウェブ表⽰示⾔言語の最新⽅方式である「HTML5」を使った「ウェブアプリ」だ。HTML5は今後ますます浸透していくと考えられており、アメリカの調査会社ガートナーは、3年後までに業務用アプリの過半数がHTML5で作られたアプリになると予想しています。また、docomoも月額で使い放題のHTML5アプリサービスの開始を発表するなど、HTML5アプリ化への動きはますます続いていきそうです。
  36. 36. 各社HTML5推進日米の影響力のある大きな企業たちが、こぞってHTML5推進を表明していることからも、一時的なブームではなく、長期的に標準技術として浸透していくことが予想できます。もともとHTML5の発起人であったアップル社や、HTML5推進を強く表明していたGoogleの立ち位置は微妙なところですが・・。
  37. 37. HTML5ベースのモバイルOSTIZEN OSTIZEN(タイゼン)というOSの搭載された端末が2013年にドコモから発売されます。この端末では、最初からHTML5アプリの利用を前提として作られており、HTML5で開発されたアプリを手軽にインストールし、ネイティブアプリのように使うことができるようになっています。スマートフォンのアプリを、iOSやAndroidのように閉じられたものにするのではなく、オープンに自由に開発・配布・インストールできるようにしよう、という考え方に多くの企業が賛同しているようです。他にもFirefox OSやubuntu touchなど、モバイルOS第3極と呼ばれる競争も起き始めています。HTML5アプリが盛り上がるに連れて、どこかのタイミングでiPhoneやAndroidでもHTML5アプリが簡単にインストールできるような仕組みに変化するのではないかと、僕は考えています。
  38. 38. 増えていくWebデバイスパソコンや携帯電話だけでなく、インターネットにつながるデバイスはますます増えていきます。たとえば、腕時計やメガネ、あるいは、冷蔵庫や洗濯機まで、インターネットに接続するようなものが発表されています。こういったものにすぐにブラウザが搭載されるかはわかりませんが、端末が増えれば増えるほど、共通して開発できる標準技術の重要性は増して行きます。HTML5なら、腕時計から冷蔵庫の操作をしたり、メガネからエアコンの操作をするなど、デバイス間のやりとりをすることも容易になり、新たな便利をうむサービスの芽が大量に出てくるだろうと思います。
  39. 39. これから登場してくる新たなデバイス向けのHTML5アプリを今から考えてみるのもいいかもしれません。これからの未来にワクワクしますね!
  40. 40. おしまいtwitter:tacshock

×