いまさら聞けない!HTML5超入門

4,746 views

Published on

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

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,746
On SlideShare
0
From Embeds
0
Number of Embeds
1,565
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

いまさら聞けない!HTML5超入門

  1. 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. 2. 今さら聞けない!「HTML5超入門」 アシアル株式会社 海原 才人 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 2
  3. 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. 4. HTML5とは? URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 4
  5. 5. ブラウザの歴史• 多くのWebブラウザが出現し各々進化したが、描 画や機能互換性が低くなっている evolutionofweb.appspot.com URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 5
  6. 6. HTMLとW3C HTMLの仕様を策定 http://www.w3.org W3Cの仕様に基づいてブラウザを開発 独自機能実装し、W3Cに仕様をフィードバック URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 6
  7. 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. 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. 9. HTML5が注目される背景 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 9
  10. 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. 11. HTML5の課題 まだまだ仕様策定中 スマートフォンではメモリ不足 IE6/7/8 ではHTML5が使えない 開発ノウハウ不足 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 11
  12. 12. 事例を参考にした HTML5に出来ること URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 12
  13. 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. 14. SVGタグによる描画の例• 画像を、線や曲線の集合として表現するフォーマット jsdo.it/event/svggirl URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 14
  15. 15. <audio> <video> コントロール• Flashを使わずに音声や動画をコントロールできる 出典:ニコニコ動画 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 15
  16. 16. ジオロケーション (GPS)• 端末がGPSを搭載している場合、HTML5を使って 現在地情報を取得することができる Google Maps (Web版) Google Maps (アプリ版) URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 16
  17. 17. Webフォント• フォントをWeb上に置いておき、環境依存させない fontworks.co.jp URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 17
  18. 18. Webストレージ• Webサイトを先読みできる – Webサイトを先読みすれば、電波のないところでも閲覧できる。 – メーラーや読み物系アプリに適している。 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 18
  19. 19. WebGL• 3Dグラフィックを扱うことが出来る – Flashに近い実装が可能 www.biodigitalhuman.com URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 19
  20. 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. 21. HTML5を取り入れたWebサイト UNIQLO無印良品 Apple ローソン 価格.com Sample URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 21
  22. 22. HTML5が使われているかの判断• HTMLソースコードの先頭に書かれている[ DOCTYPE ]を調べる 先頭部分がDOCTYPEHTMLのソースを表示 • <!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. 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. 24. ハイブリッドアプリケーションとは URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 24
  25. 25. スマフォアプリは作り方に種類がある スマートフォンアプリ ネイティブ ハイブリッド Webサイト アプリ アプリ (Webアプリ)JAVA Objective C C# / VB monaca URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 25
  26. 26. • HTML5でスマートフォンアプリを開発できる URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 26
  27. 27. 開発の流れコードエディタで編集したファイルを、ライブプレビューとデバッガーで確認しながら開発を進めていきます。 簡単な確認はライブプレビューで 実際の表示確認はデバッガーで コードエディタ で編集し、保存する Monaca IDE デバッガー URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 27
  28. 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. 29. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 29

×