PhoneGap + JavaScriptスマフォアプリ開発(入門編)           2013年4月20日 スマートフォンアプリ開発勉強会                    アシアル株式会社 田中正裕      ※ 後で資料を公開して...
自己紹介 田中正裕 (たなかまさひろ) masahiro@asial.co.jp 大学2年生の時にアシアル株式会社を設立、 そのまま代表取締役社長として今に至る。 もともと小学生の時にパソコンを触ったことがきっかけで、 生きている時間の大半をプ...
アシアル株式会社紹介アシアル株式会社は、これまで培ってきたサーバーサイド技術をもとに、HTML5やJavaScriptといったクライアント技術を高い次元で組み合わせ、優れたユーザーエクスペリエンスを持つアプリケーションを提案します。      ...
PhoneGapの扱う範囲            UI/UX                                         UI設計 ユーザー エクスペリエンス                    HTML5        ...
第1章PhoneGapの何が良いの?
PhoneGapを使うと…   HTML5(+JavaScript、CSS)で  スマホのネイティブアプリが作れます。                 「ハイブリッドアプリ」                    と言います
HTML5はHTMLの最新バージョン                                                            HTML 5.0                 HTML2.0    HTML3.2 ...
モバイル分野で先行するHTML5スマートデバイス分野ではHTML5がすでにスタンダードiPhoneやAndroidなど、スマートデバイスでは早くからHTML5を標準サポート                                    ...
HTML5かネイティブか。 “企業としての最大の失敗は        http://fb.html5isready.com/ ネイティブアプリではなく HTML5に賭けすぎたことで す。時期尚早でした。”と話 した。“iOSアプリにしたら、 利...
HTML5の利点と弱点              出典: Developer Economics 2013
HTML5の利点と弱点          HTML5を選択した理由          ・クロスプラットフォームのコード          移植性          ・低コスト開発          ・クロススクリーンのコード移植性       ...
HTML5の利点と弱点HTML5のネイティブと比べた弱点・ネイティブAPIが利用不可・より優れた開発環境・HTML5最適化された端末が無い・より優れたデバッグ環境・迅速な標準化
HTML5で埋まらないギャップ クロスプラットフォーム技術としてHTML5が主流だが、デバイス性能 を最大限に発揮することは困難 NFCやカメラなどの端末機能や、3Dアニメーションなどは ネイティブアプリでないと開発できない          ...
ハイブリッドアプリの登場                      HTML5を内部の                   WebView (ブラウザ) で実行メリット:• HTML/CSS/JavaScriptでモバイルOSにアプリを提供でき...
ハイブリッド化を後押しするものBYOD・コンシューマライゼーションへの適用性『2016年には、企業向けアプリの50%以上はハイブリッドアプリとなるだろう』                               -2013年2月4日、Gar...
ハイブリッドアプリの例 (アシアル実績)auヘッドライン   名刺管理: Eight   テレ朝動画アプリ      シューズファインダーKDDI株式会社   © 三三株式会社      © 株式会社テレビ朝日   © 株式会社アシックス
Cordova、PhoneGapとは?   オープンソースのハイブリッドアプリ開発ライブラリー   Apacheプロジェクトで開発・メンテナンスされている                                  PhoneGapが標準...
PhoneGap Build                 PhoneGap Build:                 クラウドビルドサービス
PhoneGapの仕組み   GPS                  HTML5/JavaScript/CSS3                        ネイティブコード                   アプリのパッケージ内   カ...
PhoneGapアプリの特徴                  HTML5アプリ           PhoneGapアプリ        ネイティブアプリ開発言語                     HTML5とJavaScript   ...
他の開発手法との違い          PhoneGap     Titanium          Unity 3D          Webアプリ          HTML5、CSS3、                          ...
PhoneGapアプリの開発環境                 DreamWeaver/Bracket+PGEclipse、XCode                             Monaca Platform          ...
JavaScriptフレームワークPhoneGapではユーザーインターフェース機能は提供されないため、別途HTML5対応のモバイルUIライブラリーを用意する。
第2章PhoneGapでHello World
用意するもの(Android版) Android SDKをインストールしたPC Android端末(もしくはエミュレータ) Eclipse (Android SDKに同梱) PhoneGap SDK
デモwith PhoneGap for Android
いかがでしたか?ある程度ネイティブアプリ開発の知識が必要になります。また、当然ですがiPhone版はXcodeを使って別に作る必要あり。
第3章jQuery Mobileを使ってアプリっぽく
祝☆jQuery 2.0リリースjQuery 2.0のリリースで、IE6~8対応は切り捨てられました。その分、コード量が少なくなり、パフォーマンスもUPしています
jQuery Mobileとは?jQueryの上に作られた、モバイルアプリのUIを提供するためのライブラリー。一般的なスマホのUIを、HTML5とjQueryの機能で描画できる。PhoneGapと組み合わるだけでなく、一般のWebに対して利用す...
次に作るアプリjQuery Mobileを使った簡単な写真撮影アプリ実際に皆さんのスマホ上で動かしてみるので、「Monaca」というアプリをインストールして、下記のIDとパスワードでログインしてください。       メールアドレス:   20...
そもそもこれは何?              on 「Monaca」アプリをDLしてログインしてください   メールアドレス:   20130420@monaca.mobi   パスワード:     20130420
jQuery Mobileを組み込んだデモ                  転送  開発                       実機で動作  =私                      =皆さんのデバッガー  「Monaca」アプリ...
デモwith jQuery Mobile on Monaca
PhoneGapの情報源コミュニティ•   PhoneGap Blog (USA)•   PhoneGapユーザーグループドキュメント•   マニュアル(日本語版は2.2まで、鋭意翻訳中…)•   各種Webの記事(ITProやThinkITで...
まとめ•   jQuery Mobileだけでは、どうしても「jQM臭」    がするアプリになってしまう•   でも、業務利用やサクッと作る場合には便利•   HTML5だけでUIに優れたアプリを作れるよう    になるのは、もう少し先の話かな。
ご清聴ありがとうございました
Upcoming SlideShare
Loading in...5
×

Phone gap+javascriptスマホアプリ開発(入門編)

4,440

Published on

2013/04/20 スマートフォンアプリ開発 勉強会 @ 福岡 での講演資料

http://atnd.org/events/37573#comments

Phone gap+javascriptスマホアプリ開発(入門編)

  1. 1. PhoneGap + JavaScriptスマフォアプリ開発(入門編) 2013年4月20日 スマートフォンアプリ開発勉強会 アシアル株式会社 田中正裕 ※ 後で資料を公開して、ATNDにURLを貼っておきます
  2. 2. 自己紹介 田中正裕 (たなかまさひろ) masahiro@asial.co.jp 大学2年生の時にアシアル株式会社を設立、 そのまま代表取締役社長として今に至る。 もともと小学生の時にパソコンを触ったことがきっかけで、 生きている時間の大半をプログラミングして過ごす。東京大 学工学部を卒業、アシアルの事業に忙しくなったため同大学 院を中退。 代表取締役社長として対外的な活動を行いつつ、各プロジェ クトではコーディングやマネジメントなども担当。
  3. 3. アシアル株式会社紹介アシアル株式会社は、これまで培ってきたサーバーサイド技術をもとに、HTML5やJavaScriptといったクライアント技術を高い次元で組み合わせ、優れたユーザーエクスペリエンスを持つアプリケーションを提案します。 アシアルブログ 企業サイト 不定期で弊社エンジニアやデザイナーが興味の 弊社が開発・販売している各種製品やサービ ある技術テーマを配信します。 スへのリンク、スクールの情報などが掲載さ れています。
  4. 4. PhoneGapの扱う範囲 UI/UX UI設計 ユーザー エクスペリエンス HTML5 CSS3 Objective-C Android Java クライアント JavaScript レイヤー PhoneGap ミドルレイヤー PHP Node.js サーバーレイヤー MySQL インフラ ハードウェア クラウド Linux IaaS インフラ
  5. 5. 第1章PhoneGapの何が良いの?
  6. 6. PhoneGapを使うと… HTML5(+JavaScript、CSS)で スマホのネイティブアプリが作れます。 「ハイブリッドアプリ」 と言います
  7. 7. HTML5はHTMLの最新バージョン HTML 5.0 HTML2.0 HTML3.2 HTML4.0 HTML1.0 1995年 1997年 1997年~ 2008年 ドラフト 2014年正式勧告予定 「Snapshot版」 XHTML1.0 2000年 「HTML Living Standard版」 → WHATWG (Apple・Mozilla・Opera)
  8. 8. モバイル分野で先行するHTML5スマートデバイス分野ではHTML5がすでにスタンダードiPhoneやAndroidなど、スマートデバイスでは早くからHTML5を標準サポート ぜんぶPhoneGapで対応一方、PC向けWebサイトのHTML5対応はこれからInternet Explorer 10で本格的にサポートFirefox、Chrome、Safariは早い段階でHTML5対応 CSS3だけで作成した「ドラえもん」 shopdd.blog51.fc2.com/blog-entry-932.html 日本におけるブラウザーシェア 2012年11月
  9. 9. HTML5かネイティブか。 “企業としての最大の失敗は http://fb.html5isready.com/ ネイティブアプリではなく HTML5に賭けすぎたことで す。時期尚早でした。”と話 した。“iOSアプリにしたら、 利用者のフィードの消費が2 倍になりました。” “Facebookモバイルアプリケー ションの動作が遅いのはHTML5の せいなんかじゃない。 我々は現代 のスマートフォンのブラウザーの 能力やHTML5の豊な能力を知って いました。”
  10. 10. HTML5の利点と弱点 出典: Developer Economics 2013
  11. 11. HTML5の利点と弱点 HTML5を選択した理由 ・クロスプラットフォームのコード 移植性 ・低コスト開発 ・クロススクリーンのコード移植性 ・学習コストの低さ ・オープンソース ・リーチ(検索エンジンなど) ・開発コミュニティーの充実
  12. 12. HTML5の利点と弱点HTML5のネイティブと比べた弱点・ネイティブAPIが利用不可・より優れた開発環境・HTML5最適化された端末が無い・より優れたデバッグ環境・迅速な標準化
  13. 13. HTML5で埋まらないギャップ クロスプラットフォーム技術としてHTML5が主流だが、デバイス性能 を最大限に発揮することは困難 NFCやカメラなどの端末機能や、3Dアニメーションなどは ネイティブアプリでないと開発できない 開発の難易度デバイスの特殊な機能を用いたい場合 • Bluetooth通信 • デバイス内のファイル読み書き クロスプラット OS独自機能の活 フォーム 用 • NFCとかOSの機能を用いたい場合 • プッシュ通信 メンテナンス性 端末性能の発揮 • GameCenterやPassbookなどへの対応 • ホーム画面のウィジェットハードウェア能力を最大限用いたい場合 HTML5アプリ(Web) ネイティブアプリ • 高度なアニメーション(3D、OpenGL等) • ポインターによる高速演算など
  14. 14. ハイブリッドアプリの登場 HTML5を内部の WebView (ブラウザ) で実行メリット:• HTML/CSS/JavaScriptでモバイルOSにアプリを提供できる(クロスプラットフォーム性)• 端末にアプリをインストールできるため、ローカルで動作可能• デバイスの機能(カメラ、ファイル読み書き…etc)にアクセス可能デメリット:• 実行速度は各OSのブラウザーと同じぐらい。ただしiOSではNitro使えない。• イバラの道。情報量が少なく、仕様変更も多々あり。•ネイティブと比較できるのは当面先。。。
  15. 15. ハイブリッド化を後押しするものBYOD・コンシューマライゼーションへの適用性『2016年には、企業向けアプリの50%以上はハイブリッドアプリとなるだろう』 -2013年2月4日、Gartner低コスト・RADなソリューションとしての開発手法プロトタイプと本開発を一気に進められるWindows 8、Firefox OS、Tizenなどの新プラットフォームにおいても、ハイブリッドアプリを低コストに移植可能新しいプラットフォームは、ネイティブでHTML5アプリが動作する
  16. 16. ハイブリッドアプリの例 (アシアル実績)auヘッドライン 名刺管理: Eight テレ朝動画アプリ シューズファインダーKDDI株式会社 © 三三株式会社 © 株式会社テレビ朝日 © 株式会社アシックス
  17. 17. Cordova、PhoneGapとは? オープンソースのハイブリッドアプリ開発ライブラリー Apacheプロジェクトで開発・メンテナンスされている PhoneGapが標準でサポートする機能 機能 説明 加速度センサー 端末に内蔵された加速度センサーを読み取り、端 末の傾きを取得する カメラ 端末のカメラやアルバムにアクセスし、写真を取 得する ビデオキャプチャー ビデオを録画する オーディオ録音・再 オーディオを録音したり、再生する 生 コンパス 端末の向きを方位情報として取得する 接続状態確認 OSのネットワーク接続状態を取得する アドレス帳 OSの連絡帳にアクセスし、情報の入出力を行う デバイス情報 デバイスのモデル名や端末IDなどの取得や、OS情 報を取得する ハードウェアボタン Android端末の持つ各種ボタンに対するイベントを 取得する ファイルシステム OSのファイルシステムにアクセスし、ファイルの 入出力を行う• Adobe Systems社によりリリースされた際の製品名 GPS GPSセンサーにアクセスし、現在の緯度経度を取• さまざまなアドビ製ツールとの連携が可能 得する 国際化 OSの利用言語や各種ロケール情報を参照する バイブレーター バイブレーターを実行する スプラッシュ操作 起動時に表示されるスプラッシュ画面を制御する SQLデータベース SQLデータベースにアクセスする
  18. 18. PhoneGap Build PhoneGap Build: クラウドビルドサービス
  19. 19. PhoneGapの仕組み GPS HTML5/JavaScript/CSS3 ネイティブコード アプリのパッケージ内 カメラ サーバーとの通信は Webアプリではアクセスでき Ajaxの技術を応用 ない各種ネイティブAPIを実 行できる 連絡帳など
  20. 20. PhoneGapアプリの特徴 HTML5アプリ PhoneGapアプリ ネイティブアプリ開発言語 HTML5とJavaScript Objective-CやJava JavaScriptから Webブラウザーが備える 端末やOSが持つすべての機能 ネイティブの機能を 機能のみ利用可能 機能を利用可能 呼び出せる 通常のWeb開発環境 XcodeやEclipseといったOSごとの開発環境開発環境 エディタ、Dreamweaver等 (もしくはMonacaやPhoneGap Build) ○ ×クロスプラットフォーム 同じJavaScriptコードを流用可 開発言語自体が異なる △ ○ ◎実行速度 Webブラウザーが実行エン ソースコードを端末上に保 OSが直接実行する ジン 存することが可能 × ◎オフライン対応 キャッシュを用いて一部オ 端末内にプログラムが配置 フライン対応も可能 Webサイトにアクセスアプリの配布方法 マーケットの登録が原則 マーケットへの登録は不可 ネイティブ部分はマーケッ アップデートのたびにマー サーバーから配信するため ト経由の更新。HTML5部分メンテナンス方法 ケット登録。更新はユー 常に最新状態をキープ可能 は任意のタイミングで更新 ザー次第 可能
  21. 21. 他の開発手法との違い PhoneGap Titanium Unity 3D Webアプリ HTML5、CSS3、 HTML5、CSS3、開発言語 JavaScript JavaScript / C# JavaScript JavaScript XCodeや Dreamweaverや開発環境 Titanium Studio 独自環境 Eclipse エディターマーケットへの ○ ○ ○ ×配布ネイティブ対応 ○ ○ ○ ×アプリ実行速度 △ ○ ○ × Webアプリをネ JavaScriptでア ゲームアプリ開 ブラウザー上で目的 イティブ化 プリ開発 発環境 動作
  22. 22. PhoneGapアプリの開発環境 DreamWeaver/Bracket+PGEclipse、XCode Monaca Platform Build Webプロフェッショナル向ネイティブ開発者向け 初心者、入門者向け 無料! け App Storeからデバッガーをシミュレーターもしくは実 PhoneGap Buildを使うと実 ダウンロードして実機で確機で確認 機にインストール可能 認、ビルド機能も搭載 対応製品+PGBuildアカウン各OSのSDKをローカルにイ Webサイトからサインアッ トがあれば簡単に開発できンストールする プするだけで開発できる る
  23. 23. JavaScriptフレームワークPhoneGapではユーザーインターフェース機能は提供されないため、別途HTML5対応のモバイルUIライブラリーを用意する。
  24. 24. 第2章PhoneGapでHello World
  25. 25. 用意するもの(Android版) Android SDKをインストールしたPC Android端末(もしくはエミュレータ) Eclipse (Android SDKに同梱) PhoneGap SDK
  26. 26. デモwith PhoneGap for Android
  27. 27. いかがでしたか?ある程度ネイティブアプリ開発の知識が必要になります。また、当然ですがiPhone版はXcodeを使って別に作る必要あり。
  28. 28. 第3章jQuery Mobileを使ってアプリっぽく
  29. 29. 祝☆jQuery 2.0リリースjQuery 2.0のリリースで、IE6~8対応は切り捨てられました。その分、コード量が少なくなり、パフォーマンスもUPしています
  30. 30. jQuery Mobileとは?jQueryの上に作られた、モバイルアプリのUIを提供するためのライブラリー。一般的なスマホのUIを、HTML5とjQueryの機能で描画できる。PhoneGapと組み合わるだけでなく、一般のWebに対して利用することも可能。
  31. 31. 次に作るアプリjQuery Mobileを使った簡単な写真撮影アプリ実際に皆さんのスマホ上で動かしてみるので、「Monaca」というアプリをインストールして、下記のIDとパスワードでログインしてください。 メールアドレス: 20130420@monaca.mobi パスワード: 20130420 こんなアイコン
  32. 32. そもそもこれは何? on 「Monaca」アプリをDLしてログインしてください メールアドレス: 20130420@monaca.mobi パスワード: 20130420
  33. 33. jQuery Mobileを組み込んだデモ 転送 開発 実機で動作 =私 =皆さんのデバッガー 「Monaca」アプリをDLしてログインしてください メールアドレス: 20130420@monaca.mobi パスワード: 20130420
  34. 34. デモwith jQuery Mobile on Monaca
  35. 35. PhoneGapの情報源コミュニティ• PhoneGap Blog (USA)• PhoneGapユーザーグループドキュメント• マニュアル(日本語版は2.2まで、鋭意翻訳中…)• 各種Webの記事(ITProやThinkITで連載中)
  36. 36. まとめ• jQuery Mobileだけでは、どうしても「jQM臭」 がするアプリになってしまう• でも、業務利用やサクッと作る場合には便利• HTML5だけでUIに優れたアプリを作れるよう になるのは、もう少し先の話かな。
  37. 37. ご清聴ありがとうございました

×