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

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
取り扱っていませ
ん

7. 目次
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

8. Content1 世界の市場

9. World Cup 直前なので
世界のサポーターをちょっと見てみる

10. World Cup2014 Netherlands

11. World Cup2014 Germany

12. World Cup2014 Brazil

13. World Cup2014 Portugal

14. どこを応援していいか・・・

15. もっと見たいかたは
『World Cup Babes』
で、ググってくださいね。

16. さて、、、、
スマートデバイスの世界はどうでしょうか

17. iOS Android
情報：http://www.cultofandroid.com/55561/heres-ios-vs-android-war-playing-globally/
2013年 4Q 米国：50.6%(iOSシェア)
日本：68.7%(iOSシェア)

18. 情報： 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

19. どの市場もすてがたい

21. ハイブリットアプリが解決

22. Content2 Cordovaセットアップ

23. 検証環境 ( 2014.6.10現在 )
Mac OS X( 10.9.2 )
Cordova( 3.5.0 )
Cordova ( PhoneGap )とは
Cordovaとは、最も多く利用されている
ハイブリッドアプリ開発用のフレームワークです。
Cordovaコマンドラインツールより、開発したい
アプリのプロジェクトを生成できます。

24. STEP1 : Xcode インストール
Xcodeをお使いのPCにインストールしてください
STEP2 : node.js インストール
http://nodejs.org/ にアクセスし、
Node.Jsをインストールしてください
$ node –v
v0.10.28
$ npm –v
1.4.9
(導入確認)

25. STEP3 : Cordova インストール
(インストール)
$ npm install cordova -g
(導入確認)
$ cordova –v
3.5.0-0.2.4

26. (インストール)
$ ruby -e "$(curl -fsSL
https://raw.github.com/Homebrew/homebrew/go/
install)”
STEP4 : Homebrew インストール
iOS-simをインストールするためにHomebrew
をインストール

27. 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
~/ などに解凍する

28. STEP7 : Android用環境設定
$ brew install ant
( ant インストール )

29. $ 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にパス追加)

30. $ android -h
Usage:
android [global options] action [action options]
….省略
$ adb version
Android Debug Bridge version 1.0.31
(確認)

31. STEP8 : プロジェクトの新規作成
$ cordova create hello com.example.hello
HelloWorld -d
(プロジェクト作成)
$ cd hello
$ cordova platform add ios
$ cordova platform android
(Android、iOSのファイル追加)

32. $ cordova emulate ios -d
(iOSエミュレータ起動)

33. $ 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エミュレータ起動)

34. STEP9 : Android SDK設定
ダウンロードしたフォルダを開きEclipseを起動
/eclipse/Eclipse.app
Window -> Android SDK Manager

36. $ 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エミュレータ起動)

37. STEP10 : エミュレータ環境設定
Window -> Android Virtual Device Manager

38. エミューレションする環境を新しく作成する

39. emulator: ERROR: This AVD's configuration is missing
a kernel file!!
$ cordova emulate android -d
(Androidエミュレータ起動)

40. 組み合わせを変えてみる

41. あらかじめ用意されたAVDを利用する

42. $ cordova emulate android -d
(Androidエミュレータ起動)

43. Content3 Hello World

44. Hello World
Xcodeで編集する場合
$ open
hello/platforms/ios/HelloWorld.xcodeproj
www
css
img
Index.html
/hello/www以下を編集
Index.htmlに、<h2>Hello World</h2> を追加

45. エミューレータで確認
$ cordova emulate ios -d

46. 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

47. ● 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 プラグイン

48. カメラ機能を使う
$ cordova plugin add https://git-wip-
us.apache.org/repos/asf/cordova-plugin-camera.git
追加
$ cordova plugin rm org.apache.cordova.core.camera
削除

49. 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;
}

50. 実機検証

51. iOS実機でテストしてみる
iPhoneの実機検証を行うには (要)Dev登録
https://developer.apple.com/jp/programs/ios/
( イベント2日前 )

52. iOS実機でテストしてみる
1. iOS Developer 申請 18:50(2日前)
2. Photo ID Required 9:44(1日前)

53. 3. Photo ID Required 11:35(1日前)
実機検証あきらめました・・・
ごめんなさい・・・

54. $ cordova run android
Android実機でテストしてみる
1. Android と、MacをUSB接続する
2. Andorid端末を『設定 → デバックモード』に変更する

55. ご清聴ありがとうございました
ID：chiyo.abe
阿部 正幸