1. 第1部：【基礎編】「いまさら聞けない！HTML5超入門」
休憩（10分）
第2部：【活用編】「開発事例に学ぶHTML5アプリのポイント」
講師：アシアル株式会社 代表取締役 田中正裕
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 1

2. 本日のスライド
SlideShareより閲覧、ダウンロードして頂けます。
HTML5超入門
http://www.slideshare.net/monaca_mobi/html5-13514455
開発事例に学ぶHtml5アプリのポイント
http://www.slideshare.net/monaca_mobi/html5-13516261
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 2

3. 講演者紹介
田中正裕（たなか まさひろ）
アシアル株式会社 代表取締役
大学2年生の時にアシアル株式会社を設立、そのまま代
表取締役社長として今に至る。もともと小学生の時にパ
ソコンを触ったことがきっかけで、生きている時間の大
半をプログラミングして過ごす。東京大学工学部を卒業、
アシアルの事業に忙しくなったため同大学院を中退。代
表取締役社長として対外的な活動を行いつつ、各プロ
ジェクトではコーディングやマネジメントなども担当。
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 3

4. アシアル株式会社 紹介
アシアルは「エンジニアリングでインターネットの成長 を牽引する」
という事業コンセプトのもと、UI/UX 設計とプログラミングを高次元
で融合したエンジニアリングサービスを提供します。
主な事業内容
• Webシステム＆コンサルティング（特にPHP・オープンソース関
連）
• 開発関連製品（JpGraph、ionCube PHP Encoder、SSLモバイル
等）
• モバイルアプリ開発環境 Monaca
• エンジニア教育、トレーニング
• デザインUI/UX設計
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 4

5. アシアル株式会社について
革新的なアイディアと確かな技術力をもとに、インターネット社会において新たな価値を
創造する
Webシステム モバイルアプ ソフトウェア事 メディア・教育
構築 リ構築 業 事業
スピーディで高パフォー AndroidやiOSといった エンジニアをサポートす 最新ノウハウ、テクノロ
マンスな開発。 モバイルデバイス。 る製品サービスの展開。 ジーをお客様にご紹介。
 PHP言語が中心  iPhone/Androidアプ  JpGraph  PHPスクール
 高トラフィックサイ リ  SSLモバイル  PHPプロ！・ブログ
ト  自社開発のアプリも  ionCube  書籍展開
 技術コンサルティン 多数
グ
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 5

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

7. アシアルの取り組み
HTML5/CSS3/JavaScriptによるモバイルソリューション提供を中心に、
クラウド技術とオープンソーステクノロジーにフォーカスしています
HTML5を用いた スマートフォン/タブレット
モバイルアプリ開発 開発プラットフォーム オープンソース支援
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 7

8. 今さら聞けない！「HTML5超入門」
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 8

9. HTML5とは？
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 9

10. ブラウザの歴史
• 多くのWebブラウザが出現し各々進化したが、描
画や機能互換性が低くなっている
evolutionofweb.appspot.com
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 10

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

12. HTMLとW3C
HTMLの仕様を策定
http://www.w3.org
 W3Cの仕様に基づいてブラウザを開発
 独自機能実装し、W3Cに仕様をフィードバック
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 12

13. 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. │ 13

14. 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. │ 14

15. 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. │ 15

16. スマートフォンに対応するHTML5
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 16

17. すべてのデバイスがモバイル化される時代へ
世界的な潮流として、一気にスマートフォンの波が押し寄せている。
特に新興国では、初めての「コンピュータ」としてスマホ／タブレットが第一
の選択肢に。
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 17

18. さまざまなプラットフォーム
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 18

19. 最新の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. │ 19

20. 事例を参考にした HTML5に出来ること
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 20

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

22. CSS3
• CSS3は、CSSの最新バージョン。
HTML5と共に、W3Cにて策定が進め
られている
CSS3だけで作成した「ドラえもん」
shopdd.blog51.fc2.com/blog-entry-932.html
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 22

23. SVGタグによる描画の例
• 画像を、線や曲線の集合として表現するフォーマット
jsdo.it/event/svggirl
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 23

24. <audio> <video> コントロール
• Flashを使わずに音声や動画をコントロールできる
出典：ニコニコ動画
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 24

25. ジオロケーション （GPS）
• 端末がGPSを搭載している場合、HTML5を使って
現在地情報を取得することができる
Google Maps (Web版) Google Maps (アプリ版)
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 25

26. Webフォント
• フォントをWeb上に置いておき、環境依存させない
fontworks.co.jp
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 26

27. Webストレージ
• Webサイトを先読みできる
– Webサイトを先読みすれば、電波のないところでも閲覧できる。
– メーラーや読み物系アプリに適している。
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 27

28. WebGL
• 3Dグラフィックを扱うことが出来る
– Flashに近い実装が可能
www.biodigitalhuman.com
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 28

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

30. HTML5を取り入れたWebサイト
UNIQLO
無印良品 Apple
ローソン
価格.com Sample
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 30

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

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