すべてのカテゴリ

React と Firebase でブログサービス〜ファイルのアップロード編React と Firebase を組み合わせて利用する例として、ブログサービスを作ってみる事にしました。一度に全部紹介するのは難しいので連載という形で紹介していきます。最初は、ブログの記事をインターネット上にアップロードする機能から紹介していきます。まず最初は投稿の機能ブログサービスで必要になる機能に、記事を投稿する機能が必要になります。 今回は、ブログの記事の原稿となるファイルをインターネットにアップロードする機能について紹介します。 Firebase を利用する場合、データベースに記事を保存する方法もありますが、今回は記事の原稿のファイルそのものを Firebase のストレージに保存する方法を採用しようと考えています。どのようなファイルをブログの原稿にするかを決める必要がありますが、まずは、ファイルを Firebase のストレージに保存する機能が必要です。この記事では、Firebase のストレージにファイルを指定したファイルをアップロードする機能について考えてみました。ファイルの指定まずは、アップロードするファイルを選択する機能が必要です。 ファイルを選択するフォームを作成します。HTML の「input」タグを使ってファイルを選択して、ファイルをアップロードする処理を呼び出すような UI です。 ファイルは、Firebase ストレージの「test」というフォルダの下にアップロードするようになっています。(post.tsx)の例export default () => {  retu

投稿した記事の一覧を表示するには？ブログの記事を 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      .listA

セキュリティルールに必須！〜利用者の特定Firebase のセキュリティルールを設定する上で必要なポイントは「人」「場所」「出来る事」と言う話を紹介しました。その中の一つの「人」を区別するには、ユーザー認証（ログイン）が必要になります。一見シンプルなログインですが区別の仕方によって作り方も使い方も変わってきます。この記事では、ユーザー認証をどの様に利用するかを紹介します。どのような「区別」が必要か？ユーザー認証（ログイン）を利用すれば、使っている人が誰なのかを特定することができます。Firebase のセキュリティルールを設定する上で利用者を区別する必要があるので、ユーザー認証はある意味必須です。しかし、実際にどの様に利用するかで実際のサービスの実装は変わってきます。前回の記事でも紹介していますが、利用者の区別の方法は幾つかあります。それによってユーザー認証（ログイン）の処理が必要な場所も変わってきます。もちろん、開発するサービスやアプリの機能によってそのやり方も大きく変わってしまいます。そこで、この記事では現在紹介している「ブログサービス」を例に考えてみます。ブログサービスの場合はユーザー認証は不要！？Firebase のセキュリティルールを設定するためには、利用者の区別ができれば良いわけです。従って、ブログサービスの場合は、基本は「ユーザー認証」は行わないと言う方法が一般的に使われます。 ユーザー認証を行わないでどうやって区別するかという事ですが、あくまで「基本的に」行わないと言う事です。つまり、一般の利用者は「何もしない＝ユーザー認証をしない」と言う方法で区別します。一方

Firebase のセキュリティルールは「人・場所・できる事」Firebase のセキュリティルールは一見複雑そうに見えますが、基本は「人」、「場所」、「出来る事」をまとめる事です。この記事では、Firebase のセキュリティルールの基本を紹介します！Firebase のセキュリティールールとは何か？Firebase を Web ブラウザ（フロントエンド）から利用する際には、Firebase のセキュリティルールを設定する事が必須になります。ところで、このセキュリティルールとは何かご存知ですか？まずは、そこから紹介します。 セキュリティルールは一言で言えば、「誰がどこで何をしていいかを決める」事です。従って、セキュリティルールを設定する上でのポイントは：＊　誰（人）＊　どこ（場所）＊　出来ること（何をするか）この三つを決めれば良い事になります。人を特定する誰がどこですか何をして良いかを決めるためには、最初に必要な事は「人を特定」する必要があります。 Web のアプリやサービスで人を特定する方法は、基本的には「ユーザ名」で区別しています。特定のユーザー名のパスワードを知っていればその人と見做すという仕組みです。これを、ユーザー認証機能とかログイン（サインイン）機能と呼んでいます。Firebase の場合は、大きく三つの方法があります。Firebase コンソールにアクセスできる人（管理者）とそれ以外の人ログインしている人としていない人ユーザー認証をして個別のユーザーとして区別Firebase のコンソールで必要な操作が間に合うのであれば、特にユーザー認証（ログイン）の機能を作る

Firebase のデータベースでファイルの情報を管理！Firebase のストレージにブログの投稿を保存してブログのサービスの基本の準備ができました。更に使いやすいサービスにするために Firebase のデータベースの Cloud Firestore のデータベースに投稿の情報を入れておくと、より効率的に投稿の情報が取得できます。Firebase のストレージに保存したファイルからのデータの取得Markdown にブログの投稿のメタデータを埋め込んで置くと、そこから投稿の情報が取得できます。この情報を利用すれば、投稿の詳細を表示することが可能になります。しかし、この方法では情報を取得するには非常に手間がかかります。主な手順は以下の通りです。1. Firebase ストレージに保存されているファイル（フォルダ）の一覧を取得2. ファイル（フォルダ）の一覧を元にファイルの中身を取得3. ファイルの中身からファイルのメタデータ（ブログの情報）を取得というステップでブログのデータを取得します。問題は、実際にブログの投稿を表示しない場合でもファイルの中身を取得する必要があります。要は不要なアクセスが増える事になります。投稿時に必要なデータを取得しておく不要なアクセスを最小限にするために、ブログの原稿を投稿する際に Markdown のファイルに埋め込んだメタデータを取得して Firebase のデータベースである Cloud Firestore に情報を保存しておきます。 このようにする事で、ブログの原稿の情報は、Cloud Firestore から取得できるので、毎回投稿の原稿全体

ブログの原稿に Markdown は便利Firebase ストレージを利用したブログサービスでは、Firebase ストレージに投稿したブログの投稿を表示する仕組みにしています。Web ブラウザで表示させるには、HTML が便利ですが、Markdown は更に便利な記述方法です。この記事では、Markdown を利用したブログの記事作成について紹介します。Markdown とは？Markdown は、GitHub のドキュメントなどでも利用されている、簡易型のマークアップ言語で生の原稿でも HTML などに比べると読みやすく、原稿の作成も簡単にできます。Markdown の記述から簡単に HTML に変換するためのモジュールも各種プログラミング言語で作成されているので、HTML で記述するより応用範囲が広く、今回紹介するブログサービスで利用することにしました。前回までに、HTML で Firebase ストレージに投稿したブログの記事を読み込んで表示させるまでを紹介しましたが、簡単な変更で Markdown で投稿した記事を HTML に変換できるので、ほぼ同じ仕組みで Markdown の投稿をサポートする事ができます。便利なのは、プログラムなどを引用するのも、簡単にできる点です。 HTML の場合、HTML で利用している文字は別の文字列に変換するする必要があるなど、プログラムを HTML の記述に埋め込むには少し手間がかかります。「<」や「>」などは良い例です。Markdown ならばほぼコピー＆ペーストで済みます。Markdown を HTML に変換するに

選択した HTML ファイルを表示するには？Firebase のストレージに投稿したブログの原稿の一覧から選択した記事を表示する方法を紹介します。今回は、HTML 形式のファイルを投稿して、それを表示する方法を紹介します。ブラウザが表示できるのは HTML 形式が基本！Web ブラウザで表示する場合には、基本は HTML 形式のファイルが一番簡単に表示できます。 この記事では、まず HTML 形式のファイルを Firebase のストレージに投稿して、その一覧を表示して、その中から選択したファイルを表示する事を目標にします。まずは前提条件として、ファイルの一覧をテーブルに表示してファイルを選択できるようにしているとします。 UI の記述例は、このような形でテーブル一覧を表示します。 「files」が、Firebase ストレージの「リファレンス」の配列です。<table className="table table-hover">  <thead className="table table-dark">    <tr>      <th>File Name</th>      <th></th>    </tr>  </thead>  <tbody>    {folders.map((file: firebase.storage.Reference) => (      <tr key={file.name}>        <td&

ブログサービスの管理機能と一般機能の違いFirebase のストレージからファイルの一覧を取得する機能について考える場合、管理機能として利用する場合と、一般の利用者が利用する場合では作り方を変えた方が良い場合があります。この記事では、機能の実装のポイントについて利用者の立場で考えた例を紹介します。同じ機能でも色々ある実装方法プログラミングでは、同じ機能でもその実現方法（実装方法）は一つではなく、いくつかの方法がある場合が殆どです。その場合どの実現方法が一番いいのか迷う場合も多いと思います。難しいのは、同じ機能でもベストな方法は同じでは無い場合が多く何を基準に選んだら良いか迷ってしまう点にあるかと思います。今回は、Firebase のストレージとデータベース（Cloud Firestore）を利用してブログサービスを作成した場合について考えてみます。 その中でも、Firebase のストレージに保存されているファイルの一覧を表示する機能について検討した例を紹介します。前提として、ブログの記事を、Firebase のストレージにアップロードして、その記事を Web ブラウザで表示するようなサービスを考えます。ブログサービスの基本機能については既に概要を紹介しているので基本的な仕組みについてはそちらをご覧ください。この記事でもファイルの一覧表示について紹介しています。別の記事では、Firebase のストレージに保存しているファイル情報を Firegbase のデータベースにも保存して、通常はそちらからデータを取得する用法を紹介しています。以前の記事で紹介していますが、Firebas