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

この記事をシェアする

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

関連記事

Spotifyでフォローする

Meteoric Streamについて

運営者情報

開発を依頼したい

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