Windowsアプリ、iPhoneアプリ、ゲーム用フリー音源の「Meteoric Stream」


日本語 | English
Windowsソフト、iPhoneアプリ、ゲーム音楽素材の「Meteoric Stream」 -> 資料室 -> Apache Cordovaでクロスプラットフォームアプリ開発 -> Mac環境のApache Cordovaでアプリ開発する時の手順まとめ

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 ./

対応プラットフォームの追加

必要なプラットフォームを追加します。以下は、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

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" />

コードの編集

必要に応じて、コードを編集します。

実行

下記のようなコマンドで、シミュレータ上で実行出来ます。以下は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 });

この記事の最終更新日:2017/11/09
最初に記事を書いた日:2017/11/09

この記事をシェアする

このエントリーをはてなブックマークに追加

関連記事

関連サービス

資料室のトップに戻る
Windowsソフト、iPhoneアプリ、ゲーム音楽素材の「Meteoric Stream」 -> 資料室 -> Apache Cordovaでクロスプラットフォームアプリ開発 -> Mac環境のApache Cordovaでアプリ開発する時の手順まとめ
▲このページのTopへ