その１ Cordovaの環境構築と、iosでの動作確認 -【Cordova・Monaca】MonacaのプロジェクトをCordovaのローカルプロジェクトに移行して、Admob導入【Admob・plugin】
その１ Cordovaの環境構築と、iosでの動作確認
以前Monacaのゴールドプランなどへのプラン変更も考えていたが、今はCordovaでの開発の方がいいのかな、と思ってきたので、Monacaの無料プランで作成してきたプロジェクト（ほぼ完成しているもの）をCordovaのローカルプロジェクトに移行して、Admob広告の導入までを記事にしていく。
すんなりとできるとは思っていないので、おそらく何回かに渡って更新していくことになると思う。
全体的な流れとしては、環境構築が簡単なios版のみでAdmobの実装ができたら、android版の実装をする感じで。
今回はCordovaの環境構築と、iosでの動作確認まで行う予定。
動作確認といってもadmobの動作確認ではなく、移行した段階での動作確認。
Cordovaの環境構築のために必要なnode.jsやnpmはインストールされている前提で話を進める。
1年くらい前に書いた内容は、まだ使えた。
※Macでの方法になるので、Windowsを使っている方は他の記事を探してください。
Cordovaの環境構築
node.jsやnpmの準備が整っている前提で。
■node.jsとnpmの確認
ターミナルで以下のコマンド
$ node -v
$ npm -v
僕の環境は
node.js 6.11.2
npm 3.10.10
■cordovaをインストール
$ sudo npm install cordova -g
パスワードが要求されるので入力。
■正しくインストールできたか確認
$ cordova -v
2017年8月の段階ではv7.0.1がインストールされた。
Cordovaプロジェクトの作成
■project作成
以下のコマンドで、プロジェクトを作成する。
$ cordova create {プロジェクト名}
プロジェクト名を testProjectにしたいなら
$ cordova create testProject
■projectの整備
Monacaから移行してくるので、プロジェクト作成時に用意されているものは全て削除する。
作成した、projectに移動
$ cd testProject
これをFinderで開く(rmコマンドで削除してもOK)
$ open .
■www配下を削除
間違っているかもしれないが、一旦はwww配下全てだけを置き換えてみる。
（間違っていた場合は訂正します。）
なので、www配下の全てを削除しておく。
Monacaプロジェクトのエクスポート
■Monacaにログイン
https://ja.monaca.io/
■ダッシュボードから、移行したいプロジェクトに入る
■プロジェクトを移行
全体exportは有料プランの場合のみ可能なので、必要なものをそれぞれexportしていく必要がある。
といっても、今回はwwwをexportするだけなので、一回のアクションで実施できる。
www上で右クリック。
「フォルダーをエクスポート」を選択。
Chormeの場合は、左下にzipファイルが表示される。
このzipファイルをダブルクリック。するとwwwが解凍される。
どこかわかりやすいところに（デスクトップとか）に置いておくといい。
config.xmlの移行も必要なきがするけど、とりあえずは保留。
プロジェクトの移行
Monacaからエクスポートしたプロジェクトがデスクトップにあるとして。
■wwwの上書き
まずは、ターミナルで移行先のCordovaプロジェクトに移動して、Finderで開く
$ cd testProject
$ open .
Finderを開いたら、デスクトップにあるエクスポートしたフォルダを、testProjectフォルダにドラッグ＆ドロップ。メッセージが出るので「置き換える」を選択。
あとは環境を整えるだけでいけるはず。はず。
プロジェクトの環境構築【ios】
■iosプラトフォームの追加
$ cordova platforms add ios
■iOSシュミレーターのインストール
$ sudo npm install -g ios-sim
パスワードが要求されるので入力。
■ビルド
$ cordova build ios
あとは動作確認。
iosシミュレータでの動作確認
■iOSシュミレーターの起動
以下のコマンドでうまくいくかと思いきや、エラー。
必ずしもこうなるとは限らないが。
$ cordova emulate ios
Error: Cannot read property 'replace' of undefined
というメッセージが出た場合。
■エラー対処
iosのnode_moduleに移動
$ cd platforms/ios/cordova/node_modules/
ここで、以下のコマンド
$ sudo npm install ios-sim@latest
パスワードが要求されるので入力。
（参考）
stackoverflow.com
■再度、iOSシュミレーターを起動
$ cordova emulate ios
上手くいけば、iosシミュレータが起動してアプリ画面が表示される。
ちょっと触ってみたけど、特に不具合はなし。
結構すんなりいけた！
次回はadmobの導入。広告の表示ができれば完了。
すんなりいくといいなあ。
次回リンク
www.sky-limit-future.com
