The sky is the limit

ハイブリッドアプリ開発、PWAなど効率の良いiOSアプリ、Androidアプリ開発の情報を共有したい。アプリ開発は楽しい。【PWA、AngularJS、Monaca、Cordova、OnsenUI】

その1 Cordovaの環境構築と、iosでの動作確認 -【Cordova・Monaca】MonacaのプロジェクトをCordovaのローカルプロジェクトに移行して、Admob導入【Admob・plugin】

その1 Cordovaの環境構築と、iosでの動作確認 -【Cordova・Monaca】MonacaのプロジェクトをCordovaのローカルプロジェクトに移行して、Admob導入【Admob・plugin】

f:id:duo-taro100:20160218004611p:plain

その1 Cordovaの環境構築と、iosでの動作確認

以前Monacaのゴールドプランなどへのプラン変更も考えていたが、今はCordovaでの開発の方がいいのかな、と思ってきたので、Monacaの無料プランで作成してきたプロジェクト(ほぼ完成しているもの)をCordovaのローカルプロジェクトに移行して、Admob広告の導入までを記事にしていく。

すんなりとできるとは思っていないので、おそらく何回かに渡って更新していくことになると思う。
全体的な流れとしては、環境構築が簡単なios版のみでAdmobの実装ができたら、android版の実装をする感じで。
今回はCordovaの環境構築と、iosでの動作確認まで行う予定。
動作確認といってもadmobの動作確認ではなく、移行した段階での動作確認。

Cordovaの環境構築のために必要なnode.jsやnpmはインストールされている前提で話を進める。
1年くらい前に書いた内容は、まだ使えた。

www.sky-limit-future.com

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

f:id:duo-taro100:20170827014227p:plain:w300


■www配下を削除
間違っているかもしれないが、一旦はwww配下全てだけを置き換えてみる。
(間違っていた場合は訂正します。)
なので、www配下の全てを削除しておく。

Monacaプロジェクトのエクスポート

■Monacaにログイン
https://ja.monaca.io/


■ダッシュボードから、移行したいプロジェクトに入る

f:id:duo-taro100:20170827015743p:plain

■プロジェクトを移行
全体exportは有料プランの場合のみ可能なので、必要なものをそれぞれexportしていく必要がある。
f:id:duo-taro100:20170827020200p:plain

といっても、今回はwwwをexportするだけなので、一回のアクションで実施できる。
www上で右クリック。
「フォルダーをエクスポート」を選択。
Chormeの場合は、左下にzipファイルが表示される。

f:id:duo-taro100:20170827020358p:plain

このzipファイルをダブルクリック。するとwwwが解凍される。
どこかわかりやすいところに(デスクトップとか)に置いておくといい。
config.xmlの移行も必要なきがするけど、とりあえずは保留。

プロジェクトの移行

Monacaからエクスポートしたプロジェクトがデスクトップにあるとして。

■wwwの上書き
まずは、ターミナルで移行先のCordovaプロジェクトに移動して、Finderで開く

$ cd testProject

$ open .

Finderを開いたら、デスクトップにあるエクスポートしたフォルダを、testProjectフォルダにドラッグ&ドロップ。メッセージが出るので「置き換える」を選択。
f:id:duo-taro100:20170827022400p:plain

あとは環境を整えるだけでいけるはず。はず。

プロジェクトの環境構築【ios】

■iosプラトフォームの追加

$ cordova platforms add ios

■iOSシュミレーターのインストール

$ sudo npm install -g ios-sim

パスワードが要求されるので入力。

■ビルド

$ cordova build ios

あとは動作確認。

iosシミュレータでの動作確認

■iOSシュミレーターの起動
以下のコマンドでうまくいくかと思いきや、エラー。
必ずしもこうなるとは限らないが。

$ cordova emulate ios

f:id:duo-taro100:20170827023145p:plain

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シミュレータが起動してアプリ画面が表示される。
f:id:duo-taro100:20170827023743p:plain:w300

ちょっと触ってみたけど、特に不具合はなし。
結構すんなりいけた!

次回はadmobの導入。広告の表示ができれば完了。
すんなりいくといいなあ。

次回リンク
www.sky-limit-future.com