仕事でApache Cordovaのアプリケーションを作る必要があったのですが知見が全く無く色々とわからないことだらけでした。
なんとか、こうすればいいかなと思ったものまで辿り着いたので備忘として記載します。
環境は以下で行いました。
- Mac(Sierra 10.12.3)
- node(v6.10.3)
- npm(4.2.0)
環境構築
## Apache Cordova のインストール
node.jsが入っていることが前提になります
npm install -g cordova
これでグローバルにcordovaをインストールできたのでどこでもcordovaコマンドが実行できるようになりました。
バージョン
を指定してインストールしたい場合はcordovaの後に@でバージョンを指定すればOK。
npm install -g cordova@7.0.1
インストールが正常に完了したかどうか確認するためにバージョンを確認します。
cordova -v
バージョンが表示されればcordovaのインストールは完了です。
サンプルプロジェクト作成
任意のディレクトリに移動してサンプルのプロジェクトを作成してみます。
cordova create cordovaSample com.example.hello CordovaSample
ここで指定しているcreateコマンドの引数はそれぞれ下記のような意味になります。
-
cordovaSample：ディレクトリ名 -
com.example.hello：作成したアプリの識別子(指定任意、未指定の場合はio.cordova.hellocordovaになる) -
CordovaSample：作成したアプリのプロジェクト名(指定任意、未指定の場合はHelloCordovaになる)
Creating a new cordova project.の文言が出力されれば成功です。
作成したプロジェクトは以下のような状態になっていると思います。
.
├── config.xml
├── hooks
├── package.json
├── platforms
├── plugins
├── res
└── www
バージョン管理
作成したプロジェクトに移動してバージョン管理の準備をします。
バージョン管理にはgitを使用します。
とりあえず初期化し、.gitignoreを追加します。
git init
touch .gitignore
gitignoreは下記のようにしました。
platformsは最初は書いていなかったのですが、platformsをリポジトリに含めてもemulateなどがうまくいかなかったのでignoreすることにしました。
platformsもpluginsもコマンドで簡単に同一の環境を作成できるので特に問題はないと思っています。
.DS_Store
node_modules
platforms
plugins
記載をしたらaddしてコミットしてしまいましょう。
git add --all
git commit -m "first commit"
自分はこのあとリモートリポジトリでgithubを追加しました。
書くのは面倒くさいので割愛＼(^o^)／
プラットホーム追加
開発を行いたいプラットホームを追加します。
Andoridだけあればよかったのですが、Androidシミュレータは起動にとても時間がかかり、htmlの確認とかするたびに起動するのは辛いのでブラウザも追加しました。
cordova platform add android@6.2.3 browser
Androidはバージョンを指定してインストールを行いました。
browserは特にないのでそのままです。
ちなみplatformはplatformsでも問題ないようです。
プラットホームが追加できているかの確認は以下で行なえます。
Installed platforms:に記載されているのがインストール済みのプラットホームです。
cordova platform ls
Installed platforms:
android 6.2.3
browser 4.1.0
Available platforms:
blackberry10 ~3.8.0 (deprecated)
ios ~4.4.0
osx ~4.0.1
webos ~3.7.0
プラットホームの追加を行うとconfig.xmlにプラットホームの情報、package.jsonに依存関係が追加されます。
<engine name="android" spec="~6.2.3" />
<engine name="browser" spec="~4.1.0" />
"dependencies": {
"cordova-android": "^6.2.3",
"cordova-browser": "^4.1.0",
"cordova-plugin-whitelist": "^1.3.2"
},
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {}
},
"platforms": [
"android",
"browser"
]
}
起動
ブラウザ
準備が整ったと思うので試しに起動してみましょう。
こんな感じの画面がブラウザで表示されると思います。
cordova emulate browser
Android
Androidは事前にAndroid Studioなどでシミュレータをインストールしておけばシミュレータを起動できると思います。
結構時間がかかるのでこの記事では取り上げません、すいません。
cordova emulate android
リモートリポジトリにあるものをcloneしてきた場合
cloneしてきた場合はcordova prepareコマンドを実行すれば、config.xmlなどの情報を参照して同じプラットホームの環境にしてくれます。
また、package.jsonにライブラリを追加している場合はnpm installも実行します。
今回の記事はここまでになります。
今後もcordova関係で困ることがあった場合は記事にしていきたいと思います。