【Angular】Angular × Firebase × Ionic で作ってみた

2019年10月5日2020年2月17日

Contents

1. はじめに
2. 環境情報
3. 環境構築
4. プロジェクトの作成
- 4.1. PWA化
- 4.2. FirebaseにHosting
5. 共有:
6. 関連

はじめに

最近話題のものを集めてアプリを作ってみたくなったので、やってみました。
PWA & iOS & Android なアプリをワンソースで作ってみたいと思います。
またどうせならWebに公開して確認できた方が楽しいかと思うので、Firebase Hosting 利用してWebに公開するところまで備忘録かねてまとめておきます。

環境情報

node
npm
Angular
ionic
cordova
firebase

環境構築

前提条件

node.jsがインストールされていること
npmがインストールされていること
私がVSCode利用しているので、それを使う前提で進めていきます。

Angular,Ionic,Cordovaのセットアップ

1.Angular cliをインストール

npm install -g @angular/cli

2.Ionic、Cordovaをインストール

npm i -g ionic cordova

補足

Angular：Googleが開発しているJavaScriptのフレームワーク。

Ionic：Angularをベースに作られた、Web/iOS/Androidアプリがすべて同時に開発できる優れもののフレームワーク。PWAにも標準サポート。

Cordova： HTML5、CSS3、JavaScript などの標準的なWebの技術を利用して、モバイルネイティブアプリを作成できるフレームワーク。ビルド時に利用すると、ネイティブアプリ用のコードを吐き出してくれます。

プロジェクトの作成

ionicのコマンドにてPJの作成する。
VSCodeから、ターミナルを開いて適当なディレクトリに移動する。
移動したら以下のコマンドを実行する。

ionic start ionic-sample

上記画像のように選択肢が出てくるので、blankを選択してEnter（作成するappに合わせて選択肢は変更してください）

完了すると、以下のような形でプロジェクトが作成されているかと思います。

確認出来たら、以下のコマンドで起動してみます。

ionic serve

デフォルトでは、 http://localhost:8100 にアクセスすれば画面が確認できます。
確認出来たら、プロジェクトの作成は完了です。

次はPWA化していきます。

PWA化

PWA化するのは非常に簡単で、以下のコマンドを実行するだけです。

ng add @angular/pwa

実行すると、以下のファイルが追加/更新されているかと思います。

実際に何がされたのかというと、ざっくりいうと

1. service-worker の追加/組み込み
2. PWA用のマニフェストの追加
3. PWA用のアイコンの追加

が実行されています。
これをそのままデプロイすれば、PWAになっているので、iOSであればsafariを、Android/Windows/MacであればChromeを開けば、インストールできるかと思います。

FirebaseにHosting

次は、実際にWebアプリとして公開するためにFirebaseのHostingを利用してみたいと思います。

1. Firebase Consoleを開いて、プロジェクトを追加する。アカウントがない場合は作成する必要があります。無料枠で問題ないので作成しておきます。

プロジェクト作成

プロジェクトの名前をつける（なんでもOKです）

続行をクリック

GAを利用する場合には自分の利用するアカウントを選択してプロジェクトを作成

アプリの追加

アプリの名前を入力して、アプリを登録

Angular で作る場合には、Firebase SDKの登録は無視してOKです。後の処理は全部「次へ」を押していって、最後に「コンソールに進む」を押せばOKです。
コンソール画面に戻ったら、プロジェクトの設定を確認します。

設定画面の下部にある「Firebase SDK snippet」から構成を選択して、表示されている内容をコピーしておく。

これでFirebaseコンソールでのアプリ追加は完了です。

2. プロジェクトをFirebaseように設定する。VSCodeから、先ほど作成したプロジェクトを開いて、以下のコマンドを実行していきます。

Firebase toolsの追加

npm install -g firebase-tools

Firebase ログインでFirebase Consoleでログインしたアカウントでログインする

firebase login

プロジェクトの初期化

firebase init

Hostingに移動して「スペース」を押下して選択状態にできたらEnter

Use an existing project を選択状態でEnter

Firebase Consoleで追加したプロジェクトが表示されるので、それを選択してEnter

どのディレクトリを利用するのか聞かれるので「www」を入力します。

SPAでセットアップをする

これで初期化が完了です。変更点としては以下の２ファイルが追加されているかと思います。

一旦デプロイして確認してみます。

npm i
ng build --prod
firebase deploy

上記コマンドを実行するとデプロイされます
Consoleに Hosting URL が表示されているので、そのページ開くと結果が確認できます。

一応この時点でPWAになっているので、スマホなどでもアプリを追加することができるかと思います。

あとは、Firebase Authや、Databaseなどを利用できるようにするために、プロジェクトに設定を追加していきます。

3. environment.ts、environment.prod.tsを開いて、api-keyなどの情報を登録する。Firebase Consoleでコピーしておいた情報を以下のように登録しておきます。（<>で囲まれた部分は自分の設定に合わせて変更してください。）

export const environment = {
  production: false,
  firebase: {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',
    databaseURL: '<your-database-URL>',
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',
    messagingSenderId: '<your-messaging-sender-id>',
    appId: '<your-app-id>',
    measurementId: '<your-measurement-id>'
  }
};

4. プロジェクトにfirebaseモジュールを追加して、app.module.tsを編集する

npm install firebase @angular/fire

app.modile.ts を以下のように編集

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { ServiceWorkerModule } from '@angular/service-worker';
import { AngularFireModule } from '@angular/fire'; // 追加
import { environment } from '../environments/environment';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: environment.production
    }),
    AngularFireModule.initializeApp(environment.firebase) // 追加
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

これで設定関連は完了です。
長くなってしまったのでとりあえずここまでにして、次はXcodeを利用して実機での確認や、Firebase Auth、Databaseを利用する方法などをまとめていきます。

一応、今回のソースに関してはいかに公開しているので、よかったら参考にしてみてください。
https://github.com/kanazawanao/ionic-sample