More Related Content
Similar to 企画者が押さえておきたいHtml5アプリ開発の要点 (20)
企画者が押さえておきたい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
- 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
- 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
- 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
- 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
- 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
- 33. ご清聴ありがとうございました
URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/6/6 | 33