ICT ERA+ABC 2012東北講演

1,944 views
1,837 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,944
On SlideShare
0
From Embeds
0
Number of Embeds
448
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

ICT ERA+ABC 2012東北講演

  1. 1. HTML5とMonacaで ハイブリッドアプリ開発 2012年10月20日 アシアル株式会社 斉藤勝也URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 1
  2. 2. お話しする内容• WEBデザインというセッションではありますが、HTML5ってとか、開発ツールにつ いてのお話しになります。• というのも、弊社デザイナーの代打ちでやって参りましたので。• よろしくお願いします。 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 2
  3. 3. アシアル株式会社 会社紹介 2002年に創業したアシアル株式会社は、エンジニアリングでイ ンターネットの成長を牽引することを目的といています。最新技 術を用いたサービス開発やコンサルティングを行なっています。主な事業ドメインHTML5・ユーザーインターフェース Monaca(モバイル開発プラットフォーム) PHP・サーバーサイド技術 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 3
  4. 4. 自己紹介斉藤勝也Monacaの開発マネージャー(ネイティブ側)1985年生まれ。Web技術に興味を持ち、アシアル株式会社に入社。大規模システム構築や、SNSサイトの開発に携わったのち、2012年4月よりMonacaチームに加わる。 アシアルHPより URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 4
  5. 5. HTML5とは? URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 5
  6. 6. 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 © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 6
  7. 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. 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. 9. モバイルで広がるHTML5 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 9
  10. 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. 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. 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. 13. ハイブリッドアプリ URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 13
  14. 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. 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. 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. 17. Monacaでハイブリッドアプリ開発 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 17
  18. 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
  19. 19. 開発に必要な知識Monacaでは、HTML5とCSS3とJavaScriptの知識が必要です。とはいえ、難易度は他の言語と比べてかなり低く、様々な入門書も存在します。ホームページ制作ソフトなどを用いると、これらの知識がない中で開発することも可能です。 HTML(HTML5) Webサイトの制作に使われます。Monacaでは、HTMLの最新バージョンであるHTML5に対応して います。そのため、様々なHTML5の機能を使って画面を設計することができます。 CSS(CSS3) HTMLが画面の設計書であるのに対して、CSSはそのHTMLにデザインを適用します。最新の CSS3では簡単なアニメーションなども表現することができるようになりました。 JavaScript ブラウザ上で動くプログラミング言語です。ボタンをタップしたり、データを表示する時の処理 を記述します。 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 19
  20. 20. Monacaなら開発環境はクラウド上に 対応ブラウザ URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 20
  21. 21. Monacaとは、 HTML5でクロスプラットフォーム アプリが作れるプラットフォーム バイナリーをビルドできるブラウザーベース エディター内蔵AndroidとiOSに対応 ライブプレビュー デバッガーで WebDAVで接続可能 リアルタイム開発 URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 21
  22. 22. Monacaの特徴: SDKやコンパイルが不要!コード 実機上のデバッガーで動作確認IDE上でデバッグ URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 22
  23. 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. 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
  25. 25. ありがとうございましたURL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 12/10/20 | 25

×