目次
この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。
スマホアプリはJavaやObjective-Cなどでごりごり書くのが最もスタンダードな方法ですが、HTMLからアプリを生成してくれるフレームワークを使うハイブリッドアプリと呼ばれる方法もあります。 Angular と Cordova からアプリの機能を提供する機会があったので、まとめます。
開発環境
- macOS
- Visual Source Code
- Node.js 10.4
- Angular CLI 6.1.2
- Android Studio
- Xcode
- Java JDK 1.8.0 r152
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
ビルドが開始され、しばらくするとアプリが起動します。
