Weitere ähnliche Inhalte
Ähnlich wie 事例で学ぶHTML5スマフォアプリ開発セミナー (20)
事例で学ぶHTML5スマフォアプリ開発セミナー
- 1. 第1部:【基礎編】「いまさら聞けない!HTML5超入門」
休憩(10分)
第2部:【活用編】「開発事例に学ぶHTML5アプリのポイント」
講師:アシアル株式会社 代表取締役 田中正裕
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 1
- 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
- 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
- 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
- 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
- 24. <audio> <video> コントロール
• Flashを使わずに音声や動画をコントロールできる
出典:ニコニコ動画
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 24
- 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