投稿した記事の一覧を表示するには？
ブログの記事を Firebase のストレージに投稿する方法を紹介しました。この記事では、Firebase のストーレージに投稿した記事の一覧を表示する方法を紹介します。
Firebase のストレージの機能を使う
Firebase のストレージのフォルダに投稿した、ブログの記事の原稿の一覧を表示するには、Firebase のストレージの機能を使うと簡単に実現できます。こうした、機能は Firebase のストレージの標準機能として予め準備されているので、特別に自分でコードを書く必要はありません。
Firebase のストレージの機能を使ってフォルダのファイルの一覧を表示するプログラムの例です。
export interface StorageList {
folders: Array<firebase.storage.Reference>;
files: Array<firebase.storage.Reference>;
}
export function listAllFiles(path: string): Promise<StorageList | undefined> {
return new Promise((resolve) => {
const storageRef: firebase.storage.Reference = firebase
.storage()
.ref()
.child(path);
storageRef
.listAll()
.then((res) => {
const folderRefs: Array<firebase.storage.Reference> = res.prefixes;
const itemRefs: Array<firebase.storage.Reference> = res.items;
const storageList: StorageList = {
folders: folderRefs,
files: itemRefs,
};
resolve(storageList);
})
.catch((error: any) => {
resolve(undefined);
});
});
}
Firebase のストレージのフォルダには、ファイルとサブフォルダが存在する可能性があります。 Firebase のストレージの API で用意されている「listAll()」を利用するとこの両方を取得する事ができます。 「listAll()」が返す応答の「prefixes」がサブフォルダのリストで、「items」がファイルのリストになっています。
どちらも、Firebase ストレージのリファレンスの配列という形で取得できます。
投稿の数が増えた場合には。。。
この API は指定したフォルダの全てのファイルとサブフォルダを取得します。 ファイルの数が少ない場合にはこの API で問題ではないのですが、ファイルの数が増えてくると処理の時間も増えますし、データの量も増えるので沢山のメモリが必要になります。
Firebase のドキュメントを読むと記述されていますが、ファイルの数が多い場合には、必要な数を指定して必要な数のファイルを取得するようにすると、処理の時間や必要なメモリの使用量を抑えることができます。
数を指定してファイルを取得する例です
export function listFiles(
path: string,
number_of_listing: number,
next: string
): Promise<firebase.storage.ListResult> {
return new Promise((resolve) => {
const storageRef: firebase.storage.Reference = firebase
.storage()
.ref()
.child(path);
if (next !== "") {
storageRef
.list({ maxResults: number_of_listing, pageToken: next })
.then((page: firebase.storage.ListResult) => {
resolve(page);
});
} else {
storageRef
.list({ maxResults: number_of_listing })
.then((page: firebase.storage.ListResult) => {
resolve(page);
});
}
});
}
最初に取得したファイルの続きを取得したい場合は、「page.nextPageToken」を指定して取得すると続きのファイルのリストを取得できます。
実際に表示する場合でも、必要以上にリストを表示するよりは、必要な数だけを取得して表示した方が見やすい場合が多いのでいくつかの数に分けて取得する方が便利です。
表示させたファイルをどう利用するか？
投稿したブログの記事を管理する場合、削除したりする必要があります。そのために一覧の表示ができると便利というのがファイルの一覧を表示する一つの理由です。こうした機能が必要なのは、ブログの運営者（管理者）という事になります。
一般の利用者は投稿された記事を読む事が目的になりますので、記事の一覧から読みたい記事を表示させて閲覧するというような機能が必要になります。今回の記事では、記事の一覧を表示するのが目的ですので、記事の表示については次回の記事に回すことにします。
次回以降の話になりますが、必要な UI は、記事の一覧を表示して、記事を選択できるような UI と、記事を選択した後の処理という事になります。
ファイルの形式は？
次回までに考える必要がある項目は、ファイルを選択した後にどのように記事を表示させるかという事になります。
つまり、投稿する記事のファイルの形式によって表示のさせ方が変わってきます。 今回作成しているのは、Web サービスですので、表示には基本的に Web ブラウザを利用します。 従って、HTML というのがまずは最初の選択肢になります。
まとめ
この記事では、Firebase ストレージに投稿したブログの記事の一覧を表示させるやり方を紹介しました。 基本的なやり方は Firebase のドキュメントに書かれていますが、具体的なコードを紹介しました。
実際には、記事の一覧を表示するだけではなく、記事を選んで表示させる機能が必要になります。 こうした、具体的なやり方は次回に紹介予定です。 お楽しみに！
