More Related Content
Similar to ICT ERA+ABC 2012東北講演
Similar to ICT ERA+ABC 2012東北講演 (20)
ICT ERA+ABC 2012東北講演
- 1. HTML5とMonacaで
ハイブリッドアプリ開発
2012年10月20日
アシアル株式会社 斉藤勝也
URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 1
- 2. お話しする内容
• WEBデザインというセッションではありますが、HTML5ってとか、開発ツールにつ
いてのお話しになります。
• というのも、弊社デザイナーの代打ちでやって参りましたので。
• よろしくお願いします。
URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 2
- 3. アシアル株式会社 会社紹介
2002年に創業したアシアル株式会社は、エンジニアリングでイ
ンターネットの成長を牽引することを目的といています。最新技
術を用いたサービス開発やコンサルティングを行なっています。
主な事業ドメイン
HTML5・ユーザーインターフェース Monaca(モバイル開発プラットフォーム) PHP・サーバーサイド技術
URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 3
- 5. HTML5とは?
URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 5
- 6. 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 © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 6
- 7. HTMLとW3C
HTMLの仕様を策定
http://www.w3.org
W3Cの仕様に基づいてブラウザを開発
独自機能実装し、W3Cに仕様をフィードバック
URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 7
- 8. 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 © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 8
- 9. モバイルで広がるHTML5
URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 9
- 10. 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. │ 12/10/20 | 10
- 11. ネイティブ?HTML5?
モバイルアプリ開発の際に、iPhoneとAndroidの2バージョンを作成するコスト
負担の大きさからHTML5を選択するケースが増えている
Webアプリ ネイティブアプリ
v.s. Java Objective-C
• アプリはOS上で直接動作
• クライアント言語はOSにより異なる
• アプリはブラウザ上で動作
• クライアント言語はHTML5/JavaScript
URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 11
- 12. ネイティブアプリとHTML5 Webアプリの比較
Webアプリ ネイティブアプリ
学習曲線が低い 端末性能をフルに活用
クロスプラットフォーム スムーズな画面遷移
メリット
豊富なエコシステム プッシュ通信・高度なネットワーク
オープンな業界標準 アプリマーケットでの販売
Webブラウザの枠を超えられない 高い学習コスト
デメリット スムーズな動きが苦手 OSごとに異なる言語・FW
制作日数の増加
URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 12
- 13. ハイブリッドアプリ
URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 13
- 14. ハイブリッドアプリとは?
ハイブリッドアプリ
iPhone Android
HTML、 HTML、 HTML、
CSS、 CSS、 CSS、
javascript javascript javascript
ハイブリッドアプリを実現するためのツールとして、PhoneGapというライ
ブラリが有名です。これを使うと、Webアプリの知識+αでアプリを作り、
iPhone用、Android用のネイティブアプリとして実行できます。
URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 14
- 15. ハイブリッドアプリとは?
ハイブリッドアプリ
iPhone Android
HTML、 HTML、 HTML、
CSS、 CSS、 CSS、
Webアプリを作る知識+αでアプリが作れる!
javascript javascript javascript
ネイティブの機能も使える!
アプリのソースコードも一つでOK!
ハイブリッドアプリを実現するためのツールとして、PhoneGapというライ
ブラリが有名です。これを使うと、Webアプリの知識+αでアプリを作り、
iPhone用、Android用のネイティブアプリとして実行できます。
URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 15
- 16. ハイブリッドアプリとWebアプリの違い
※ 「#CEDEC2012 JavaScriptベースゲームエンジン徹底比較」より転載
http://www.slideshare.net/sidestepism/cedec2012-javascript
URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 16
- 17. Monacaでハイブリッドアプリ開発
URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 17
- 18. Monacaとは?
• ブラウザだけでAndroidとiOSに対応したアプリ開発プ
ラットフォーム
– XCodeやEclipseがインストールされていないPCでも開発
が可能
• プログラミング言語としてHTML5とJavaScriptを採用
– デザイナーの方には最適なソリューション
• App StoreやGoogle Playなどで公開可能
– 有料で販売することもできます
– マーケットを経由せずに配布することも可能です
http://monaca.mobi
• 現在パブリック・ベータとして無料で提供
URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 18
- 20. Monacaなら開発環境はクラウド上に
対応ブラウザ
URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 20
- 21. Monacaとは、
HTML5でクロスプラットフォーム アプリが作れるプラットフォーム
バイナリーをビルドできる
ブラウザーベース
エディター内蔵
AndroidとiOSに対応
ライブプレビュー
デバッガーで
WebDAVで接続可能
リアルタイム開発
URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 21
- 22. Monacaの特徴: SDKやコンパイルが不要!
コード
実機上のデバッガーで動作確認
IDE上でデバッグ
URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 22
- 23. Monacaの特徴: リモートビルドでローカル環境も不要!
そのままAPKを
ダウンロード可
Android版ビルドは
デバッグとリリースの2種類
もしくは
iOS版は デバッガーから
OTA Distribution
に対応 直接インストール
(Wireless AdHoc)
URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 23
- 24. 名刺管理 Eightアプリ
• iPhoneとAndroid(※今後リリース予定)に対応した
クロスプラットフォームアプリ
• HTML5+PhoneGapで構築
• 無料でアカウント登録できますので、是非ダウンロー
ドしてお試しください
→App Storeにて「名刺管理 Eight」で検索
URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 24