すべてのカテゴリ

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

Firebase のデータベースで Markdown のメタデータを保存するMarkdown のメタデータを利用すると、ファイルの情報を簡単に取得できます。この情報を Firebase のデータベースに保存すると、一覧の表示を効率よく行う事が出来ます。この記事では、Firebase のデータベースである Firestore に Markdown のメタデータを保存する方法を紹介します。Firebase version 9同じような記事を以前にも投稿していますが、Firebase の API はVersion 8からVersion 9で大きく変更されています。 以前のVersion 8では、名前空間（ネームスペース）をベースにしたインターフェースが利用されていました。これがVersion 9からは、モジュール（modular）ベースに変更されています。現時点では、Version 8も利用可能ですが、新規の開発ではVersion 9を利用する事をお勧めします。従いまして、この記事では、Firebase のVersion 9ベースのインターフェースで紹介していきます。Firestore の基本構成Firebase のデータベースには、リアルタイムデータベース（Realtime database）と Firestore がありますが、この記事では、Firestore を利用する例を紹介しています。 Firestore のデータベースは、コレクション（collection）とドキュメント（document）で構成されています。コレクションはドキュメントを入れる箱の様なイメージで、ドキュメ

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

Firebase のデータベースアクセスFirebase のデータベースを利用する魅力の一つは、フロントエンド（Web ブラウザ）から直接アクセスできることがあります。一方で、バックエンドを実装すれば、バックエンドを経由したアクセスも可能です。では、どちらを利用するのが良いのかというと状況によって選択肢は変わってきます。この記事では、両方の利点と欠点をまとめて見ました。状況によって使い分けるコツとして活用ください。初心者にはどちらが良い？最初に考えるのは、Web 開発の初心者の場合です。 この場合は、迷わずにフロントエンドから直接利用する方法がおすすめです。 理由は簡単で、バックエンドを作る必要が無いからです。Firebase の利点を最大限に活用して、短時間でシンプルに実装するのが良いと思います。バックエンドの開発やデータベースの設定だけでも、初心者には大きな負担です。従って、フロントエンドの開発に集中できるのは Firebase を活用する大きな理由になります。では、この方法の欠点はなんでしょうか？細かいことを挙げれば色々あると思いますが、大きな欠点は 2 点です。＊　Firebase 以外のデータベースに移行するのが面倒＊　セキュリティルールの設定が必要　もう少し具体的に書くと、Firebase のデータベースをフロントエンドから直接呼び出しているので、Firebase 以外のデータベースを利用するには、フロントエンドのコードを基本的には全面的に書き直す必要があります。これが、大きな問題になるかと言うと殆どの場合は大きな問題では無い場合が多いかと思います。このモデルの場合

Firebase データベースのデータの更新イベントの検出データベースを利用したアプリやサービスを開発する場合、データベースのデータがアプリやサービスの利用中に更新される場合があります。そうした場合、どのようにすれば現在利用中のデータの更新ができるかがポイントになります。Firebase のデータベース（Cloud Firestore）はこうしたケースを想定したインターフェースを予め用意しています。この記事では、Firebase のデータベース（Cloud Firestore）のデータが更新された場合にどのように更新されたデータを取得するかを紹介しています。オンラインショップのサイトを例に考えてみます！サービスの利用中にデータベースのデータが更新されて、そのデータの更新が必要な場合と言ってもなかなか思い当たらないと思いますので、もう少し具体的に例を挙げて説明します。例えばオンラインショッピングのサイトを作成する場合を考えてください。 サイトで販売する商品を表示して、気に入った商品があれば購入して決済をするようなサービスになります。サイト全体ではいろいろな機能が必要になります。商品の紹介から、決済や質問なども含めて、たくさんの機能を実装する必要があると思います。そして、いろいろな場面でデータの更新をする場面もあると思いますが、この記事では商品情報を表示する部分に絞って考えます。商品情報の表示で必要な情報は？商品情報を表示するに当たっていろいろな情報が必要になります。 販売する商品によっていろいろ変わってくる部分もありますが、一般的に考えて共通して必要な内容は：＊　商品の説明や紹介

Firebase のデータベースの利用事例Firebase のデータベースの活用方法の一つを紹介します。 通常のデータベースとして利用する以外にも便利な利用方法があります。 それは、Firebase のデータベース（Cloude Firestore）は、高速にアクセスが可能というメリットがあります。 これを利用すると、Web アプリや Web サービスの価値を高める事が可能です。意外にアクセスに時間がかかる外部の Web サービスWeb アプリを開発する場合、全て自分で開発する場合もありますが、必要なサービスを自分のサービスに取り込んで利用する形で実装するケースも意外に多い物です。外部のサービスを取り込んで利用する例としては、＊　オンライン決済（PayPal や Stripe など）＊　メッセージの送信（MailChamp や SendGrid など）＊　Google の各種サービス（Map や Google Analytics など）などいろいろあります。機能的には、こうした外部のサービスがサポートしている API を利用すると、特に Firebase のデータベースを利用する必要はありません。しかし、実際にこうした外部のサービスを利用する場合の多くは、フロントエンド（Web ブラウザ）から直接アクセスするよりは、バックエンドを介して実装する仕組みになっている場合が多くなります。主な理由は、セキュリティです。外部のサービスが発行する秘密鍵（Private Key）を利用してアクセスする必要があるため、ソースコードが参照可能なフロントエンドのプログラムではなく、バックエンドでア

Firebase データベースの制限事項Firebase のデータベースは利用しやすく便利な仕組みですが、制限事項も幾つかあります。 この記事では、Firebase のデータベースの制限事項についてよく引っかかる項目を簡単にまとめてみました。複雑なクエリが書けないFirebase のデータベース（Firestore）は SQL データベースのように広く利用されているリレーショナル型のデータベースではありません。 リレーショナル形のデータベースの場合、複数のテーブルから必要なデータを持ってきて一つのテーブルのようにデータを取得するようなクエリも簡単に書くことができますが、Firebase のデータベース（Firestore）の場合は、こうした場合は複数のクエリを組み合わせてデータを取得して、プログラムでまとめるような処理が必要になります。この制限事項が問題になるかという点に関しては、実装の仕方（作り方）や方針によって変わってきます。 あまりケースとしては多くないと思いますが、リレーショナルベースを基にした設計を Firebase に置き換えたりする場合には、結構面倒になる場合が多くなります。この場合、SQL などで利用できるクエリを利用してデータベースにアクセスする場合が多いので Firebase でサポートしていないタイプのクエリがあるとその部分はプログラム（フロントエンド／バックエンド）で対応する必要があるので変更が必要になるためです。最初から Firebase のデータベース（Firestore）利用の前提で作る場合には、余り問題にならない場合が多いです。Firebase

Firebaseデータベース設計のコツは？Firebaseのデータベースは一般的によく利用されているデータベースのタイプとは違います。SQLなどのデータベースはリレーショナル型と呼ばれる物で、複数のテーブルを関連付けて使います。 ここでは、リレーショナル型データベースの詳しい話は省きますが、Firebaseの場合はCloud Firestoreは、JSONベースのデータベースでテーブルと似たような活用法もかの運ですが、全てのドキュメントのフィールドデータが同じである必要はありません。 従って、活用の仕方も変わってきますし、向いているアプリと、向いていないアプリも当然存在します。 Firebaseのデータベースが向いているアプリ Firebaseのデータベースは、複雑なデータ処理が要求されるようなアプリには余り向いていません。もう少し具体的にいえば、複数の関連するテーブルを使った複雑なクエリーでデータを検索したりする場合です。 こうした処理はリレーショナル型のデータベースが得意としている処理で、正規化された複数のテーブルを使ったクエリを使って必要な情報を取り出したりしたい場合には便利です。 Firebaseの場合は複数のコレクションからデータを抜き出したい場合には、複数のクエリーを使う必要がある場合がどうしても多くなります。これは、FirebaseのデータベースをアクセスするためのAPIの仕様が複数のコレクションに同時にアクセスする機能はサポートしていないので、一つ一つのコレクションから必要なデータを抜き出して利用する必要があるからです。 一つのテーブルで解決できるよう

FirebaseとReactで作るお問合せ管理Vueでの事例を紹介しましたが同じアプリをReactで！ 前回はフロントエンドのフレームワークとしてVueを使ってFirebaseの機能を取り込んだWebサービス・Webアプリの事例を紹介させて頂きました。 今回は、Vueとならんで広く利用されているフレームワークReactを使った事例を同じお問合せフォームの管理アプリで紹介します。FirebaseとReactを組み合わせて使う場合、Vueの場合と同様に「npm」の活用が便利です。Firebaseのモジュールもインストールしてしまえば、簡単にReactのプロジェクトのコードから呼び出す事ができます。Reactを使うための準備「create-react-app」のインストール Vueの場合Vue CLIを使いましたがReactの場合は、「create-react-app」を使います。このパッケージを使うとReactのサンプルプロジェクトを作成してくれます。VueのようなUIはサポートされていませんが実用上は全く問題ありません。 「create-react-app」のインストールは以下のコマンドで行います。 $ npm install -g create-react-appReactのプロジェクトの作成create-react-app」のインストールが済んだら、まずReactのプロジェクトを作ります。VueのようなUIはありませんがコマンドを一つ実行するだけです。 $ npx create-react-app [プロジェクトの名前] --template typescript 今

FirebaseとVueで作るお問い合わせ管理以前Webサービス制作で同じような記事を投稿しています。しかし、今回はFirebaseを使ってという点でお改めて記事を書き直していますのでご覧ください。（以前は「Webサービス」を主体に紹介しています） FirebaseとVueを組み合わせて使う場合、「npm」の活用が便利です。Firebaseのモジュールもインストールしてしまえば、簡単にVueのプロジェクトのコードから呼び出す事ができます。Vueを使うための準備Vue CLIのインストール FirebaseもVueも「npm」を活用した方が便利です。CDNのリンクをHTMLに張り付けても使えますが、WebサービスやWebアプリを開発する上で、利用価値の高い、既存のモジュールを手軽に取り込めるのは大きな魅力です。 まずは、Vueを使うための仕組みVue CLIをインストールします。[npm install -g ＠vue/cli]便利なUIを活用 コマンドラインからもVueは使えますが、UIが便利です。npmのコマンドで、「vue ui」と入力して、見やすいUI上でVueのプロジェクトの管理をするのが便利です。 Vueのプロジェクトを作ります。 Vueの場合標準ではJavaScriptを使う設定になっているので、Typescriptを使って開発をする場合には、マニュアルで必要なオプションを選択する必要があります。難しい設定はないので、一度マニュアルで設定して、設定内容を保存しておけば次回以降はその設定を読み込めば自動的に設定されます。予め設定されているプロジェクトの不要なファ

Firebaseのデータベースで作る簡単お問合せフォームFirebase のデータベース機能を使えば、お問合せフォームはとても簡単に実現できます。 お問合せフォーム自体は一つの HTML ファイルで実現できます。簡単な HTML の記述と、CSS で体裁を整えればあとは簡単な JavaScript を追加するだけです。 HTML ページで Firebase を使うための準備 一番シンプルな方法は HTML のページの「head」の中で Firebase を設定する事ができます。 Firebase コンソールで「プロジェクト設定（Project settings）」 に行けば必要なプロジェクトの情報を得る事ができます。 やり方は２つあって、Firebase のホスティングを使う場合はシンプルです。 プロジェクトの情報を入れなくても自動で読み込んでくれるので以下の情報を HTML の「」タグの内側に埋め込めば HTML ページ上で Firebase を使うことができます。Firebaseを利用する場合、Firebaseでホスティングした方が いろいろ便利です。 ココナラのブログでは、コードを埋め込んで綺麗に表示するのが難しいので詳しいコードの実装方法は省略します。（すみません！）Firebaseでホスティングする場合は、簡単な記述を埋め込むだけでプロジェクト毎に異なる情報をいちいち記述する必要がなくなります。基本の記述があれば、詳細は自動で読み込んでくれる仕組みになっています。これだけでも、ホスティングまで含めてFirebaseで作ってしまうメリットがあります。HTMLでフォームを

Firebaseのデータベース概要Firebase のデータベース（Cloud Firestore）と一般的に良く利用されている SQL データベースは少しコンセプトが違います。 - SQL データベースは「リレーショナルデータベース」 - Firebase のデータベースは JSON ベースのデータベース 一言で言えばこれが大きな違いです。 この記事ではさらに詳しく説明していきます！SQLのデータベース一般的に良く利用されている SQL のデータベースはリレーショナルデータベースに分類されます。厳密な定義はここでは省かせて頂きますが、簡単に言えば表（テーブル）を基にしています。さらに、複数のテーブルを関連付けて使う様に設計されています。 データベース自体は、エクセルの表が沢山あるイメージです。 データベースを利用する上で、最初にこの表の「形」を決めておく必要があります。テーブルの「列」にどんなデータを割り当てるかを予め決めておいて、この列の情報を基に情報の出し入れをします。 SQL のデータベースでは、各列の要素を含んだ「行」の集まりが基本的なデータ構造になります。 FirebaseのデータベースFirebase のデータベースは「表」という概念がありません！ ここが大きく違う所です。 Firebase のデータベースは「コレクション」という形でデータを管理しています。このコレクションに「ドキュメント」という形でデータを追加していくのが Firebase の基本的なデータ構造です。 - コレクション　ー＞　テーブル - ドキュメント　ー＞　テーブルの行のイメージ

Firebasestoreはとても優秀なNosqlですが、検索がいまいち・・・・・そこで紹介するのがFirebaseからも連携をお勧めされているAlgolia!!こちらはとても優秀性で全検索、クエリ検索、何でもできちゃいます。。。。fieldでクエリしているそこのあなた、Algolia の　API を使って連携しましょう！！