すべてのカテゴリ

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

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

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

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

ブログの原稿に 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 に変換するに

Django で Markdown のファイルを表示する！前回の投稿では、復習も兼ねて、仮想環境を作って Django の基本設定をするまでを紹介しました。 今回は、入力フォームで Markdown で書かれたファイルを選択して、そのファイルの中身を表示する機能を Django で作るやり方を紹介します。ファイルのアップロード先の指定これも以前の投稿で紹介していますが、復習を兼ねて再度取り上げておきます。 以前の投稿でも触れていますが、ファイルのアップロードなどの機能は利用する Web サーバーによっても変わってきます。Django の場合、開発で利用するサーバーと実際にインターネットで公開する際の Web サーバーは違います。そこで前回同様にこの記事でもまずは、開発用の環境で機能を実現する方法を紹介します。Django の場合は、アップロードされたファイルを置く場所を指定する必要があります。その設定はプロジェクトフォルダの「settings.py」で行います。追加するのは＊　MEDIA_ROOT＊　MEDIA_URL　になります。この２つでアップロードしたファイルなどを置くフォルダを指定します。静的ファイル（スタティックなファイル）の置き場所と似た設定なので、「settings.py」の最後の方に設定されている「STATIC＿URL」の近くで設定すると管理しやすくなります。STATIC_URL = '/static/'MEDIA_ROOT = os.path.join(BASE_DIR, 'media')MEDIA_URL = '/media/'　ここで指定したフォルダ「me

DjangoでMarkdownを扱うには？これまで、Django の基本的な使い方を紹介してきました。 この記事では少し実用的な実装を紹介します。GitHub などで利用されている Markdown で書かれたファイルを Django で作られているページに表示させる簡単な方法です。まずは Django のプロジェクトの作成と初期設定最初に、Django の基本を復習しながら、Django のプロジェクトの作成と初期設定を行います。手順は以下の通りです＊　仮想環境の作成＊　Django のインストール＊　Django プロジェクトの作成＊　Django アプリの作成＊　テンプレートの作成＊　ファイルのアップロードフォームの作成＊　Markdown を表示するビューの作成この流れで作成します。以前の投稿と重複するところもありますが、一応初めから説明します。少し量が多いので何回かに分けて紹介します。仮想環境の作成以前紹介した通り、Python のパッケージを普通にインストールするとシステム全体にインストールされてしまいます。全てのプロジェクトで同じモジュールを使う場合は良いのですが、プロジェクトによって利用するパッケージが変わるので、この方法はちょっと不便です。 そこで、仮想環境を利用してプロジェクト毎に環境設定を分ける方法が利用されています。この例でも、仮想環境を利用して Django のプロジェクトを作成する事にします。仮想環境は幾つかありますが、今回は「virtualenv」を利用します。 Windows をご利用の方は、以前に紹介した「venv」の方が利用しやすいかと思いま

投稿にMarkdownは便利GitHub の Readme ファイルなどに活用されているMarkdownですが、便利な記法です。 このブログの原稿も基本的に Markdown で書いています。以前は HTML で書いて投稿していた時期もありますが、最近は Markdown を活用しています。描き方はシンプルHTML などに比べると、書き方のルールはシンプルです。 HTML よりは遥かに短い時間でマスターできると思います。見出しには「＃」の数を帰るだけで設定できますし、メタデータも埋め込むことができます。投稿のタイトルや日付など、実際には表示させないでデータを残すことができるので、後でプログラムによる分類や検索にも活用できます。（＊）詳細の文法についてはインターネットに沢山ドキュメントがあるのでそちらを参照してください。そのままでも読みやすい！Markdown 記法は元々は、HTML よりシンプルな記法で記述した文章を HTML に変換する目的で開発されたようですが、現在では、HTML 以外でも他の標準的な文書に変換するユーティリティも広く開発されています。一番のメリットは、Markdown で書かれたドキュメントもそのままでも読みやすい形になっています。Atom や VSCODE などのエディタでは、プラグインを入れたりすると実際に HTML に変換したイメージをプレビューしながら入力することも可能です。しかし、元々の記法がシンプルで HTML などと違い、Markdown の形式のままでも普通に読むことができるので扱い易くなっています。ソースコードも取込みやすいHTML で書