Movatterモバイル変換

講師プロフィール• 名前：海原才人• 年齢：33歳• 経歴 • VB・VBAプログラマ 2003年(1年) • PHPプログラマ 2004年～2007年(4年) • システムエンジニア 2006年～2008年(2年) • プロジェクトマネジメント 2007年～2011年(5年) • 技術営業 2009年～ (4年) • PHP講師 2005年～ (8年)• 主な講師実績 • 他言語経験者向け・PHP研修(携帯アプリ開発企業様) • プロデューサ向け研修（ウノウ様） • プロデューサ向け様向け(CyberX様) • プロデューサ向け様向け(Sumzap様) • 新入社員向けエンジニア研修(CROOZ様) • 企画者向けIT基礎研修(MTI様) • 新入社員向けエンジニア研修(dwango様) • 内定者向け研修(グリー様) • Pasonatech主催・PHPプログラマ向けセミナー講演• 執筆経験 • ノン・プログラマのためのPHP入門 10日間コース(翔泳社) URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 2

HTML5はHTMLの最新バージョンHTMLにバージョンがある HTML5.0 HTML2.0 HTML3.2 HTML4.0HTML1.0 1995年 1997年 1997年～ 2008年ドラフト 2014年正式勧告予定 XHTML1.0 2000年 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 4

HTML5の実装体制Webkitは意外なことにAppleのエンジニアとGoogleのエンジニアが共同で開発にあたっている。レンダリングエンジン WebKit Trident PC版Safari PC版Chrome Internet Explorer Mobile Safari (iPhone, iPad) Chrome for Android Gecko Android Firefox URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 7

HTML5の対応状況プラットフォームブラウザ HTML5対応状況PC Internet Explorer △ バージョン9から対応 Firefox ○ Google chrome ◎ Safari ◎ Opera ○スマートフォン iPhone, iPod Touch ○ Android ○タブレット iPad ○ Android ○ガラケー各社とも × URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 8

HTML5が注目された理由Google社・Apple社がHTML5へ意欲的 Google I/O というカンファレンスで大きな意気込みを語った Googleのスマートフォンサイトは大抵HTML5で実現されている ChromeのHTML5実装が早いAdobe社・Apple社の動向 Apple社 Mobile SafariにFlash導入を行わないことを正式決定 Linux向け、Android向けFlashプレイヤーの開発を終了 FlashはAndroid 4.1からは、サポートが行われなくなることが(先週)確定し、今後はHTML5制作ツールに注力。FlashでできることをHTML5策定により補うという考え方がある HTML5ではFlashの代替となる以上のことが出来そう URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 9

最新のHTML5ブラウザシェア• モバイル（タブレット・スマートフォン）はほぼ100%• 今後、PC向けブラウザがInternet Explorer 9に置き換わるなかで、HTML5対応率が大幅に向上。デスクトップ環境におけるブラウザシェア（2012年5月）モバイルにおけるブラウザシェア（2012年5月）出典: http://www.netmarketshare.com/ URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 13

広義の意味でのHTML5 HTML5タグ仕様デバイスアクセス• GPS + API• カメラ• カレンダー • ビデオ再生• ジャイロセンサーなど • オーディオなどグラフィックなどデザイン表現をのJavaScript機能向上するCSS3 • Canvas機能 • CSSアニメーショ • ローカルストレージンなど • セレクタなど URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 15

Web Audio• ミキサーのように音データを取得・編集・操作が可能• 基本エフェクト• 3D空間上の音源 chromium.googlecode.com/svn/trunk/samples/audio/index.html URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 23

HTML5が使われているかの判断• HTMLソースコードの先頭に書かれている[ DOCTYPE ]を調べる先頭部分がDOCTYPEHTMLのソースを表示HTML4以 • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 下 • <?xml version="1.0"?>HTML • <!DOCTYPE html> 5※ただし、必ずしも当てはまるわけではないので、HTML5の機能が使われているかも判断材料としましょう。 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 25

HTML5 まとめFlashのシェアはまだまだ強い U.Sではスマフォ5割超え PCサイトは徐々にFlashから日本でも3年以内に5割超が HTML5へ移行が進む予想されるスマフォ・タブレット移行のためのHTML5導入が必要多くのプラットフォームでユーザー体験を上げるために HTML5で出来ることを研究して取り入れると良いでしょう URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 26

Movatterモバイル変換

Change Language

Html5超入門

Embed presentation

Recommended

More Related Content

What's hot

Viewers also liked

Similar to Html5超入門

More from Monaca

Html5超入門