Your SlideShare is downloading. ×
Cordovaコトハジメ( Html5fun×senchUG )
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Cordovaコトハジメ( Html5fun×senchUG )

923
views

Published on

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

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

Published in: Technology

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

No Downloads
Views
Total Views
923
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
4
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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

    • 1. HTML5fun × Sencha UGナイト 2014.6.13 札幌
    • 2. Cordova(PhoneGap)コトハジメ HTML5 fun × Sencha UGナイト KDDIウェブコミュニケーションズ 阿部 正幸
    • 3. ● ACE01 / SmartRelease プロダクトマネージャー ● CPI エバンジェリスト 統括 ● KDDIウェブ 公認 CPI スタッフブログ 編集長 ● Drupal(g.d.o Japan)日本コミュニティー ● 日本ディレクション協会 講演部 ● HTML5 Fun 理事 OSSを広げる活動、Web制作に関する情報発信を行う 神戸生まれ、横浜育ち 阿部 正幸(あべ まさゆき) ディレクタープログラマー プロマネ エバンジェリスト
    • 4. 取り扱っていませ ん Venture Since 1998 Web Service Hosting 取り扱っていませ ん
    • 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. Content1 世界の市場
    • 7. World Cup 直前なので 世界のサポーターをちょっと見てみる
    • 8. World Cup2014 Netherlands
    • 9. World Cup2014 Germany
    • 10. World Cup2014 Brazil
    • 11. World Cup2014 Portugal
    • 12. どこを応援していいか・・・
    • 13. もっと見たいかたは 『World Cup Babes』 で、ググってくださいね。
    • 14. さて、、、、 スマートデバイスの世界はどうでしょうか
    • 15. iOS Android 情報:http://www.cultofandroid.com/55561/heres-ios-vs-android-war-playing-globally/ 2013年 4Q 米国:50.6%(iOSシェア) 日本:68.7%(iOSシェア)
    • 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. どの市場もすてがたい
    • 18. ハイブリットアプリが解決
    • 19. Content2 Cordovaセットアップ
    • 20. 検証環境 ( 2014.6.10現在 ) Mac OS X( 10.9.2 ) Cordova( 3.5.0 ) Cordova ( PhoneGap )とは Cordovaとは、最も多く利用されている ハイブリッドアプリ開発用のフレームワークです。 Cordovaコマンドラインツールより、開発したい アプリのプロジェクトを生成できます。
    • 21. STEP1 : Xcode インストール Xcodeをお使いのPCにインストールしてください STEP2 : node.js インストール http://nodejs.org/ にアクセスし、 Node.Jsをインストールしてください $ node –v v0.10.28 $ npm –v 1.4.9 (導入確認)
    • 22. STEP3 : Cordova インストール (インストール) $ npm install cordova -g (導入確認) $ cordova –v 3.5.0-0.2.4
    • 23. (インストール) $ ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/ install)” STEP4 : Homebrew インストール iOS-simをインストールするためにHomebrew をインストール
    • 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. STEP7 : Android用環境設定 $ brew install ant ( ant インストール )
    • 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. $ android -h Usage: android [global options] action [action options] ….省略 $ adb version Android Debug Bridge version 1.0.31 (確認)
    • 28. STEP8 : プロジェクトの新規作成 $ cordova create hello com.example.hello HelloWorld -d (プロジェクト作成) $ cd hello $ cordova platform add ios $ cordova platform android (Android、iOSのファイル追加)
    • 29. $ cordova emulate ios -d (iOSエミュレータ起動)
    • 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. STEP9 : Android SDK設定 ダウンロードしたフォルダを開きEclipseを起動 /eclipse/Eclipse.app Window -> Android SDK Manager
    • 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. STEP10 : エミュレータ環境設定 Window -> Android Virtual Device Manager
    • 34. エミューレションする環境を新しく作成する
    • 35. emulator: ERROR: This AVD's configuration is missing a kernel file!! $ cordova emulate android -d (Androidエミュレータ起動)
    • 36. 組み合わせを変えてみる
    • 37. あらかじめ用意されたAVDを利用する
    • 38. $ cordova emulate android -d (Androidエミュレータ起動)
    • 39. Content3 Hello World
    • 40. Hello World Xcodeで編集する場合 $ open hello/platforms/ios/HelloWorld.xcodeproj www css img Index.html /hello/www以下を編集 Index.htmlに、<h2>Hello World</h2> を追加
    • 41. エミューレータで確認 $ cordova emulate ios -d
    • 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. ● 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. カメラ機能を使う $ cordova plugin add https://git-wip- us.apache.org/repos/asf/cordova-plugin-camera.git 追加 $ cordova plugin rm org.apache.cordova.core.camera 削除
    • 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. 実機検証
    • 47. iOS実機でテストしてみる iPhoneの実機検証を行うには (要)Dev登録 https://developer.apple.com/jp/programs/ios/ ( イベント2日前 )
    • 48. iOS実機でテストしてみる 1. iOS Developer 申請 18:50(2日前) 2. Photo ID Required 9:44(1日前)
    • 49. 3. Photo ID Required 11:35(1日前) 実機検証あきらめました・・・ ごめんなさい・・・
    • 50. $ cordova run android Android実機でテストしてみる 1. Android と、MacをUSB接続する 2. Andorid端末を『設定 → デバックモード』に変更する
    • 51. ご清聴ありがとうございました ID:chiyo.abe 阿部 正幸

    ×