Cordovaでハイブッドアプリ化計画 その1 環境構築からハローワールド

wheviewをとりあえずそれっぽいサイトにはできた。

ってわけで次はアプリでやってみようと思う。でもswiftとかjavaとかで1からやるのは面倒・・・。だから一旦ハイブリッドアプリでどうにかしてみるか、とね。

概要

ハイブリッドアプリ系ではFacebookが開発して使ってるNative React(インスタはこれで構築されてる)とか、最近は注目度が高まってるけど、オラはCordovaを選んだ。

若い言語(というかフレームワーク?)はやっぱ情報が少ないし、困った時自力でなんとかなる確率が高いのは、やっぱどれだけ情報が転がってるかによる。
ってのと、環境構築に関する丁度いい動画がYoutubeであったからww。
ほな行くデー。

以下、スタート時の環境

  • OSはMac
  • Xcodeインストール済み
  • Android Studioインストール済み

プロジェクト作成

ターミナルでnode.jsがインストールされてるか確認。なければネットサーフィンして手に入れる。

$ node -v


Node.jsのnpmを用いて、Cordovaをインストール

sudo npm install -g cordova


んでターミナルでのコマンド操作でDesktopへ移動(ターミナル起動時のフォルダ位置は、デフォルトでuser名になってるはず・・・。それ前提ね。)
ここでは/Users/[ユーザー名]/Desktop/作成したフォルダ(名前はcordova)
デスクトップにcordovaって名前のフォルダ作成

cd Desktop/cordova/


Cordovaのプロジェクトを作成

cordova create SampleCordova com.example.SampleCordova SampleCordova

cordova create以降の引数は以下

  • 第1引数-SampleCordova:プロジェクトフォルダ名
  • 第2引数-com.example.SampleCordova:アプリ識別名(iOSのBundle Identifier) ←超重要!!!
  • 第3引数-SampleCordova:プロジェクト名(Xcodeのプロジェクト名)

第2引数で「超重要」って書いたのは何故か?

ここを適当にするとビルド時に絶対エラー発生するから。Bundle IdentifierってXcodeとかやった人ならすんなりわかるやろうけど、Web系しか知らない人には厳しいよな〜。

そして作成されたプロジェクトフォルダに移動。

cd SampleCordova

おなじみ、ハローワールド

作成したSampleCordovaプロジェクトで使用するプラットフォームを追加。
iosの部分をandroidにすれば、アンドロイド環境も追加できる。
※プラットフォームを追加すれば実行できるという訳ではない。Mac環境なら結局のところ、エミュレーターでテストするには、iosならXcode、androidならAndroid Studioを入れとけばややこしいことをしなくても実行できる。

cordova platform add ios

そのまま実行してみる。

cordova run ios

んだらこんな可愛い奴が登場するだろう(きっと!)


以上、cordovaの0→1記録でした〜

(Androidでの実行はめちゃクチャややこしいから、またあとで記録する・・・。)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA