Google Developers Japan

この記事はゲスト ブロガー Jen Looper による The Firebase Blog の記事 "The Firebase Blog: Building a NativeScript + Angular 2 Mobile App using Firebase" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。

Jen Looper

Developer Advocate at ProgressSW

NativeScript、Firebase、Angular 2 という強力な組み合わせを活用すれば、アプリの構築を一気に加速させることができます。クリスマス休暇の期間中は、アプリの開発をスピードアップさせて、プレゼントを贈りたいという家族のニーズに応えなければならないため、特にその点が重要になります。ちょうどよいことに、Angular 2 ベースの NativeScript アプリで Firebase を使う方法のデモを皆さんにプレゼントすることができます（以下をご覧ください 🎁）。これは、Eddy Verbruggen 氏による有名な NativeScript-Firebase プラグインのいくつかのコンポーネントを使ったものです。

このチュートリアルでは、よく使われている次の 4 つの Firebase 機能を NativeScript アプリで使用する方法を説明します。4 つの機能には、ログインとユーザー登録の機能を提供する Authentication、リアルタイムにアップデートされるデータ ストレージの Realtime Database、リモートでアプリを変更できる Remote Config、写真を保存する Storage があります。説明するにあたって、以前に Ionic で書いた Giftler アプリを書き直すことにしました。

実際のプロジェクトで作業に着手する前に、ドキュメントに目を通し、以下の前提事項について確認することをお勧めします。

• ローカルマシンに NativeScript がインストールされており、CLI が問題なく動作していることを確認します。
• お好みの IDE で、NativeScript と Angular の開発環境を設定します。TypeScript が必要になるので、トランスパイル プロセスが動作することを確認しておきます。Visual Studio、Visual Studio Code、Jetbrains 対応の IDE などで利用できる優れた NativeScript プラグインがありますが、中でも Visual Studio Code には、開発を加速させる便利なスニペットがあります。
• Firebase アカウントにログインし、コンソールを開きます。
• Firebase コンソールで新しいプロジェクトを作成します。ここでは、「Giftler」という名前にしました。さらに、Firebase コンソールで iOS と Android のアプリを作成します。その際に、GoogleServices-Info.plist ファイルと google-services.json ファイルをダウンロードします。後ほど必要になるので、ファイルを配置した場所は覚えておいてください。

依存モジュールのインストール

Giftler は、認証が必要な NativeScript アプリのサンプルとして作成しました。このアプリでは、ユーザーがクリスマス休暇に受け取りたいギフトを、写真や説明とともに一覧表示できます。現時点で、このアプリには iOS 版と Android 版があり、以下の機能があります。

• ログイン、ログアウト、ユーザー登録、および「パスワードを忘れた」場合の処理の実行
• ユーザーによるリストへのギフト項目の登録
• ユーザーによるリストからのギフト項目の削除
• ユーザーによるリストの各ギフト項目の編集（説明や写真の追加）
• バックエンドですぐに変更できる Firebase の Remote Config サービスによるメッセージング

それでは、Giftler のソースコードをフォークしましょう。これは、問題なく動作している完全版のアプリです。アプリをクローンできたら、アプリを作成した際にダウンロードした、現在の Firebase 関連のアプリのファイルを置き換えます。

• Firebase からダウンロードした google.services.json ファイルを /app/App_Resources/Android folder に配置します。
• 同様に、Firebase からダウンロードした GoogleService-Info.plist ファイルを /app/App_Resources/iOS folder に配置します。

これらのファイルは、アプリで Firebase を初期化し、関連する外部サービスに接続するために必要です。

次に、アプリのルートにある package.json を確認します。このファイルには、アプリで使用するプラグインが含まれています。ここでは、NativeScript に関連するプラグインに注目してください。

"nativescript-angular":"1.2.0",
"nativescript-camera": "^0.0.8",
"nativescript-iqkeyboardmanager": "^1.0.1",
"nativescript-plugin-firebase": "^3.8.4",
"nativescript-theme-core": "^1.0.2",

NativeScript-Angular プラグインは、Angular と NativeScript を統合するプラグインです。Camera プラグインを使うと、少しカメラを管理しやすくなります。IQKeyboardManager は iOS 専用のプラグインで、厄介な iOS のキーボードを管理してくれます。Theme プラグインは、スキンを完全に自作しなくてもデフォルトのスタイルをアプリに追加できるすばらしいプラグインです。最後に、このアプリでもっとも重要なのが Firebase プラグインです。

以上の依存モジュールを配置して、プラグインをインストールする準備ができたら、iOS と Android のそれぞれのコードが格納された platforms フォルダを作成し、Firebase プラグインやその他の npm ベースのプラグインを初期化して、アプリを構築できるようにします。NativeScript CLI を使ってクローンしたアプリのルートに移動し、tns run ios または tns run android を実行します。これによってプラグインをビルドするルーチンが開始されます。中でも、Firebase プラグインのさまざまなパーツのインストールが始まることが確認できるはずです。インストール スクリプトが実行されると、さまざまな Firebase サービスを統合するためのコンポーネントをインストールするかどうかの確認が表示されます。ここでは、Messaging とソーシャル認証を除くすべてを選択します。ここでの大きな特徴は、firebase.nativescript.json ファイルがアプリのルートにインストールされることです。そのため、今後プラグインの新しいパーツをインストールしたい場合、このファイルを編集するだけでプラグインを再インストールできます。

ここで、tns livesync ios --watch または tns livesync android --watch を実行し、エミュレータでアプリが起動して変更が監視されることを確認すると、アプリが実行されて新しくログインする準備ができていることがわかります。ただし、ログインを行う前に、Firebase コンソールの [Authentication] タブからメール / パスワードによるログインを有効にして、Firebase がこのタイプのログインを処理できるようにする必要があります。

この裏で何が起こっているかを確認するために、少しばかり内部の仕組みを見てみましょう。Firebase にログインするには、インストールした Firebase サービスを初期化しておく必要があります。app/main.ts には、いくつか興味深い点があります。

// this import should be first in order to load some required settings (like globals and reflect-metadata)
 import { platformNativeScriptDynamic } from "nativescript-angular/platform";

 import { AppModule } from "./app.module";
 import { BackendService } from "./services/backend.service"; 
 

 import firebase = require("nativescript-plugin-firebase"); 


 firebase.init({
   //persist should be set to false as otherwise numbers aren't returned during 
 livesync
  persist: false,
  storageBucket: 'gs://giftler-f48c4.appspot.com',
  onAuthStateChanged: (data: any) => {
    console.log(JSON.stringify(data))
    if (data.loggedIn) {
      BackendService.token = data.user.uid;
    }
    else {
      BackendService.token = "";
    }
   }
 }).then(
   function (instance) {
     console.log("firebase.init done");
   },
   function (error) {
     console.log("firebase.init error: " + error);
   }
   );
 platformNativeScriptDynamic().bootstrapModule(AppModule); 

最初に、プラグインから firebase をインポートし、.init() を呼び出します。次に storageBucket プロパティを編集し、Firebase コンソールの [Storage] タブに表示されている値を貼り付けます。

これで、お使いの Firebase アカウントに合わせてアプリがカスタマイズされ、アプリで新しいユーザーの登録とログインが可能になるはずです。必要に応じて、app/login/login.component.ts ファイルの user.email と password 変数を編集して、デフォルトのログイン認証情報を user@nativescript.org からご自身のログインとパスワードに変更することもできます。

iOS と Android のログイン画面 注: iOS では、Xcode シミュレータを使うとすぐにアプリをエミュレートできます。ただし Android では、アプリをエミュレータにインストールするために、Google Services の有効化など、追加でいくつかの手順が必要になる場合があります。

コードの構造と認証

Angular 2 のデザイン パターンでは、コードをモジュール化する必要があります。そのため、以下のコード構造に従うものとします。

—login

1. login.component.ts
2. login.html
3. login.module.ts
4. login.routes.ts

—list …

—list-detail …

—models

1. gift.model.ts
2. user.model.ts
3. index.ts

—services

1. backend.service.ts
2. firebase.service.ts
3. utils.service.ts
4. index.ts

app.component.ts

app.css

app.module.ts

app.routes.ts

auth-guard.service.ts

main.ts

Firebase の認証が Angular 2 の auth-guard.service と連携する方法に注目してください。前述のように、アプリの app/main.ts で Firebase が初期化されます。その際に、onAuthStateChanged 関数が呼び出されます。

onAuthStateChanged: (data: any) => { 
    console.log(JSON.stringify(data))
    if (data.loggedIn) {
      BackendService.token = data.user.uid;
    }
    else {
      BackendService.token = "";
    }
  }

アプリが起動する際に、Firebase から返されるデータを文字列化したものをコンソールで確認してください。そのユーザーに loggedIn フラグが立っている場合、Firebase から送り返された userId を token として設定します。NativeScript アプリケーション設定モジュールを使って、この userId を保存するかつ、これから作成するデータと関連付けます。このモジュールは、localStorage のような機能を持つモジュールです。このトークンとトークンを使う認証テストは app/services/backend.service.ts ファイルで管理されており、app/auth-guard.service.ts ファイルで利用できます。auth-guard ファイルは、アプリのログインおよびログアウト状態を適切に管理する方法を提供しています。

AuthGuard クラスは、Angular Router モジュールの CanActivate インターフェースを実装しています。

export class AuthGuard implements CanActivate {
  constructor(private router:Router) { } 

  canActivate() {
    if (BackendService.isLoggedIn()) {
      return true;
    }
    else {
      this.router.navigate(["/login"]);
      return false;
    }
  }

基本的には、前述のログイン ルーチンでトークンが設定され、かつ BackendService.isLoggedIn 関数が true を返す場合、アプリでデフォルトのルートであるウィッシュリストへのナビゲーションが許可されます。しかし、それ以外の場合、ユーザーはログイン画面に戻されます。

const listRoutes:Routes = [
  { path: "", component:ListComponent, canActivate: [AuthGuard] },
];

これで、Firebase を使う NativeScript アプリを初期化できました。次は、アプリにデータを読み込み、Firebase のすばらしいリアルタイム性を活用して、アップデートされるデータベースの内容を監視する方法について学んでゆきましょう。

リストの作成とダブルチェック

ウィッシュリストのベースとなっている app/list/list.html から説明します。ここには、テキスト項目と空のリストが表示されているはずです。では、サンタさんに欲しいものを伝えてみましょう。項目がデータベースに送信され、リアルタイムにリストに追加されます。これをどうやって実現しているかを見てみましょう。

app/list/list.component.ts では、最初にギフトのリストを保持するための監視可能オブジェクトを設定しています。 public gifts$: Observable; 次に、コンポーネントの初期化の際に、データベースからリストを読み込みます。

ngOnInit(){
  this.gifts$ = this.firebaseService.getMyWishList();
}

おもしろいのは firebaseService ファイルです。この関数では、リスナーを追加して Firebase Database の Gifts コレクションの変更を監視する監視可能オブジェクト rxjs を返しています。この方法に注目してください。

getMyWishList():Observable {
   return new Observable((observer: any) => { 
       let path = 'Gifts';
         let  any) => {
           this.ngZone.run(() => {
             let results = this.handleSnapshot(snapshot.value);
             console.log(JSON.stringify(results))
              observer.next(results);
           });
         };
         firebase.addValueEventListener(onValueEvent, `/${path}`);
     }).share(); 
   }

このクエリの結果は、次に示す handleSnapshot 関数で処理されます。この関数は、ユーザーがフィルタリングしたデータを _allItems 配列に設定しています。

handleSnapshot(data: any) {
    //empty array, then refill and filter 
    this._allItems = [];
    if (data) {
      for (let id in data) {
        let result = (Object).assign({id: id}, data[id]);
        if(BackendService.token === result.UID){
          this._allItems.push(result);
        }
      }
      this.publishUpdates();
    }
    return this._allItems;
 }

最後に、publishUpdates が呼び出されます。この関数は、新しい項目が先頭に表示されるように、日付でデータを並び替えています。

publishUpdates() {
    // here, we sort must emit a *new* value (immutability!)
    this._allItems.sort(function(a, b){
         if(a.date < b.date) return -1;
         if(a.date > b.date) return 1;
       return 0;
    })
    this.items.next([...this._allItems]);
  }

監視可能オブジェクト $gifts にデータが設定されると、要素の編集や削除を行うたびにリスナーが呼ばれ、フロントエンドが適切にアップデートされます。getMyWishList メソッド内の onValueEvent 関数で ngZone が使われていることに注意してください。これによって、非同期に行われるデータのアップデートに応じて UI が適切にアップデートされます。NativeScript アプリの ngZone の概要については、こちらをご覧ください。

メッセージのリモート設定

もう 1 つの優れた Firebase サービスに「Remote Config」があります。これは、Firebase のバックエンドからアプリをアップデートできる機能です。Remote Config を使うと、アプリの機能のオン、オフを切り替えたり、UI を変更したりできます。ここでは、サンタさんからメッセージを送る機能を追加してみましょう。

app/list/list.html には、次のメッセージ ボックスがあります。 <Label class="gold card" textWrap="true" [text]="message$ | async"></Label> 監視可能オブジェクト message$ は、データリストとほぼ同じ方法で組み込まれていますが、ここではアプリが新しく初期化されるたびに変更が適用されます。

ngOnInit(){
  this.message$ = this.firebaseService.getMyMessage();
}

秘密は、次に示すサービスレイヤ（app/services/firebase.service.ts）にあります。

getMyMessage():Observable{
    return new Observable((observer:any) => {
      firebase.getRemoteConfig({ 
      developerMode: false,
      cacheExpirationSeconds: 300,
      properties: [{
      key: "message",
      default:"Happy Holidays!"
    }]
  }).then(
        function (result) {
          console.log("Fetched at " + result.lastFetch + (result.throttled ? " (throttled)" : "")); 
          for (let entry in result.properties)
            {
              observer.next(result.properties[entry]);
            }
          }
       );
     }).share();
 }

好きなだけ新しいメッセージを発行可能
注: アプリから必要のない高頻度で Remote Config の値を取得すると、Remote Config の利用が制限されてしまう場合がありますので、慎重に開発してください。

写真を撮る

このプロジェクトのおもしろいところは、選んだプレゼントの写真を撮って Firebase Storage に格納できる点でしょう。前述のように、この部分には Camera プラグインを使いました。これでハードウェアの管理が少し楽になります。最初に、app/list-detail/list-detail.component.ts の ngOnInit() メソッドでパーミッション セットを取得し、アプリがカメラデバイスにアクセスできるようにします。

ngOnInit() {
   camera.requestPermissions();
   ...
  }

ユーザーが詳細画面の [Photo] ボタンをクリックすると、イベント チェーンが始まります。最初に呼ばれるのは次のコードです。

takePhoto() {
  let options = {
            width:300,
            height:300,
            keepAspectRatio: true,
            saveToGallery: true
         };
     camera.takePicture(options)
          .then(imageAsset => {
              imageSource.fromAsset(imageAsset).then(res => {
                  this.image = res;
                  //save the source image to a file, then send that file path to firebase
                  this.saveToFile(this.image);
              })
          }).catch(function (err) {
              console.log("Error -> " + err.message);
          });
}

カメラで写真が撮影され、その写真が imageAsset として保存されて画面に表示されます。このイメージはファイルとしてローカルに保存されます。その際に、日付のタイムスタンプに従った名前が付けられます。また、今後の利用に備えて、パスも保存されます。

saveToFile(res){
  let imgsrc = res;
        this.imagePath =
this.utilsService.documentsPath(`photo-${Date.now()}.png`);
        imgsrc.saveToFile(this.imagePath, enums.ImageFormat.png); 
}

[Save] ボタンが押されると、イメージはローカルパス経由で Firebase に送信され、ストレージ モジュール内に保存されます。アプリに返される Firebase のフルパスは、/Gifts データベース コレクションに保存されます。

editGift(id: string){
  if(this.image){
    //upload the file, then save all
    this.firebaseService.uploadFile(this.imagePath).then((uploadedFile: any) => 
{
          this.uploadedImageName = uploadedFile.name;
          //get downloadURL and store it as a full path;
this.firebaseService.getDownloadUrl(this.uploadedImageName).then((downloadUrl: string) => {
this.firebaseService.editGift(id,this.description,downloadUrl).then((result:any) => { 
               alert(result)
             }, (error: any) => {
                 alert(error);
             });
           })
          }, (error: any) => {
            alert('File upload error: ' + error);
          });
        }
        else {
          //just edit the description
          this.firebaseService.editDescription(id,this.description).then((result:any) => {
               alert(result)
            }, (error: any) => {
               alert(error);
            });
          }
        }

このイベント チェーンは一見複雑そうですが、最終的に実行されるのは、Firebase サービス ファイルの中の数行です。

uploadFile(localPath: string, file?: any): Promise {
      let filename = this.utils.getFilename(localPath);
      let remotePath = `${filename}`;
      return firebase.uploadFile({
        remoteFullPath: remotePath,
        localFullPath: localPath,
        onProgress: function(status) {
            console.log("Uploaded fraction: " + status.fractionCompleted);
            console.log("Percentage complete: " + status.percentageCompleted);
        }
      });
  }
  getDownloadUrl(remoteFilePath: string): Promise {
      return firebase.getDownloadUrl({
     remoteFullPath: remoteFilePath})
      .then(
        function (url:string) {
          return url;
        },
        function (errorMessage:any) {
          console.log(errorMessage);
        });
}
editGift(id:string, description: string, imagepath: string){
    this.publishUpdates();
    return firebase.update("/Gifts/"+id+"",{
        description: description,
        imagepath: imagepath})
      .then(
        function (result:any) {
          return 'You have successfully edited this gift!';
        },
        function (errorMessage:any) {
          console.log(errorMessage);
        });
  }

最終的な結果では、ウィッシュリストに表示するギフトの写真と説明の両方がうまく取得できています。これでもうサンタさんは、カイリーのどのアイライナーを買えばいいのかわからないという言い訳はできません。強力な NativeScript と Angular を組み合わせれば、数分で iOS と Android のネイティブ アプリを作ることができます。これに Firebase を追加すれば、アプリのユーザー、イメージ、データを保存する強力な機能を利用でき、さらに端末間でリアルタイムにデータをアップデートすることも可能になります。すばらしいと思いませんか。このアプリは、次のようになります。

ここまで、充実したウィッシュリスト管理アプリの作成に向けて順調に進んできました。しかし、サンタさんに願いごとを伝える最高の方法はまだ模索中と言えるでしょう。次のステップとしては、Mailgun のメールとの統合やプッシュ通知の利用が考えられます。それまでの間、すばらしいクリスマス休暇をお過ごしください。皆さんが Firebase を利用してすてきな NativeScript アプリを作れるようにお祈りします。

NativeScript についてさらに詳しく学びたい方は、http://www.nativescript.org をご覧ください。質問がある方は、こちらから NativeScript の Slack チャンネルに参加してください。

Posted by Khanh LeViet - Developer Relations Team