シリコンバレースーパーウエア

ホーム ブログ Firebase情報 Firebase のデータベースで Markdown のメタデータを保存する 2022年4月28日 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）で構成されています。コレクションはドキュメントを入れる箱の様なイメージで、ドキュメントは基本的に、JSON（JavaScript Object Nortation）形式のデータです。 Firestore を利用するには、Firebase のプロジェクトを作成した後に、Firebase コーンソールから Fires

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

ホーム ブログ Firebase情報 Vueを使ってMarkdownファイルを表示する 2022年4月24日 Vue を使って Markdown ファイルを表示する 前回は、Firebase ストレージに保存したファイルを Vue を使って表示する方法を紹介しました。これで簡単なブログなどのサービスを実現できます。今回は、HTML ではなく、Firebase のストレージに保存した Markdown のファイルを Vue で表示する方法を紹介します。こちらの方が、原稿を書く際書きやすく、そのままの形でも読みやすいというメリットがあって便利です！ Markdown とは？ Markdown は以前にもこの連載で取り上げていますが、マークアップ言語です。 そのままの形でも、比較的読みやすく HTML などに比べると初心者でも書き方を簡単に覚えられるので便利です。 便利なのは、この形式で書かれたファイルを公開されているモジュールで簡単に HTML に変換する事が可能になっている点です。 ブログなどの記事は、ある程度文章の形が決まっていて、特別な HTML を書く必要はあまりありません。そう考えると、原稿を Markdown で書いておいて、表示する際にプログラムで HTML に変換して表示するという方法はブログサイトを運用するには都合の良い仕組みです。 プログラムの履歴を管理するのに、Git がよく利用されますが、Git をベースにオンラインでプログラム開発のプロジェクトを保存して、共有したり公開するのに広く利用されている GitHub のドキュメントも Markdown を採用しています。 この記事では、これまで学習してきた Vue を使って、Firebase に保存した Markdown を表示する方法を紹介します。 Markdown の基本 最初に Markdown の基本を紹介します。 まずは、簡単な Markdown の記述です。一般的な記事では、幾つかの見出しがあって本文を書くような形で、場合によっては箇条書きなどがありますが、簡単にその構成を Markdown で記述すると

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

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

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