ウェブでファイルをダウンロードする

Firebase Storage を使用すると、デベロッパーは Firebase によって提供、管理される Google Cloud Storage バケットから迅速かつ容易にファイルをダウンロードできます。

参照を作成する

ファイルをダウンロードするには、まずダウンロードするファイルへの Firebase Storage 参照を作成します。

参照は、子パスをストレージ ルートに追加して作成するか、または Firebase Storage 内のオブジェクトを参照している既存の gs:// または https:// URL から作成することができます。

// Create a reference with an initial file path and name
var storage = firebase.storage();
var pathReference = storage.ref('images/stars.jpg');

// Create a reference from a Google Cloud Storage URI
var gsReference = storage.refFromURL('gs://bucket/images/stars.jpg')

// Create a reference from an HTTPS URL
// Note that in the URL, characters are URL escaped!
var httpsReference = storage.refFromURL('https://firebasestorage.googleapis.com/b/bucket/o/images%20stars.jpg');

URL 経由でデータをダウンロードする

ファイルのダウンロード URL は、ストレージ参照で getDownloadURL() メソッドを呼び出して取得することができます。

storageRef.child('images/stars.jpg').getDownloadURL().then(function(url) {
  // `url` is the download URL for 'images/stars.jpg'

  // This can be downloaded directly:
  var xhr = new XMLHttpRequest();
  xhr.responseType = 'blob';
  xhr.onload = function(event) {
    var blob = xhr.response;
  };
  xhr.open('GET', url);
  xhr.send();

  // Or inserted into an <img> element:
  var img = document.getElementById('myimg');
  img.src = url;
}).catch(function(error) {
  // Handle any errors
});

CORS の設定

ブラウザで直接データをダウンロードするには、Firebase Storage バケットに対してクロスオリジン アクセス(CORS)を設定する必要があります。設定は gsutil コマンドライン ツールで行えます。ツールはここからインストールできます。

ドメインベースの制限を望まない場合は(最もよくある状況)、次の JSON を cors.json という名前のファイルにコピーします。

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

gsutil cors set cors.json gs://<your-firebase-storage-bucket> を実行して、これらの制限をデプロイします。

詳細については、 Cloud Storage のドキュメントをご覧ください。

エラーを処理する

ダウンロード時にエラーが発生する理由として、ファイルが存在しない、目的のファイルのアクセス権がユーザーにないなど、たくさんの理由が考えられます。エラーについて詳しくは、このドキュメントのエラーの処理のセクションをご覧ください。

ダウンロードとエラー処理の完全な例を以下に示します。

// Create a reference to the file we want to download
var starsRef = storageRef.child('images/stars.jpg');

// Get the download URL
starsRef.getDownloadURL().then(function(url) {
  // Insert url into an <img> tag to "download"
}).catch(function(error) {
  switch (error.code) {
    case 'storage/object_not_found':
      // File doesn't exist
      break;

    case 'storage/unauthorized':
      // User doesn't have permission to access the object
      break;

    case 'storage/canceled':
      // User canceled the upload
      break;

    ...

    case 'storage/unknown':
      // Unknown error occurred, inspect the server response
      break;
  }
});

Firebase Storage に保存されているファイルのメタデータを取得、更新することもできます。

フィードバックを送信...