Firebase Demo Day 2024 の日程が決定しましたユーザーに愛される最新の AI 搭載アプリを構築して実行する方法を学びましょう。詳細

ウェブで Cloud Storage 参照を作成する

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

Firebase Realtime Database を使用したことがある場合は、これらのパスになじみがあると思いますが、ファイルデータの格納場所は Realtime Database ではなく Cloud Storage になります。

参照を作成する

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

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

Web

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);storage_create_ref.js

Web

// 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();create-reference.js

ツリーの下位（例: 'images/space.jpg'）への参照を作成できます。これを行うには、ref() を呼び出すときに、このパスを 2 番目の引数として渡します。

Web

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"storage_create_ref_child.js

Web

// 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"create-reference.js

参照を使って階層内を移動する

parent プロパティと root プロパティを使用して、ファイル階層を上に移動することもできます。parent は 1 つ上のレベルに移動し、root は最上位に移動します。

Web

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 rootstorage_navigate_ref.js

Web

// 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 rootcreate-reference.js

child()、parent、root を複数つなげて参照を返すことができます。例外は root の parent で、これは null です。

Web

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;storage_navigate_ref_chain.js

Web

// 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;create-reference.js

参照のプロパティ

fullPath、name、bucket プロパティを使用して参照を調べ、参照がポイントしているファイルの詳細を知ることができます。これらのプロパティは、ファイルのフルパス、ファイル名、ファイルが格納されているバケットを取得します。

Web

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;storage_ref_properties.js

Web

// 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;create-reference.js

参照の制約事項

参照のパスと名前には、有効な Unicode 文字を任意の順序で含めることができますが、次のような一定の制約があります。

UTF-8 でエンコードする場合、reference.fullPath の全体の長さを 1～1,024 バイトにする必要があります。
改行またはラインフィード文字は使用できません。
#、[、]、*、? は使用しないでください。これらの文字は、Firebase Realtime Database や gsutil などの他のツールではうまく機能しません。

例

Web

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;storage_ref_full_example.js

Web

// 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;create-reference.js

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