HTML5とWeb開発に関する最新動向
Upcoming SlideShare
Loading in...5
×
 

HTML5とWeb開発に関する最新動向

on

  • 10,157 views

 

Statistics

Views

Total Views
10,157
Views on SlideShare
9,452
Embed Views
705

Actions

Likes
51
Downloads
89
Comments
0

3 Embeds 705

http://bikkuri.me 660
https://twitter.com 41
http://moodle.axis.co.jp 4

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とWeb開発に関する最新動向 HTML5とWeb開発に関する最新動向 Presentation Transcript

    • 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
    • 様々なスクリーンサイズ への対応 CREAN AIR WORKS
    • 2008 2009 HTML5 & CSS3 Readiness2010 2013
    • 7つの「○○ウェブ」オフライン スピーディリアルタイム プラットフォームレスポンシブセマンティック インプレッシブ
    • オフラインWeb http://anata0321.blog78.fc2.com/?no=463http://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を実現する テクノロジー• WebSocket• Server-Sent Events• WebRTC (Web Realtime Communication)
    • レスポンシブWeb GRAVITATE
    • レスポンシブWebオフラインにも対応している WebApp Field Guide
    • レスポンシブWebを実現する テクノロジー• CSSメディアクエリ• レスポンシブ・イメージ• グリッドレイアウト
    • セマンティックWeb ? SemanticSemantic <!DOCTYPE html> <html> ? … </html>
    • セマンティックWeb Google リッチスニペットテストツール
    • セマンティックWebを実現する テクノロジー• HTML5 Semantic Elements• HTML5 Microdata• RDF/RDFa/RDFa Lite• Microformats• ...
    • よりスピーディなWeb
    • よりスピーディなWebNormal Speedy
    • よりスピーディなWebを実現する テクノロジー• SPDY• HTTP/2.0• オフライン技術
    • プラットフォームとしてのWeb
    • プラットフォームとしてのWeb• デバイス固有の機能にアクセスすることも可 能に – 位置情報の取得 – カメラ・マイクにアクセス – 音声によるテキスト入力 – デバイスの向きや傾きを取得 – 温度や光、近接センサー – バイブレーション – アドレス帳、ギャラリーへのアクセス – ...
    • プラットフォームとしてのWeb Tizen IVI Opera TV Storehttp://fureidofort.blogspot.jp/2012/04/tizen-10-ivi-preview-on-exopc-photos.html http://japanese.engadget.com/2011/09/08/opera-tv/
    • インプレッシブWeb
    • ChronoZoom• 全宇宙史に関する様々なリソースを参照 できるWebアプリ
    • Flight Of The Navigator (Firefox Only) • 3Dの仮想空間の中を飛び回る。 • BGMに合わせて街中の明かりが明滅する 様は圧巻
    • インプレッシブWebを実現する テクノロジー• HTML5 Canvas• SVG (Scalable Vector Graphics)• WebGL• Web Audio API
    • 今年以降のトレンドを予想してみ る• 開発手法に関するトレンド• デザインに関するトレンド
    • Single Page ApplicationJavaScript MVCフレームワークの利用は一般化するでしょう。 Backbone.js Ember.js Angular.js Sencha Touch jQuery Mobile
    • リアルタイムWeb主要なモバイルWebブラウザでもWebSocketの実装が完了した今、リアルタイムWebはいよいよ本格的に普及するでしょう。 – 個人的には、Meteor (http://meteor.com)に注 目しています – 「リアクティブ・プログラミング」という用 語をたびたび聞く様になるかもしれません。
    • オフラインWeb今後数年かけて、オフラインWebの利用が本格化すると考えています。• 「オフライン・ファースト」で検索!
    • レスポンシブWebデザイン昨年に引き続き、レスポンシブWebデザインが注目されるのは、間違いありません。
    • フラットなデザイン LayerVault
    • CSSアニメーション 3d animation using pure CSS3
    • ご清聴ありがとうございました。 白石俊平 (@Shumpei)