３分間でiOS、Android両対応アプリを作る

# ３分間待ってやる
![a0016503_23141137.jpg](https://qiita-image-store.s3.amazonaws.com/0/55077/7315cb7f-b345-f94f-d750-e34476f2e293.jpeg)

待ってくれている間に
CordovaでiOS、Androidの両対応アプリを作ります。
<b>多分これが一番早いと思います。<b>

NodeJS、XCode、Android Studioはインストール済みの想定です。
CordovaのインストールとCordovaのプロジェクトを作成します。

```
$npm install -g cordova ios-deploy
$cordova create bals;cd bals
$cordova platform add browser android ios
```

wwwフォルダのindex.htmlを編集します。

```html
<!DOCTYPE html>
<html>
    <head>
        <!-- charset追加忘れすると日本語文字化けします -->
        <meta charset="UTF-8">
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">バルス！！</p>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>
```

# ・・・時間だ、答えを聞こう!

・iOSの場合
iPhoneをUSBでつないだ状態でiOSのビルド

```
$cordova run ios --device
```

・Androidの場合
AndroidをUSBでつないだ状態でAndroidのビルド

```
$cordova run android
```

実行結果
<img width="375" alt="IMG_0909.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/55077/294eb935-97b4-ea69-e323-18bc802d8619.png">



 ![ダウンロード.jpeg](https://qiita-image-store.s3.amazonaws.com/0/55077/b764ce52-4bee-9cd4-eabd-3c51c693eeef.jpeg)


# エミュレータで動かす場合

・Androidの場合
Androidエミュレータを起動している状態で
実機が繋がっていない場合はエミュレータで実行できます。

```
$cordova run android
```

・iOSの場合
iOSエミュレータを起動している状態で
実機が繋がっていない場合はエミュレータで実行できます。
iOSの場合は--deviceオプション外します。

```
$cordova run ios
```

# ビルドがうまくいかない人向け

## 実機で起動できない(Android)
端末設定でデバッグモード忘れてるとビルド時に検知されない

![Screenshot_2016-08-07-12-37-00.png](https://qiita-image-store.s3.amazonaws.com/0/55077/dc88ae49-682c-8c33-f171-e0f020634fa1.png)


## xcode-selectのエラー(iOS)

次のエラーが出る場合

```
Error: xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance
```

xcodeがインストールされていないもしくは
コマンドラインツールがうまく動作していない。

```
$xcode-select --install
$xcode-select --switch /Applications/Xcode.app
```


## Error code 65(iOS)

次のエラーが出る場合

```
Error: Error code 65 for command: xcodebuild with args: -xcconfig,/Users/(ユーザ名)/Desktop/bals/platforms/ios/cordova/build-debug.xcconfig,-project,HelloCordova.xcodeproj,-target,HelloCordova,-configuration,Debug,-destination,platform=iOS,build,CONFIGURATION_BUILD_DIR=/Users/(ユーザ名)/Desktop/bals/platforms/ios/build/device,SHARED_PRECOMPS_DIR=/Users/(ユーザ名)/Desktop/bals/platforms/ios/build/sharedpch
```

bals/platforms/ios/HelloCordova.xcodeprojをxcodeで開きます。
CordovaプロジェクトではProvision Profileがないと実機のビルドができない
（iOS Developer登録が必要ぽい）

<img width="446" alt="スクリーンショット 2016-09-30 1.20.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/55077/f1e395e3-357c-5e2e-455c-a04ba4f5b9c6.png">

iOS Developerアカウントのチームを設定することでビルドできるようになります。

<img width="481" alt="スクリーンショット 2016-09-30 0.54.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/55077/99c14874-5cb2-7a40-7c45-4fd020b2f682.png">

# 編集保存時に自動リロード

次のプラグインを導入する
[cordova-plugin-browsersync](https://github.com/nparashuram/cordova-plugin-browsersync)

プラグインをインストールします。

```
$cordova plugin add cordova-plugin-browsersync
```

bals/www/index.htmlを編集します。
metaタグにws:と'unsafe-inline'を追加します。

```html
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: ws: 'unsafe-inline' https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
```

次のコマンドでwwwフォルダ以下のファイル編集保存時にios,android両方同時に自動リロードできます。

```
$cordova run android ios --device -- --live-reload
```

# デバッグ

## iOSのデバッグ
SafariのWebインスペクタを使います。
端末の設定→Safari→詳細→Webインスペクタを有効にします。

<img width="375" alt="IMG_0910.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/55077/6a2e4620-62f4-aea9-1b9f-fb9430d7caf6.png">

PCの方のSafariから「環境設定」→「詳細」
メニューバーに”開発”メニューを表示にチェックします。
<img width="788" alt="スクリーンショット 2016-09-30 2.16.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/55077/d3584027-4953-6807-719f-71f2879c55d1.png">

iPhoneでCordova実機起動中に
「開発」→（端末名）→（ページ名）を開きます

<img width="685" alt="スクリーンショット 2016-09-30 2.25.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/55077/6595882d-5327-429a-b555-74b55196a91a.png">

Webインスペクタでデバッグできます。

![スクリーンショット 2016-09-30 2.25.35.png](https://qiita-image-store.s3.amazonaws.com/0/55077/e7c5e4ab-c712-6f8a-948b-067b3384ad5a.png)


## Androidのデバッグ
[Googleウェブストア](https://chrome.google.com/webstore/search/adb?hl=ja)からADBをインストールします。

<img width="230" alt="スクリーンショット 2016-09-30 2.06.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/55077/511ca189-a840-1a4d-1865-d31706eadbef.png">

<img width="721" alt="スクリーンショット 2016-09-30 2.06.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/55077/6ba5e11c-c726-63fc-dea4-7b81b9b5e35a.png">

AndroidでCordova実機起動中に
View Inspection Targetを開きます。
<img width="168" alt="スクリーンショット 2016-09-30 2.08.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/55077/56476f23-64fa-3330-3c4d-8d9cad84b020.png">

対象のinspectを開くと
<img width="593" alt="スクリーンショット 2016-09-30 2.44.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/55077/b78c296a-380f-9499-b6a8-7661d9ccecee.png">

ChromeのDeveloper Toolでデバッグできます。
![スクリーンショット 2016-09-30 2.45.01.png](https://qiita-image-store.s3.amazonaws.com/0/55077/6f75bcfa-bcc6-53ca-5628-83a7e7602d15.png)