Mac環境のApache Cordovaでアプリ開発する時の手順まとめ
Macで、Cordovaを使ってアプリ開発する際の、初めの手順を整理してみました。たまにしか使わないため、いつも忘れてしまうんですよね（笑）
Cordovaは既にインストールされている前提で話を進めます。
~/Documents/以下に、新しいCordovaプロジェクトを作成する場合の例です。環境に応じて読み替えて下さい。
プロジェクトの作成
以下、ターミナル（コマンドライン）で操作します。
「testproject」というディレクトリ名で、「com.testdomain.testproject」という名称、「ProjectTest」というアプリ名の場合の、プロジェクト作成の例です。最後の、「open ./」は不要ですが、このコマンドで、ディレクトリをFinderで開きます。
cd ~/Documents/
cordova create testproject com.testdomain.testproject ProjectTest
cd testproject
open ./
cordova create testproject com.testdomain.testproject ProjectTest
cd testproject
open ./
対応プラットフォームの追加
必要なプラットフォームを追加します。以下は、iOS、Android、OSXを追加する場合です。OSXが不要な場合は、「cordova platform add osx」は要りません。最後の行は、ステータスバーを制御するためのプラグインですが、場合によっては不要かも。
cordova platform add ios
cordova platform add android
cordova platform add osx
cordova plugin add cordova-plugin-statusbar
cordova platform add android
cordova platform add osx
cordova plugin add cordova-plugin-statusbar
config.xmlの編集
筆者がいつもやっているのは、下記のコードの追加です。最初の一行目は、プラットフォームにWindowsを追加する場合に必要なコードなので、無くても大丈夫です。その他の行は、ステータスバー関連の設定です。
<preference name="windows-target-version" value="10.0" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />
コードの編集
必要に応じて、コードを編集します。
実行
下記のようなコマンドで、シミュレータ上で実行出来ます。以下はiOSの例で、Androidの場合はcordova run android、Macの場合はcordova run osxです。
cordova run ios
Admobの設定について
ここまでで以上となりますが、最後に、Admobで広告を貼り付ける場合の設定方法について説明します。
まず、プラグインを追加します。
cordova plugin add cordova-plugin-admobpro
んで、index.jsの、「onDeviceReady」内に、下記のようなコードを追加すればオッケーです。
var admobid = {};
if( /(android)/i.test(navigator.userAgent) ) {
admobid = {
banner: 'ca-app-pub-xxxxxxxxxxxx/yyyyyyyyy', };
} else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
admobid = {
banner: 'ca-app-pub-xxxxxxxxxxxx/yyyyyyyyy',
};
} else {
admobid = {
banner: 'ca-app-pub-xxxxxxxxxxxx/yyyyyyyyy',
};
}
if(AdMob) AdMob.createBanner({
adId: admobid.banner,
position: AdMob.AD_POSITION.TOP_CENTER,
overlap: false,
autoShow: true
});
if( /(android)/i.test(navigator.userAgent) ) {
admobid = {
banner: 'ca-app-pub-xxxxxxxxxxxx/yyyyyyyyy', };
} else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
admobid = {
banner: 'ca-app-pub-xxxxxxxxxxxx/yyyyyyyyy',
};
} else {
admobid = {
banner: 'ca-app-pub-xxxxxxxxxxxx/yyyyyyyyy',
};
}
if(AdMob) AdMob.createBanner({
adId: admobid.banner,
position: AdMob.AD_POSITION.TOP_CENTER,
overlap: false,
autoShow: true
});
この記事の最終更新日：2017/11/09
最初に記事を書いた日：2017/11/09
インターネット黎明期から運営している生きる化石、Meteoric Streamへようこそ！
