macでCordova 

かわどです。備忘録としてCordovaの環境用意作業を残しときます。

■Cordovaとは？

　HTML5/CSS/JavaScriptといったWebのクライアントサイド技術でモバイルアプリを制作するためのフレームワーク（どっかから抜粋）
ほぼHTML5/CSS/JavaScriptだけでiosやandroid向けのアプリを開発できるかも！的なもの。
webview(webページをアプリ内でみる機能）が強力でマルチプラットフォームに対応しているご様子。


■まずなにすればいいのか？

全体の流れとして各種環境を用意できるインストーラーのDL、インストール、設定、テストプロジェクトによる確認作業。
今回は最新（現在2017年５月24日）をDLします


まずはNode.jsをダウンロード
node.jsがどんなものかについては割愛しますがCordovaに必須
https://nodejs.org/ja/

![node.png](https://qiita-image-store.s3.amazonaws.com/0/183000/9ad4f595-212a-cd22-c5d7-402a3474e616.png)



今回はそのままダウンロードしましたが、node.jsをバージョン管理しながら手軽にインストールが行えるnvmというツールがあります。現場が許されるならそちらを使うべきです。



■ ios
xcodeをダウンロードしますappストアから検索。xcodeのバージョンはmac側のOSと互換性がないといけません。
私は最新でなかったので古いバージョンのインストーラーを探しました。

最新サイト（Appstoreからでもおk）
https://developer.apple.com/jp/xcode/

古いバージョンのサルベージ

下記サイトにリンクがあります。apple developerアカウントが必須です（無料）
https://developer.apple.com/download/

下の方にこんなのあるはずです。

![スクリーンショット 2017-06-12 11.28.12.png](https://qiita-image-store.s3.amazonaws.com/0/183000/3ba5b4cd-0094-8e39-e97d-d3b5108d7ec8.png)

この先に古いのあります。






■ android

andoroidoの環境に関しては、android studioをダウンロードします。いつからかはしりませんが、Androidを扱うならとりあえずこれいれとけって思ってます。昔はAndroid sdkいれときゃいいみたいな認識でしたけど。

https://developer.android.com/studio/index.html?hl=ja

また、windowsでもmacでもコンソール作業をするなら環境変数のパスをとおしておきます。android studio内部にsdkのパスが設定されています。パスの通し方は割愛。


■ webブラウザ
Webブラウザはテスト用にchrome、firefoxぐらいはいれとくといいかもです。macはsafari入ってますね


■ 各種環境を用意できたら、テストプロジェクトを作成

テストプロジェクトの作成はコンソールから行ってみます。
とりあえず作成したいディレクトリまで移動しましょう。(cdコマンドで)

下記コマンドでcordova用のテストプロジェクトを作成できます。


cordova create ＜作成したいプロジェクト名＞

例：
cordova create CordovaTestProject

実行すると

「Creating a new cordova project.」

といった文字列が出力されます。

![スクリーンショット 2017-06-12 11.11.48.png](https://qiita-image-store.s3.amazonaws.com/0/183000/58211dfe-c04e-24ef-abaf-6423640f8895.png)

基本的なファイル構成で生成されます

しかしこの状態だと作成したiosとandroido、webブラウザに対応していません。（Platform下に何もできていない）

とりあえず、コンソール作業なので、作成したテストプロジェクト内に移動しときましょう。

cd ＜作成したプロジェクト名＞

移動したら、下記のコマンドでプラットフォームに合うファイルを生成します。

cordova platform add browser ios android

![スクリーンショット 2017-06-12 11.17.37.png](https://qiita-image-store.s3.amazonaws.com/0/183000/a06c3e73-42e5-bffe-2ccb-052a16acfd31.png)

これでおk

■ テストプロジェクトをシミュレータで実行

簡単です。下記のコマンド打つだけ。
（例に準ずればCordovaTestProject下で実行）

iosの場合
cordova run ios

webブラウザの場合
cordova run browser

androidの場合
cordova run android


下記はwebブラウザの表示。

![スクリーンショット 2017-06-12 11.33.17.png](https://qiita-image-store.s3.amazonaws.com/0/183000/252aa226-a6d6-ef0a-0083-0d98d3245f3d.png)


これで環境用意とテストプロジェクトの実行はオワーリです。




■ テストでせっかくだから「Hellowold」しよう

うん。お決まりやりましょう。

下記の「index.html」を弄ってみます。
「WWW下のindex.html」

![スクリーンショット 2017-06-12 12.10.05.png](https://qiita-image-store.s3.amazonaws.com/0/183000/0c0baff2-17b4-2066-c5bc-690d0e38cf6c.png)


んでテキストエディタで開いて

![スクリーンショット 2017-06-12 11.58.12.png](https://qiita-image-store.s3.amazonaws.com/0/183000/5b02cda5-8d58-9de2-abd7-2e0e059b7a45.png)

↓　body内を削除して「Hellow World」って書いちゃいましょ

![スクリーンショット 2017-06-12 12.09.33.png](https://qiita-image-store.s3.amazonaws.com/0/183000/1b080d41-f5e3-1678-b355-654b4b59b5c1.png)

んで、試しにandoroidシミュレータで実行してみましょ

cordova run android

実行


![スクリーンショット 2017-06-12 12.20.42.png](https://qiita-image-store.s3.amazonaws.com/0/183000/6a5e9c0a-dc97-8736-cb39-35eb912b994d.png)


表示された。へろ〜


以上です。