HTML5とWeb開発に関する最新動向
41
HTML5 と Web とととととと とととと 2013/3/26 ととととととととととと ととととととととととと ・ HTML5 ととととととととと「 html5j とと 」 とととと (@Shumpei)
-
Upload
shumpei-shiraishi -
Category
Documents
-
view
9.438 -
download
5
description
Transcript of HTML5とWeb開発に関する最新動向
HTML5 と Web 開発に関する
最新動向2013/3/26
株式会社オープンウェブ・テクノロジー代表取締役HTML5 開発者コミュニティ「 html5j 」 主催
白石俊平 (@Shumpei)
自己紹介
• 白石俊平と申します。• Web 技術者コミュニティ html5j 管理人• HTML5 とか勉強会主催（月一回、 100 名超を動
員）• Google API Expert (HTML5)• Microsoft Most Valuable Professional (IE9)• Twitter: @Shumpei
html5j とは• 日本最大の Web 技術者コミュニティ
– 2013 年 3 月現在、会員数 5,300 人超• ビジョン : 「世界で一番 Web 技術者コミュニ
ティが盛り上がっている国、日本」• 活動指針 : 「つなげる、学べる、盛り上がる」• 近々非営利法人化を行い、よりパワフルに活動
を拡大していきます！
HTML5 をモバイルアプリに統合しようと考えている開発者の割合
Appcelerator/IDC Mobile Developer Report, Q1 2012
なぜ、 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
http://deha712.exblog.jp/8381024
http://ja.wikipedia.org/wiki/ 飛行機
http://anata0321.blog78.fc2.com/?no=463
オフライン Web
" オフライン時の変更は、オンラインに戻った時に同期されます"
Google Slides
オフライン Web を実現するテクノロジー
• アプリケーションキャッシュ• Web Storage• Indexed Database API• File API
リアルタイム Web
http://news.cnet.com/8301-30684_3-20002186-265.html
リアルタイム Web を実現するテクノロジー
• WebSocket• Server-Sent Events• WebRTC (Web Realtime
Communication)
WebApp Field Guide
オフラインにも対応している
レスポンシブ Web
レスポンシブ Web を実現するテクノロジー
• CSS メディアクエリ• レスポンシブ・イメージ• グリッドレイアウト
<!DOCTYPE html><html> …</html>
Semantic
Semantic
セマンティック Web
？
？
セマンティック Web
Google リッチスニペットテストツール
セマンティック Web を実現するテクノロジー
• HTML5 Semantic Elements• HTML5 Microdata• RDF/RDFa/RDFa Lite• Microformats• ...
よりスピーディな Web
よりスピーディな Web
Normal
Speedy
よりスピーディな Web を実現するテクノロジー
• SPDY• HTTP/2.0• オフライン技術
プラットフォームとしての Web
プラットフォームとしての Web
• デバイス固有の機能にアクセスすることも可能に– 位置情報の取得– カメラ・マイクにアクセス– 音声によるテキスト入力– デバイスの向きや傾きを取得– 温度や光、近接センサー– バイブレーション– アドレス帳、ギャラリーへのアクセス– ...
プラットフォームとしての Web
http://fureidofort.blogspot.jp/2012/04/tizen-10-ivi-preview-on-exopc-photos.html
Tizen IVI
Opera TV Store
http://japanese.engadget.com/2011/09/08/opera-tv/
インプレッシブ Web
Flight Of The Navigator (Firefox Only)
• 3D の仮想空間の中を飛び回る。• BGM に合わせて街中の明かりが明滅する
様は圧巻
インプレッシブ Web を実現するテクノロジー
• HTML5 Canvas• SVG (Scalable Vector Graphics)• WebGL• Web Audio API
今年以降のトレンドを予想してみる
• 開発手法に関するトレンド• デザインに関するトレンド
Single Page Application
JavaScript MVC フレームワークの利用は一般化するでしょう。
Backbone.js
Angular.js
Ember.js
jQuery Mobile
Sencha Touch
リアルタイム Web
主要なモバイル Web ブラウザでもWebSocket の実装が完了した今、リアルタイム Web はいよいよ本格的に普及するでしょう。
– 個人的には、 Meteor (http://meteor.com)に注目しています
– 「リアクティブ・プログラミング」という用語をたびたび聞く様になるかもしれません。
オフライン Web
今後数年かけて、オフライン Web の利用が本格化すると考えています。• 「オフライン・ファースト」で検索！
レスポンシブ Web デザイン昨年に引き続き、レスポンシブ Web デザインが注目されるのは、間違いありません。
ご清聴ありがとうございました。
白石俊平 (@Shumpei)
![[AIプラットフォーム最新動向 2017] Microsoftの人工知能テクノロジーの最新動向と活用事例](https://static.fdocuments.net/doc/165x107/5a6478a37f8b9a3b568b4653/ai-2017-microsoft.jpg)
