31 Jul.2012HTML5の冒険
HTML5とは  Webコンテンツ作成に使う基本言語の第5版であり        コンテンツを利用する際の     エクスペリエンス向上を目的として制定       2014年までの正式勧告を目指し      策定がおこなわれている最中である
HTML5による変化
何がかわるのか    HTML5でかわるのは大別して2つ               API      (Application Program Interface)          各種APIの標準化と追加           Markup...
どうかわるのか API、Markupこの2つの強化によりHTML5は     1. よりインタラクティブに  2. よりセマンティックな文書構造に           そして  Webサイト内での情報伝達としての機能だけでなくブラウザ以外での利...
HTML5の特徴
HTML5 Logo       2011年2月、W3Cから発表された           「 HTML5のロゴ」で         その特徴が表現されています                      http://www.w3.org/ht...
ロゴがあらわすHTML5(1)           SEMANTICS        様々なタグの追加により     プログラムにとってもユーザにとっても     より有効なデータ駆動型のウェブを実現
ロゴがあらわすHTML5(2)      OFFLINE & STORAGE  インターネットに接続していない状態においても    ウェブアプリケーションを素早く起動し       稼働することが可能となる
ロゴがあらわすHTML5(3)        DEVICE ACCESS    ローカルデータ(オーディオ、ビデオ入力、      マイク、カメラ、連絡先、予定など)          の利用が可能となる
ロゴがあらわすHTML5(4)           CONNECTIVITY     Web Sockets、Server-Sent Eventsの  利用によりデータ取得のレスポンスの向上を実現      Web Sockets:HTTPを介...
ロゴがあらわすHTML5(5)          MULTIMEDIA       プラグインを利用することなく       動画・音声の再生が可能となる
ロゴがあらわすHTML5(6)                  3D, GRAPHICS                  EFFECTS    SVG、Canvas、WebGL、CSS3などの利用により       ビジュアルをブラウザ内で...
ロゴがあらわすHTML5(7)          PERFORMANCE          INTEGRATION   Web Workers、XMLHttpRequest 2などの     利用によりWebアプリケーションや   動的なWeb...
ロゴがあらわすHTML5(8)                  CSS3     幅広いスタイルやエフェクトをの追加や    Web Open Font Format(WOFF)による            フォント表現の強化
本日の勉強会について
本日の勉強会の対象     いままでご覧いただいた通りHTML5は  他のフロントサイドの技術(JavaScript、CSS)と       連携して活用されるものです HTML5 + CSS3 + JavaScript      ですので本日...
なぜHTML5なのか
なぜHTML5なのか(1)    いままでのHTML(XHTML)との違い   いままで以上に動的なことが可能になった(ローカルでの機能強化によりサーバ負荷軽減も図れる)動的なアプリケーションとして活用できる可能性が増えた    様々な技術がオ...
なぜHTML5なのか(2)    デバイス、OS、ブラウザを選ばず動く  「ワンソース・マルチプラットフォーム」である
なぜHTML5なのか(3)    デバイスの多様化に伴う外出先や屋外での  インターネット利用の拡大、目的に多様化により      新たな技術・表現が要求されている
HTML5を取り巻く状況
Topic(1)              Amazon     Kindleシリーズ向けの新ファイル形式        Kindle Format 8 (KF8) を発表 レイアウトに関する要素を中心にHTML5、CSS3に対応     (J...
Topic(2)                Microsoft  Windows8のアプリケーション構築にHTML5を対応             これにあわせ開発ツールの   Visual Studio、Expression Blendも...
Topic(3)                                       Adobe       HTML5、JavaScript、CSS3による   アニメーション制作ソフト「Edge preview」を発売       ...
Topic(4)      ネイティブアプリからWebアプリへ            Financial Timesが2011年7月           Webアプリ「FT Web App」を公開                        ...
Topic(5)               スマートテレビでの利用へ         「Symposium on Web and TV 2012」      IPTVフォーラムHTML5ワーキンググループが          HTML5ベース...
Topic(6)                 移動体への進出  General Motorsが2011年11月 米LAオートショーで      HTML5ベースの次世代型テレマティクス            「CUE(キュー)」を発表   ...
HTML5の課題
HTML5の課題(1)        デバイス、OS間での差異     スマートフォンをとってみても     Android、iOS、ブラウザでの     表示・挙動の違いが生じている
HTML5の課題(2)              スピード          ネイティブアプリに比べ           Webアプリは遅い      JavaScriptの処理速度は過去数年で  数十倍あがっているといわれ今後も改善が見込まれ...
HTML5の課題(3)              セキュリティ        他サイトからデータを   取得・利用できるようになったが クロスサイトスクリプティング (Cross Site   Scripting) の危険性が生じている
HTML5の課題(4)                  著作権   DRM(Digital Rights Management)       に関する定義がないため     著作権保護の観点で問題がある   W3Cに対しGoogle、Micr...
HTML5の課題(5)                                仕様の分断化?   2012年7月 WHATWGの「Living Standard」と W3Cが推進する仕様(WHATWG曰く「Snapshot」)     ...
HTML5の機能とその活用例
ジオロケーション  GPS、ネットワークのIPアドレスや無線LANのアクセスポイントから取得した    ユーザの位置情報を扱う技術
ジオロケーション:事例(1)           Walmart         周辺の店舗検索、ネイティブアプリケ         ーションと連動したルート検索に加え         各店舗のセールス情報なども提供              ...
ジオロケーション:事例(2)            iGS           ガソリン価格比較サイト           「gogo.gs」のガソリン価格情報           をもとに日本全国の現在位置周辺           のガソリン...
ジオロケーション:事例(3)         TeleNav Scout            HTML5ベースの音声ガイド付き            ナビゲーションサービス            ※米国外での利用不可             ...
Web Storage  ブラウザが持つ簡易データベースの機能で  各種データや画像等の保存が可能になる         cookieと比較し     多量のデータを保存することが可能                          cook...
Web Storage:事例           日本経済新聞SP beta                 オフラインの環境においても                 記事の閲覧が可能となってい                 るWebサイト...
Web Storage:事例             オフラインGmail                       Googleカレンダー                       Googleドライブ    オフライン環境で利用が可能な...
参考対応ブラウザとそのシェア
HTML5対応ブラウザ              ()内は2012年7月現在の最新版のバージョン Firefox 3.1        Chrome 3.0          Safari 3.0   (14.0.1)            (...
HTML5対応ブラウザのシェア(Japan)2012/1∼7月            7割弱のブラウザがHTML5に対応                     StatCounter Global Stats:http://gs.statco...
HTML5対応ブラウザのシェア(Worldwide)2012/1∼7月            8割のブラウザがHTML5に対応                    StatCounter Global Stats:http://gs.stat...
モバイルデバイスのHTML5対応状況一覧          Mobile HTML5        http://mobilehtml5.org/    モバイルブラウザでの各機能の      対応が一覧で確認できる
様々な機能が追加されたことによりHTMLはPC、ブラウザの枠を超え様々なシーンで活用されうる言語となりましたそして「ワンソース・マルチプラットフォーム」という     強みにより開発のコストや期間の軽減  ローカル処理の強化によるサーバへの負荷...
http://1pac.jp
Upcoming SlideShare
Loading in...5
×

Html5 seminar 1_pac

1,883

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,883
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
11
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Html5 seminar 1_pac

  1. 1. 31 Jul.2012HTML5の冒険
  2. 2. HTML5とは Webコンテンツ作成に使う基本言語の第5版であり コンテンツを利用する際の エクスペリエンス向上を目的として制定 2014年までの正式勧告を目指し 策定がおこなわれている最中である
  3. 3. HTML5による変化
  4. 4. 何がかわるのか HTML5でかわるのは大別して2つ API (Application Program Interface) 各種APIの標準化と追加 Markup 新たなタグの追加などによる情報構造の強化
  5. 5. どうかわるのか API、Markupこの2つの強化によりHTML5は 1. よりインタラクティブに 2. よりセマンティックな文書構造に そして Webサイト内での情報伝達としての機能だけでなくブラウザ以外での利用や 情報のより有効な活用が可能になり様々なシーンで活用されるようになります
  6. 6. HTML5の特徴
  7. 7. HTML5 Logo 2011年2月、W3Cから発表された 「 HTML5のロゴ」で その特徴が表現されています http://www.w3.org/html/logo/
  8. 8. ロゴがあらわすHTML5(1) SEMANTICS 様々なタグの追加により プログラムにとってもユーザにとっても より有効なデータ駆動型のウェブを実現
  9. 9. ロゴがあらわすHTML5(2) OFFLINE & STORAGE インターネットに接続していない状態においても ウェブアプリケーションを素早く起動し 稼働することが可能となる
  10. 10. ロゴがあらわすHTML5(3) DEVICE ACCESS ローカルデータ(オーディオ、ビデオ入力、 マイク、カメラ、連絡先、予定など) の利用が可能となる
  11. 11. ロゴがあらわすHTML5(4) CONNECTIVITY Web Sockets、Server-Sent Eventsの 利用によりデータ取得のレスポンスの向上を実現 Web Sockets:HTTPを介さずサーバーとクライアントを接続する技術 Server-Sent Events:サーバーからデータをプッシュする技術
  12. 12. ロゴがあらわすHTML5(5) MULTIMEDIA プラグインを利用することなく 動画・音声の再生が可能となる
  13. 13. ロゴがあらわすHTML5(6) 3D, GRAPHICS EFFECTS SVG、Canvas、WebGL、CSS3などの利用により ビジュアルをブラウザ内でネイティブに レンダリングすることが可能となり表現の幅が広がるSVG:ベクター画像記述言語 WebGL:ブラウザ上に3D図を描画するための仕様Canvas:ブラウザ上に図を描画するための仕様 CSS3:Webページのデザインやレイアウトを定義するための仕様
  14. 14. ロゴがあらわすHTML5(7) PERFORMANCE INTEGRATION Web Workers、XMLHttpRequest 2などの 利用によりWebアプリケーションや 動的なWebコンテンツのスピード向上を実現 Web Workers:JavaScriptの並列処理仕様 XMLHttpRequest 2:異るドメイン間での通信を可能とする仕様
  15. 15. ロゴがあらわすHTML5(8) CSS3 幅広いスタイルやエフェクトをの追加や Web Open Font Format(WOFF)による フォント表現の強化
  16. 16. 本日の勉強会について
  17. 17. 本日の勉強会の対象 いままでご覧いただいた通りHTML5は 他のフロントサイドの技術(JavaScript、CSS)と 連携して活用されるものです HTML5 + CSS3 + JavaScript ですので本日はHTML5を軸とした フロントサイドの技術全般を 対象として進行させていただきます
  18. 18. なぜHTML5なのか
  19. 19. なぜHTML5なのか(1) いままでのHTML(XHTML)との違い いままで以上に動的なことが可能になった(ローカルでの機能強化によりサーバ負荷軽減も図れる)動的なアプリケーションとして活用できる可能性が増えた 様々な技術がオフィシャルで定義された
  20. 20. なぜHTML5なのか(2) デバイス、OS、ブラウザを選ばず動く 「ワンソース・マルチプラットフォーム」である
  21. 21. なぜHTML5なのか(3) デバイスの多様化に伴う外出先や屋外での インターネット利用の拡大、目的に多様化により 新たな技術・表現が要求されている
  22. 22. HTML5を取り巻く状況
  23. 23. Topic(1) Amazon Kindleシリーズ向けの新ファイル形式 Kindle Format 8 (KF8) を発表 レイアウトに関する要素を中心にHTML5、CSS3に対応 (JavaScript、動画、音声には未対応) http://www.amazon.com/gp/feature.html?docId=1000729511
  24. 24. Topic(2) Microsoft Windows8のアプリケーション構築にHTML5を対応 これにあわせ開発ツールの Visual Studio、Expression Blendも同様に対応
  25. 25. Topic(3) Adobe HTML5、JavaScript、CSS3による アニメーション制作ソフト「Edge preview」を発売 Androidの次期バージョン4.1に 「FlashPlayer」を対応させないことを発表 Android版「FlashPlayer」の新規提供を8月で終了 Android 4.1にアップグレードした端末では 「Flash Player」のアンインストールを勧告 http://www.adobe.com/jp/aboutadobe/pressroom/pressreleases/20120629_flashplayer_android.html
  26. 26. Topic(4) ネイティブアプリからWebアプリへ Financial Timesが2011年7月 Webアプリ「FT Web App」を公開 アプリ内課金の際の Appleによる手数料徴収回避 複数プラットフォーム対応への アプリ開発負担・コストの軽減
  27. 27. Topic(5) スマートテレビでの利用へ 「Symposium on Web and TV 2012」 IPTVフォーラムHTML5ワーキンググループが HTML5ベースのスマートテレビ実現 に向けて策定を進めている © Impress Watch CorporationIPTVフォーラム:Internet Protocol(IP)を使用した動画配信の仕様の標準化と普及を目的とした民間の標準化団体
  28. 28. Topic(6) 移動体への進出 General Motorsが2011年11月 米LAオートショーで HTML5ベースの次世代型テレマティクス 「CUE(キュー)」を発表 テレマティクス:自動車、バイクなどにスマートフォンなどを連携させ情報サービスを提供すること
  29. 29. HTML5の課題
  30. 30. HTML5の課題(1) デバイス、OS間での差異 スマートフォンをとってみても Android、iOS、ブラウザでの 表示・挙動の違いが生じている
  31. 31. HTML5の課題(2) スピード ネイティブアプリに比べ Webアプリは遅い JavaScriptの処理速度は過去数年で 数十倍あがっているといわれ今後も改善が見込まれ また「Web Workers」による効果も期待できる
  32. 32. HTML5の課題(3) セキュリティ 他サイトからデータを 取得・利用できるようになったが クロスサイトスクリプティング (Cross Site Scripting) の危険性が生じている
  33. 33. HTML5の課題(4) 著作権 DRM(Digital Rights Management) に関する定義がないため 著作権保護の観点で問題がある W3Cに対しGoogle、Microsoft、Netflixの3社は 暗号化された動画や音楽のHTML5での再生を 可能にするためのAPI 「Encrypted Media Extensions」の標準化を申請W3CサイドはこのAPIがプラグインに近い仕様のためフラグメント化を懸念し反対(?)
  34. 34. HTML5の課題(5) 仕様の分断化? 2012年7月 WHATWGの「Living Standard」と W3Cが推進する仕様(WHATWG曰く「Snapshot」) に発展的(?)な分担がなされた Living Standard Web Applications 1.0 HTML5WHATWG 2007 2012 Snapshot W3C WHATWG(ワットダブルジー):Apple、Mozilla、Operaのブラウザベンダーによって設立されたグループ
  35. 35. HTML5の機能とその活用例
  36. 36. ジオロケーション GPS、ネットワークのIPアドレスや無線LANのアクセスポイントから取得した ユーザの位置情報を扱う技術
  37. 37. ジオロケーション:事例(1) Walmart 周辺の店舗検索、ネイティブアプリケ ーションと連動したルート検索に加え 各店舗のセールス情報なども提供 位置情報利用の際には ユーザの許可が必要 http://mobile.walmart.com
  38. 38. ジオロケーション:事例(2) iGS ガソリン価格比較サイト 「gogo.gs」のガソリン価格情報 をもとに日本全国の現在位置周辺 のガソリンスタンド情報と価格情 報の確認ができる http://gogo.gs/ http://itunes.apple.com/jp/app/igs/id409521642?mt=8
  39. 39. ジオロケーション:事例(3) TeleNav Scout HTML5ベースの音声ガイド付き ナビゲーションサービス ※米国外での利用不可 http://www.scout.me
  40. 40. Web Storage ブラウザが持つ簡易データベースの機能で 各種データや画像等の保存が可能になる cookieと比較し 多量のデータを保存することが可能 cookie:4kbytes(20個まで) localStorage:5MBytes(ユーザの同意により容量を増やすことが可能)
  41. 41. Web Storage:事例 日本経済新聞SP beta オフラインの環境においても 記事の閲覧が可能となってい るWebサイト 保存できる容量はデフォルト で5MBytesだがユーザの同意 により増やすことが可能 http://sp.nikkei.com
  42. 42. Web Storage:事例 オフラインGmail Googleカレンダー Googleドライブ オフライン環境で利用が可能なChromeアプリ Google カレンダー、Google ドライブも提供されている
  43. 43. 参考対応ブラウザとそのシェア
  44. 44. HTML5対応ブラウザ ()内は2012年7月現在の最新版のバージョン Firefox 3.1 Chrome 3.0 Safari 3.0 (14.0.1) (20.0.1) (5.1.7) Opera 9.6 Internet Explorer 9 (12.00) (9.0.8)※一部実装されていない機能あり
  45. 45. HTML5対応ブラウザのシェア(Japan)2012/1∼7月 7割弱のブラウザがHTML5に対応 StatCounter Global Stats:http://gs.statcounter.com
  46. 46. HTML5対応ブラウザのシェア(Worldwide)2012/1∼7月 8割のブラウザがHTML5に対応 StatCounter Global Stats:http://gs.statcounter.com
  47. 47. モバイルデバイスのHTML5対応状況一覧 Mobile HTML5 http://mobilehtml5.org/ モバイルブラウザでの各機能の 対応が一覧で確認できる
  48. 48. 様々な機能が追加されたことによりHTMLはPC、ブラウザの枠を超え様々なシーンで活用されうる言語となりましたそして「ワンソース・マルチプラットフォーム」という 強みにより開発のコストや期間の軽減 ローカル処理の強化によるサーバへの負荷軽減やオフラインでの稼働など様々なメリットをもたらします また、当然のことながらHTMLの本来の目的 「文書の構造の明確化」の強化により データの活用範囲もさらに広がることになります
  49. 49. http://1pac.jp
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×