Cordovaコトハジメ( Html5fun×senchUG )

1,411 views
1,283 views

Published on

Cordova(PhoneGap)のiOS、Android環境構築、Hello World、実機検証など

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,411
On SlideShare
0
From Embeds
0
Number of Embeds
578
Actions
Shares
0
Downloads
6
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • cordovaコマンドを導入するために、まずNode.jsをインストールします。
  • ios-simは、Homebrewからインストールします。Homebrewは、Mac OS X用のパッケージ管理ツールです。
    Homebrewを通じて様々なツールやライブラリをインストールできます。
  • Cordovaコトハジメ( Html5fun×senchUG )

    1. 1. HTML5fun × Sencha UGナイト 2014.6.13 札幌
    2. 2. Cordova(PhoneGap)コトハジメ HTML5 fun × Sencha UGナイト KDDIウェブコミュニケーションズ 阿部 正幸
    3. 3. ● ACE01 / SmartRelease プロダクトマネージャー ● CPI エバンジェリスト 統括 ● KDDIウェブ 公認 CPI スタッフブログ 編集長 ● Drupal(g.d.o Japan)日本コミュニティー ● 日本ディレクション協会 講演部 ● HTML5 Fun 理事 OSSを広げる活動、Web制作に関する情報発信を行う 神戸生まれ、横浜育ち 阿部 正幸(あべ まさゆき) ディレクタープログラマー プロマネ エバンジェリスト
    4. 4. 取り扱っていませ ん Venture Since 1998 Web Service Hosting 取り扱っていませ ん
    5. 5. 目次 1. 世界の市場 2. Cordova(PhoneGap)環境セットアップ 1) Xcode インストール 2) Node.js インストール 3) Cordova インストール 4) Homebrew インストール 5) Ios-sim インストール 6) Android SDK インストール 7) ant インストール 8) 環境変数追加 9) Android ADTインストール 10) エミュレータ起動 3. Hello World - Cordova
    6. 6. Content1 世界の市場
    7. 7. World Cup 直前なので 世界のサポーターをちょっと見てみる
    8. 8. World Cup2014 Netherlands
    9. 9. World Cup2014 Germany
    10. 10. World Cup2014 Brazil
    11. 11. World Cup2014 Portugal
    12. 12. どこを応援していいか・・・
    13. 13. もっと見たいかたは 『World Cup Babes』 で、ググってくださいね。
    14. 14. さて、、、、 スマートデバイスの世界はどうでしょうか
    15. 15. iOS Android 情報:http://www.cultofandroid.com/55561/heres-ios-vs-android-war-playing-globally/ 2013年 4Q 米国:50.6%(iOSシェア) 日本:68.7%(iOSシェア)
    16. 16. 情報: IDC (http://www.idc.com/getdoc.jsp?containerId=prUS24442013) Android出荷台数 2億台(2013 3Q) Windows8ラインセンス数 2億本(2014年2月) 情報:http://jp.techcrunch.com/2014/02/14/20140213microsoft-has-sold-more-than-200-millio
    17. 17. どの市場もすてがたい
    18. 18. ハイブリットアプリが解決
    19. 19. Content2 Cordovaセットアップ
    20. 20. 検証環境 ( 2014.6.10現在 ) Mac OS X( 10.9.2 ) Cordova( 3.5.0 ) Cordova ( PhoneGap )とは Cordovaとは、最も多く利用されている ハイブリッドアプリ開発用のフレームワークです。 Cordovaコマンドラインツールより、開発したい アプリのプロジェクトを生成できます。
    21. 21. STEP1 : Xcode インストール Xcodeをお使いのPCにインストールしてください STEP2 : node.js インストール http://nodejs.org/ にアクセスし、 Node.Jsをインストールしてください $ node –v v0.10.28 $ npm –v 1.4.9 (導入確認)
    22. 22. STEP3 : Cordova インストール (インストール) $ npm install cordova -g (導入確認) $ cordova –v 3.5.0-0.2.4
    23. 23. (インストール) $ ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/ install)” STEP4 : Homebrew インストール iOS-simをインストールするためにHomebrew をインストール
    24. 24. STEP5 : iOS-simをインストール $ brew install ios-sim (インストール) STEP6 : Android SDKをインストール http://developer.android.com/sdk/index.html [ダウンロード] MacOS X 64-bit adt-bundle-mac-x86_64-xxx.zip ~/ などに解凍する
    25. 25. STEP7 : Android用環境設定 $ brew install ant ( ant インストール )
    26. 26. $ echo "export PATH=$PATH:~/adt-bundle-mac- x86_64/sdk/tools/” >> ~/.bash_profile $ echo "export PATH=$PATH:~/adt-bundle-mac- x86_64/sdk/platform-tools/” >> ~/.bash_profile e.g.) $ echo "export PATH=$PATH:/Users/abechiyo/adt- bundle-mac-x86_64/sdk/tools/ >> ~/.bash_profile $ source ~/.bash_profile $ echo "export PATH=$PATH:/Users/abechiyo/adt- bundle-mac-x86_64/sdk/platform-tools/” >> ~/.bash_profile $ source ~/.bash_profile (Bashにパス追加)
    27. 27. $ android -h Usage: android [global options] action [action options] ….省略 $ adb version Android Debug Bridge version 1.0.31 (確認)
    28. 28. STEP8 : プロジェクトの新規作成 $ cordova create hello com.example.hello HelloWorld -d (プロジェクト作成) $ cd hello $ cordova platform add ios $ cordova platform android (Android、iOSのファイル追加)
    29. 29. $ cordova emulate ios -d (iOSエミュレータ起動)
    30. 30. $ cordova emulate android -d ERROR : No emulator images (avds) found, if you would like to create an avd follow the instructions provided here: http://developer.android.com/tools/devices/index.html Or run 'android create avd --name <name> --target <targetID>' in on the command line. (Androidエミュレータ起動)
    31. 31. STEP9 : Android SDK設定 ダウンロードしたフォルダを開きEclipseを起動 /eclipse/Eclipse.app Window -> Android SDK Manager
    32. 32. $ cordova emulate android -d ERROR : No emulator images (avds) found, if you would like to create an avd follow the instructions provided here: http://developer.android.com/tools/devices/index.html Or run 'android create avd --name <name> --target <targetID>' in on the command line. (Androidエミュレータ起動)
    33. 33. STEP10 : エミュレータ環境設定 Window -> Android Virtual Device Manager
    34. 34. エミューレションする環境を新しく作成する
    35. 35. emulator: ERROR: This AVD's configuration is missing a kernel file!! $ cordova emulate android -d (Androidエミュレータ起動)
    36. 36. 組み合わせを変えてみる
    37. 37. あらかじめ用意されたAVDを利用する
    38. 38. $ cordova emulate android -d (Androidエミュレータ起動)
    39. 39. Content3 Hello World
    40. 40. Hello World Xcodeで編集する場合 $ open hello/platforms/ios/HelloWorld.xcodeproj www css img Index.html /hello/www以下を編集 Index.htmlに、<h2>Hello World</h2> を追加
    41. 41. エミューレータで確認 $ cordova emulate ios -d
    42. 42. Cordova プラグイン導入 Basic device information (Device API): $ cordova plugin add https://git-wip- us.apache.org/repos/asf/cordova-plugin-device.git Geolocation $ cordova plugin add https://git-wip- us.apache.org/repos/asf/cordova-plugin-geolocation.git ( More ) http://cordova.apache.org/docs/en/3.0.0/guide_cli_index.md.html #The Command-line Interface_add_features
    43. 43. ● Basic device information (Device API) ● Network Connection and Battery Events ● Accelerometer, Compass, and Geolocation ● Camera, Media playback and Capture ● Access files on device or network (File API) ● Notification via dialog box or vibration ● Contacts ● Globalization ● Splashscreen ● Open new browser windows (InAppBrowser) ● Debug console Cordova プラグイン
    44. 44. カメラ機能を使う $ cordova plugin add https://git-wip- us.apache.org/repos/asf/cordova-plugin-camera.git 追加 $ cordova plugin rm org.apache.cordova.core.camera 削除
    45. 45. function capturePhoto() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: destinationType.DATA_URL } ); } 写真を撮影し取得する function onPhotoDataSuccess(imageData) { // Get image handle var smallImage = document.getElementById('smallImage'); // Unhide image elements smallImage.style.display = 'block'; // Show the captured photo // The inline CSS rules are used to resize the image smallImage.src = "data:image/jpeg;base64," + imageData; }
    46. 46. 実機検証
    47. 47. iOS実機でテストしてみる iPhoneの実機検証を行うには (要)Dev登録 https://developer.apple.com/jp/programs/ios/ ( イベント2日前 )
    48. 48. iOS実機でテストしてみる 1. iOS Developer 申請 18:50(2日前) 2. Photo ID Required 9:44(1日前)
    49. 49. 3. Photo ID Required 11:35(1日前) 実機検証あきらめました・・・ ごめんなさい・・・
    50. 50. $ cordova run android Android実機でテストしてみる 1. Android と、MacをUSB接続する 2. Andorid端末を『設定 → デバックモード』に変更する
    51. 51. ご清聴ありがとうございました ID:chiyo.abe 阿部 正幸

    ×