• Home
  • 実況シリーズ[cordova]
  • 【プロジェクト作成編】Cordovaを使ってAndroidアプリ・iPhoneアプリを開発する全工程を実況するシリーズ

【プロジェクト作成編】Cordovaを使ってAndroidアプリ・iPhoneアプリを開発する全工程を実況するシリーズ

こんにちは！ぐち（@bloguchi）です。

【画面設計・API検討編】Cordovaを使ってAndroidアプリ・iPhoneアプリを開発する全工程を実況するシリーズの続編です。

実装開始

さて前回の作業で必要な画面の洗い出しと超簡単なUI設計が終わったと思います。今回からは実際にプロジェクトを作っていきたいと思います。
※僕の環境はMacです。Windowsをお使いの方は適宜読み替えてくださいね。

まずはプロジェクトを作ります。ターミナルから下記のコマンドを実行してください。
※開発環境の構築が終わっていない方はApache Cordovaを使ってアプリを開発する#002【初心者向け】の記事を参考に環境構築をお願いします。

$ cordova create hoge com.hogehoge.app HogeApp -d

※フォルダ名やパッケージ名、アプリ名はご自身のものに置き換えてください。

次はプラットフォームの追加ですね。今回はタイトルにある通りAndroidとiPhoneのアプリを作りますので2つのプラットフォームを追加します。

$ cd hoge
$ cordova platform add ios
$ cordova platform add android

プロジェクトができましたね！

SVNへインポート

ビルドしたりコーディングを始める前のクリーンな状態でまずはSVNへあげておきましょう。Subversionリポジトリをお持ちでない方はDropboxを利用して個人開発に最適なSVNリポジトリを構築するの記事でご紹介している方法で簡単に作成できます。

CornerStoneを使っていればリポジトリ内のアップロードしたいフォルダにドラッグ&ドロップするだけで済みます。

チェックアウト

よく初心者の方がミスをするのですがSVNへインポートしたプロジェクトをチェックアウトせずにローカルにあるファイルを更新してしまうパターンがあります。SVNでの管理をする場合は必ずインポートしてチェックアウトしたものを編集していきましょう。インポートした元のプロジェクトもローカルに残ったままになりますがこちらは不要ですので削除しても大丈夫です。

プラグインを追加

アプリに必要な機能は一から作りこんでもいいですがCordovaではプラグインと呼ばれる形で多数の機能が提供されています。「cordova plugin やりたいこと」でgoogle検索してみましょう。

今回はプッシュ通知や広告などが必要ですデバイス関連や通知系も入れておきます。

$ cordova plugin add cordova plugin add com.google.admobsdk
$ cordova plugin add https://github.com/phonegap-build/PushPlugin.git
$ cordova plugin add cordova-plugin-device
$ cordova plugin add cordova-plugin-admobpro

以上のプラグインをインストールし最後に一覧で確認しておきましょう。

$ cordova plugin list
com.google.admobsdk 6.12.2 "AdMob SDK for Android, iOS and WP8"
com.google.playservices 19.0.0 "Google Play Services for Android"
com.phonegap.plugins.PushPlugin 2.5.0 "PushPlugin"
cordova-plugin-admobpro 2.8.3 "AdMob Plugin Pro"
cordova-plugin-device 1.0.1 "Device"
cordova-plugin-extension 1.1.4 "Cordova Plugin Extension"
cordova-plugin-whitelist 1.0.0 "Whitelist"

ライブラリを格納するフォルダ

プロジェクトフォルダの下にあるwwwフォルダの下にサードパーティ製のライブラリ(OnsenUIなど)を格納するlibsフォルダを作っておきます。wwwフォルダであればどこでも名前も何でもいいです。

$ mkdir ./www/libs

Onsen UI

こちらからzipファイルをダウンロードしておきます。ダウンロードしたファイルを解凍してlibsフォルダへコピーします。

View

wwwフォルダの下にviewsフォルダを作ります。これは完全に個人的な好みですがHTMLファイルがごちゃごちゃするのが嫌でviewsフォルダにまとめておきたいかです。

$ mkdir ./www/views

SVNへコミット

ここまでできたら一旦SVNへコミットしておきましょう。

今回はこのへんで。