事例に学ぶ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
今さら聞けない!「HTML5超入門」
                                      アシアル株式会社 海原 才人




   URL : http://www.asial.co.jp/ │   Copyright © Asial Corporation. All Rights Reserved.   │   2
講師プロフィール
•   名前:海原才人
•   年齢: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
HTML5とは?




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




                                                               evolutionofweb.appspot.com
              URL : http://www.asial.co.jp/ │   Copyright © Asial Corporation. All Rights Reserved.   │   5
HTMLとW3C




           HTMLの仕様を策定
             http://www.w3.org




 W3Cの仕様に基づいてブラウザを開発
 独自機能実装し、W3Cに仕様をフィードバック
              URL : http://www.asial.co.jp/ │   Copyright © Asial Corporation. All Rights Reserved.   │   6
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
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
HTML5が注目される背景




                URL : http://www.asial.co.jp/ │   Copyright © Asial Corporation. All Rights Reserved.   │   9
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
HTML5の課題

 まだまだ仕様策定中

 スマートフォンではメモリ不足

 IE6/7/8 ではHTML5が使えない

 開発ノウハウ不足
              URL : http://www.asial.co.jp/ │   Copyright © Asial Corporation. All Rights Reserved.   │   11
事例を参考にした HTML5に出来ること




              URL : http://www.asial.co.jp/ │   Copyright © Asial Corporation. All Rights Reserved.   │   12
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
SVGタグによる描画の例

• 画像を、線や曲線の集合として表現するフォーマット




                                                                     jsdo.it/event/svggirl

              URL : http://www.asial.co.jp/ │   Copyright © Asial Corporation. All Rights Reserved.   │   14
<audio> <video> コントロール

• Flashを使わずに音声や動画をコントロールできる




                                                  出典:ニコニコ動画



                URL : http://www.asial.co.jp/ │   Copyright © Asial Corporation. All Rights Reserved.   │   15
ジオロケーション (GPS)

• 端末がGPSを搭載している場合、HTML5を使って
 現在地情報を取得することができる




     Google Maps (Web版)                                       Google Maps (アプリ版)

                          URL : http://www.asial.co.jp/ │   Copyright © Asial Corporation. All Rights Reserved.   │   16
Webフォント

• フォントをWeb上に置いておき、環境依存させない




                                                 fontworks.co.jp

              URL : http://www.asial.co.jp/ │   Copyright © Asial Corporation. All Rights Reserved.   │   17
Webストレージ

• Webサイトを先読みできる

  – Webサイトを先読みすれば、電波のないところでも閲覧できる。

  – メーラーや読み物系アプリに適している。




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

• 3Dグラフィックを扱うことが出来る
 – Flashに近い実装が可能




                                   www.biodigitalhuman.com
                   URL : http://www.asial.co.jp/ │   Copyright © Asial Corporation. All Rights Reserved.   │   19
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
HTML5を取り入れたWebサイト
           UNIQLO
無印良品                                       Apple




               ローソン

  価格.com                                                Sample




                URL : http://www.asial.co.jp/ │   Copyright © Asial Corporation. All Rights Reserved.   │   21
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
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
ハイブリッドアプリケーションとは




            URL : http://www.asial.co.jp/ │   Copyright © Asial Corporation. All Rights Reserved.   │   24
スマフォアプリは作り方に種類がある

                               スマートフォンアプリ


       ネイティブ                       ハイブリッド                                                    Webサイト
        アプリ                          アプリ                                                    (Webアプリ)



JAVA   Objective C   C# / VB            monaca




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




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




          コードエディタ
         で編集し、保存する




           Monaca IDE                                                                   デバッガー

                        URL : http://www.asial.co.jp/ │   Copyright © Asial Corporation. All Rights Reserved.   │   27
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
URL : http://www.asial.co.jp/ │   Copyright © Asial Corporation. All Rights Reserved.   │   29

いまさら聞けない!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