３分間待ってやる
待ってくれている間に
CordovaでiOS、Androidの両対応アプリを作ります。
多分これが一番早いと思います。
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を編集します。
<!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
実行結果
エミュレータで動かす場合
・Androidの場合
Androidエミュレータを起動している状態で
実機が繋がっていない場合はエミュレータで実行できます。
$cordova run android
・iOSの場合
iOSエミュレータを起動している状態で
実機が繋がっていない場合はエミュレータで実行できます。
iOSの場合は--deviceオプション外します。
$cordova run ios
ビルドがうまくいかない人向け
実機で起動できない(Android)
端末設定でデバッグモード忘れてるとビルド時に検知されない
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登録が必要ぽい）
iOS Developerアカウントのチームを設定することでビルドできるようになります。
編集保存時に自動リロード
次のプラグインを導入する
cordova-plugin-browsersync
プラグインをインストールします。
$cordova plugin add cordova-plugin-browsersync
bals/www/index.htmlを編集します。
metaタグにws:と'unsafe-inline'を追加します。
<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インスペクタを有効にします。
PCの方のSafariから「環境設定」→「詳細」
メニューバーに”開発”メニューを表示にチェックします。
iPhoneでCordova実機起動中に
「開発」→（端末名）→（ページ名）を開きます
Webインスペクタでデバッグできます。
Androidのデバッグ
GoogleウェブストアからADBをインストールします。
AndroidでCordova実機起動中に
View Inspection Targetを開きます。
対象のinspectを開くと
ChromeのDeveloper Toolでデバッグできます。
