2012/6/5に開催された、アシアル主催のセミナー『事例に学ぶHTML5スマフォアプリ開発最前線』の第一部の資料になります。

1. 事例に学ぶHTML5スマフォアプリ開発最前線
10:00～10:05 開会のご挨拶
10:05～10:50 『いまさら聞けない！HTML5超入門』
講師：アシアル（株）教育マネージャー 海原才人
10:50～10:55 休憩（5分間）
10:55～11:40 『アプリ企画者が押さえておきたい
HTML5アプリ開発の要点』
講師：アシアル株式会社 代表取締役 田中正裕
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 1

2. 今さら聞けない！「HTML5超入門」
アシアル株式会社 海原 才人
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 2

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

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

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

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

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

8. 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

9. HTML5が注目される背景
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 9

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

11. HTML5の課題
 まだまだ仕様策定中
 スマートフォンではメモリ不足
 IE6/7/8 ではHTML5が使えない
 開発ノウハウ不足
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 11

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

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

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

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

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

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

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

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

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

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

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

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

24. ハイブリッドアプリケーションとは
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 24

25. スマフォアプリは作り方に種類がある
スマートフォンアプリ
ネイティブ ハイブリッド Webサイト
アプリ アプリ （Webアプリ）
JAVA Objective C C# / VB monaca
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 25

26. • HTML5でスマートフォンアプリを開発できる
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 26

27. 開発の流れ
コードエディタで編集したファイルを、ライブプレビューとデバッガーで
確認しながら開発を進めていきます。
簡単な確認はライブプレビューで
実際の表示確認はデバッガーで
コードエディタ
で編集し、保存する
Monaca IDE デバッガー
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 27

28. Monaca開発に必要な知識
HTML（HTML5）
Webサイトの制作に使われます。Monacaでは、HTMLの最新バージョンである
HTML5に対応しています。そのため、様々なHTML5の機能を使って画面を設計
することができます。
CSS（CSS3）
HTMLが画面の設計書であるのに対して、CSSはそのHTMLにデザインを適用し
ます。最新のCSS3では簡単なアニメーションなども表現することができるよう
になりました。
JavaScript
ブラウザ上で動くプログラミング言語です。ボタンをタップしたり、データを表
示する時の処理を記述します。
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 28

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