• Save
HTML5がもたらすアプリ開発へのインパクト
Upcoming SlideShare
Loading in...5
×
 

HTML5がもたらすアプリ開発へのインパクト

on

  • 1,522 views

 

Statistics

Views

Total Views
1,522
Views on SlideShare
1,516
Embed Views
6

Actions

Likes
8
Downloads
0
Comments
0

1 Embed 6

https://twitter.com 6

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5がもたらすアプリ開発へのインパクト HTML5がもたらすアプリ開発へのインパクト Presentation Transcript

    • HTML5がもたらす アプリ開発へのインパクト 2013/9/8 株式会社オープンウェブ・テクノロ ジー 代表取締役 白石俊平
    • 自己紹介 • • • • • • 白石俊平と申します。 コミュニティhtml5j管理人(会員数5,500名超) HTML5とか勉強会主催(毎月一回、100名を動員) Google API Expert (HTML5) Microsoft Most Valuable Professional (IE9) Twitter: @Shumpei
    • html5jとは • 日本最大のWeb技術者コミュニティ – 2013年6月現在、会員数5,500人超 • ビジョン:「世界で一番Web技術者コミュニティ が盛り上がっている国、日本」 • 近々非営利法人化を行い、よりパワフルに活動 を拡大していきます! • 部活動も活発になって来ました! – マークアップ部/えんぷら部/テレビ部/ビギナー部…
    • Web技術の基礎知識
    • Web技術の基礎知識 • Web関連技術は、様々なオープン標 準によって支えられている。 標準化団体 W3C ECMA 管理している仕様 HTML/CSS/DOM/XML… ECMAScript IETF Khronos HTTP/WebSocket/JSON/Atom WebGL
    • HTML5を取り巻く環境 W3C 標準化 参照 仕様 参照 ベンダー Webページ Webエンジニア 開発 開発 実装 ブラウザを通じ てWebを利用
    • HTML5という「仕様」  HTML(Hyper Text Markup Language)の最新バー ジョン  W3C(World Wide Web Consortium)で標準化作業中 仕様書はWebで公開されている
    • Webを進化させつつ安定させる HTML Living Standard WHATWGによる バージョン HTML5 HTML5.1 W3Cによる 安定バージョン W3Cによる 次期バージョン
    • HTML5仕様のスケジュール 2012年9月20日、HTML5仕様のスケジュールが発表された! 2012年Q4 HTML5.0が勧告 候補に 2014年 HTML5.0勧告 2016年 HTML5.1勧告
    • 「狭義」のHTML5と「広義」のHTML5
    • Web関連技術は広く、深い。 HTML要素数:108 JavaScript API仕様: 66 CSS関連仕様: 66
    • 7つの「○○ウェブ」 オフライン スピーディ リアルタイム プラットフォーム レスポンシブ セマンティック インプレッシブ
    • オフラインWeb http://anata0321.blog78.fc2.com/?no=463 http://deha712.exblog.jp/8381024 http://ja.wikipedia.org/wiki/飛行機
    • オフラインWeb "オフライン時の変更は、 オンラインに戻った時に同期されます" Google Slides
    • オフラインWebを実現する テクノロジー • • • • アプリケーションキャッシュ Web Storage Indexed Database API File API
    • リアルタイムWeb http://news.cnet.com/8301-30684_3-20002186-265.html
    • リアルタイムWeb Japanese Chalkboard
    • リアルタイムWeb Cube Slam
    • リアルタイムWebを実現する テクノロジー • WebSocket • Server-Sent Events • WebRTC (Web Realtime Communication)
    • レスポンシブWeb GRAVITATE
    • レスポンシブWebを実現する テクノロジー • CSSメディアクエリ • レスポンシブ・イメージ • グリッドレイアウト
    • セマンティックWeb ? Semantic Semantic <!DOCTYPE html> <html> … </html> ?
    • セマンティックWeb Google リッチスニペットテストツール
    • セマンティックWeb 「google play angry birds」を検索する
    • セマンティックWebを実現する テクノロジー • • • • • HTML5 Semantic Elements HTML5 Microdata RDF/RDFa/RDFa Lite Microformats ...
    • よりスピーディなWeb
    • よりスピーディなWeb Normal Speedy
    • よりスピーディなWebを実現する テクノロジー • SPDY • HTTP/2.0 • オフライン技術
    • プラットフォームとしてのWeb
    • プラットフォームとしてのWeb • デバイス固有の機能にアクセスすることも可 能に – – – – – – – – 位置情報の取得(デモ) カメラ・マイクにアクセス(デモ) 音声によるテキスト入力(デモ) デバイスの向きや傾きを取得 温度や光、近接センサー バイブレーション アドレス帳、ギャラリーへのアクセス ...
    • プラットフォームとしての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/
    • インプレッシブWeb
    • Nike Air Jordan 2012 • 最近はやりの、スクロールと連動した視 差スクロールをフル活用したサイト
    • ChronoZoom • 全宇宙史に関する様々なリソースを参照 できるWebアプリ
    • Cube • WebGLを用いた3D表現とGoogle Mapsの組 み合わせ • コナミコマンドを入力すると・・・
    • Webcam Toy • カメラからの画像取り込み&リアルタイ ムエフェクト
    • マンガテレビ • カメラからの動画取り込み、顔認識、音 声認識
    • World Wide Maze • どんなWebサイトでも立体迷路に! • WebGL, WebSocket
    • インプレッシブWebを実現する テクノロジー • • • • HTML5 Canvas SVG (Scalable Vector Graphics) WebGL Web Audio API
    • なぜ、HTML5か? マルチプラットフォーム マルチデバイス 技術的な成熟
    • マルチプラットフォーム
    • 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
    • Webアプリとネイティブアプリの 比較
    • 「ハイブリッド型」アプリとは • 「ネイティブアプリをWeb技術で作る」手 法 • 後述する「PhoneGap」などにより実現が 可能に • マルチプラットフォームで動作するネイ ティブアプリを作成することが可能
    • マルチデバイス
    • 様々なスクリーンサイズ への対応 CREAN AIR WORKS
    • 様々なスクリーンサイズへの対 応 オフラインにも対応している WebApp Field Guide
    • 技術的な成熟
    • HTML5と関連仕様の実装状況 出典: When can I use...
    • 2008 2009 HTML5 & CSS3 Readiness 2010 2013
    • Webに「足りない」ものは何 か?
    • Webに足りないもの 動作速度 デバイスの機能へのアクセス アプリストア的な動線
    • 動作速度に対するアプローチ • JavaScriptの速度限界突破のための様々な 取組み – asm.js – NaCl / PNaCl • 一般的な用途では遅くない? – Fastbook • http://fb.html5isready.com/
    • デバイスの機能を使い切れない • 仕様と実装の両面で強化が図られている – 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
    • アプリストアの動線 • 各社による様々なアプローチ – Mozilla Marketplace/Chrome Web Store/Windows Store… – ハイブリッドアプリも「Webアプリ」とするなら、 Apple のAppStoreやGoogle Playも • ネイティブアプリとWebアプリの境目があいまいに なってきている。 – docomoやKDDIもHTML5に対して積極的に • Webアプリならではの導線があるのは強み – URLがある、インストールが不要、ソーシャルメ ディアとの相性が良い
    • ご清聴ありがとうございました。