Edited at

Firebase入門 - ファイル保存&管理機能を利用する

Firebaseを使ってファイル保存&管理機能を簡単に実装するための手順をまとめてみました。


Storage

サーバ側のコードを使わずにユーザーが生成した写真や動画などのコンテンツを保管、提供する事ができる機能です。

今回はファイルアップロードとダウンロード(参照)を試してみます。


ファイルをダウンロード(参照)してみる。

Firebaseコンソールからアップロードした画像ファイルを参照して画面に表示できるようにしてみます。


  1. Firebaseコンソールを開き Storage機能を追加したいプロジェクトを選びます。
    Firebaseコンソール

  2. 左メニュー Storage を選択する。
    スクリーンショット 2017-03-08 16.14.09.png

  3. ファイルアップロードボタンから適当な画像をアップロードする。
    sample.png


  4. Storage バケット URL を確認する。
    スクリーンショット 2017-03-08 16.30.51.png



  5. "ウェブアプリに Firebase を追加"を選択して表示される JavaScript を index.htmlに追加する
    スクリーンショット 2017-03-02 13.58.25.png

    <script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
    
    <script>
    // Initialize Firebase
    var config = {
    apiKey: "あなたのAPIキー",
    authDomain: "myfirstfirebase(的な名前).firebaseapp.com",
    databaseURL: "https://myfirstfirebase-(的な名前).firebaseio.com",
    storageBucket: "myfirstfirebase-(的な名前).appspot.com",
    };
    firebase.initializeApp(config);
    </script>



  6. htmlにStorageを利用する為のコードを追加していきます。
    画像を表示するための領域をhtmlに追加します。

    <div id="imgSample" style="display:block;width:200px;height:200px;background-color:#c0c0c0;"></div>
    



  7. ストレージバケットを Firebase SDK の構成に追加する必要があります。
    storageBucket: 'XXXXXXXXX.appspot.com' の部分です。

    var config = {
    
    apiKey: '<your-api-key>',
    authDomain: '<your-auth-domain>',
    databaseURL: '<your-database-url>',
    storageBucket: 'XXXXXXXXX.appspot.com'
    };
    firebase.initializeApp(config);



  8. アップロードした画像を参照するためのコードを追加します。

    //ストレージのルートのリファレンスを取得
    
    var storageRef = firebase.storage().ref();
    //ストレージのルートにあるsample.pngのリファレンスを取得
    var imgSample = storageRef.child('sample.png');



  9. htmlがブラウザにロードされたあと、ストレージからダウンロードして画面に表示してみるコードを追加します。

    window.onload = function() {
    
    //htmlロード完了したらストレージの画像を表示してみる
    imgSample.getDownloadURL().then(function(url){
    document.getElementById("imgSample").style.backgroundImage = "url("+url+")";
    }).catch(function(error) {
    // Handle any errors
    console.log(error);
    });
    };


  10. ローカル環境で実行して内容を確認してみる
    firebase serve
    表示される URLをブラウザで開く
    http://localhost:5000


  11. セキュリティルールがデフォルトの場合表示されない事を確認する。
    403エラーがjavascriptコンソールに出力されている筈です。


  12. Firebaseコンソールを開き Storageのルールタブを選択する。
    ログインせずに参照できるルールを設定してみます。
    allow read;を追加
    スクリーンショット 2017-03-08 17.19.14.png


  13. もう一度ローカル環境で実行して表示してみる。
    画像が表示される筈。


ここまでのコードでストレージのファイルを参照する処理を実装することができました。

セキュリティルールの部分は少しわかりにくいかもしれませんが、この機能のおかげで簡単にユーザー毎の画像のアクセス権の制御などの実装もできるようです。


ファイルをアップロードしてみる

ファイルをアップロードするコードを追加して表示できるようにしてみます。



  1. <input type="file">をhtmlに追加します。

    <input type="file" id="btnUpload" value="アップロード">
    



  2. File および Blob API 経由でファイルを受け取って Storage にアップロードするこコードを書きます。

     //ストレージへアップロードする
    
    var btnUploadChange = function(ev){
    //ストレージへアップロードするファイルのパスを生成する
    var uploadRef = storageRef.child('upload.png');
    const f = ev.target.files[0];
    uploadRef.put(f).then(function(snapshot) {
    console.log('Uploaded a blob or file!');

    //アップロードしたファイルを表示してみる
    uploadRef.getDownloadURL().then(function(url){
    console.log("imgSample "+url);
    document.getElementById("imgSample").style.backgroundImage = "url("+url+")";
    }).catch(function(error) {
    // Handle any errors
    console.log(error);
    });

    });
    };
    //htmlロードが完了したらボタンにイベントを設定
    window.onload = function() {
    document.getElementById("btnUpload").onchange = btnUploadChange;
    };



  3. ローカル環境で実行して内容を確認してみる
    firebase serve
    表示される URLをブラウザで開く
    http://localhost:5000


  4. Facebookログイン前だとファイルがアップロードできない事を確認する
    javascriptコンソールに 403エラーが表示されている筈。


  5. Facebookログインをした後、ファイルをアップロードすると表示される事を確認する。


  6. デプロイを実行する
    firebase deploy --only hosting


  7. デプロイ成功したら ブラウザで開いてアップロードできるか確認してみる.
    firebase open hosting:site


サーバ側のコードをまったく書かずに、ファイルアップロードの実装までできました。セキュリティルールのおかげで、ユーザー認証していない状態だとアップロードできない等の仕組みも簡単に実装する事ができます。


参考

Firebase Storage