Mac で Mobile App の Cordova のサンプルアプリを動かしてみた

Mac

確か、2週間くらい前にはなかったと思うのですが、Microsoft Azure の Mobile App のクイックスタートに、Cordova が追加されていたので試してみました。

ただ、自分は、Cordova ナニソレ?オイシイノ? な位、Cordova についての知識はないのですがw(詳しい情報は、Bing ったり、Googleッタリしてください。)


Microsoft Azure の Mobile App については、以下のリンクを参照してください。
https://azure.microsoft.com/ja-jp/documentation/services/app-service/mobile/

 

Macでのクライアントアプリの環境構築

Mobile App の作り方とか、DBの作成、サーバ側のアプリの作成は飛ばします。

まずは、下記を参考にCordovaの開発環境を作成します。
https://cordova.apache.org/docs/en/latest/guide/cli/index.html

まずは、Node.jsのインストール
https://nodejs.org/en/

v4.3.0LTSのバージョンをインストールして、VS Code の時と同じくnpm のupdateをしました。

$ sudo npm install -g npm
WARNING: Improper use of the sudo command could lead to data loss
or the deletion of important system files. Please double-check your
typing when using sudo. Type "man sudo" for more information.
To proceed, enter your password, or type Ctrl-C to abort.
Password:
/usr/local/bin/npm -> /usr/local/lib/node_modules/npm/bin/npm-cli.js
npm@3.7.1 /usr/local/lib/node_modules/npm

続いて、Git Client をインストールしろって書いてあったのでひとまずインストールしました。
(ただ、サンプルを動かすだけなら、不要なはず)
Mac 用のインストーラーは、下記よりDLしました。
http://git-scm.com/download/mac

Cordovaをインストールします。

$ sudo npm install -g cordova
Password:
npm WARN deprecated npmconf@2.1.2: this package has been reintegrated into npm and is now out of date with respect to npm
/usr/local/bin/cordova -> /usr/local/lib/node_modules/cordova/bin/cordova
/usr/local/lib
└─┬ cordova@6.0.0
  ├── ansi@0.3.1
  ├─┬ cordova-lib@6.0.0
  │ ├─┬ aliasify@1.9.0
  │ │ └─┬ browserify-transform-tools@1.5.1
  │ │   ├─┬ falafel@1.2.0
  │ │   │ ├── acorn@1.2.2
  │ │   │ ├── foreach@2.0.5
  │ │   │ └── object-keys@1.0.9
  │ │   └── through@2.3.8
  │ ├── cordova-app-hello-world@3.10.0
   :
   :
  (中略)
   :
   :
    ├─┬ repeating@1.1.3
    │ └─┬ is-finite@1.0.1
      └── number-is-nan@1.0.0
    ├─┬ semver-diff@2.1.0
    │ └── semver@5.1.0
    └── string-length@1.0.1

 

xcode をインストールします。
App ストアから、DLしてインストールするだけです。
今回インストールしたバージョンは、7.2.1 です。

インストールしたら、Azure のクイックスタートよりDLしたサンプルを適当なところに保存し解凍します。
解凍したら、そのフォルダまでcdで移動して、以下のコマンドを叩きます。

$ cordova platform add ios
Adding ios project...
iOS project created with cordova-ios@4.0.1
Discovered plugin "cordova-plugin-whitelist" in config.xml. Installing to the project
Fetching plugin "cordova-plugin-whitelist@1" via npm
Installing "cordova-plugin-whitelist" for ios
Discovered plugin "cordova-plugin-ms-azure-mobile-apps" in config.xml. Installing to the project
Fetching plugin "cordova-plugin-ms-azure-mobile-apps@~2.0.0-beta" via npm
Installing "cordova-plugin-ms-azure-mobile-apps" for ios
Fetching plugin "cordova-plugin-inappbrowser" via npm
Installing "cordova-plugin-inappbrowser" for ios
$ cordova run ios
Reading build config file:
Building project  : /Users/agou/Desktop/y9mbtest02/platforms/ios/y9mbtest02.xcodeproj
 Configuration : Debug
 Platform      : emulator
Build settings from command line:
    ARCHS = i386
    CONFIGURATION_BUILD_DIR = /Users/agou/Desktop/y9mbtest02/platforms/ios/build/emulator
    SDKROOT = iphonesimulator9.2
    SHARED_PRECOMPS_DIR = /Users/agou/Desktop/y9mbtest02/platforms/ios/build/sharedpch
    VALID_ARCHS = i386
  :
  :
 (中略)
  :
  :
** BUILD SUCCEEDED **
No target specified for emulator. Deploying to iPhone-6s-Plus, 9.2 simulator
com.microsoft.azure.mobileapps.y9mbtest02: 1714
logPath: /Users/agou/Desktop/y9mbtest02/platforms/ios/cordova/console.log

最後のコマンドを実行すると、エミュレーターが起動し、サンプルのアプリが動きます。

 


Cordovaの開発環境の構築手順になってる気がするけど、ソースはサンプルの内容を読みましょーw
(ひどいまとめだ。。)

 

コメント

タイトルとURLをコピーしました