Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie HTML5がもたらすアプリ開発へのインパクト
Ähnlich wie HTML5がもたらすアプリ開発へのインパクト (20)
Mehr von Shumpei Shiraishi
Mehr von Shumpei Shiraishi (16)
HTML5がもたらすアプリ開発へのインパクト
- 2. 自己紹介 • • • • • • 白石俊平と申します。 コミュニティhtml5j管理人（会員数5,500名超） HTML5とか勉強会主催（毎月一回、100名を動員） Google API Expert (HTML5) Microsoft Most Valuable Professional (IE9) Twitter: @Shumpei
- 3. html5jとは • 日本最大のWeb技術者コミュニティ – 2013年6月現在、会員数5,500人超 • ビジョン:「世界で一番Web技術者コミュニティ が盛り上がっている国、日本」 • 近々非営利法人化を行い、よりパワフルに活動 を拡大していきます！ • 部活動も活発になって来ました！ – マークアップ部/えんぷら部/テレビ部/ビギナー部…
- 4. Web技術の基礎知識
- 7. HTML5という「仕様」 HTML（Hyper Text Markup Language）の最新バー ジョン W3C（World Wide Web Consortium）で標準化作業中 仕様書はWebで公開されている
- 9. HTML5仕様のスケジュール 2012年9月20日、HTML5仕様のスケジュールが発表された！ 2012年Q4 HTML5.0が勧告 候補に 2014年 HTML5.0勧告 2016年 HTML5.1勧告
- 19. リアルタイムWebを実現する テクノロジー • WebSocket • Server-Sent Events • WebRTC (Web Realtime Communication)
- 21. レスポンシブWebを実現する テクノロジー • CSSメディアクエリ • レスポンシブ・イメージ • グリッドレイアウト
- 24. セマンティックWeb 「google play angry birds」を検索する
- 25. セマンティックWebを実現する テクノロジー • • • • • HTML5 Semantic Elements HTML5 Microdata RDF/RDFa/RDFa Lite Microformats ...
- 26. よりスピーディなWeb
- 28. よりスピーディなWebを実現する テクノロジー • SPDY • HTTP/2.0 • オフライン技術
- 29. プラットフォームとしてのWeb
- 31. プラットフォームとしてのWeb Tizen IVI Opera TV Store http://fureidofort.blogspot.jp/2012/04/tizen-10-ivi-preview-on-exopc-photos.html http://japanese.engadget.com/2011/09/08/opera-tv/
- 32. インプレッシブWeb
- 33. Nike Air Jordan 2012 • 最近はやりの、スクロールと連動した視 差スクロールをフル活用したサイト
- 35. Cube • WebGLを用いた3D表現とGoogle Mapsの組 み合わせ • コナミコマンドを入力すると・・・
- 38. World Wide Maze • どんなWebサイトでも立体迷路に！ • WebGL, WebSocket
- 39. インプレッシブWebを実現する テクノロジー • • • • HTML5 Canvas SVG (Scalable Vector Graphics) WebGL Web Audio API
- 41. マルチプラットフォーム
- 43. HTML5のマルチプラットフォーム 性が改めて注目されている • 例：jQuery Mobileがサポートするプラッ トフォーム（Grade A） Apple iOS 3.2-5.0, Android 2.1-2.3, Android 3.1 (Honeycomb), Android 4.0 (ICS), Windows Phone 7-7.5, Blackberry 6.0, Blackberry 7, Blackberry Playbook (1.0-2.0), Palm WebOS (1.4-2.0), Palm WebOS 3.0, Firebox Mobile (10 Beta), Chrome for Android (Beta), Skyfire 4.1, Opera Mobile 11.5:, Meego 1.2, Samsung bada 2.0, UC Browser, Kindle 3 and Fire, Nook Color 1.4.1, Chrome Desktop 11-17, Safari Desktop 4-5, Firefox Desktop 4-9, Internet Explorer 7-9, Opera Desktop 10-11
- 45. 「ハイブリッド型」アプリとは • 「ネイティブアプリをWeb技術で作る」手 法 • 後述する「PhoneGap」などにより実現が 可能に • マルチプラットフォームで動作するネイ ティブアプリを作成することが可能
- 46. マルチデバイス
- 50. 技術的な成熟
- 51. HTML5と関連仕様の実装状況 出典: When can I use...
- 52. 2008 2009 HTML5 & CSS3 Readiness 2010 2013
- 55. 動作速度に対するアプローチ • JavaScriptの速度限界突破のための様々な 取組み – asm.js – NaCl / PNaCl • 一般的な用途では遅くない？ – Fastbook • http://fb.html5isready.com/
- 56. デバイスの機能を使い切れない • 仕様と実装の両面で強化が図られている – SysApp WG • http://www.w3.org/2012/sysapps/ – Chrome Packaged App • http://developer.chrome.com/apps/api_index.html – PhoneGap • http://docs.phonegap.com/en/2.7.0/index.html
- 57. アプリストアの動線 • 各社による様々なアプローチ – Mozilla Marketplace/Chrome Web Store/Windows Store… – ハイブリッドアプリも「Webアプリ」とするなら、 Apple のAppStoreやGoogle Playも • ネイティブアプリとWebアプリの境目があいまいに なってきている。 – docomoやKDDIもHTML5に対して積極的に • Webアプリならではの導線があるのは強み – URLがある、インストールが不要、ソーシャルメ ディアとの相性が良い
- 58. ご清聴ありがとうございました。