DoRuby

Angular と cordovaでアプリを作ってみる

作成: 2018.08.02 更新: 2021.03.05

開発環境
CordovaとAngular CLIのインストール
Cordovaプロジェクトの作成
Angularプロジェクトで上書きする
Angularアプリを起動する
Angularをビルドする設定
index.htmlを書き換える
config.xml を編集する
プラットフォームの追加
SDKとエミュレータの追加
エミュレータで起動する

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

スマホアプリはJavaやObjective-Cなどでごりごり書くのが最もスタンダードな方法ですが、HTMLからアプリを生成してくれるフレームワークを使うハイブリッドアプリと呼ばれる方法もあります。 Angular と Cordova からアプリの機能を提供する機会があったので、まとめます。

開発環境

CordovaとAngular CLIのインストール

npm install @angular/cli --save
npm install cordova --save

npmパッケージをローカルのnode_modules以下にインストールしています。
グローバルを汚してもよい方は -g オプションでどうぞ。

Cordovaプロジェクトの作成

npx cordova create bibioapp

同じフォルダに bibioapp が作成されます。
このままアプリを作成することも可能ですが、今回はAngularのアプリを作成をすすめます。

npx は、ローカルにいれたnpm パッケージのコマンドを実行するコマンドです

Angularプロジェクトで上書きする

はじめに、www 以下とpackage.jsonを待避します

mv bibioapp/www bibioapp/www.bak
mv bibioapp/package.json bibioapp/package.json.bak
npx ng new bibioapp

Angularアプリを起動する

デフォルトで使用するブラウザで開きます。

cd bibioapp
npx ng serve --open

Angularをビルドする設定

Cordovaでビルドできるように angular.json を編集します。
（5から6になって、ファイル名がかわりました。Angular は設定がころころ変わりますね）
outputPath を www に変更します。

      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
             "outputPath": "www",
             "index": "src/index.html",
             "main": "src/main.ts",

ビルドを実行します

npx ng build

www 以下にbundleされたhtml,css,jsが出力されます。

index.htmlを書き換える

src/index.html がビュー側のエントリポイントとなります。
Angularアプリを作成する前にとったバックアップから必要なタグを追加します

変更点を列挙していきます。

Baseタグは.からの相対パスに変更します。

<base href="./">

Content-Security-Policy を追加する

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

view port を変更する

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

bodyに cordova.js のscriptタグを追加する

<script type="text/javascript" src="cordova.js"></script>

config.xml を編集する

widget要素の id 属性がパッケージ名になるので、適当に変更する。
今回は com.example.bibioapp にしました。

プラットフォームの追加

Android を追加します。

npx cordova platform add android@6.4.0

なお、パッケージ名を書き換えた場合は、一度削除してから再度追加しましょう。

npx cordova platform remove android

SDKとエミュレータの追加

Android Studioを起動し、アプリルート/platforms/android を開きます。

SDKを追加します。
Tools > SDK Manager を選択し、SDK Platforms タブから Android 8.1(API Level27)を選択します。

その後、エミュレータを追加します。

AVD Managerを起動して、エミュレータを追加します。

Android Studio のメニューバー Toolsから AVD Managerを起動します。

Create Virtual Deviceボタンをクリックし、Nexus 5Xを選択しNextをクリック、Oreo(API Level27)をDownloadしたあとに Nextをクリック、最後に内容を確認したあとに Finishをクリックします。

その後、エミュレータを起動します。

エミュレータで起動する

npx cordova emulate android

ビルドが開始され、しばらくするとアプリが起動します。