すべてのカテゴリ

Markdownのメターデータの復旧処理Firebase のデータベース Firestore に Markdown のメタデータを保存して管理している場合、Firestore のドキュメントを削除すると、見かけ状はファイルが無いように見えます。実際に Firebase のストレージに保存したファイルを削除せずに Web サービスの利用者から見えなくする事が可能です。この記事では、Firebase のストレージのファイルは触らずに、Firestore を利用して管理する場合の詳細を紹介します。大切なバックアップと復旧処理Markdown で書いた記事の原稿を、Firebase のストレージにおいて、Web 上で記事を公開する、ブログのようなサービスを提供する場合を考えてみます。 開発中などは、プログラムのバグなどで、データベースのデータを壊してしまうこともありますし、実際の運用でも、潜在的な不具合でデータベースが壊れれしまうことも考えられます。このような事態に備えてバックアップはひつようですが今回紹介している事例では、バックアップを簡単にすると同時に、復旧の方法も簡単に実装できます。通常の Web サービスでは、基本的に Firebase のストレージのファイルの削除は行わないようにします。 こうすることで、何らかの理由で、Firebase のデータベース（Firestore)が壊れれてしまった場合の復旧を簡単に行う事ができます。 バックアップも、アップロード時にオリジナルのファイルを PC などに残しておけば、Web 上のデータはバックアップしないでも、データの復旧が可能になり

Vue と Firebase によるブログサービスの管理ページの例Markdown で記事を書いて、Firebase を使ってブログサービスをする Web サービスを Vue で作成する場合の、管理ページの実施例を紹介します。この記事では、特に Markdown のメタデータを Firestore で管理する場合の例を紹介します。投稿記事の一覧表示投稿記事の一覧を表示する際のデータを Firebase のデータベースである、Firestore に保存してサービスを提供する場合、一覧の表示は、Firestore から取得するデータで実現可能です。 実際に、投稿の中身を表示する際は、Firebase のストレージのファイルからデータを読む必要がありますが、それ以外は、Firestore のデータだけで対応できます。つまり、一般の利用者（ブログの読者）が利用する基本機能は二つという事になります。＊　投稿記事の一覧を見る＊　投稿記事の一覧から選択した記事の中身を見る　投稿記事の一覧の情報に、Firebase のストレージにあるファイルへのリンク（URL）を入れておけば、記事を選択した際に、リンク情報（URL）も同時に取得できるので、それを使ってファイルの中身を取得する処理があれば基本機能はカバーできます。管理に必要な機能は？では、サービスの管理者として必要な機能は、＊　記事の投稿＊　表示する記事の管理＊　投稿の削除　という事になります。記事の投稿は、Markdown で書かれたファイルを Firebase のストレージに保存する事と、Markdown のメタデータを抜き出して、Fire

Firestoreを利用したブログサービスの実装例この記事では、Firestore を利用して、投稿記事のメタデータを保存した場合の実装例を紹介します。今回紹介する方法では、投稿記事を表示する場合以外は、Firestore からメタデータを取得して表示するため、投稿数が多くなっても素早い記事の一覧表示が可能です。投稿記事の一覧の取得Firebase のデータベースである、Firestore から投稿記事のメタデータを取得します。 投稿記事のメタデータは、記事の投稿時に、Firestore のデータベースに保存して、オリジナルの Markdown のファイルは、Firebase のストレージに保存してある前提です。 メタデータを保存している Firestore のコレクションは「sample」です。import {  collection,  doc,  onSnapshot,  query,} from "firebase/firestore";import { db } from "../lib/firebase";getList() {      const my_query = query(collection(db, "sample"));      const unsub = onSnapshot(my_query, (query_snapshot) => {        this.docs = [];        for (let i = 0; i < query_snapshot.size; i++) {          const doc =

Markdown のメタデータを Firestore に置く利点投稿の原稿を Markdown で書いて、メタデータを Firestore に置くと幾つかの利点があります。この記事では、ブログの実装に Firestore が有利な理由を紹介します。Firebase のストレージのみで実装する場合最初に、Firebase のストレージを中心に実装する場合を考えてみます。 この方法は、シンプルでプログラムも簡単です。ファイルの一覧の表示には、Firebase のストレージのホルダにあるファイルの情報を取得して表示します。単純にファイルの「名前」だけをリストする場合には、この方法はシンプルで優れた方法です。一方で、Markdown に埋め込まれたメタデータを使ってファイルの詳細（タイトルや概要）などを一覧に表示する場合は少し話が違ってきます。理由は、メタデータを取り出すためにには、ファイルの中身のデータにアクセスする必要があるからです。 そのためにには、Firebase のストレージから取得したファイルの情報から、ファイルにアクセスするための URL を取得した後で、さらに、ファイルの中身にアクセスしてメタデータを取り出すという処理を一覧を表示するために行う必要があります。ファイルのサイズや処理するファイルの数にもよりますが、処理するファイルの数が増えると時間のかかる処理になってしまうことは明らかです。Firestore を利用するメリットそこで、前回紹介した方法は、ファイルをアップロードする際に Markdown に埋め込まれているメタデータを取り出して、予め Firestore

Markdown のメタデータを Firestore に保存するMarkdown のメタデータを Firebase のデータベースに保存する方法の詳細を紹介します。基本的に同じファイル名のファイルは、Firebase のストレージの同じフォルダ内には存在しないので、Markdown のファイル名をキーにして、重複したデータを Firestore に保存しないようにする処理が必要になります。ポイントは重複を避ける事Markdown のメタデータを Firebase のデータベース Firestore に保存する場合に大切なポイントは、重複するデータのデータベースのエントリ（Firestore のドキュメント）を避ける事にあります。 Markdown で書かれたファイルを Firebase のストレージにアップロード（投稿）する場合、同じファイル名で何回かアップロード（投稿）するケースが発生します。例えば、原稿の中身を変更したりした場合には、同じファイル名で何回かアップロード（投稿）する事は当然あり得る操作になります。Firebase のストレージの場合、同じフォルダに同じファイル名でアップロードする場合、上書き保存をしてくれるので問題ではありません。しかし、Firestore のデータベースの場合、前回紹介した、「addDoc()」を使う場合、毎回新たなデータベースのエントリ（Firestore のドキュメント）を作成してしまいます。つまり、同じファイル名に対する Firestore のドキュメントが複数発生する状態が起きてしまうことになります。実際にはファイルは一つしかありませ

Vue を使って Firebase ストレージのファイルを表示する前回は Firebase のストレージの特定のフォルダに保存されているファイルの一覧を Vue を利用して表示する方法を紹介しました。この記事では、表示されたファイルの中から選択されたファイルの中身を表示する方法を紹介します。Firebase ストレージのファイルにアクセスするにはFirebase ストレージの機能の一部として、保存されているファイルのリンク（URL）を取得する機能がサポートされています。リンク（URL）がわかると、Javascript の基本機能「fetch()」を使えばファイルの中身を取得することができます。したがって、Firebase ストレージに保存されているファイルの中身を表示するには、以下の手順が必要になります。1. ファイルを選択する2. 選択したファイルのリンク（URL）を取得3. 取得したリンク（URL）を使ってファイルの中身を取得4. 取得したファイルの中身を表示の四つのステップです。ファイルを選択するには？いろいろなやり方がありますが、クリックされた場合の処理を行う関数に、「file」を渡してしまうのが簡単な方法です。前回の「src/views/HomeView.vue」に記述の追加を行います。<template>  <div>    <h1>HTML view</h1>    <div class="file-list">      <ul v-for="file in list.files" :key="f

Vue で Firebase ストレージに保存したファイルの一覧を表示する前回は Vue を使って Firebase のストレージにファイルを保存する方法を紹介しました。これは「管理者」としての機能です。今回は、Firebase のストレージに保存されたファイルを閲覧する前段階として、Firebase のストレージに保存されたファイルの一覧を表示するやり方を紹介します。今回実現する機能は？最初に、今回実現する機能を整理しておきます。 今回、実装するのは Firebase のストレージのフォルダに保存されたファイルの一覧を Vue で表示するというのが目的 d す。この記事では触れませんが次のステップとしては、表示したファイルの一覧の中から選択されたファイルを表示できる様にするために必要な機能という位置づけです。Firebase ストレージに保存されたファイルを取得するFirebase ストレージに保存したファイルの情報になるので、Firebase から必要な情報を取得することになります。 Firebase でサポートしている機能なので、基本的な関数（API）を呼び出すだけで簡単に取得できます。必要な関数は：＊　getStorage()＊　listAll()＊　ref()　の三つです。「ref()」でファイルの一覧を取得したい、Firebase ストレージのフォルダへのリファレンス（簡単に言うと場所）を取得します。 ファイルの一覧を取得する方法は大きく二つのやり方がありますが、この記事では指定したフォルダに保存されている全部のファイルのリストを取得する方法を紹介します。もう一つの

Vue を使ってFirebaseのストレージにファイルを保存するVue を使って Firebase のストレージにファイルを保存する前回の記事では、Vue でページ毎にアクセスの権限を使い分けるやり方を紹介しました。今回は、前回の実装を少し発展させて、「管理者モード」を考えてみます。この記事では、Firebase のストレージに管理者としてファイルをアップロードする方法を紹介します。管理者モードの利用例まずは、管理者モードで何をするかの例を紹介します。 例えば、ブログサービスを提供する事を考えた場合には、ブログの記事を投稿する機能と、投稿された記事を閲覧する機能が必要になります。この場合、ブログの記事を投稿するのは基本的にブログサービスの「管理者」が投稿するという形になります。この場合、管理者は「特定の利用者」になって、閲覧者（一般の利用者）は、それ以外の利用者というように分ける事ができます。この記事では、まずは、ファイルをインターネットのサーバーに保存する方法を紹介します。Firebase のストレージ機能を使うインターネットにファイルを保存するには、「保存する場所」が必要になります。今回は、この場所として Firebase のストレージ機能を利用する事にします。前回までに、Firebase のプロジェクトを作成しているので今回は Firebase のストレージ機能を新たに有効にします。これは、Firebase コンソールから可能です。最初はインターネット上に公開せずにテストするので、「テストモード」を選択すれば、当面はセキュリティールールを設定しないでも基本的なテストが可能

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

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

ブログの原稿に 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 のストーレージに投稿した記事の一覧を表示する方法を紹介します。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

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 ストレージに保存する場合を考えます。ブログの投稿なのでファイル情報（メタデータ）として以下の情報をファイルと一緒に保存します。＊　タイトル(title)＊　投稿日時(date)＊　概要(description)＊　分類(type)これを Firebase のメタデータとして保存する場合、Firebase のメタデータの「customMetadata」として保存することができます。 ファイルをアップロードする際にはメタデータを追加して Firebase ストレージにアップロードするだけです。function fileUpload(file:File, folder:string) {    const fileRef:firebase.firestore.Reference = fir

Firebase ストレージのセキュリティルールFirebase ストレージを Web ブラウザ（クライアント）側から使う場合も、Firebase データベース(Cloud Firestore）を利用する場合と同様にセキュリティルールを設定してアクセスの権限を管理する必要があります。この記事では、Firebase ストレージを利用する際のセキュリティルールの設定のやり方を紹介します。基本的はデータベースと同じです！Firebase ストレージのセキュリティルールの基本は Firebase のデータベース（Cloud Firestore）と同じです。従って、Firebase のデータベース（Cloud Firestore)のセキュリティルールを書いた事があれば同じ容量で設定できます。Firebase のデータベースのセキュリティルールの記事でも書いていますが、セキュリティルールの基本は以下の３点です。＊　ユーザーによる設定＊　アクセスする対象による設定＊　アクセスタイプによる設定　です。ユーザによる設定ユーザーによる設定の場合は、Firebase のユーザー認証機能を利用してユーザー認証（ログイン）の情報である、ユーザー ID（uid）や E-Mail アドレスなどを利用してルールを設定します。この部分は、Firebase のデータベース（Cloud Firestore）の場合と全く同じ要領で設定できます。アクセス対象による設定アクセスに対象による設定は、Firebase データベース（Cloud Firestore）の場合、データベースのコレクションやドキュメントでしたが、Fi

FirebaseとReactでブログを実装！FirebaseでWebホスティングをすれば、無料でWebサイトの運営をスタートできます。 Firebaseの利用事例としてブログサイトの運用を取り上げてみました。 この記事ではシンプルなブログの運用例としてフロントエンドのフレームワークのReactを使った事例を何回かに分けて紹介していきます。 利用するFirebaseの機能は？ この事例で利用するFirebaseの機能は * Firebase ストレージ * Firebase Cloud Firestore （データベース） * Firebase ホスティング の３つの機能です。 Firebaseストレージで記事を保存 ブログの記事はFirebaseのストレージに保存します。こうすることで、Fireabaseのホスティングに毎回デプロイすることを避けることができます。 一番シンプルな方法は、毎回記事のHTMLのファイルを作成して、その都度その記事をWebサイトに追加していく方法ですが、毎回Webサイトのデプロイを行わなければならず、運用上はちょっと面倒な仕組みです。そこで記事自体はFirebaseのストレージに保存しておいて、プログラムでFirebaseストレージのファイルを読み込んで表示するという仕組みを作れば、サイトの運営がシンプルになります。 Firebase Cloud Filrestore(データベース)に記事情報を保存 Firebaseのストレージだけでも、ブログサイトの仕組みは作れますが、将来的なサイトの拡張を考えると、各記事の情報をデータベースで保存して