CordovaとAngular８でハイブリットアプリを始める手順 - ハイテクフリーランサーの雑ブログ

ハイブリットアプリでiOS、Android アプリ開発に携わって、２年になりました。

その前は１年ほど、Androidアプリのエンジニアだったり、PHP、JavaなどのサーバサイドエンジニアだったりLinuxが主体のインフラエンジニアだったりしましたが、

最近は主体の業務をハイブリットアプリにおいています。

ハイブリットアプリとは１ソースでIOS,Android,Webサイトなどを作れてしまうアプリケーションの開発スタイルのことで、慣れると圧倒的に工数削減ができます。

デメリットとして、ネイティブのアプリ(swiftやjava)と比べると速度が落ちるなどのデメリットもありますが、１ソースで開発ができるメリットの方が高いという判断などもあり、導入される企業なども少なくありません。

今回はAngular 8とCordovaを用いてハイブリットアプリを作る基盤を作っていきます。

実際にエミュレータ上でiOSアプリとしてAngularのコードを動かすところまで作成していきます。

以下の物を揃えてください

以下のコマンドでApache Cordovaをインストールします。

npmコマンドはNode JSのインストールが完了していれば自動的に使えるようになります。

-gオプションはcordovaをグローバルにどこでも使えるようにインストールするためのオプションです。

npm install -g cordova

同じようにAngularをインストールします。

以下を行うことにより、Angularを使うためのコマンド(ng)が使えるようになります。

npm install -g @angular/cli@8.3.9

以下のコマンドでAngular プロジェクトを作成します。

フォルダが作成されるので、ソースコードを置きたいディレクトリで行ってください。

ng new MyApp

AngularプロジェクトとCordovaプロジェクトは別です。

Angularプロジェクトでは、アプリの動きの部分を担って

Cordovaプロジェクトではアプリのネイティブプラグイン(カメラやプッシュ通知など)やネイティブの設定をしていきます。

   cd myApp 
   cordova create CordovaMobileApp example.com "CordovaMobileApp"

cordova platform add ios

いよいよ、アプリを動かすためにAngularビルドをしていきます。

Angularで何もソースコードを書いていないと思うかもしれませんが、

Angularにはデフォルトで動くソースコードがあらかじめ入っているので、それを使って動かしていきます。

ビルドしたファイルはCordovaのwwwフォルダに出力します。

こうすることによって、CordovaプログラムがAngularで作成したhtmlやjsを使ってアプリを起動するよ雨になります。

ng build --prod --base-href . --output-path CordovaMobileApp/www/

最後にエミュレータを使ってアプリを動かしてみます。

以下のコマンドを入力して、実際にエミュレータにアプリが起動すれば完了です。

今後はAngularのコードを修正して手順6と手順7を行うことでアプリを更新していくことができるようになりました。

cordova run ios