Firebase Summit で発表されたすべての情報をご覧ください。Firebase を使用してアプリ開発を加速し、自信を持ってアプリを実行する方法を紹介しています。詳細

Web上にCloudStorageリファレンスを作成する

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

ファイルはCloud Storageバケットに保存されます。このバケット内のファイルは、ローカル ハードディスクのファイル システムや Firebase Realtime Database のデータと同様に、階層構造で表示されます。ファイルへの参照を作成することで、アプリはそのファイルにアクセスできるようになります。これらの参照は、データのアップロードまたはダウンロード、メタデータの取得または更新、またはファイルの削除に使用できます。参照は、特定のファイルまたは階層内の上位レベルのノードのいずれかを指すことができます。

Firebase Realtime Databaseを使用したことがある場合、これらのパスは非常によく知られているはずです。ただし、ファイル データは Realtime Database ではなくCloud Storage に保存されます。

参照を作成する

ファイルのアップロードまたはダウンロード、ファイルの削除、またはメタデータの取得または更新を行うには、操作対象のファイルへの参照を作成する必要があります。参照は、クラウド内のファイルへのポインターと考えることができます。参照は軽量であるため、必要な数だけ作成でき、複数の操作で再利用することもできます。

参照を作成するには、 getStorage()を使用して Storage サービスのインスタンスを取得し、そのサービスを引数としてref()を呼び出します。この参照は、Cloud Storage バケットのルートを指しています。

Web version 9

import { getStorage, ref } from "firebase/storage";

// Get a reference to the storage service, which is used to create references in your storage bucket
const storage = getStorage();

// Create a storage reference from our storage service
const storageRef = ref(storage);

Web version 8

// Get a reference to the storage service, which is used to create references in your storage bucket
var storage = firebase.storage();

// Create a storage reference from our storage service
var storageRef = storage.ref();

ref()を呼び出すときに、このパスを 2 番目の引数として渡すことで、ツリー内の下位の場所への参照 ( 'images/space.jpg' ) を作成できます。

Web version 9

import { getStorage, ref } from "firebase/storage";

const storage = getStorage();

// Create a child reference
const imagesRef = ref(storage, 'images');
// imagesRef now points to 'images'

// Child references can also take paths delimited by '/'
const spaceRef = ref(storage, 'images/space.jpg');
// spaceRef now points to "images/space.jpg"
// imagesRef still points to "images"

Web version 8

// Create a child reference
var imagesRef = storageRef.child('images');
// imagesRef now points to 'images'

// Child references can also take paths delimited by '/'
var spaceRef = storageRef.child('images/space.jpg');
// spaceRef now points to "images/space.jpg"
// imagesRef still points to "images"

parentおよびrootプロパティを使用して、ファイル階層を上に移動することもできます。 parentは 1 レベル上に移動しますが、 rootは一番上まで移動します。

Web version 9

import { getStorage, ref } from "firebase/storage";

const storage = getStorage();
const spaceRef = ref(storage, 'images/space.jpg');

// Parent allows us to move to the parent of a reference
const imagesRef = spaceRef.parent;
// imagesRef now points to 'images'

// Root allows us to move all the way back to the top of our bucket
const rootRef = spaceRef.root;
// rootRef now points to the root

Web version 8

// Parent allows us to move to the parent of a reference
var imagesRef = spaceRef.parent;
// imagesRef now points to 'images'

// Root allows us to move all the way back to the top of our bucket
var rootRef = spaceRef.root;
// rootRef now points to the root

child()parent 、およびrootは、それぞれが参照を返すため、複数回連結できます。例外は、 nullであるrootparentです。

Web version 9

import { getStorage, ref } from "firebase/storage";

const storage = getStorage();
const spaceRef = ref(storage, 'images/space.jpg');

// References can be chained together multiple times
const earthRef = ref(spaceRef.parent, 'earth.jpg');
// earthRef points to 'images/earth.jpg'

// nullRef is null, since the parent of root is null
const nullRef = spaceRef.root.parent;

Web version 8

// References can be chained together multiple times
var earthRef = spaceRef.parent.child('earth.jpg');
// earthRef points to 'images/earth.jpg'

// nullRef is null, since the parent of root is null
var nullRef = spaceRef.root.parent;

参照プロパティ

fullPathname 、およびbucketプロパティを使用して参照を検査し、それらが指しているファイルをよりよく理解できます。これらのプロパティは、ファイルの完全なパス、ファイルの名前、およびファイルが保存されているバケットを取得します。

Web version 9

import { getStorage, ref } from "firebase/storage";

const storage = getStorage();
const spaceRef = ref(storage, 'images/space.jpg');

// Reference's path is: 'images/space.jpg'
// This is analogous to a file path on disk
spaceRef.fullPath;

// Reference's name is the last segment of the full path: 'space.jpg'
// This is analogous to the file name
spaceRef.name;

// Reference's bucket is the name of the storage bucket where files are stored
spaceRef.bucket;

Web version 8

// Reference's path is: 'images/space.jpg'
// This is analogous to a file path on disk
spaceRef.fullPath;

// Reference's name is the last segment of the full path: 'space.jpg'
// This is analogous to the file name
spaceRef.name;

// Reference's bucket is the name of the storage bucket where files are stored
spaceRef.bucket;

参照に関する制限

参照パスと名前には、有効な Unicode 文字の任意のシーケンスを含めることができますが、次のような特定の制限が課されます。

  1. UTF-8 エンコードの場合、 reference.fullPathの合計の長さは 1 ~ 1024 バイトである必要があります。
  2. キャリッジ リターンまたはライン フィード文字はありません。
  3. #[]* 、または?の使用は避けてください。これらは、 Firebase Realtime Databasegsutilなどの他のツールではうまく機能しないためです。

完全な例

Web version 9

import { getStorage, ref } from "firebase/storage";

const storage = getStorage();

// Points to the root reference
const storageRef = ref(storage);

// Points to 'images'
const imagesRef = ref(storageRef, 'images');

// Points to 'images/space.jpg'
// Note that you can use variables to create child values
const fileName = 'space.jpg';
const spaceRef = ref(imagesRef, fileName);

// File path is 'images/space.jpg'
const path = spaceRef.fullPath;

// File name is 'space.jpg'
const name = spaceRef.name;

// Points to 'images'
const imagesRefAgain = spaceRef.parent;

Web version 8

// Points to the root reference
var storageRef = firebase.storage().ref();

// Points to 'images'
var imagesRef = storageRef.child('images');

// Points to 'images/space.jpg'
// Note that you can use variables to create child values
var fileName = 'space.jpg';
var spaceRef = imagesRef.child(fileName);

// File path is 'images/space.jpg'
var path = spaceRef.fullPath;

// File name is 'space.jpg'
var name = spaceRef.name;

// Points to 'images'
var imagesRef = spaceRef.parent;

次に、Cloud Storage にファイルをアップロードする方法を学びましょう。