事例で学ぶHTML5スマフォアプリ開発セミナー
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 2,034 views

 

Statistics

Views

Total Views
2,034
Slideshare-icon Views on SlideShare
2,027
Embed Views
7

Actions

Likes
3
Downloads
27
Comments
0

2 Embeds 7

https://twitter.com 6
http://s.deeeki.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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