SlideShare a Scribd company logo
1 of 33
企画者が押さえておきたい
                                                          HTML5アプリ開発の要点
                                    アシアル株式会社 代表取締役社長 田中正裕




URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   1
アシアル株式会社について

     革新的なアイディアと確かな技術力をもとに、インターネット社会において新たな価値を
       創造する




Webシステム         モバイルアプ                                     ソフトウェア事                                     メディア・教育
構築              リ構築                                        業                                           事業
スピーディで高パフォー     AndroidやiOSといった                           エンジニアをサポートす                                   最新ノウハウ、テクノロ
マンスな開発。         モバイルデバイス。                                 る製品サービスの展開。                                   ジーをお客様にご紹介。
   PHP言語が中心       iPhone/Androidアプ                         JpGraph                                      PHPスクール
   高トラフィックサイ       リ                                        SSLモバイル                                      PHPプロ!・ブログ
    ト              自社開発のアプリも                                ionCube                                      書籍展開
   技術コンサルティン       多数
    グ




                        URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   2
アシアルの取り組み


HTML5/CSS3/JavaScriptによるモバイルソリューション提供を中心に、
クラウド技術とオープンソーステクノロジーにフォーカスしています




 HTML5を用いた      スマートフォン/タブレット
モバイルアプリ開発        開発プラットフォーム                                                             オープンソース支援




               URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   3
講師紹介


                                   大学2年生の時にアシアル株式会社を設立、そのまま代表取締

                                   役社長として今に至る。



                                   もともと小学生の時にパソコンを触ったことがきっかけで、

                                   生きている時間の大半をプログラミングして過ごす。東京大

                                   学工学部を卒業、アシアルの事業に忙しくなったため同大学

                                   院を中退。



FB: massie.massie.massie
                                   代表取締役社長として対外的な活動を行いつつ、各プロジェ
Twitter: @massie
                                   クトではコーディングやマネジメントなども担当。




                           URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   4
本セミナーの内容


•   HTML5アプリの時代背景

    –   すべてのデバイスがモバイル化され、アプリが主役になりつつある時代に向けて

        HTML5の担う役割と目的について説明します

•   HTML5時代の開発手法

    –   HTML5だけでなく、モバイルの世界には様々な開発プラットフォームが登場しています。

        それらの特徴について紹介します

•   Monacaのテクノロジー紹介

    –   弊社が現在開発を進めているクラウドサービスMonacaの紹介と、その目的を紹介します




                    URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   5
HTML5アプリの時代背景




                URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   6
すべてのデバイスがモバイル化される時代へ

世界的な潮流として、一気にスマートフォンの波が押し寄せている。
特に新興国では、初めての「コンピュータ」としてスマホ/タブレットが第一の選択肢
に。




             URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   7
アプリが主役の時代へ

メール・iモードWebに変わり、アプリがプラットフォームの主役に。




    キャリア提供の                                                       プラットフォーマー提供の
   ランディングページ                                                        アプリマーケット




               URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   8
さまざまなプラットフォーム




        URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   9
Windows 8で全PCタブレット化


•   今冬リリース予定のWindows 8では、WOA
    (Windows On ARM)と呼ばれるタブレット端末専用バージョンがリリース予定
•   WOAでは、AndroidやiOSと同じARM CPUに対応
    (これまではIntel製CPUのみ対応)
•   これにより、Androidタブレットと同じ価格・スペックのWindows 8タブレットが登
    場する見込み
         タブレットの本格的な
         普及のカギを握るのがWindows 8。




•   タブレット、ノートパソコン、デスクトップで同じOSが動作。
•   今後はWindows PhoneもWindows 8ベースに。

                    URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   10
クラウド時代の主役もアプリケーション

マルチプラットフォームが当然の時代へ。
クラウドを活用することで、すべてのデバイスで共通のコンテンツ配信が可能に。




                                                   サーバーインフラと
                                                   その上で動作するバックエンドアプリ

             URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   11
クラウドはClient/Serverコンピューティング

旧来のC/Sコンピューティングと異なる点は、
クライアント側が「アプリ」となりマルチプラットフォームとなることと、
その通信にウェブ技術が用いられること。



        iOSアプリ
        Obj-C



                              Web技術
                                                                                                サーバー上の
        Androidアプリ                                                                              バックエンド
        Java                                                                                    アプリ




        Webアプリ         HTML5
        HTML5/JS




  クライアントはマルチプラットフォーム vs. サーバーはシングルプラットフォーム

                   URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   12
HTML5の特徴

•   より多様なコンテンツをブラウザで配信できるように

    – 動画やオーディオなど、従来は外部アプリに頼っていたコンテンツ再生を標準
      化
    – モバイル端末でのコンテンツ配信を提供


•   リッチアプリケーションを可能にするために

    – クライアント・リッチな機能実現のために、JavaScript言語を拡張
    – 3Dグラフィックやアニメーションなどの表現力が向上


•   Semantic Web、ワンソース・マルチユースを推進するために

    – テレビや家電など、より多くの種類のデバイスがインターネットに接続される
    – 特定のベンダーに左右されないオープンなプラットフォーム



                URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   13
なぜHTML5なのか?

クラウド対応アプリの標準言語

•   RIA(Rich Internet Application)開発の目的で登場した
    Adobe AIRやSilverlightの機能を包括

•   様々な開発ツールがHTML5をサポート

既存Webプラットフォームからの移行が容易

•   これまでのHTML(HTML4、XHTML)を拡張した技術
•   ウェブサイト開発、Webデザインの経験を比較的流用しやすい




                    URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   14
最新のHTML5ブラウザシェア

•    モバイル(タブレット・スマートフォン)はほぼ100%。
•    今後、PC向けブラウザがInternet Explorer 9に置き換わるなかで、HTML5対応率が大
     幅に向上。

    デスクトップ環境におけるブラウザシェア(2012年5月)




    モバイルにおけるブラウザシェア(2012年5月)




                                                                                          出典: http://www.netmarketshare.com/

                      URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   15
まとめ


モバイル化の流れ

•   近い将来、すべてのオペレーティングシステムがモバイルOSに

•   すべてのコンピューターは高速化し、手のひらサイズのデバイスに

モバイルブロードバンドの低価格化・ユビキタス化(話せていません)

•   すべてのモバイルデバイスのインフラを支える4Gが普及

•   光ファイバー級の接続がモバイル端末でも可能に

クラウド・リッチクライアントの流れ

•   多様なモバイル機器に効率よくコンテンツを配信する技術が求められる

•   その中核を担うのが、クラウド技術を活用したHTML5プラットフォーム



                URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   16
HTML5時代の開発手法




               URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   17
ネイティブ?Webアプリ?

実装モデルの違い。いずれもクラウド活用が必須

•   アプリはブラウザ上で動作                                                          •     アプリはOS上で直接動作
•   クライアント言語はHTML5/JavaScript                                             •     クライアント言語はOSにより異なる




                                                                                           Java                                Objective-C




                  アプリケーションは                                                                                 サーバーとの相互
                  サーバーから一方的に配信                                                                              コミュニケーションが可能



                   バックエンドはクラウド環境で稼働。

                    サーバー言語はPHP/Ruby/Perlなど
                      使用テクノロジーは同一。

      Webアプリ                                                                        ネイティブアプリ

                     URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   18
HTML5エコシステム




         URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   19
様々な制約が付随するWebアプリ


ビジネスモデル上の制約

• マーケットにはネイティブアプリのみ提出可能
• Webアプリでは、アプリ流通チャネルの構築の難易度が高い



ユーザーエクスペリエンス

• カメラやGPSなどの端末機能の活用
• なめらかな画面遷移
• 統一されたルック&フィール

プッシュ型サービスを提供できない

• ユーザーがWebサイトを訪問しない限りコンテンツ配信ができない




                  URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   20
HTML5以外の選択肢




                           CORONA SDK

         URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   21
各テクノロジー比較


            HTML5             Java,Obj-C                      Titanium                     Unity                          CORONA


            HTML5/JavaScri    Java
言語                                                            JavaScript                   C#, JavaScript                 Lua
            pt                ・Obj-C


Android     ◎                 ◎(Java)                         △                            ○                              ○


iOS         ◎                 ◎(Obj-C)                        ○                            ○                              ○


実行速度        △                 ◎                               ○                            ○                              ○


拡張性         ×                 ○                               △                            △                              ×


開発効率        ○                 △                               △                            ○                              ○


学習コスト       ◎                 ×                               ×                            △                              △


            業務系                                               JavaScriptによる
最適な用途                         端末性能を駆使                                                      ゲーム開発                          ゲーム開発
            コンテンツ系                                            開発



                             URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   22
技術マップ

高速化・リッチなUIのためには、ハードウェアレイヤーに近い技術を選択する必要があ
る。その場合、クロスプラットフォーム性が低下する

                                         デザイナーフレンドリー
                                                                                             学習コスト低


                                                                           HTML5



ハードウェア                                                                                             クロス
指向                                                                                                 プラットフォーム

                                                                      Unity
                                                                     CORONA
                                      Titanium

         Java
         Obj-C

                                         エンジニアリング指向


                 URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   23
エンジニアに対するスキルセットが課題


   技術の進歩に                       フロントとバックエンド                                                          よりレバレッジの
   キャッチアップ                       技術の両方を理解                                                            効く開発手法の選択



Obj-C言語の                                   HTML5/JS/UX
人気度グラフ
出典: www.tiobe.com




                                        PHP/Ruby/Python




             様々なテクノロジーが台頭するなかで、
             よりオープンでコストパフォーマンスの高い
             プラットフォームが選択の要件に


                    URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   24
Monacaのテクノロジー紹介




              URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   25
HTML5によるハイブリッド型開発スタイルの提案



       学習曲線が低い                                                         端末性能をフルに活用

       最大のデベロッパーコミュニティ                                                 スムーズな画面遷移

利点     豊富なエコシステム                                                       プッシュ通信・高度なネットワーク

       オープンな業界標準                                                       アプリマーケットでの販売


         HTML5                                                               ネイティブ実装


       Webブラウザが中心                                                      高い学習コスト

欠点     低い拡張性                                                           OSごとに異なる言語・FW

       スムーズな画面遷移が苦手                                                    制作日数の増加




                  URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   26
ハイブリッド型開発の特徴

                                                                                            ネイティブ機能で描画
Monacaアプリの例:三三社Eightアプリ




                                                                                  画面の中央部位はすべて
                                                                                  HTML5+JavaScript




                                                                                                       画面遷移も
                                                                                                       ネイティブ動作


             ネイティブ機能の活用

               URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   27
実際のMonacaアプリの動作デモ




         URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   28
開発での苦労点

•   iOSとAndroidの両方に対応した画面UI設計

    –   クロスプラットフォームのアプリ開発では、ネイティブアプリのUIをiPhoneとAndroidのど
        ちらに合わせるべきか、事前判断が必要
    –   一部のHTML5との互換性のないウィジェット(ドラムピッカー等)は別の方法で代替


•   さまざまな種類のデバイスへの対応(Android)

    –   画面サイズ(縦横比)が異なる端末への対応が厄介
    –   画面デザインの段階で、正方~16:9までの端末サイズを想定しておく必要あり


•   サポートOSの決定

    –   OSバージョンごとに細かいHTML5の実装仕様やバグがある状況
    –   特にAndroidでは、開発におけるリファレンス端末を選定する
    –   最新のOS・端末に向けて開発リソースを集中する




                    URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   29
構築経験をオープンに: Monacaプラットフォーム




•    HTML5とネイティブを組み合わせたハイブリッドアプリ開発向けプラットフォーム

•    クラウド上にすべての機能を統合し、だれでもアプリ開発ができる環境を提供

•    開発したアプリはApp StoreやGoogle Playなどの各種マーケットへの公開が可能



    対応ブラウザ
                                                        対応デバイス

    対応OS


                     URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   30
Monacaの制作環境

                                               ボタン一発で現在のアプリをAndroid/iOS
                                               ネイティブ形式に変換



HTML5/CSS/JavaScript
を用いた画面設計+ロジック記述




                                                                                  実際のアプリの動きがブラウザ内で再現

  デバッガーで動かした際の
  JavaScriptエラーなどがログとして出力


                       URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   31
Monacaロードマップ

Monacaのコンセプトである「誰でも簡単にアプリ開発ができること」を見据え、機能実装に励んで参ります。
正式リリースにつきましても、下記のリリース時期を照らし合わせて公表いたします。


現在取組中の提供機能
   –   最新版のPhoneGapへの対応
        •   現在0.9がベースのPhoneGapバージョンを、最新のバージョン(1.6ないし1.7)までアップグレード
            いたします。
   –   バックエンド機能
        •   サーバーサイドの機能を拡充して参ります。
今後リリース予定の機能
   –   ネイティブUIの統合
        •   先ほど説明したネイティブUIコンポーネントについて、Monaca IDEにてレイアウトができる機能を
            実装予定です。
   –   独自ネイティブモジュールの開発
        •   Objective-CやJavaで作成されたモジュールをMonacaアプリに取り込めるような仕組みを実装予定で
            す。




                        URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   32
ご清聴ありがとうございました




  URL : http://www.asial.co.jp/   │ Copyright © 2012 Asial Corporation. All Rights Reserved.   │ 2012/6/6   |   33

More Related Content

What's hot

HTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティスHTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティスアシアル株式会社
 
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみたCordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみたShin Ogata
 
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜Monaca
 
20140902 HTML5認定試験紹介資料
20140902 HTML5認定試験紹介資料20140902 HTML5認定試験紹介資料
20140902 HTML5認定試験紹介資料leverages_event
 
エンタープライズ・モバイルアプリにおける ハイブリッドアプリ開発
エンタープライズ・モバイルアプリにおける ハイブリッドアプリ開発エンタープライズ・モバイルアプリにおける ハイブリッドアプリ開発
エンタープライズ・モバイルアプリにおける ハイブリッドアプリ開発日本Cordovaユーザー会
 
Monacaで簡単スマートフォンアプリ開発体験講座
Monacaで簡単スマートフォンアプリ開発体験講座Monacaで簡単スマートフォンアプリ開発体験講座
Monacaで簡単スマートフォンアプリ開発体験講座Monaca
 
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発アシアル株式会社
 
Cordova×業務システム:失敗しないモバイル開発の秘訣
Cordova×業務システム:失敗しないモバイル開発の秘訣Cordova×業務システム:失敗しないモバイル開発の秘訣
Cordova×業務システム:失敗しないモバイル開発の秘訣アシアル株式会社
 
kintone 連携スマホアプリの開発・配布体験
kintone 連携スマホアプリの開発・配布体験kintone 連携スマホアプリの開発・配布体験
kintone 連携スマホアプリの開発・配布体験アシアル株式会社
 
Phone gap+javascriptスマホアプリ開発(入門編)
Phone gap+javascriptスマホアプリ開発(入門編)Phone gap+javascriptスマホアプリ開発(入門編)
Phone gap+javascriptスマホアプリ開発(入門編)Monaca
 
Cordova (PhoneGap) で始める、スマホアプリ開発
Cordova (PhoneGap) で始める、スマホアプリ開発Cordova (PhoneGap) で始める、スマホアプリ開発
Cordova (PhoneGap) で始める、スマホアプリ開発Kenichi Inoue
 
HTML5ハイブリッドアプリ開発 で拓くビジネスチャンス
HTML5ハイブリッドアプリ開発で拓くビジネスチャンスHTML5ハイブリッドアプリ開発で拓くビジネスチャンス
HTML5ハイブリッドアプリ開発 で拓くビジネスチャンス アシアル株式会社
 
事例で解説するハイブリッドアプリ開発のポイント
事例で解説するハイブリッドアプリ開発のポイント 事例で解説するハイブリッドアプリ開発のポイント
事例で解説するハイブリッドアプリ開発のポイント Monaca
 
HTML5プロフェッショナル認定試験対策講座
HTML5プロフェッショナル認定試験対策講座HTML5プロフェッショナル認定試験対策講座
HTML5プロフェッショナル認定試験対策講座アシアル株式会社
 
Cordovaで作る!センサと超小型BLEモジュールを用いた簡単IoTアプリ開発
Cordovaで作る!センサと超小型BLEモジュールを用いた簡単IoTアプリ開発Cordovaで作る!センサと超小型BLEモジュールを用いた簡単IoTアプリ開発
Cordovaで作る!センサと超小型BLEモジュールを用いた簡単IoTアプリ開発Hikaru Ito
 
ハイブリッドアプリ開発最前線から見たHtml5の理想と現実
ハイブリッドアプリ開発最前線から見たHtml5の理想と現実ハイブリッドアプリ開発最前線から見たHtml5の理想と現実
ハイブリッドアプリ開発最前線から見たHtml5の理想と現実Monaca
 

What's hot (20)

Html5/JSモバイルアプリ最前線
Html5/JSモバイルアプリ最前線Html5/JSモバイルアプリ最前線
Html5/JSモバイルアプリ最前線
 
HTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティスHTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティス
 
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみたCordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
 
Cordovaの特徴と開発手法概要
Cordovaの特徴と開発手法概要Cordovaの特徴と開発手法概要
Cordovaの特徴と開発手法概要
 
CordovaでAngularJSアプリ開発
CordovaでAngularJSアプリ開発CordovaでAngularJSアプリ開発
CordovaでAngularJSアプリ開発
 
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
 
20140902 HTML5認定試験紹介資料
20140902 HTML5認定試験紹介資料20140902 HTML5認定試験紹介資料
20140902 HTML5認定試験紹介資料
 
エンタープライズ・モバイルアプリにおける ハイブリッドアプリ開発
エンタープライズ・モバイルアプリにおける ハイブリッドアプリ開発エンタープライズ・モバイルアプリにおける ハイブリッドアプリ開発
エンタープライズ・モバイルアプリにおける ハイブリッドアプリ開発
 
Monacaで簡単スマートフォンアプリ開発体験講座
Monacaで簡単スマートフォンアプリ開発体験講座Monacaで簡単スマートフォンアプリ開発体験講座
Monacaで簡単スマートフォンアプリ開発体験講座
 
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
 
Cordova×業務システム:失敗しないモバイル開発の秘訣
Cordova×業務システム:失敗しないモバイル開発の秘訣Cordova×業務システム:失敗しないモバイル開発の秘訣
Cordova×業務システム:失敗しないモバイル開発の秘訣
 
kintone 連携スマホアプリの開発・配布体験
kintone 連携スマホアプリの開発・配布体験kintone 連携スマホアプリの開発・配布体験
kintone 連携スマホアプリの開発・配布体験
 
Phone gap+javascriptスマホアプリ開発(入門編)
Phone gap+javascriptスマホアプリ開発(入門編)Phone gap+javascriptスマホアプリ開発(入門編)
Phone gap+javascriptスマホアプリ開発(入門編)
 
Cordova (PhoneGap) で始める、スマホアプリ開発
Cordova (PhoneGap) で始める、スマホアプリ開発Cordova (PhoneGap) で始める、スマホアプリ開発
Cordova (PhoneGap) で始める、スマホアプリ開発
 
HTML5ハイブリッドアプリ開発 で拓くビジネスチャンス
HTML5ハイブリッドアプリ開発で拓くビジネスチャンスHTML5ハイブリッドアプリ開発で拓くビジネスチャンス
HTML5ハイブリッドアプリ開発 で拓くビジネスチャンス
 
事例で解説するハイブリッドアプリ開発のポイント
事例で解説するハイブリッドアプリ開発のポイント 事例で解説するハイブリッドアプリ開発のポイント
事例で解説するハイブリッドアプリ開発のポイント
 
Gartner summit 2016
Gartner summit 2016Gartner summit 2016
Gartner summit 2016
 
HTML5プロフェッショナル認定試験対策講座
HTML5プロフェッショナル認定試験対策講座HTML5プロフェッショナル認定試験対策講座
HTML5プロフェッショナル認定試験対策講座
 
Cordovaで作る!センサと超小型BLEモジュールを用いた簡単IoTアプリ開発
Cordovaで作る!センサと超小型BLEモジュールを用いた簡単IoTアプリ開発Cordovaで作る!センサと超小型BLEモジュールを用いた簡単IoTアプリ開発
Cordovaで作る!センサと超小型BLEモジュールを用いた簡単IoTアプリ開発
 
ハイブリッドアプリ開発最前線から見たHtml5の理想と現実
ハイブリッドアプリ開発最前線から見たHtml5の理想と現実ハイブリッドアプリ開発最前線から見たHtml5の理想と現実
ハイブリッドアプリ開発最前線から見たHtml5の理想と現実
 

Similar to 企画者が押さえておきたいHtml5アプリ開発の要点

HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解Monaca
 
ハイブリッドアプリ開発ビジネス支援
ハイブリッドアプリ開発ビジネス支援ハイブリッドアプリ開発ビジネス支援
ハイブリッドアプリ開発ビジネス支援アシアル株式会社
 
Html5超入門
Html5超入門Html5超入門
Html5超入門Monaca
 
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向Tsutomu Ogasawara
 
【デブサミ関西2014】Web技術で作るエンタープライズアプリ
【デブサミ関西2014】Web技術で作るエンタープライズアプリ【デブサミ関西2014】Web技術で作るエンタープライズアプリ
【デブサミ関西2014】Web技術で作るエンタープライズアプリアシアル株式会社
 
iPhone、Android両対応アプリ開発講座 概論
iPhone、Android両対応アプリ開発講座 概論iPhone、Android両対応アプリ開発講座 概論
iPhone、Android両対応アプリ開発講座 概論Takakuni Furukawa
 
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンスHTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンスアシアル株式会社
 
みなさんがHtml5をやらなくていい3つの理由
みなさんがHtml5をやらなくていい3つの理由みなさんがHtml5をやらなくていい3つの理由
みなさんがHtml5をやらなくていい3つの理由Masakazu Muraoka
 
マルチデバイスへ広がる最新動画配信とビジネス現場への活かし方
マルチデバイスへ広がる最新動画配信とビジネス現場への活かし方マルチデバイスへ広がる最新動画配信とビジネス現場への活かし方
マルチデバイスへ広がる最新動画配信とビジネス現場への活かし方Teiichi Ota
 
Sharoid Service Menu
Sharoid Service MenuSharoid Service Menu
Sharoid Service Menusharoid
 
NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」
NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」
NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」アシアル株式会社
 
HTML5ハイブリッド アプリ開発実践編
HTML5ハイブリッド アプリ開発実践編HTML5ハイブリッド アプリ開発実践編
HTML5ハイブリッド アプリ開発実践編Monaca
 
PhoneGapの始め方
PhoneGapの始め方PhoneGapの始め方
PhoneGapの始め方akabana
 
Html5 seminar 1_pac
Html5 seminar 1_pacHtml5 seminar 1_pac
Html5 seminar 1_pac1PAC. INC.
 
Html5で加速するモバイルアプリ開発
Html5で加速するモバイルアプリ開発Html5で加速するモバイルアプリ開発
Html5で加速するモバイルアプリ開発アシアル株式会社
 
HTML5が創り出す新たな世界
HTML5が創り出す新たな世界HTML5が創り出す新たな世界
HTML5が創り出す新たな世界lpijapan
 
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~Akira Inoue
 

Similar to 企画者が押さえておきたいHtml5アプリ開発の要点 (20)

HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解HTML5 クロスプラットフォームアプリ開発の現実解
HTML5 クロスプラットフォームアプリ開発の現実解
 
20110824 android apps_tanaka
20110824 android apps_tanaka20110824 android apps_tanaka
20110824 android apps_tanaka
 
ハイブリッドアプリ開発ビジネス支援
ハイブリッドアプリ開発ビジネス支援ハイブリッドアプリ開発ビジネス支援
ハイブリッドアプリ開発ビジネス支援
 
Html5超入門
Html5超入門Html5超入門
Html5超入門
 
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
 
【デブサミ関西2014】Web技術で作るエンタープライズアプリ
【デブサミ関西2014】Web技術で作るエンタープライズアプリ【デブサミ関西2014】Web技術で作るエンタープライズアプリ
【デブサミ関西2014】Web技術で作るエンタープライズアプリ
 
iPhone、Android両対応アプリ開発講座 概論
iPhone、Android両対応アプリ開発講座 概論iPhone、Android両対応アプリ開発講座 概論
iPhone、Android両対応アプリ開発講座 概論
 
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンスHTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
 
20110824 android apps_endo
20110824 android apps_endo20110824 android apps_endo
20110824 android apps_endo
 
20110824 android apps_endo
20110824 android apps_endo20110824 android apps_endo
20110824 android apps_endo
 
みなさんがHtml5をやらなくていい3つの理由
みなさんがHtml5をやらなくていい3つの理由みなさんがHtml5をやらなくていい3つの理由
みなさんがHtml5をやらなくていい3つの理由
 
マルチデバイスへ広がる最新動画配信とビジネス現場への活かし方
マルチデバイスへ広がる最新動画配信とビジネス現場への活かし方マルチデバイスへ広がる最新動画配信とビジネス現場への活かし方
マルチデバイスへ広がる最新動画配信とビジネス現場への活かし方
 
Sharoid Service Menu
Sharoid Service MenuSharoid Service Menu
Sharoid Service Menu
 
NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」
NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」
NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」
 
HTML5ハイブリッド アプリ開発実践編
HTML5ハイブリッド アプリ開発実践編HTML5ハイブリッド アプリ開発実践編
HTML5ハイブリッド アプリ開発実践編
 
PhoneGapの始め方
PhoneGapの始め方PhoneGapの始め方
PhoneGapの始め方
 
Html5 seminar 1_pac
Html5 seminar 1_pacHtml5 seminar 1_pac
Html5 seminar 1_pac
 
Html5で加速するモバイルアプリ開発
Html5で加速するモバイルアプリ開発Html5で加速するモバイルアプリ開発
Html5で加速するモバイルアプリ開発
 
HTML5が創り出す新たな世界
HTML5が創り出す新たな世界HTML5が創り出す新たな世界
HTML5が創り出す新たな世界
 
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
 

More from Monaca

クロスプラットフォーム開発を可能にするMonaca
クロスプラットフォーム開発を可能にするMonacaクロスプラットフォーム開発を可能にするMonaca
クロスプラットフォーム開発を可能にするMonacaMonaca
 
展示会出展を成功させるたった一つのこと
展示会出展を成功させるたった一つのこと展示会出展を成功させるたった一つのこと
展示会出展を成功させるたった一つのことMonaca
 
クロスプラットフォーム開発を可能にするMonacaとそのセキュリティ対策
クロスプラットフォーム開発を可能にするMonacaとそのセキュリティ対策クロスプラットフォーム開発を可能にするMonacaとそのセキュリティ対策
クロスプラットフォーム開発を可能にするMonacaとそのセキュリティ対策Monaca
 
LT「料金プラン改定後のMonacaについて」
LT「料金プラン改定後のMonacaについて」LT「料金プラン改定後のMonacaについて」
LT「料金プラン改定後のMonacaについて」Monaca
 
クロスプラットフォーム活用のポイント
クロスプラットフォーム活用のポイントクロスプラットフォーム活用のポイント
クロスプラットフォーム活用のポイントMonaca
 
US Meetup Tour
US Meetup TourUS Meetup Tour
US Meetup TourMonaca
 
New things about Cordova 4.0
New things about Cordova 4.0New things about Cordova 4.0
New things about Cordova 4.0Monaca
 
Cordova and PhoneGap Insights
Cordova and PhoneGap InsightsCordova and PhoneGap Insights
Cordova and PhoneGap InsightsMonaca
 
Using PhoneGap to develop incredible HTML5 hybrid mobile apps
Using PhoneGap to develop incredible HTML5 hybrid mobile appsUsing PhoneGap to develop incredible HTML5 hybrid mobile apps
Using PhoneGap to develop incredible HTML5 hybrid mobile appsMonaca
 
How to make Twitter app with PhoneGap/Cordova
How to make Twitter app with PhoneGap/CordovaHow to make Twitter app with PhoneGap/Cordova
How to make Twitter app with PhoneGap/CordovaMonaca
 
高いUXをハイブリッド開発で実現するためのポイント
高いUXをハイブリッド開発で実現するためのポイント高いUXをハイブリッド開発で実現するためのポイント
高いUXをハイブリッド開発で実現するためのポイントMonaca
 
LODチャレンジデー オープンデータを利用したサンプルアプリ
LODチャレンジデー オープンデータを利用したサンプルアプリLODチャレンジデー オープンデータを利用したサンプルアプリ
LODチャレンジデー オープンデータを利用したサンプルアプリMonaca
 
第6回LODチャレンジデー Monaca紹介資料
第6回LODチャレンジデー Monaca紹介資料第6回LODチャレンジデー Monaca紹介資料
第6回LODチャレンジデー Monaca紹介資料Monaca
 
Android Bazaar Conference講演資料「Onsen UIデビュー!」
Android Bazaar Conference講演資料「Onsen UIデビュー!」Android Bazaar Conference講演資料「Onsen UIデビュー!」
Android Bazaar Conference講演資料「Onsen UIデビュー!」Monaca
 
PhoneGapユーザー会@大阪 講演資料
PhoneGapユーザー会@大阪 講演資料PhoneGapユーザー会@大阪 講演資料
PhoneGapユーザー会@大阪 講演資料Monaca
 

More from Monaca (15)

クロスプラットフォーム開発を可能にするMonaca
クロスプラットフォーム開発を可能にするMonacaクロスプラットフォーム開発を可能にするMonaca
クロスプラットフォーム開発を可能にするMonaca
 
展示会出展を成功させるたった一つのこと
展示会出展を成功させるたった一つのこと展示会出展を成功させるたった一つのこと
展示会出展を成功させるたった一つのこと
 
クロスプラットフォーム開発を可能にするMonacaとそのセキュリティ対策
クロスプラットフォーム開発を可能にするMonacaとそのセキュリティ対策クロスプラットフォーム開発を可能にするMonacaとそのセキュリティ対策
クロスプラットフォーム開発を可能にするMonacaとそのセキュリティ対策
 
LT「料金プラン改定後のMonacaについて」
LT「料金プラン改定後のMonacaについて」LT「料金プラン改定後のMonacaについて」
LT「料金プラン改定後のMonacaについて」
 
クロスプラットフォーム活用のポイント
クロスプラットフォーム活用のポイントクロスプラットフォーム活用のポイント
クロスプラットフォーム活用のポイント
 
US Meetup Tour
US Meetup TourUS Meetup Tour
US Meetup Tour
 
New things about Cordova 4.0
New things about Cordova 4.0New things about Cordova 4.0
New things about Cordova 4.0
 
Cordova and PhoneGap Insights
Cordova and PhoneGap InsightsCordova and PhoneGap Insights
Cordova and PhoneGap Insights
 
Using PhoneGap to develop incredible HTML5 hybrid mobile apps
Using PhoneGap to develop incredible HTML5 hybrid mobile appsUsing PhoneGap to develop incredible HTML5 hybrid mobile apps
Using PhoneGap to develop incredible HTML5 hybrid mobile apps
 
How to make Twitter app with PhoneGap/Cordova
How to make Twitter app with PhoneGap/CordovaHow to make Twitter app with PhoneGap/Cordova
How to make Twitter app with PhoneGap/Cordova
 
高いUXをハイブリッド開発で実現するためのポイント
高いUXをハイブリッド開発で実現するためのポイント高いUXをハイブリッド開発で実現するためのポイント
高いUXをハイブリッド開発で実現するためのポイント
 
LODチャレンジデー オープンデータを利用したサンプルアプリ
LODチャレンジデー オープンデータを利用したサンプルアプリLODチャレンジデー オープンデータを利用したサンプルアプリ
LODチャレンジデー オープンデータを利用したサンプルアプリ
 
第6回LODチャレンジデー Monaca紹介資料
第6回LODチャレンジデー Monaca紹介資料第6回LODチャレンジデー Monaca紹介資料
第6回LODチャレンジデー Monaca紹介資料
 
Android Bazaar Conference講演資料「Onsen UIデビュー!」
Android Bazaar Conference講演資料「Onsen UIデビュー!」Android Bazaar Conference講演資料「Onsen UIデビュー!」
Android Bazaar Conference講演資料「Onsen UIデビュー!」
 
PhoneGapユーザー会@大阪 講演資料
PhoneGapユーザー会@大阪 講演資料PhoneGapユーザー会@大阪 講演資料
PhoneGapユーザー会@大阪 講演資料
 

企画者が押さえておきたいHtml5アプリ開発の要点

  • 1. 企画者が押さえておきたい HTML5アプリ開発の要点 アシアル株式会社 代表取締役社長 田中正裕 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 1
  • 2. アシアル株式会社について 革新的なアイディアと確かな技術力をもとに、インターネット社会において新たな価値を 創造する Webシステム モバイルアプ ソフトウェア事 メディア・教育 構築 リ構築 業 事業 スピーディで高パフォー AndroidやiOSといった エンジニアをサポートす 最新ノウハウ、テクノロ マンスな開発。 モバイルデバイス。 る製品サービスの展開。 ジーをお客様にご紹介。  PHP言語が中心  iPhone/Androidアプ  JpGraph  PHPスクール  高トラフィックサイ リ  SSLモバイル  PHPプロ!・ブログ ト  自社開発のアプリも  ionCube  書籍展開  技術コンサルティン 多数 グ URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 2
  • 3. アシアルの取り組み HTML5/CSS3/JavaScriptによるモバイルソリューション提供を中心に、 クラウド技術とオープンソーステクノロジーにフォーカスしています HTML5を用いた スマートフォン/タブレット モバイルアプリ開発 開発プラットフォーム オープンソース支援 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 3
  • 4. 講師紹介 大学2年生の時にアシアル株式会社を設立、そのまま代表取締 役社長として今に至る。 もともと小学生の時にパソコンを触ったことがきっかけで、 生きている時間の大半をプログラミングして過ごす。東京大 学工学部を卒業、アシアルの事業に忙しくなったため同大学 院を中退。 FB: massie.massie.massie 代表取締役社長として対外的な活動を行いつつ、各プロジェ Twitter: @massie クトではコーディングやマネジメントなども担当。 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 4
  • 5. 本セミナーの内容 • HTML5アプリの時代背景 – すべてのデバイスがモバイル化され、アプリが主役になりつつある時代に向けて HTML5の担う役割と目的について説明します • HTML5時代の開発手法 – HTML5だけでなく、モバイルの世界には様々な開発プラットフォームが登場しています。 それらの特徴について紹介します • Monacaのテクノロジー紹介 – 弊社が現在開発を進めているクラウドサービスMonacaの紹介と、その目的を紹介します URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 5
  • 6. HTML5アプリの時代背景 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 6
  • 8. アプリが主役の時代へ メール・iモードWebに変わり、アプリがプラットフォームの主役に。 キャリア提供の プラットフォーマー提供の ランディングページ アプリマーケット URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 8
  • 9. さまざまなプラットフォーム URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 9
  • 10. Windows 8で全PCタブレット化 • 今冬リリース予定のWindows 8では、WOA (Windows On ARM)と呼ばれるタブレット端末専用バージョンがリリース予定 • WOAでは、AndroidやiOSと同じARM CPUに対応 (これまではIntel製CPUのみ対応) • これにより、Androidタブレットと同じ価格・スペックのWindows 8タブレットが登 場する見込み タブレットの本格的な 普及のカギを握るのがWindows 8。 • タブレット、ノートパソコン、デスクトップで同じOSが動作。 • 今後はWindows PhoneもWindows 8ベースに。 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 10
  • 11. クラウド時代の主役もアプリケーション マルチプラットフォームが当然の時代へ。 クラウドを活用することで、すべてのデバイスで共通のコンテンツ配信が可能に。 サーバーインフラと その上で動作するバックエンドアプリ URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 11
  • 12. クラウドはClient/Serverコンピューティング 旧来のC/Sコンピューティングと異なる点は、 クライアント側が「アプリ」となりマルチプラットフォームとなることと、 その通信にウェブ技術が用いられること。 iOSアプリ Obj-C Web技術 サーバー上の Androidアプリ バックエンド Java アプリ Webアプリ HTML5 HTML5/JS クライアントはマルチプラットフォーム vs. サーバーはシングルプラットフォーム URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 12
  • 13. HTML5の特徴 • より多様なコンテンツをブラウザで配信できるように – 動画やオーディオなど、従来は外部アプリに頼っていたコンテンツ再生を標準 化 – モバイル端末でのコンテンツ配信を提供 • リッチアプリケーションを可能にするために – クライアント・リッチな機能実現のために、JavaScript言語を拡張 – 3Dグラフィックやアニメーションなどの表現力が向上 • Semantic Web、ワンソース・マルチユースを推進するために – テレビや家電など、より多くの種類のデバイスがインターネットに接続される – 特定のベンダーに左右されないオープンなプラットフォーム URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 13
  • 14. なぜHTML5なのか? クラウド対応アプリの標準言語 • RIA(Rich Internet Application)開発の目的で登場した Adobe AIRやSilverlightの機能を包括 • 様々な開発ツールがHTML5をサポート 既存Webプラットフォームからの移行が容易 • これまでのHTML(HTML4、XHTML)を拡張した技術 • ウェブサイト開発、Webデザインの経験を比較的流用しやすい URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 14
  • 15. 最新のHTML5ブラウザシェア • モバイル(タブレット・スマートフォン)はほぼ100%。 • 今後、PC向けブラウザがInternet Explorer 9に置き換わるなかで、HTML5対応率が大 幅に向上。 デスクトップ環境におけるブラウザシェア(2012年5月) モバイルにおけるブラウザシェア(2012年5月) 出典: http://www.netmarketshare.com/ URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 15
  • 16. まとめ モバイル化の流れ • 近い将来、すべてのオペレーティングシステムがモバイルOSに • すべてのコンピューターは高速化し、手のひらサイズのデバイスに モバイルブロードバンドの低価格化・ユビキタス化(話せていません) • すべてのモバイルデバイスのインフラを支える4Gが普及 • 光ファイバー級の接続がモバイル端末でも可能に クラウド・リッチクライアントの流れ • 多様なモバイル機器に効率よくコンテンツを配信する技術が求められる • その中核を担うのが、クラウド技術を活用したHTML5プラットフォーム URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 16
  • 17. HTML5時代の開発手法 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 17
  • 18. ネイティブ?Webアプリ? 実装モデルの違い。いずれもクラウド活用が必須 • アプリはブラウザ上で動作 • アプリはOS上で直接動作 • クライアント言語はHTML5/JavaScript • クライアント言語はOSにより異なる Java Objective-C アプリケーションは サーバーとの相互 サーバーから一方的に配信 コミュニケーションが可能 バックエンドはクラウド環境で稼働。 サーバー言語はPHP/Ruby/Perlなど 使用テクノロジーは同一。 Webアプリ ネイティブアプリ URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 18
  • 19. HTML5エコシステム URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 19
  • 20. 様々な制約が付随するWebアプリ ビジネスモデル上の制約 • マーケットにはネイティブアプリのみ提出可能 • Webアプリでは、アプリ流通チャネルの構築の難易度が高い ユーザーエクスペリエンス • カメラやGPSなどの端末機能の活用 • なめらかな画面遷移 • 統一されたルック&フィール プッシュ型サービスを提供できない • ユーザーがWebサイトを訪問しない限りコンテンツ配信ができない URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 20
  • 21. HTML5以外の選択肢 CORONA SDK URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 21
  • 22. 各テクノロジー比較 HTML5 Java,Obj-C Titanium Unity CORONA HTML5/JavaScri Java 言語 JavaScript C#, JavaScript Lua pt ・Obj-C Android ◎ ◎(Java) △ ○ ○ iOS ◎ ◎(Obj-C) ○ ○ ○ 実行速度 △ ◎ ○ ○ ○ 拡張性 × ○ △ △ × 開発効率 ○ △ △ ○ ○ 学習コスト ◎ × × △ △ 業務系 JavaScriptによる 最適な用途 端末性能を駆使 ゲーム開発 ゲーム開発 コンテンツ系 開発 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 22
  • 23. 技術マップ 高速化・リッチなUIのためには、ハードウェアレイヤーに近い技術を選択する必要があ る。その場合、クロスプラットフォーム性が低下する デザイナーフレンドリー 学習コスト低 HTML5 ハードウェア クロス 指向 プラットフォーム Unity CORONA Titanium Java Obj-C エンジニアリング指向 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 23
  • 24. エンジニアに対するスキルセットが課題 技術の進歩に フロントとバックエンド よりレバレッジの キャッチアップ 技術の両方を理解 効く開発手法の選択 Obj-C言語の HTML5/JS/UX 人気度グラフ 出典: www.tiobe.com PHP/Ruby/Python 様々なテクノロジーが台頭するなかで、 よりオープンでコストパフォーマンスの高い プラットフォームが選択の要件に URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 24
  • 25. Monacaのテクノロジー紹介 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 25
  • 26. HTML5によるハイブリッド型開発スタイルの提案  学習曲線が低い  端末性能をフルに活用  最大のデベロッパーコミュニティ  スムーズな画面遷移 利点  豊富なエコシステム  プッシュ通信・高度なネットワーク  オープンな業界標準  アプリマーケットでの販売 HTML5 ネイティブ実装  Webブラウザが中心  高い学習コスト 欠点  低い拡張性  OSごとに異なる言語・FW  スムーズな画面遷移が苦手  制作日数の増加 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 26
  • 27. ハイブリッド型開発の特徴 ネイティブ機能で描画 Monacaアプリの例:三三社Eightアプリ 画面の中央部位はすべて HTML5+JavaScript 画面遷移も ネイティブ動作 ネイティブ機能の活用 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 27
  • 28. 実際のMonacaアプリの動作デモ URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 28
  • 29. 開発での苦労点 • iOSとAndroidの両方に対応した画面UI設計 – クロスプラットフォームのアプリ開発では、ネイティブアプリのUIをiPhoneとAndroidのど ちらに合わせるべきか、事前判断が必要 – 一部のHTML5との互換性のないウィジェット(ドラムピッカー等)は別の方法で代替 • さまざまな種類のデバイスへの対応(Android) – 画面サイズ(縦横比)が異なる端末への対応が厄介 – 画面デザインの段階で、正方~16:9までの端末サイズを想定しておく必要あり • サポートOSの決定 – OSバージョンごとに細かいHTML5の実装仕様やバグがある状況 – 特にAndroidでは、開発におけるリファレンス端末を選定する – 最新のOS・端末に向けて開発リソースを集中する URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 29
  • 30. 構築経験をオープンに: Monacaプラットフォーム • HTML5とネイティブを組み合わせたハイブリッドアプリ開発向けプラットフォーム • クラウド上にすべての機能を統合し、だれでもアプリ開発ができる環境を提供 • 開発したアプリはApp StoreやGoogle Playなどの各種マーケットへの公開が可能 対応ブラウザ 対応デバイス 対応OS URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 30
  • 31. Monacaの制作環境 ボタン一発で現在のアプリをAndroid/iOS ネイティブ形式に変換 HTML5/CSS/JavaScript を用いた画面設計+ロジック記述 実際のアプリの動きがブラウザ内で再現 デバッガーで動かした際の JavaScriptエラーなどがログとして出力 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 31
  • 32. Monacaロードマップ Monacaのコンセプトである「誰でも簡単にアプリ開発ができること」を見据え、機能実装に励んで参ります。 正式リリースにつきましても、下記のリリース時期を照らし合わせて公表いたします。 現在取組中の提供機能 – 最新版のPhoneGapへの対応 • 現在0.9がベースのPhoneGapバージョンを、最新のバージョン(1.6ないし1.7)までアップグレード いたします。 – バックエンド機能 • サーバーサイドの機能を拡充して参ります。 今後リリース予定の機能 – ネイティブUIの統合 • 先ほど説明したネイティブUIコンポーネントについて、Monaca IDEにてレイアウトができる機能を 実装予定です。 – 独自ネイティブモジュールの開発 • Objective-CやJavaで作成されたモジュールをMonacaアプリに取り込めるような仕組みを実装予定で す。 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 32
  • 33. ご清聴ありがとうございました URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 33