すべてのカテゴリ

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

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）で構成されています。コレクションはドキュメントを入れる箱の様なイメージで、ドキュメ

Markdown を使う利点Markdown 形式で記事を書いて Vue で表示する方法を紹介しました。この方法だと、HTML などで記事を書く場合に比べると幾つかの利点があります。この記事では、Markdown で記事を書く利点について紹介します。記事の概要のデータを埋め込める！一つの大きな利点は、前回の記事でも紹介していますが、Markdown 形式の記事はそのままでも読みやすくなっています。 HTML ファイルの場合は、Web ブラウザを使って表示させる場合には、見やすく体裁も整えることが可能なので便利です。しかし、HTML 形式のファイルそのものを見た場合には、見出しや本文につけるタグがあるために、一般の人には読みにくいと言う欠点があります。別の利点は、記事の概要のデータを Markdown のファイルに埋め込んで簡単に利用できる点があります。 例えば、タイトルや投稿日時などを埋め込んで、Markdown を処理するパッケージプログラムで簡単に抜き出して利用できるのはとても便利です。 こうしたデータを「メタデータ(meta data)」と呼んでいます。このようなデータを埋め込むことは、HTML でも可能ですが、Markdown の方がより利用者に使いやすい形で利用できるようになっています。この記事では、Markdwon に記事の概要のデータを埋め込む方法と、その利用のやり方を紹介しています。Markdown にメタデータを埋め込むには最初に、Markdown 形式の記事にメタデータ、つまり、記事の概要に関するデータを埋め込む方法を紹介します。 書き方を簡単で、行の最初に

Firebase に保存したブログ記事のメタデータの活用Firebase に保存したブログ記事を管理する際にメタデータを活用すると効率的で便利なサービスが実現できます。この記事ではメタデータの活用例を紹介します。メタデータとは簡単にいうと、おまけのデータです。おまけと言っても価値の高いデータで、ブログの記事の場合は、「記事に関するデータの概要」の様な位置付けのデータの事をこのように呼んでいます。 単に記事を保存するだけではなく、記事の概要がわかるデータと一緒に保存することで記事の利用がよりやりやすくなる利点があります。既に紹介していますが、記事の一覧を表示する際に、単にファイルの名前を表示するより、その記事のタイトルや概要を一緒に表示することで、一覧を見るだけで各記事の概要がわかると利用者は見たい情報を効率よく見つけることができます。また、検索のためのキーワードなどをメタデータに入れておくことで、記事全体を探さなくても効率的に興味がありそうな記事を特定するのにも役立ちます。どこにメタデータを保存するか？では、メタデータをどこに保存するかが気になりますよね？ 実は、Firebase のストレージにファイルを保存する際に、メタデータを一緒に Firebase のストレージのファイルのデータと一緒に保存する事ができます。Firebase がこうしたメタデータをファイルの情報と関連づけて保存してくれるので、ここからメタデータを取り出すことが可能です。この機能は便利な機能ですが、Firebase のストレージに保存されているファイルという前提条件で利用が可能という制限がついています。Fi

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 に変換するに

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ストレージにデータ（ファイル）をアップロードする場合、Firebaseコンソールを使えば特にプログラムを書かなくても良い場合もたくさんあります。Firebaseコンソールを使うのかプログラムを使うのかではどんな点を考慮すれば良いかアイディアをまとめてみました。誰がデータを保存するのか？一番大切な事は「誰」がデータ（ファイル）を Firebase のストレージに保存するのかです。写真や動画を投稿する様なサービスは、サービスの利用者がデータ（ファイル）をアップロードすることになります。一方で、オンラインコンテンツを Web ページを介して提供する様な場合は、Web サイトを運営する側がデータ（ファイル）をオンライン上に用意することになります。このように、誰がデータ（ファイル）を Firebase ストレージに保存するかで、その方法も変わってきます。また、Firebase ストレージにあるデータ（ファイル）をどの様にアプリやサービスで扱うかでも変わってきます。オンラインコンテンツなどの配信の場合オンラインコンテンツの配信のように、Web サイトを運営する側でデータ（ファイル）を用意する場合、敢えてプログラムでサポートしないでも良い場合がたくさんあります。これは、Firebase コンソールから Firebase ストレージにデータ（ファイル）をアップロードする事ができるからです。大抵のサービスならばこれで十分実用になります。自由にフォルダの作成もできますし、ファイルのアップロードも簡単に行えますし、ダウンロードのための