o2-upload-to-fbs Angular2によるFirebase Storageへのアップロードツール

o2-upload-to-fbsは、AngularFire2を利用して、Firebase Storageにファイルをアップロードするためのツールです。

動画による解説
https://youtu.be/4op1F6yetJM

概要
- o2-upload-to-fbsは、AngularFire2を利用して、Firebase Storageにファイルをアップロードするためのツールです。

• ファイル選択ボタンがサポートされています。

• Firebase Storageの中のどのディレクトリにアップロードするかの指定ができます。

  ディレクトリの指定は、変数を使用することができ、このことにより認証後のユーザIDをディレクトリとして指定することが容易となります。

必要環境

• Node.js
• TypeScript2
• Angular2
• AngularFire2
• Firebase

インストール方法
　以下のようにnpmによりインストールできます。

$ npm install o2-upload-to-fbs --save

Angular-CLIからの利用方法

Angular-CLIのインストール

$ npm install -g angular-cli

プロジェクトの作成

$ ng new sample-upload (Your project name)
$ cd sample-upload 

プロジェクトの稼働の確認

　インストールが終了しましたら、以下のようにローカルサーバを起動します。

$ ng serve

するとローカルのhttpサーバが起動されますので、ブラウザから以下のアドレスにアクセスし、サンプルプログラムを起動します。

• "http://localhost:4200"
  

正常に起動した場合には、以下のような初期画面が表示されます。

• 初期画面

ローカルサーバの停止

ここで、Ctrl+C を押した後 y+リターン により、ローカルサーバを一旦停止します。

o2-upload-to-fbs のインストール

次に目的のo2-upload-to-fbsを以下のようにインストールします。
bash
$ npm install o2-upload-to-fbs --save


Firebaseの認証データの確認

本プログラムの稼働をチェックするためには、当然のことながらFirebaseのアカウント並びにプロジェクトが必要になります。まだ、プロジェクトを作成されていない場合には、テスト用のプロジェクトを作成しておいてください。

https://www.firebase.com/login/

認証用に必要なデータは以下の通りです。

• apiKey
• authDomain
• databaseURL
• storageBucket
• messagingSenderId

Firebaseのコンソール画面から、Overviewページを選択し、ウェブアプリにFirebaseを追加アイコンをクリックします。

すると、認証用のConfigデータが表示されますので、そのデータをコピーしておきます。

app.module.ts の修正

次にブラウザからプログラムのディレクトリに戻り、src/appに移動します。

$ cd src/app

このディレクトリ内に app.module.ts がありますので、これを以下のように修正します。また、以下のfirebaseConfigにおいては、上記でコピーした認証用データを貼り付けます。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

  // 追加 Start --------------------------------------------

import { AngularFireModule } from 'angularfire2';       
import { O2UploadToFbsComponent } from 'o2-upload-to-fbs';  

export const firebaseConfig = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxx.firebaseapp.com",
    databaseURL: "https://xxxxxxxxxxxxxxxxxx.firebaseio.com",
    storageBucket: "xxxxxxxxxxxxxxxxxx.appspot.com",
    messagingSenderId: "xxxxxxxxxxxxxxxxxx"

};
  // 追加 End --------------------------------------------


@NgModule({
  declarations: [
    O2UploadToFbsComponent,  // <= 追加
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AngularFireModule.initializeApp(firebaseConfig)  // <= 追加

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.htmlの修正

このディレクトリ内に app.component.html がありますので、これを以下のように修正します。

<h1>
  {{title}}
</h1>
<!-- 追加 Start -->

<o2-upload-to-fbs [fbsBasePath] = "'images/'" [btnSelectText] = "'Browse'"></o2-upload-to-fbs>

<!-- 追加 End -->

ここでは２つのパラメータを指定しています (fbsBasePath and btnSelectText)

• fbsBasePath : Firebase Storage内のアップロード先 (eg. 'images/' --> 'xxxxxxxx.appspot.com/images/')
• btnSelectText : アップロードする際に使用するファイル選択ボタンのタイトル

Firebase Storage Ruleの確認

このプログラムでは、認証機能が実装されていないので、Firebase Storage内でのテストアップロード先のパスを非認証ユーザであってもアクセス可能としておく必要があります。

そのためには、Firebase Storageにおいてルールを設定しておく必要があります。

Firebaseコンソールから,Storage ページを表示し、さらにRules タブをクリックします。

本プログラムでは、デフォルトでアップロード先を"images /"としているので"images /"ディレクトリのアクセス権を以下のように変更します。なお、your_project_name はあなたのプロジェクト名に変更してください。

service firebase.storage {
  match /b/your_project_name.appspot.com/o {
    match /images/{allPaths=**} {
      allow read, write;
    }
  }
}

ローカルサーバの再起動

以下のようにローカルサーバを再起動します。

$ ng serve

すると以下のようにブラウザから http://localhost:4200 にアクセスすると、新たにBrowseボタンが追加されているのがわかります。このボタンをクリックします。

Firebase Storageにアップロードしたいファイルを選択します。

アップロードの進行状況などを確認したい場合には、Chromeなどのブラウザからコンソール画面を開き確認してください。

次にブラウザでFirebase Storageページを開き、さらにFileタブをクリックします。すると"images/"ディレクトリが表示されますので、そのディレクトリ名をさらにクリックします。

すると、あなたのローカルコンピュータからFirebase Storageにアップロードしたファイルが表示されます。

バージョン

• o2-upload-to-fbs : 0.1
• Angular2 : 2.0.0
• TypeScript : 2.0.2
• Angularfire2 : 2.0-beta,
• Firebase : 3.6

参考文献

• "ウェブでファイルをアップロードする",
  https://firebase.google.com/docs/storage/web/upload-files?hl=ja

• "Angular2 / Ionic2 / How to upload and get file or image from firebase storage" ,2016/11/16,by Muhammet Bakan,
  http://www.muhammetbakan.com/angular2-ionic2-how-to-upload-and-get-image-from-firebase-storage/

• "Firebase storage and angularfire2 - Stack Overflow",
  http://stackoverflow.com/questions/38593188/firebase-storage-and-angularfire2

• "feat(storage): upload, read, and process* files #213",2016/6/8,
  https://github.com/angular/angularfire2/issues/213

変更履歴

• 2017.2.19 version 0.1 uploaded

Copyright

copyright 2017 by Shuichi Ohtsu (DigiPub Japan)

License

MIT © Shuichi Ohtsu