Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

t_furu
1980年鹿児島県霧島市生まれ 東京の中小IT企業にて物流システム開発に従事。その他通信関連企業経験を経てフリーランスとなり、ソフトウェアだけでなくハードウェア系込みのサービス開発に取り組み、現在に至る。 鹿児島初の モノづくりスペース TUKUDDO を運営中してましたが、移転閉店。 現在は 秋葉原にて ベンチャー企業に所属して Webサービスを開発中。
http://tf-web.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away