第1部:【基礎編】「いまさら聞けない!HTML5超入門」             休憩(10分)第2部:【活用編】「開発事例に学ぶHTML5アプリのポイント」     講師:アシアル株式会社 代表取締役 田中正裕             URL...
本日のスライドSlideShareより閲覧、ダウンロードして頂けます。HTML5超入門http://www.slideshare.net/monaca_mobi/html5-13514455開発事例に学ぶHtml5アプリのポイントhttp://...
講演者紹介田中正裕(たなか まさひろ)アシアル株式会社 代表取締役大学2年生の時にアシアル株式会社を設立、そのまま代表取締役社長として今に至る。もともと小学生の時にパソコンを触ったことがきっかけで、生きている時間の大半をプログラミングして過ごす...
アシアル株式会社 紹介アシアルは「エンジニアリングでインターネットの成長 を牽引する」という事業コンセプトのもと、UI/UX 設計とプログラミングを高次元で融合したエンジニアリングサービスを提供します。主な事業内容• Webシステム&コンサルテ...
アシアル株式会社について     革新的なアイディアと確かな技術力をもとに、インターネット社会において新たな価値を       創造するWebシステム         モバイルアプ                         ソフトウェア事...
URL : http://www.asial.co.jp/ │   Copyright © Asial Corporation. All Rights Reserved.   │   6
アシアルの取り組みHTML5/CSS3/JavaScriptによるモバイルソリューション提供を中心に、クラウド技術とオープンソーステクノロジーにフォーカスしています HTML5を用いた     スマートフォン/タブレットモバイルアプリ開発   ...
今さら聞けない!「HTML5超入門」   URL : http://www.asial.co.jp/ │   Copyright © Asial Corporation. All Rights Reserved.   │   8
HTML5とは?           URL : http://www.asial.co.jp/ │   Copyright © Asial Corporation. All Rights Reserved.   │   9
ブラウザの歴史• 多くのWebブラウザが出現し各々進化したが、描  画や機能互換性が低くなっている                                                                evolution...
HTML5はHTMLの最新バージョンHTMLにバージョンがある                                                                                           ...
HTMLとW3C           HTMLの仕様を策定            http://www.w3.org W3Cの仕様に基づいてブラウザを開発 独自機能実装し、W3Cに仕様をフィードバック             URL : h...
HTML5が注目された理由Google社・Apple社がHTML5へ意欲的   Google I/O というカンファレンスで大きな意気込みを語った   Googleのスマートフォンサイトは大抵HTML5で実現されている   Chromeの...
HTML5の実装体制Webkitは意外なことにAppleのエンジニアとGoogleのエンジニアが共同で開発にあたっている。レンダリングエンジン   WebKit                                          ...
HTML5の対応状況プラットフォーム    ブラウザ                                                       HTML5対応状況                                ...
スマートフォンに対応するHTML5            URL : http://www.asial.co.jp/ │   Copyright © Asial Corporation. All Rights Reserved.   │   16
すべてのデバイスがモバイル化される時代へ世界的な潮流として、一気にスマートフォンの波が押し寄せている。特に新興国では、初めての「コンピュータ」としてスマホ/タブレットが第一の選択肢に。               URL : http://ww...
さまざまなプラットフォーム         URL : http://www.asial.co.jp/ │   Copyright © Asial Corporation. All Rights Reserved.   │   18
最新のHTML5ブラウザシェア•   モバイル(タブレット・スマートフォン)はほぼ100%。•   今後、PC向けブラウザがInternet Explorer 9に置き換わるなかで、HTML5対応率が大    幅に向上。    デスクトップ環境...
事例を参考にした HTML5に出来ること              URL : http://www.asial.co.jp/ │   Copyright © Asial Corporation. All Rights Reserved.   ...
広義の意味でのHTML5デバイスアクセス                            HTML5タグ仕様•   GPS                                                + API•   カ...
CSS3       • CSS3は、CSSの最新バージョン。        HTML5と共に、W3Cにて策定が進め        られている           CSS3だけで作成した「ドラえもん」               shopdd....
SVGタグによる描画の例• 画像を、線や曲線の集合として表現するフォーマット                                                                     jsdo.it/event/s...
<audio> <video> コントロール• Flashを使わずに音声や動画をコントロールできる                                                  出典:ニコニコ動画              ...
ジオロケーション (GPS)• 端末がGPSを搭載している場合、HTML5を使って 現在地情報を取得することができる     Google Maps (Web版)                                       Go...
Webフォント• フォントをWeb上に置いておき、環境依存させない                                                 fontworks.co.jp              URL : http:...
Webストレージ• Webサイトを先読みできる  – Webサイトを先読みすれば、電波のないところでも閲覧できる。  – メーラーや読み物系アプリに適している。                  URL : http://www.asial.c...
WebGL• 3Dグラフィックを扱うことが出来る – Flashに近い実装が可能                                                     www.biodigitalhuman.com      ...
Web Audio• ミキサーのように音データ  を取得・編集・操作が可能• 基本エフェクト• 3D空間上の音源                     chromium.googlecode.com/svn/trunk/samples/aud...
HTML5を取り入れたWebサイト           UNIQLO無印良品                                       Apple               ローソン  価格.com             ...
HTML5が使われているかの判断• HTMLソースコードの先頭に書かれている[ DOCTYPE ]を調べる                           先頭部分がDOCTYPEHTMLのソースを表示HTML4以      • <!DOC...
HTML5 まとめFlashのシェアはまだまだ強い                    U.Sではスマフォ5割超えPCサイトは徐々にFlashから                    日本でも3年以内に5割超が    HTML5へ移行が進む...
Upcoming SlideShare
Loading in …5
×

事例で学ぶHTML5スマフォアプリ開発セミナー

2,201 views

Published on

事例で学ぶHTML5スマフォアプリ開発セミナー

  1. 1. 第1部:【基礎編】「いまさら聞けない!HTML5超入門」 休憩(10分)第2部:【活用編】「開発事例に学ぶHTML5アプリのポイント」 講師:アシアル株式会社 代表取締役 田中正裕 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 1
  2. 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. 3. 講演者紹介田中正裕(たなか まさひろ)アシアル株式会社 代表取締役大学2年生の時にアシアル株式会社を設立、そのまま代表取締役社長として今に至る。もともと小学生の時にパソコンを触ったことがきっかけで、生きている時間の大半をプログラミングして過ごす。東京大学工学部を卒業、アシアルの事業に忙しくなったため同大学院を中退。代表取締役社長として対外的な活動を行いつつ、各プロジェクトではコーディングやマネジメントなども担当。 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 3
  4. 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. 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. 6. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 6
  7. 7. アシアルの取り組みHTML5/CSS3/JavaScriptによるモバイルソリューション提供を中心に、クラウド技術とオープンソーステクノロジーにフォーカスしています HTML5を用いた スマートフォン/タブレットモバイルアプリ開発 開発プラットフォーム オープンソース支援 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 7
  8. 8. 今さら聞けない!「HTML5超入門」 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. ブラウザの歴史• 多くのWebブラウザが出現し各々進化したが、描 画や機能互換性が低くなっている evolutionofweb.appspot.com URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 10
  11. 11. 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. │ 11
  12. 12. HTMLとW3C HTMLの仕様を策定 http://www.w3.org W3Cの仕様に基づいてブラウザを開発 独自機能実装し、W3Cに仕様をフィードバック URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 12
  13. 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. 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. 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. 16. スマートフォンに対応するHTML5 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 16
  17. 17. すべてのデバイスがモバイル化される時代へ世界的な潮流として、一気にスマートフォンの波が押し寄せている。特に新興国では、初めての「コンピュータ」としてスマホ/タブレットが第一の選択肢に。 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 17
  18. 18. さまざまなプラットフォーム URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 18
  19. 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. 20. 事例を参考にした HTML5に出来ること URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 20
  21. 21. 広義の意味でのHTML5デバイスアクセス HTML5タグ仕様• GPS + API• カメラ• カレンダー • ビデオ再生• ジャイロセンサーなど • オーディオなど グラフィックなど デザイン表現を のJavaScript機能 向上するCSS3 • Canvas機能 • CSSアニメーショ • ローカルストレージ ン など • セレクタなど URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 21
  22. 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. 23. SVGタグによる描画の例• 画像を、線や曲線の集合として表現するフォーマット jsdo.it/event/svggirl URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 23
  24. 24. <audio> <video> コントロール• Flashを使わずに音声や動画をコントロールできる 出典:ニコニコ動画 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 24
  25. 25. ジオロケーション (GPS)• 端末がGPSを搭載している場合、HTML5を使って 現在地情報を取得することができる Google Maps (Web版) Google Maps (アプリ版) URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 25
  26. 26. Webフォント• フォントをWeb上に置いておき、環境依存させない fontworks.co.jp URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 26
  27. 27. Webストレージ• Webサイトを先読みできる – Webサイトを先読みすれば、電波のないところでも閲覧できる。 – メーラーや読み物系アプリに適している。 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 27
  28. 28. WebGL• 3Dグラフィックを扱うことが出来る – Flashに近い実装が可能 www.biodigitalhuman.com URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 28
  29. 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. 30. HTML5を取り入れたWebサイト UNIQLO無印良品 Apple ローソン 価格.com Sample URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 30
  31. 31. HTML5が使われているかの判断• HTMLソースコードの先頭に書かれている[ DOCTYPE ]を調べる 先頭部分がDOCTYPEHTMLのソースを表示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. 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

×