Html5超入門

今さら聞けない！「HTML5超入門」
アシアル株式会社海原才人

URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 1

講師プロフィール

• 名前：海原才人
• 年齢：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日間コース(翔泳社)


HTML5とは？


HTML5はHTMLの最新バージョン

HTMLにバージョンがある

HTML5.0
HTML2.0 HTML3.2 HTML4.0
HTML1.0
1995年 1997年 1997年～ 2008年ドラフト
2014年正式勧告予定

XHTML1.0
2000年


ブラウザの歴史
• 多くのWebブラウザが出現し各々進化したが、描
画や機能互換性が低くなっている

evolutionofweb.appspot.com


HTMLとW3C

HTMLの仕様を策定
http://www.w3.org

 W3Cの仕様に基づいてブラウザを開発
 独自機能実装し、W3Cに仕様をフィードバック

HTML5の実装体制

Webkitは意外なことにAppleのエンジニアとGoogleのエンジニアが
共同で開発にあたっている。

レンダリングエンジン

WebKit Trident

PC版Safari PC版Chrome

Internet Explorer

Mobile Safari
(iPhone, iPad) Chrome for Android Gecko

Android Firefox


HTML5の対応状況

プラットフォームブラウザ HTML5対応状況

PC Internet Explorer △
バージョン9から対応

Firefox ○

Google chrome ◎

Safari ◎

Opera ○

スマートフォン iPhone, iPod Touch ○

Android ○

タブレット iPad ○

Android ○

ガラケー各社とも ×

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の代替となる以上のことが出来そう


データで見るスマートフォン市場とHTML5


すべてのデバイスがモバイル化される時代へ

世界的な潮流として、一気にスマートフォンの波が押し寄せている。
特に新興国では、初めての「コンピュータ」としてスマホ／タブレットが第一
の選択肢に。


さまざまなプラットフォーム


最新のHTML5ブラウザシェア

• モバイル（タブレット・スマートフォン）はほぼ100%
• 今後、PC向けブラウザがInternet Explorer 9に置き換わるなかで、HTML5対応率
が大幅に向上。

デスクトップ環境におけるブラウザシェア（2012年5月）

モバイルにおけるブラウザシェア（2012年5月）

出典: http://www.netmarketshare.com/


事例を参考にした HTML5に出来ること


広義の意味でのHTML5

HTML5タグ仕様
デバイスアクセス
• GPS + API
• カメラ
• カレンダー
• ビデオ再生
• ジャイロセンサーなど
• オーディオなど

グラフィックなどデザイン表現を
のJavaScript機能向上するCSS3

• Canvas機能 • CSSアニメーショ
• ローカルストレージン
など
• セレクタなど


CSS3

• CSS3は、CSSの最新バージョン。
HTML5と共に、W3Cにて策定が進め
られている

CSS3だけで作成した「ドラえもん」

shopdd.blog51.fc2.com/blog-entry-932.html


SVGタグによる描画の例

• 画像を、線や曲線の集合として表現するフォーマット

jsdo.it/event/svggirl


<audio> <video> コントロール

• Flashを使わずに音声や動画をコントロールできる

出典：ニコニコ動画


ジオロケーション（GPS）

• 端末がGPSを搭載している場合、HTML5を使って
現在地情報を取得することができる

Google Maps (Web版) Google Maps (アプリ版)


Webフォント

• フォントをWeb上に置いておき、環境依存させない

fontworks.co.jp


Webストレージ

• Webサイトを先読みできる

– Webサイトを先読みすれば、電波のないところでも閲覧できる。

– メーラーや読み物系アプリに適している。


WebGL

• 3Dグラフィックを扱うことが出来る
– Flashに近い実装が可能

www.biodigitalhuman.com


Web Audio

• ミキサーのように音データ
を取得・編集・操作が可能
• 基本エフェクト
• 3D空間上の音源

chromium.googlecode.com/svn/trunk/samples/audio/index.html


HTML5を取り入れたWebサイト
UNIQLO

無印良品 Apple

ローソン

価格.com Sample


HTML5が使われているかの判断

• HTMLソースコードの先頭に書かれている[ DOCTYPE ]を調べる

先頭部分がDOCTYPE

HTMLのソースを表示
HTML4以 • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

下 • <?xml version="1.0"?>
HTML • <!DOCTYPE html>

5
※ただし、必ずしも当てはまるわけではないので、HTML5の機能が使われているかも判断材料としましょう。

HTML5 まとめ

Flashのシェアはまだまだ強い U.Sではスマフォ5割超え
PCサイトは徐々にFlashから日本でも3年以内に5割超が
HTML5へ移行が進む予想される

スマフォ・タブレット移行のためのHTML5導入が必要

多くのプラットフォームでユーザー体験を上げるために
HTML5で出来ることを研究して取り入れると良いでしょう


Html5超入門

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (8)

Similar to Html5超入門

Similar to Html5超入門 (20)

More from Monaca

More from Monaca (20)

Html5超入門