すべてのカテゴリ

みなさんこんにちは。イプシロンです。Firebaseに関するお話をさせていただきます。どれだけかんたんか、どれだけハードルが低いかを知っていただけると嬉しいです。それではいってみましょう！！用意するものFirebase とは、Google が提供している、モバイルや Web アプリケーションを構築するプラットフォームです。そのため、Googleアカウントが必須になります。・Googleアカウント手順1.Firebaseにアクセスしてログインします。。(ココナラブログの特性上、外部リンクを貼り付けられないのがつらい。。。)2.画面右上の「コンソールへ移動」をクリックします。3.「プロジェクトの追加」をクリックします。4.プロジェクトのタイトルを入力し、「続行」ボタンをクリックします。5.アナリティクスは必要ないので、無効を選択して、『プロジェクトを作成』をクリックします。6.「日本」を選択して、「プロジェクトを作成」をクリックします。7.少し待ちます。8.「続行」をクリックします。9.完成！！！プロジェクト一覧画面にも、先ほど作成したプロジェクトが追加されています。う～ん。。。かんたん！！！Hello World！！これだけですw最後にFirebaseを使用したサービスを出品しております。webアプリのスモールスケール開発サービスです。 販促、集客目的でwebアプリを作ってみたいけど、 まずは、小さな一歩から踏み出したいというお客様に向けたサービスです。 もちろんそうでないお客様も大歓迎！！！最後まで読んでいただきありがとうございます。では ﾉｼ

React と Firebase でブログサービス〜ファイルのアップロード編React と Firebase を組み合わせて利用する例として、ブログサービスを作ってみる事にしました。一度に全部紹介するのは難しいので連載という形で紹介していきます。最初は、ブログの記事をインターネット上にアップロードする機能から紹介していきます。まず最初は投稿の機能ブログサービスで必要になる機能に、記事を投稿する機能が必要になります。 今回は、ブログの記事の原稿となるファイルをインターネットにアップロードする機能について紹介します。 Firebase を利用する場合、データベースに記事を保存する方法もありますが、今回は記事の原稿のファイルそのものを Firebase のストレージに保存する方法を採用しようと考えています。どのようなファイルをブログの原稿にするかを決める必要がありますが、まずは、ファイルを Firebase のストレージに保存する機能が必要です。この記事では、Firebase のストレージにファイルを指定したファイルをアップロードする機能について考えてみました。ファイルの指定まずは、アップロードするファイルを選択する機能が必要です。 ファイルを選択するフォームを作成します。HTML の「input」タグを使ってファイルを選択して、ファイルをアップロードする処理を呼び出すような UI です。 ファイルは、Firebase ストレージの「test」というフォルダの下にアップロードするようになっています。(post.tsx)の例export default () => {  retu

シンプルな Web サイトの作り方シンプルな Web サイトは Firebase のホスティング機能を利用すると簡単に作成できます。HTML と CSS で必要なページを作成して公開する方法です。各ページの中身（コンテンツ）を作成すれば、簡単にインターネットで公開で s きます。この Web サイトの作成に必要なのは以下の項目です＊　基本的な HTML と CSS の記述方法＊　Google アカウント（Firebase を利用するには Google アカウントが必要です）＊　Web サイト作成用の PC（Windows/Mac/Linux）＊　インターネットアクセス費用は基本的に無料ですFirebase プロジェクトの作成Firebase のホスティング機能を利用して公開するので、Firebase のプロジェクトを作成する必要があります。 Firebase は Google が提供するサービスで利用するためには、Google アカウントが必要です。 まだ、Google アカウントをお持ちでない場合は、最初に Google アカウントを作成してください。Google アカウントはこちらのサイトから作成できます。Google のアカウントの準備ができららFirebase コンソールにアクセスします。Firebase の利用が初めての場合は、以下のような画面が現れますので、「_Create a project_」をクリックします。Firebaseプロジェクト作成画面次に表示する画面では、プロジェクト名を入力します。Firebaseプロジェクト名入力画面次の画面は Google An

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

フレームワークの選び方は？Web アプリや Web サービスを作成するためのフレームワークは何を選んだら良いか迷う場合も多いと思います。この記事では、一つの考え方をまとめてみました。以前、React と Vue のどちらを選ぶかと言う趣旨で記事を書いたことがありますが、今日の話題は、さらに範囲を広げて、いろいろあるフレームワークを検討する際に考えることを中心に紹介します。もちろん、全てのフレームワークやプログラミング言語をカバーできるわけではありませんので、あくまで「ガイドライン」の一つとして検討の際に考えてみることを中心にまとめみました。一番手軽な方法は何か？最初に考えるのは、一番手軽で簡単な方法です。 とにかく、「早く」サービスを立ち上げたい場合には、フロントエンド中心の実装が一番です。実装コストも安く済みますし、基本的に運用コストも安くできるのが 1 番の魅力です。「Web サイト」と言う要素が強い場合は、一番広く利用されている WordPress などで作成するのが一番です。制作側の学習コストも低くて済みますし、情報もたくさんあります。また、Web ホスティングも殆どのサービスが利用できるので、最初に手がけるのには一番入りやすいと思います。実際に、制作依頼も沢山あります。しかし、Web アプリや Web サービスなどのように、プログラミングの要素が大きくなってくると、話が少し変わってきます。その場合は、フロントエンドのフレームワークと Javascript を利用したプログラミングが初心者でも扱いやすく制作も HTML と CSS、Javascript で対応が可能です

みなさんこんにちは。イプシロンです。最近は、VBAやSeleniumに関する記事ばかり書いているので、気分転換にFirebaseについても触れていきたいと思います。それでは、いってみましょう！！！Firebaseとは？Firebaseとは、Google社が提供している、スマートフォンアプリやWebアプリケーションにおける「バックエンド開発」において、スピードの向上とコスト削減を可能にするプラットフォームです。私も、ココナラでwebアプリケーション開発のサービスを出品させていただいておりますが、バックエンドにはこのFirebaseを使用しております。バックエンド環境とは？ちなみに、バックエンド環境とは、ユーザーには見えない、アプリの裏側の動作のことを指します。SNSアプリでユーザー情報の管理、「お気に入り登録」機能や、「いいね」機能、「コメント」機能なんかでこのバックエンド環境が活用されています。Firebaseを利用するメリットざっくりですがメリットは下記のとおりです。・サーバー管理や保守が不要になる。・エンジニアの負担を大きく軽減できる。・規模に応じた従量課金性のためリーズナブル(勉強、お遊び程度なら無料の範囲でできる。)・アナリティクスやデータベース、クラウドメッセージング、クラッシュレポートなど複数の機能が提供されている。といったところでしょうか。Firebaseで出来ること&機能Firebaseの主な機能と概要、できること、そしてメリットについてなど、各機能をご紹介します。・Firebase Realtime Databaseクラウドホスト型NoSQLデータベー

Vue のプロジェクトをインターネットで公開するVue を利用して開発した、Web アプリをインターネット上で公開するための方法として、Firebase を利用する方法を紹介します。Web アプリをインターネットで公開するにはVue で作成するアプリは、基本的に Web ブラウザ上で動作します。開発中は、開発で使っている PC で仮の「Web サーバー」を動かして動作の確認を行うのが普通です。 しかし、この開発した Web アプリをインターネット上で公開するには、この Vue で開発したアプリをインターネットからアクセスできるサーバーにコピーする必要があります。 こうしたサービスを「Web ホスティングサービス」と呼んでいますが、色々なサービスがあって、初心者には迷う部分が大きい部分です。この記事では、色々ある Web ホスティングサービスの中から、「Firebase」のサービスを利用して Web アプリを公開する方法を紹介します。Firebase のサービスとは？Firebase は Google が提供している、インターネットのサービスの一つで、Web ホスティングの他にもログイン機能（ユーザー認証機能）や、データベース、オンラインストレージなど色々なサービスを提供しています。便利なのは、Google のアカウントを持っていれば誰でも利用できる事に加えて、一定の利用量（アクセスの数や利用しているファイルの容量など）が一定量以下の場合には、無料で利用できる所です。したがって、初めて Web アプリを提供する場合の多くは、アクセス数や利用量は無料枠内に収まる場合が殆どなので、F

投稿した記事の一覧を表示するには？ブログの記事を 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

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

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

Vue Router を使ったプロジェクトを Firebase で公開するには？Vue Router は Vue を使った Web アプリで、ページ毎に表示を切り替える場合に利用されます。ところが、設定によっては、「ページが見つからない」（４０４エラー）になる場合があります。原因は、Web サイトのページの切り替え（ルーティング）にあります。この記事では、Firebase を利用して、Vue Router を利用した、Vue アプリを公開する方法を紹介しています。ルーティングの仕組みWeb サイトで表示するページを切り替える仕組みを「ルーティング」と呼んでいます。 簡単にいうと、Web ブラウザで指定したリンク（URL）によって、表示を切り替える事ができますが、この切り替えの仕組みをルーティングと呼んでいます。 この「切り替え」を行なっているのは、通常の Web サイトでは、Web サイトの情報を持っているサーバー（Web サーバー）が行なっています。Web ブラウザは、指定されたリンク（URL）を Web サーバーに送って、表示する情報を Web サーバーから受け取って表示をしています。Vue の表示の仕組みVue は「フロントエンドのフレームワーク」の一つで、「Web ブラウザで表示を管理する仕組み」です。 一般的に Vue で作成した Web アプリをインターネットで公開する場合には、Viteを使って Vue のプロジェクトを作成した場合には以下のコマンドを実行して公開用の情報（イメージ）を作成します。 （＊）この連載では、Viteを Vue のサンプルプロジェクト（テン

Firebase v9で書き方が変わった！久々に Firebase の話題です。Firebase の最新バージョンは少し前から v9.x になっています。実は v9 から大きな変更が入っています。v8 までは、Name space をベースにしたインターフェースでしたが、v9 からはモジュールベースに変更されています。以前のコードは基本的に、そのままでは、v9 では使えません。この記事では Firebase の v9 の概要について紹介します。v ９以前の Firebase の問題点Firebase は、Web アプリや Web サービスで必要になる事の多い、バックエンドのサービスを提供する仕組みの一つです。Firebase を利用すると、自分でバックエンドのサービスを開発しなくても、データベースやオンラインストレージなどの利用が可能になるので手軽に本格的なアプリを開発できるという点で便利な物でした。従来の Firebase のパッケージは、サイズが大きく読み込みに時間がかかるという欠点がありました。と言っても、殆どの場合は、問題という程顕著な問題ではありませんでした。ただ、一部でそうした欠点を指摘されていたこともあって、v9 からはモジュール形式の実装に変更されています。 変わった点は、モジュール形式に変更された点で、必要なモジュールを必要な場所で読み込む方法に変わりました。これによって、読み込みに必要な時間が短縮され、読み込むサイズも最適化されました。ようは必要でないパッケージは読み込まなくても良くなりました。以前のスタイルで開発したコードは？基本的に、Firebase の

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

Firebase で React アプリをホスティングするFirebase のホスティングを利用して、作成した Web ページをインターネットに公開する方法は既に紹介しています。この記事では、React で作成したアプリを Firebase のホスティング機能を利用してインターネットに公開する具体的な方法を紹介しています。npm を利用して、React で開発する場合、「create-react-app」のスクリプトを利用して React のプロジェクトを作成すると、自動的に React のサンプルアプリを作成してくれます。このサンプルアプリには、公開用のイメージを作成するスクリプトが既に用意されているので、このスクリプトを利用して公開用のイメージを作成するだけで、あとは基本的な Firebase の管理コマンドを実行すれば、インターネットに簡単に公開できます。React アプリのサンプルプロジェクトを作成最初に React アプリのサンプルプロジェクト（テンプレート）を作成します。プロジェクトの作成には、「create-react-app」をインストールする必要があります。インストールしていない場合は、最初にインストールを行います。React を利用していろいろなアプリを開発する場合、頻繁に利用するので、システムレベルのインストールをすることをお勧めします。$ sudo npm install -g create-react-app　(*) Windows の場合は「sudo」は不要です。「npm install -g create-react-app」でインストールします。

Firebase ホスティングはプログラミングとの相性も抜群です！Firebase ホスティングは、LP との相性が良いことは既に紹介しましたが、勿論プログラミングとの相性も抜群です。Firebase の他の機能である、データベースやストレージと組み合わせて、React や Vue といったフロントエンドのフレームワークと組み合わせれば本格的な Web アプリケーションを短期間で開発する事が可能です。Firebase の他の機能との連携を考えると、一番相性が良いのは Web アプリケーションという事になります。React や Vue と連携する！React や Vue はフロントエンドのフレームワークと呼ばれる仕組みで、Web ブラウザで動作する UI などを作成するのに適した仕組みです。HTML/CSS と Javascript を組み合わせれば、特にフレームワークを利用しなくても Web アプリケーションを作成することは可能です。しかし、React や Vue などのフレームワークを利用すると、より効率的に UI を開発することができるので便利です。一方で、実際のデータなどの処理は Javascript で書くことになりますが、データを保存する必要がある場合は、通常は Web サーバー側で用意したデータベースなどを利用する必要があります。WordPress の場合は、Web サーバー側で、PHP のバックエンドサービスと、SQL データベースを利用してこうした機能を提供する仕組みになっています。Firebase を利用すると、こうしたバックエンドのサービスの機能やデータベー

Firebase のホスティングの使い方がわかるとビジネスになります！Firebase のホスティングの使い方が見えてくると、それを活用したビジネスモ可能になります。 この記事では、Firebase のホスティングをビジネスに活用する例について紹介します。Firebase のホスティング機能を LP に活用する前回の記事で、Firebase のホスティングと相性の良い利用法の一つに LP（ランディングページ）のホスティングに理容できる事を紹介しました。LP(ランディングページ））は、集客や販売に利用される場合が多く、商品の販売のためのセールスレターやイベントの参加者の募集などを含めて、インターネットを利用したマーケティングに広く利用されている Web ページの活用方法です。広告や SNS から LP（ランディングページ）にリンクを貼って、興味がありそうな人を集めて、商品やイベントの紹介などセールスや集客のための内容を提供して、販売や集客に繋げるための仕組みです。利用の仕方は、いろいろありますが、販売促進期間やイベントに合わせて一時的に LP(ランディングページ)を利用する場合もあれば、常に商品販売のページとして利用する場合もあって利用形態はいろいろです。既に、販売は集客の仕組みを持っている方の場合は、集客やセールスの一環として利用されている場合も多くなっています。 しかし、一方で、フリーランスとして個人でビジネスを立ち上げたばかりの場合には、こうした仕組みがまだ完成していない場合も多く、LP（ランディングページ）制作は一定の需要があります。技術的には簡単にできる LP!LP(ラ

Firebase ホスティングを何に使うか？Firebase のホスティング機能を使えば簡単に Web サイト（Web ページ）をインターネットに公開できます。では、どのような使い方が良いでしょうか？この記事では、Firebase のホスティング機能の利用例を紹介してみました。魅力は無料から始められる Web サイト！Firebase のホスティング機能を利用した Web サイト（Web ページ）の一番の魅力は「無料から始められる」点ではないでしょうか？もちろん、利用する容量が極端に大きかったり、アクセスが爆発的に多い Web サイトの場合は、利用料金が発生します。しかし、殆どのケースでは、少なくても最初は無料の範囲内で利用可能です。しかも、特別な契約をする必要もないので、手軽に Web サイトを立ち上げることもできるのも大きな魅力です。Firebase 側が広告を入れたりしないのも魅力です。無料で利用可能な Web サイトはホスティングサービスを提供する側が広告を入れて、そこから収入も得る場合が多いですが、Firebase は自分で広告を入れない限りは、無料でも広告なしでサイト運営が可能です。また、ご自分でドメインを所有している場合は、自分のドメインを使ったサイトとして運営することもできるのも大きな魅力です。良い事ばかりではありません。。。Firebase のホスティング機能は良いことずくめのような感じもしますが、良いことばかりではありません。 Firebase のホスティングの場合は、自分で、HTML や CSS を書いて Web サイトを構成する必要があります。もちろん、

Firebase のログイン機能だけを使う！前回の記事で、Web サイトのアクセス権限を細かく設定するには、ユーザー認証機能（ログイン機能）が必要だということを投稿しました。アクセスする利用者を区別するためには、ユーザー認証などによる利用者の特定が必要不可欠ですが、それ以外にもユーザー認証のイベントの検出やセッションの管理など必要な事はたくさんあります。他の部分は、SQL などのデータベースを利用するなどする場合でも、こうしたユーザー認証（ログイン機能）に関連して必要な実装には手間も時間もかかります。Firebase を使うというと全てのバックエンドに関連した機能を Firebase で実装するように考えがちですが、一部の機能だけを利用するというのもありです！ユーザー認証はログインだけではない！ユーザー認証の中心的な機能はログイン機能です。ユーザ名とパスワードを入力して「本人を特定する」というのは機能の中心であることに間違いはありません。このユーザー名とパスワードでの認証自体は、自分で作成してもそれほど複雑ではありません。基本的にユーザーのデータベースとパスワードの一致をチェックする機能があれば実現できるので実装としては比較的簡単です。しかし、セキュリティを考えるとパスワードをそのままの形でデータベースに保存するのは問題があるので、通常は暗号化（ハッシュ化）して保存するのが普通です。さらに、パスワードを忘れた場合のリカバリーの処理や、パスワードの変更などの処理が必要になります。さらに、ログインの状態が変化するイベントの検出も重要です。ログアウトした場合は、特定の利用者のみに限定

Web サイトのアクセス権限Web サイトなどを運営する場合、サイトのアクセス権限をきちんと設定することが重要です。例えば、サイトの情報を勝手に書き換えられてしまうのは問題ですよね？従って、サイトの書き込みや更新の権限はサイトの管理者に限定するというような処置が必要です。サイトのアクセス権限に必要な事まず最初に必要な事は、サイトのアクセス権限を設定するのに必要な事を考えます。サイトの権限とは、「誰」が、「（サイトの）どの情報」に、「何ができるか」です。従って権限の設定には、＊　誰＊　どこ（どの情報）＊　権限（何ができるか）　を特定する必要があります。「誰」とは、例えば、「管理者」とか「一般ユーザー」などです。 「どこ」とは、どの情報とか、どのページにアクセスできるかというアクセスの対象を示します。 「権限」は、アクセスの対象に対して何ができるかです。例えば、「読み込み」「書き込み」などです。 さらに細分化すれば、データの新規作成、更新、削除、読み込みなどと必要に応じていろいろな権限が考えられます。どうやって「誰」を特定するか？どうやって、アクセスしている人が「誰」かを特定するには、「ユーザー認証（ログイン）」を利用して、アクセスしている人を特定する場合が殆どです。ログインする事で、アクセスしようとしている利用者が誰かを判別する事が可能になります。会員制のサイトの場合には、会員はログインすることで、会員限定の情報やページにアクセスできるようになるという仕組みです。ログインしていない場合は、会員でないとみなしてアクセスを制限するという形でアクセスの権限を管理する事ができます。一般の

Redux の罠React などでフロントエンドの開発をする場合、Redux を利用するとデータをページ間で共有できるので便利です。しかし、Web ブラウザが動作している PC のメモリを多く消費する場合があるので注意が必要です。Redux の活用React などの開発で、少し複雑なページ構成でフロントエンドのアプリやサービスを開発する場合、ページ間やコンポーネント間でデータの受け渡しが結構面倒になります。シンプルな場合は、パラメータを利用して渡せば良いのですが、ページやコンポーネントの関係が複雑になると結構大変です。そうした場合に利用されるのが Redux です。要はサービス（アプリ）全体でまとめてデータを管理する仕組みで違うページやコンポーネントから共通のデータにアクセスできるので便利です。React のフレームワーク自体はこうした、データをまとめて管理する機能がありません。従って、データをまとめて一元管理する場合は、外部のモジュールである Redux を利用する場合が多くなっています。設定が面倒な Reduxところが、Redux 自体は React とは別のモジュールになるので、慣れないと設定が面倒なので、初めて学習する方には厄介な代物として扱われる事が多くなります。一旦、設定の仕方と、データをやり取りする仕組みを理解して仕舞えばそれほど難しい物ではありませんが、必要な設定を行うファイルや仕組みがわかりにくいので初心者には何をしているのかがよく見えずに使いこなすのに苦労している方が多い様です。やっている事自体はシンプルで、データを更新する際には、「Reducer」と呼ばれ

バックグラウンドで動かすサービス「cron job」！Web アプリや Web サービスを作っていると毎日とか毎週定期的に動かしたい処理がある場合があります。そんな時に役に立つのが「cron job」です。この記事では「cron job」についてまとめて見ました。 「cron job」とは何か？「cron job」というのは余り耳にしない言葉ですが、一言で言えば定期的に実行する処理です。 「毎日何時に」とか「毎週何曜日に」とか「毎月何日に」など必要な処理を予約しておいて、その時間が来ると自動的に実行してくれるというものです。そうした処理の中で「Unix 系」の OS で使われる処理の名前です。Unix 系の OS というと余り身近ではありませんが、無料の OS の代表格である Linux も Unix 系の OS の一つです。今日の話は、多くの人が利用している端末側（PC やスマホ）ではなくて主に Web サーバーなどの話が中心です。 もちろん、こうした端末側（PC やスマホ）でも Unix 系の OS を利用していれば使える機能ですが、今回の記事ではサーバー側での「cron job」の利用方法についてまとめています。「cron job」はどのような時に使うか？では、この「cron job」はどんな時に使うかです。 いろいろな利用がありますが、例えばバックアップなどに利用することが多くなります。クラウド（インターネット）上にいろいろなデータを保存する機会は、スマホがインターネット利用の主流になってよく行われるようになりました。このようなインターネット上に置いたデータは、利用者か

Firebaseアプリのデータベースを管理するには？Firebase のデータベース機能（Cloud Firestore）を利用して作成したアプリの多くは、アプリで利用しているデータベースを管理する必要がある場合が多くなります。作成したアプリの一部として管理する方法もありますが、専用の管理アプリを作成するとセキュリティ上より安全に管理を行う事ができます。この記事では、Firebase のデータベースを管理する専用アプリを Firebase admin SDK を利用して行う方法を紹介します。Firebase データベースのセキュリティールールで管理者を設定できる一番手軽な方法は、作成するアプリの一部として、「管理者モード」を実装してしまう方法です。これは、管理者の Firebase のユーザー ID を特定して、そのユーザーに管理者の権限を設定する方法です。rules_version = '2';service cloud.firestore {  match /databases/{database}/documents {    match /{document=**} {      allow read, write: if request.auth.uid == "uid_for_admin";    }  }}　のようなセキュリティルールを設定すれば、特定のユーザー ID で Firebase のユーザー認証（ログイン）したユーザーは Firebase のデータベース（Cloud Firestore）の全てのコレクション／ドキュメントに対して、読み込みと書き込みができ

みなさんこんにちは。 小学2年生になる息子がいるのですが、 ポケモンが大好きです。 かつ、今後のICT教育を見据え、パソコンにはどんどん触れてほしいと思い、ポケモンアプリを開発しました。アプリの詳細については過去のブログで紹介させていただいております。また、アプリの中でポケモンのBGMを流しているのですが、 そちらの再生方法、停止方法については以下で解説しております。今回はPokemon APIを使用してポケモンの画像やポケモンの名前の取得方法について解説していきたいと思います。この記事がおすすめな人 今回の記事は以下の人に特におすすめです。　・React：初学者、初級者～中級者 　・アプリを開発したい人 　・手順だけを知りたい人 　・コードだけを知りたい人コンポーネントを作成するテキストボックスに任意の数字を入れて、 「ポケモンを取得」ボタンをクリックするとポケモンの画像と名前を取得する仕組みを作ります。 画面構成としては以下のようなコードになります。=============================<Container maxWidth="sm">   <Box sx={{ flexGrow: 1,                bgcolor: '#f5f5f5' }}>       {/* テキスト表示領域 */}       <Grid container spacing={2}>         <Grid item xs={12} align="center">           <Typograp

はじめまして。イプシロンと申します。ココナラブログはじめました。まずは、自己紹介をします！！・・・と、言いたいところですが、自己紹介については、ココナラのプロフィールをご参照ください(笑)↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓https://coconala.com/users/2549559さて、このブログでは以下のカテゴリーに分けて、技術的なコラムや、独り言を徒然なるままに書いていこうかと考えています。①Excel/VBAに関するブログ②Reactに関するブログ③firebaseに関するブログ④コラム的なブログ※カテゴリーは今後変更するかもしれませんが、、、wなぜこのカテゴリーにしているかというと、、、好き！！！だからです。VBAに関してはプログラミングの基本的な構造を学びつつ、Excelを自動化したり、webスクレイピングをしたりと遊べる範囲が広いですし、Reactに関しては、コードにかなりクセがありますが、webアプリをサクサク作れる点に魅力を感じます。どちらの言語も習得するまでに私はかなり時間がかかりましたが、自分に対する備忘録的な意味合いも含めて、少しでも面白可笑しく綴っていこうかと思います！なお、私のサービスにもExcel/VBA、React/firebaseを利用したサービスを展開しておりますので、一度足をお運びくださいwExcel&VBAを活用したスクレイピングサービスになります。サイトの情報をExcelに抽出したり、入力したり、単純作業を自動化するサービスです。BUYMAのバイヤー様必見のサービスです。最近TVCMも放送していて盛り上がってきてますね！

Vue と Vite の環境変数で Firebase のプロジェクト情報を設定する！前回の記事では、環境変数の基本的な使い方を紹介しました。今回は、Firebase のプロジェクト情報を環境変数で扱う具体的な方法を紹介します。Firebase のプロジェクト情報Firebase を利用するには、Firebase のプロジェクト情報を使って、Firebase を使うための初期設定が必要になります。Vue や React などのフレームワークを利用する場合には、npmなどのパッケージマネージャを利用する場合が多いと思いますが、その場合は、Javascript で Firebase の初期設定を行う際に Firebase のプロジェクト情報を使います。直接コードに埋め込む事もできるので、プログラムを再利用したり配布したりしない場合にはこの方法でも問題ありません。しかし、プログラムを再利用したり、配布・公開する場合には、特定の Firebase の情報をそのまま拠有するのはセキュリティ上余り好ましい事ではありません。もちろん、フロントエンドから Firebase を利用する場合には、いずれにしてもプロジェクト情報はソースコードの一部になるので、Web ブラウザを利用すれば取得できるわけですが、それでも、プロジェクト情報は共有しない方が無難です。また、再利用する方でも、プログラムのコードを変更するよりは、環境変数として設定する方が、間違いも少なく安全です。環境変数を利用した Firebase の初期化のコードでは、早速 Firebase のプロジェクト情報を環境変数として設定する方法を紹

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 =

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

短期間で Web アプリを作れるようになるには？プログラミングの学習を始めてどれくらいで Web アプリが作れるようになるかという質問をよく頂きます。どんな Web アプリを作るかにもよりますが、シンプルな Web アプリならば 1 ヶ月の勉強でも十分に可能です。この記事では、プログラミングの学習を始めて 1 ヶ月で Web アプリを作るための方針について考えてみました。（＊）この記事は、Windows10 で開発を行うことを想定して書いています。Mac や Linux でも基本的には同じですが、利用するコマンドや、ダウンロードするファイルなどが若干異なります。シンプルにする事が重要1 ヶ月という限られた時間で Web アプリを作るには、シンプルにする事がとても重要です。 ここで言う Web アプリは、商品として販売するようなアプリではなく、機能を優先したアプリという前提にします。 商品としてお金を頂いて提供する場合には、見かけも重要ですし、十分なテストも必要です。勿論、これらを含めた上で 1 ヶ月で完成させることも可能ですが、まずは欲張らずにアプリの機能を実現して、最低限の見栄えのアプリを作る事にします。Web アプリのコーディングをするのに必要な物は：＊　HTML＊　CSS＊　Javascriptです。1 ヶ月で Web アプリを作るために、必要最低限の学習に集中する事が必要になります。そこで、最初は「CSS」は無視して考えます。 基本的に、CSS は HTML で記述された Web ページの体裁を整えたりするのに使用します。実際は、体裁以外にもいろいろできますが、最初は体

Firebase のセキュリティルールで面倒な「場所」Firebase のセキュリティルールを設定する上で一番面倒なのが場所です。理由は簡単で、種類が多いからです。「人」は、ユーザー認証（ログイン）で区別できますし、「出来る事」は、基本的には「読み込み」と「書き込み（作成・更新・削除）」です。しかし、「場所」は、使い方にもよりますが、シンプルには全部書き出せません。この記事では Firebase のセキュリティルールで指定する場所について紹介します。何故「場所」が面倒なのか？面倒な理由は、「場所」の範囲を特定できないからです。 人の場合は、ログイン名（Firebase の場合基本は E-Mail アドレス）や UID(ユーザー ID)で特定できます。出来ることも、基本は読み込みと書き込みで、全部挙げるのは簡単です。つまり、比較的簡単に特定できて指定可能なので殆どの場合問題になりません。しかし、アクセスを許される「場所」の場合は、範囲の特定が難しいので面倒になります。復習を兼ねて人を指定する場合の基本は：＊　特定の E-Mail アドレスか UID(E-Mail や UID が一致する利用者)＊　ログインしているかしていないか出来ることの場合は、＊　読み込みが出来るか＊　書き込みが出来るか（新規作成できるか、データの更新ができるか、削除できるか）基本的にこれだけです。ところが場所の場合は、シンプルにいかないケースがあるので面倒ということです。ブログサービスの場合は簡単！場所の指定も、ブログサービスの場合は実はシンプルです。 前回の記事で紹介した通り、利用者は、「サイトの運営者（管

セキュリティルールに必須！〜利用者の特定Firebase のセキュリティルールを設定する上で必要なポイントは「人」「場所」「出来る事」と言う話を紹介しました。その中の一つの「人」を区別するには、ユーザー認証（ログイン）が必要になります。一見シンプルなログインですが区別の仕方によって作り方も使い方も変わってきます。この記事では、ユーザー認証をどの様に利用するかを紹介します。どのような「区別」が必要か？ユーザー認証（ログイン）を利用すれば、使っている人が誰なのかを特定することができます。Firebase のセキュリティルールを設定する上で利用者を区別する必要があるので、ユーザー認証はある意味必須です。しかし、実際にどの様に利用するかで実際のサービスの実装は変わってきます。前回の記事でも紹介していますが、利用者の区別の方法は幾つかあります。それによってユーザー認証（ログイン）の処理が必要な場所も変わってきます。もちろん、開発するサービスやアプリの機能によってそのやり方も大きく変わってしまいます。そこで、この記事では現在紹介している「ブログサービス」を例に考えてみます。ブログサービスの場合はユーザー認証は不要！？Firebase のセキュリティルールを設定するためには、利用者の区別ができれば良いわけです。従って、ブログサービスの場合は、基本は「ユーザー認証」は行わないと言う方法が一般的に使われます。 ユーザー認証を行わないでどうやって区別するかという事ですが、あくまで「基本的に」行わないと言う事です。つまり、一般の利用者は「何もしない＝ユーザー認証をしない」と言う方法で区別します。一方

スマホアプリのセキュリティルールFirebase は Web 系のアプリだけではなく、スマホのアプリでも活用できます。いずれにしても、サーバー側以外から Firebase のデータベースやストレージを利用する場合には、セキュリティルールの設定が必要です。この記事ではその違いについてまとめてみました。Web ブラウザからのアクセスWeb サイトを利用してアプリやサービスを提供する場合、基本的にアプリやサービスのプログラムは Web ブラウザ上で動作することになります。Web 開発者の方はご存知の方も多いと思いますが、Web アプリやサービスで利用するファイルは全て簡単に見ることができます。Web ページの基本となる、HTML や CSS のファイル、プログラムの Javascript のファイル、画像情報などは、大抵の Web ブラウザの拡張機能や、簡単なコマンドで閲覧可能です。Web ブラウザやクライアント（スマホなどのアプリ）から Firebase の機能を利用するためには、API キーなどの Firebase のプロジェクトに割り当てられた情報が必要になります。これらの設定情報も、Web ブラウザなどで閲覧可能な情報に含まれているため、調べようと思えば調べることが可能です。これらの情報が比較的簡単に見つけることができる関係上、不正アクセスを行うためのハードルが下がってしまうのが問題です。スマホのアプリの場合は？Web ブラウザと違って、スマホのアプリは、スマホ上で動作するプログラムです。iOS のアプリの場合は、Swift か Objective ー C、アンドロイドのアプ

2 つの Firebase セキュリティルールフロントエンドから Firebase のデータベースやストレージ機能を利用する場合、セキュリティルールの設定が必要になる場合が殆どです。セキュリティルールの設定は仕組みをよく理解していないと原因の特定に時間がかかる場合があります。基本は Firebase コンソールで設定Firebase のデータベースやストレージ機能を利用する場合、アクセスの権限はセキュリティルールを設定して管理します。Web 系のアプリの場合、Web ブラウザでフロントエンドのコードを実行するために、Javascript のソースコードを見ることができるため、プログラムのコードとは別にセキュリティ対策を行わないと問題になる場合が多いのが大きな理由です。通常設定は、Firebase のコンソールで行います。データベースやストレージの機能を有効にする際に設定することが求められるようになっています。開発時に最初から完全なセキュリティルールを設定するのは難しい場合も多いので、開発用の設定も準備されています。開発用の設定の場合、約 1 ヶ月先の日付を指定して、その期日前ならば全ての読み書きのアクセスの権限を許可して、基本機能の実装に集中することが可能なようにする事ができます。ただし、この開発用の設定の場合は、全ての権限が全ての利用者に与えられることになるので、注意しないとアプリの情報を改変されたりする可能性があります。従って、このモードで利用する場合は、インターネットに公開しないで、開発用の PC 上でテストをして利用する場合などに限定して利用するのが普通です。実際は、イ

Firebase データベースのコレクションのリストの取得Firebase のデータベースを利用する際、特にサブコレクションを作成する場合、コレクションのリストが欲しい場合があります。この Firebase のデーターベースのコレクションの作成はちょっと面倒です。この記事ではコレクションのリストの取得の方法を紹介します。面倒なコレクションの取得実は Firebase のデータベースのコレクションの取得はちょっと面倒です。通常の Firebase のフロントエンドのインターフェースでは、コレクションの一覧を取得する API はありません。従って、フロントエンドのみの実装ではデータ構造を工夫して、コレクションのリストを間接的に取得できるような仕組みを作って置くような工夫が必要です。取得できない情報を別の形でデータベースに保存しておくようにします。 こうすることで、Firebase の制限を超えた実装が可能になります。SDK による違いFirebase にはフロントエンドとバックエンドでは違ったインターフェースを持っています。 Web アプリなどでフロントエンドの Web ブラウザで実行するコードの場合は、CDN（Contents Delivary Network）を HTML の中で指定する形や、NPM などで Firebase のモジュールをインストールします。一方で、バックエンドで利用する場合には、「firebase admin SDK」を利用します。こちらの方は、いわゆる Node.js で利用するので、NPM で frebase admin SDK をインストールして利用し

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

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

FirebaseのセキュリティルールからのデータベースアクセスFirebase のデータベースのセキュリティルールを設定する際に、Firebase のデータベースのデータを利用することが可能です。前回の記事では、グループ毎の Firebase のデータベースのアクセスをシンプルにするために、カスタムでユーザー情報のコレクションを作成して利用する方法を紹介しました。実は、Firebase のデータベースのセキュリティルールの中からデータベースのアクセスをする場合には幾つか注意があります。この記事では、Firebase のセキュリティルールからデータベースを利用する場合に気をつけることをまとめて見ました。Firebase のセキュリティルールからのデータベースアクセスFirebase のセキュリティールールの中で Firebase のデータベースにアクセスできる機能はとても便利です。この場合、見落としやすいのは、セキュリティルールのために作成したデータベースへのアクセスです。例えば、前回紹介した、グループアクセス管理のためのユーザーコレクションを考えてみます。aaa zzz＠xx.com aaa 1 ZZZ YYYY bbb xxx＠xx.com bbb 1 XXX WWWW ccc vvv＠yz.net ccc 2 VVV UUUU 　例なのでシンプルに３人のユーザ「ZZZ」「XXX」「VVV」を考えます。 コレクションには各ユーザーに対応したドキュメントを保存します。{  "docId": "ドキュメントID",  "email": "E-Mailアドレス",  "uid":

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

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

選択した 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&

React Router で良く起きる問題！　〜　ページがない！React Router を利用すると、React で作成したアプリを複数のページで構成する Web サイトとして構成することができます。しかし、実際に Web サーバーで公開すると「ページがない！」というエラーが発生する場合があります。一体何が起きているのでしょう？React Router は何をしているのか？React Router は一体何をやっているのでしょうか？ React Router は、React の拡張機能で、Web ブラウザでページの URL を指定すると、別のページがあるように表示できる機能です。この時、どのページを表示するかを決めているのは実は React が作った、Javascript のコードでページを作っています。ところが、この処理を普通は Web サーバーが行なっています。通常は、Web サーバーが Web ブラウザが指定された URL をもとに Web サーバーにリクエストを送って、Web サーバーがどの表示するかを決めて Web ブラウザに表示するページを送っています。このどのページを表示するかを決める処理を「ルーティング」と呼んでいます。サーバーにはページがない！React で React Router を使って利用している場合には、React が表示するページを作って、index.htmlに表示させています。つまり、「サーバーにはそのページはない」のでエラーになります。でも、React の開発用のサーバーを「npm start」で起動して動かすと問題なく動きます。 これは、R

Firebaseのホスティングで出来る事と出来ない事Firebase のホスティングを利用すると、必要な時はすぐにでも Web サイトを開設できるのは大きな魅力です。利用もアクセスが多くなければ無料で運営できるのも個人で事業をする場合などはありがたい料金プランです。この記事では、Firebase のホスティングでできることと出来ない事を少し詳しくまとめてみました。コンテンツが揃えば３０分でサイトが稼働できる！最大の魅力は Web サイトのコンテンツがあれば、直ぐにでも Web サイトを開設できるのは大きな魅力です。例えば、現在別のホスティングサービスを使って運営しているサイトのコンテンツを使って Freibase のホスティングによる運営に切り替える場合、作業時間自体は３０分もあれば簡単に切り替えることができます。（＊）カスタムのドメインを割り当てる場合、ドメインの所有権を確認するのに少し時間がかかるため、その場合はもう少しかかります。Firebase のホスティングを利用するのに必要なのは以下の３点です＊　Google アカウント＊　Firebase プロジェクトの作成＊　Firebase CLI を利用するために、Node.js のインストレーション　　これに加えて、サイトのコンテンツがあれば短時間で簡単にサイトを立ち上げることができます。Firebase ホスティングを利用するステップFirebase のホスティングを利用するためのステップもシンプルです。最初にやることは、Google アカウントの取得です。既にお持ちの場合はそのままお持ちのアカウントで利用できます。お持

FirebaseUI でログイン機能を簡単実装！前回は、Google のユーザー認証を Firebase で利用する具体的な例を紹介しました。 Firebase は他にも大手のサービスのユーザー認証を利用して、あなたのサービスのユーザー認証機能（ログイン）機能に組み込める仕組みを提供しています。 この記事では、大手サービスのユーザー認証に加えて、FirebaseUI についても前回の記事より詳しく解説します。FirebaseUI で開発時間の大幅短縮！前回の記事でも紹介していますが、Firebase はユーザー認証で簡単に利用できる UI(ユーザーインターフェース)を予め準備して提供しています。ユーザー認証機能（ログイン機能）の実装も自分でゼロから作ると面倒ですが、UI もゼロから作ると意外に時間がかかる物です。この、予め用意された UI である「FirebaseUI」を利用すると、ユーザー認証（ログイン機能）の部分の実装は殆ど何もしなくても、あなたの Web サービスに組み込む事ができます。しかも、大手のサービスのロゴなどが含まれていて、他のサービスでよく見かけるイメージでの UI なので利用者にもわかりやすい UI の実現ができます。特に特別な UI が必要でない場合、Firebase が予め用意している FirebaseUI を利用すれば、業界標準のログイン機能を開発時間「ゼロ」で実現できます。利用できる大手のサービス以前にも紹介していますが、Firebase のユーザー認証に利用できる大手のサービス（以下サービスプロバイダ）は、たくさんあります。インターネットのサービス

Firebaseで何ができるのか？Firebase は便利な「仕組み」ですが、何ができるのかは使ったことがない方にはわかりにくいですよね？そこでこの記事では、Firebase を使うと何ができるのかを簡潔に説明してみました。Web ブラウザだけでもアプリは作れます！よく「フロントエンド」と呼ばれているのは、Web ブラウザの中で動くプログラムの事を指しています。基本的には Javascript のプログラムということになります。最近、開発に活用される事が多くなった Typescript の場合、実際に実行する際には Javascript に変換されて利用されるので、基本的にブラウザで実行されているのは Javascript のコードということになります。Web ブラウザの中だけで「完結」する機能の場合は、Javascript のプログラムを書けばアプリは作れます。あとは、利用者が使いやすいようにユーザーインターフェースを HTML で作ればアプリを実装する事ができます。React や Vue は何をしているか？React や Vue などのフレームワークは基本的には HTML を利用したユーザーインターフェースを作りやすくする仕組みです。シンプルなアプリの場合は、こうしたフレームワークを使わなくても直接 HTML を書いても比較的簡単にページのデザインができます。しかし、表示内容をデータに応じて書き換えたりする場合、つまり動的に表示内容を変えたりする場合は、React や Vue といったフレームワークを利用した方が便利です。従って、少し複雑なユーザインターフェースが必要なアプ

FirebaseでSendGridを利用するSendGridというサービスをご存じですか？ SendGridはE-Mailを配信するためのサービスです。メルマガやニュースレターのように、登録したユーザーにメッセージを一括して配信したりすることができます。また、配信の日時を予め設定して配信したりする事もできます。 さらに、配送したメッセージのトラッキングなどの機能を提供しています。メッセージが届いたか、メッセージが開封されたかなどのイベントを追跡してマーケティングなどに役立てることもできます。 SendGridのサービスの利用方法 SendGrid自体も、Webサイトを提供していて、Webサイトから様々な設定やメッセージの配信が可能です。従って、特にプログラミングをしなくてもサービスを利用することができます。 サービスは無料から利用可能です。１日あたり１００通までのE-Mailの発想は無料プランで利用できます。（アメリカでSendGridが提供する無料プランの場合） 日本では、いくつかの代理店がSendGridのサービスを提供しています。構造計画研究所の提供するプランでは、月に１２，０００通までのE-Mailが無料となっています。（2020年11月現在） SendGridのサービスの仕組み SendGridのサービスは既存のE-Mailアドレスを使ってメッセージを配信するサービスです。SendGridがE-Mailアドレスを提供するわけではなく、すでに取得しているE-Mailアドレスを使って、SendGridの配信システムを使ってE-Mailを送るサービスです。つまり、

Firebaseデータベースでドキュメントごとにセキュリティルールを設定するFirebaseでデータベース（Cloud Firestore）を利用する場合、セキュリティルールの設定はとても大切です。 Firebaseコンソールでデータベース（Cloud Firestore）を作成した際に標準で設定されるルールはとてもシンプルなものです。実際の運用では、さらに細かいセキュリティルールが必要になる場合が殆どです。 コレクション毎のセキュリティルールの設定は比較的シンプルで分かりやすいので余り問題にならないと思いますが、ドキュメントごとにセキュリティルールを設定する場合は少し複雑になるのでなれないとルールの設定に時間を取られてしまう場合もあります。 この記事では、Firebaseの登録ユーザの拡張を考えた場合のセキュリティルールを例にセキュリティルールの設定の仕方を解説しています。 Firebaseが管理するユーザー情報 Firebaseでは、ユーザーの認証機能が用意されていてユーザーの管理や認証を簡単に実装することを可能にしています。 Firebaseから入手可能なユーザーの情報はE-Mailアドレスとパスワードの認証を理容師ている場合は次の様になります。 ＊　E-Mailアドレス(email) ＊　ユーザーＩＤ（uid） が基本的な情報です。これ以外の情報が必要な場合は、別にカスタムでテーブルを作って管理する必要があります。 グループごとにユーザーを管理することを考える 例えば、グループごとに管理者を置いてユーザーを管理することを考えます。 この場合は、Firebas

FirebaseでWebサイトを作れるの？Firebaseにはホスティング機能があるので、FirebaseでWebサイトを作れます。 しかも、最初は無料でスタートできます。運営してく過程でアクセス数や使用している容量が無料の範囲を超えると料金が発生しますが、殆どのサイトの場合は無料の範囲内でも十分運営ができる場合が多いです。 Firebaseを利用したWebサイトとして考えられるのは大きく分けて３種類です。 * 従来のHTML/CSSなどを主体としたシンプルなサイト * フロントエンドのフレームワーク（ReactやVue）を利用したサイト（Webアプリも含みます） * サーバー側のレンダリングも含めたサイト（Next/Nuxtなどを利用） です。 多くのWebホスティングは、WordPressを主体としたWebサイトのホスティングを前提にしている物が多いですが、Firebaseの場合は、必要に応じて目的のサイトにあったWebホスティングの形態を選ぶことができます。Webサイトだけではなく、ランディングページも簡単に作成できます。 従来のHTML/CSSを主体にしたシンプルなサイト HTMLやCSSを中心に構成される従来型のシンプルなサイトは、簡単にFirebaseでWebホスティングできます。もちろん、HTMLファイルからJavascriptなどのプログラムも動かす事も可能です。 こうしたサイトを作るのに必要な事は、必要なHTML/CSSのファイル、さらに必要な場合は画像ファイルなどの素材やJavascriptなどのファイルを準備するだけです。 後は、Firebas

毎度様でした。お久しぶりです。（旧名Taxintianです。）前回ブログを書いたのは1/28。 そこから約2ヶ月、地に足つけて積み上げた結果、 クラウド同期付きのWebアプリを作れるようになりました。その名も、「人生クエスト」！！！ネーミングセンスがベタすぎるって？まあまあ、そこは大目に見てくださいｗ今回作ったのは、習慣を「クエスト」として管理するWebアプリです。やるべきことをゲーム感覚でこなしていくことで、自然と継続できるように設計しました。僕、今まで継続して何かをこなしていくっていうことがとても苦手だったんです。地味だし、なかなか成長してきた実感は可視化されるものじゃないし。ただ、毎日少しずつでもクエスト消化して、それを継続していくことによって、Expゲージを少しずつ伸ばしていけるUIを見て、「あぁ、成長したな！」って少しでも思えるようになったらいいんじゃないかな？って思ったんです。それで作り始めたのが、この「人生クエスト」でした。↓経験値ゲージが、水が流れるように動くUIにも凝りました＾ω＾また、今回行ったアップデートで、 ただのローカル管理アプリから、 「クラウド同期できるアプリ」 へ進化しました。・Googleアカウントを使ってログインできる機能・自動でクラウド同期できる機能などを実装することが出来ました。正直、一番苦戦したのは 「ローカルとクラウドの扱い」でした。 どのタイミングで保存するか、 どうすれば自然に同期されるか、 ここをかなり試行錯誤しましたね。特に意識したのは、 「ユーザーが不安にならないこと」です。 ・同期中の表示 ・最終同期時刻の表示 などを

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 のログイン機能の設定前回は、Vue と Firebase を利用してログイン機能を実装する方法を紹介しました。今回は、Firebase 側のもう少し詳しい設定について紹介します。Firebase のログイン機能Firebase のログイン機能については、前回の記事では簡単に触れただけでした。どちらかというと、Vue の記述方法を中心に紹介したので、今回は、Firebase のログイン機能を中心に紹介します。Firebase はデータベースやオンラインストレージなどいろいろな機能を提供しています。本来は、Web サーバー側でサポートする機能を簡単なインターフェースで利用できるようにしているのが便利な点です。その中の機能の一つがログイン（ユーザー認証）機能です。このログイン機能もいくつかの方法が提供されてます。シンプルに、E-Mail アドレスとパスワードでユーザー管理する方法から、メジャーなインターネットのサービス、Google や Facebook といったサービスのユーザー認証（ログイン）を通して、利用者を特定する方法、携帯の電話番号を利用する方法など、必要に応じて選べるようになっています。Firebase の利用には、Google のアカウントが必要です。この連載でも、何度か紹介していますが、Firebase を利用するにはまずは Google にアカウントを作成してください！Firebase コンソールFirebase の各種設定をするには、基本的にFirebase コンソールを利用します。「コンソール」といっていますが、要は Web サイトです。このサ

VueとFirebaseを使ってログイン機能を作るには？Vue の基本を一通り学習したところで少し実践的な実装例を紹介します。この記事では、Firebase のユーザー認証機能を利用して、ログイン機能を Vue で作成する例を紹介します。Vue のプロジェクトを作成今回は、Vue Router や Pinia などを使わずにシンプルに、ホームページを表示するという簡単な例にしてみました。簡単に実装内容を説明すると：＊　ログインしていない場合は、ログインフォームを表示＊　ログインしている場合には、「Home.vue」を表示　という仕様にします。ログインフォームは再利用できるように「部品化」します。「src/App.vue」で表示の切り替えをするようにします。 「src/components/LoginForm.vue」でログインに必要な情報を入力するフォームを作成します。「src/view/Home.vue」がホームページになります。まずは、サンプルプロジェクトを作成します。$ npm init vueVue.js - The Progressive JavaScript Framework✔ Project name: … vue-firebase-sample✔ Add TypeScript? … No / Yes✔ Add JSX Support? … No / Yes✔ Add Vue Router for Single Page Application development? … No / Yes✔ Add Pinia for state management? …

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

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

Firebase を使ったサービスの管理アプリを Electron で作る！Firebase のストレージとデータベースの機能を利用して Web サイトを利用する際に必要になる管理用のアプリを Electron を利用して作成する方法を紹介します。どうて Electron を使うのか？Firebase の機能を利用したサービスを作る場合、管理用の機能が必要になる場合がたくさんあります。 管理用のためのアクセスと一般の利用者のアクセスは違う場合が多く、管理用のアクセスではサイトに記事を投稿したり、投稿の変更（修正）をしたり、不要な記事を削除するなど、通常の利用者とは違う操作が必要になります。これを行うのは限られた利用者（ユーザー）のみで、この権限を悪用されるとサイトの内容が改変されたりしてセキュリティ上の問題となります。もちろん特定のユーザーとしてユーザー認証（ログイン）したユーザのみの利用にすることは言うまでもありません。しかし、パスワードが破られるとアクセスが可能になってしまいます。完全なセキュリティ対策は無いものの、もう少し高いセキュリティを考えると、管理用の機能はインターネットに公開しないと言う対策は一つの方法です。つまり、インターネットではなく管理用の PC にアプリを入れて管理するという方法の方がより安全ということになります。インターネットから管理できる方が便利ですが、安全を優先する場合にはデスクトップアプリの方が良いということになります。そこで、デスクトップアプリを Electron を利用して作る方法を取り上げてみました。Electron の正体は何か？ここで E

知らないと損をする Firebase ストレージのセキュリティルールFirebase のストレージのセキュリティルールは、Firebase のストレージのバケット（bucket）にアクセスするためのルールです。Firebase のストレージのファイルに割り当てられている URL を取得する事ができますが、この URL のアクセスには適用されません。 Firebase のファイルの URL へのアクセスは、セキュリティルールでは管理できません。この記事ではその詳細について紹介しています。セキュリティルールでカバーされない URL アクセス知らないと損をするというのは、Firebase のストレージにあるファイルに URL を使ってアクセスする場合です。 実は、このアクセスには、Firebase のセキュリティルールが適用されません。これを知らないと、会員のみに公開している内容が誰でもみる事ができる状態になっていると言うことが起こってしまいます。とは言った物の Firebase のストレージのファイルにアクセスするための URL を取得するには、セキュリティールールでアクセスの権限を持っていないと取得はできません。従って、あるレベルのセキュリティは存在します。セキュリティルールで管理できることでは、セキュリティルールで管理できるのは何かという事になると思いますが、それは Firebase ストレージのバケット（bucket）に対するアクセスです。Firebase のストレージのバケットにファイルを保存したり、バケットにあるフォルダやファイルの一覧を取得したり、個別のファイルの情報を

Firebase のイベント機能Firebase にはイベントを検出して処理する機能がサポートされています。上手く利用すると便利です。 よく利用されるのは、Cloud Firestore の「onSnapshot()」などがあります。ユーザー認証機能（Authentication）の「onAuthStateChange()」などもよく利用されます。この記事では、簡単にイベント検出機能の利用例を紹介します。イベントの検出機能Firebase の「onXXX」機能は基本的にイベントを検出する機能です。 この機能をどう使うかというと、簡単に説明すると「イベントの検出」と「イベントの処理」をペアで実装します。＊　Firebase はイベントを検出＊　そのイベントに対応した処理を行う　という感じで利用します。 イベントの処理の多くはアプリケーションの機能によって実装します。例えば、Cloud Firestore の「onSnapshot()」の場合は、指定したデータベースのデータが更新されると、この処理が呼ばれる仕組みです。Web サイトのあるページで Firebase のデータのリストを表示している場合、データが更新された場合、表示するデータも更新するような用途で利用します。こうすることで、表示しているデータは常に最新のデータにすることができます。onSnapShot の利用具体的な実装例です。Cloud Firestore の「users」のドキュメントのデータが更新されると Firebase のデータベースからデータを読み込んで React のステートのデータを更新します。データが

Firebase が初心者に向いている理由は？Web 開発を行う場合、バックエンドのサービスやデータベースも必要になる事になる場合も多い物です。これまでの投稿で、バックエンドのサービスなどを使う場合はサーバーの選択も重要な要素だということも紹介してきました。そう考えると、Firebase を利用する事は初心者にとって大きなメリットがあります。データベースのアクセス自前でデータベースを用意して、バックエンドでアクセスする場合は、どの程度データベースの書き込みが集中するかを考慮する必要があります。当たり前ですが、「書き込み」はデータベースのデータを「変える」アクセスです。従って、同時に同じテーブルに各アクセスは制限されます。従って、短時間の間にデータベースに書き込めるアクセス数は限りがあります。従って、大量の同時書き込みが様相される場合は、実装の際には工夫が必要です。Firebase を利用する場合は、そうした「工夫」を Firebase 側でやってくれています。つまり、Firebase を利用して開発を行う場合、そうしたプログラミングからは直接見えない場所を余り気にする事なく、機能の実装に集中する事ができます。Firebase の場合、１秒間あたりの最大書き込み数は、10,000 ですこれはとても大きな値で、通常のアプリでは十分と言える性能です。バックエンドの実装Firebase でバックエンドの機能を実装する場合、「Functions」を利用する場合が多くなります。このバックエンドの Functions を動かすサーバーも Firebase の場合、十分な性能が確保されています

NuxtアプリをFirebaseでホスティングするには前回の投稿で紹介したように、NextやNuxtのようなサーバ側でレンダリング（描画）をするアプリの場合は、インターネットに公開するための設定方法が少し面倒になります。これは、通常のWebサーバーの機能である、リクエストされたURLの情報を提供する以外に、リクエストされた「ページを作る」という処理が必要になるためです。この記事では、NuxtのアプリをFirebaseでホスティングするための設定方法の詳細を紹介します。必要な手順NuxtアプリをFirebaseで公開する手順です。前提条件として、公開したいNuxtのアプリはすでに開発済ということでその後の手順について紹介します。この例では、Nuxtのテンプレートのプロジェクトを公開するという形で紹介していきます。1. Nuxtのアプリを作る2. 公開用のフォルダを作成3. Firebaseの設定4. テスト5. 公開（deployment）Nuxtのアプリを作る今回は、Nuxtのアプリの実際の実装は行いません。テンプレートのアプリをそのまま公開するという前提ですすめます。テンプレートのアプリは、「create-nuxt-app」を使って作成します。開発用のPCにインストールされていない場合は、まずこのパッケージをインストールします。$ sudo npm install -g create-nuxt-app$ npx create-nuxt-app nuxt-sample(*)Windowsの場合「sudo」は必要ありません。コマンドを実行すると、プロジェクトの設定について聞かれる

Next/Nuxt で作ったアプリもホスティングできる FirebaseWeb アプリをサーバーサイドのレンダリングを利用して実装するフレームワークは、Next や Nuxt がよく利用されますが、実際にインターネットに公開する場合はフロントエンドのフレームワークの React や Vue を利用した場合に比べると少し面倒なケースが多くなります。理由は、当然と言えば当然ですが、サーバー側でバックエンドのプログラムを動かす必要があるのが大きな理由です。Firebase はバックエンドのサービスを Functions(Cloud Functions)という形でサポートしているので、Nuxt のアプリをホスティングすることもできます。この記事では、まずは、Firebase で Nuxt のアプリをホスティングする仕組みについて概要を説明します。詳しいやり方は別の記事で改めて紹介する予定です。サーバー側のレンダリングとは？最初にまず「サーバー側のレンダリング」（Server Side Rendering/SSR）について簡単に説明します。Web サイトの基本的な仕組みは、サーバーに HTML で書かれたファイルを置いておいて、Web ブラウザが URL を指定して表示するデータを受け取ることで実現しています。シンプルなサイトの場合は、HTML ファイルに書かれた HTML の情報を受け取って表示するのが「静的サイト」と呼ばれるものです。「静的」なので、基本的に表示される内容は予め HTML 書かれた情報に固定されていて、別な情報を表示するにはサーバーにあるファイルを更新する必要がありま

初心者でも簡単！FirebaseでGoogleのアカウントで認証する方法Firebase のユーザー認証（ログイン機能）は、簡単に利用できるので Web アプリや Web サービスで利用者の特定に簡単に組み込むことができます。一般的によく利用されているのが、E-Mail アドレスとパスワードによる認証です。ところが、最近はアカウントのセキュリティを強化するために、二段階認証などを取り入れるサービスも増えています。現状では、Firebase の E-Mail アドレスとパスワードの認証では、自分で実装しない限り二段階認証はサポートされていません。そこで、大手のサービスの認証を利用して Firebase のユーザー認証を行うと大手のサービスと同等のアカウントのセキュリティを確保することができます。この記事では、Firebase がサポートしている Google のアカウントを利用して認証する方法を取り上げてみました。Google のアカウントを利用した認証の仕組み今回紹介するログインの仕組みは、一言で言うと Google が利用者の認証を行うという物です。Firebase では、Google が認証した結果を受け取って利用者の識別をすると言う物です。ユーザー名もパスワードも管理は Google が行うのでセキュリティは Firebase のシンプルな E-Mail アドレスとパスワードの認証よりは信頼性は当然高くなります。Google のアカウントの場合、二段階認証もサポートしているので、パスワード以外の確認もできるようになるので、セキュリティは高くなります。また、パスワードの変更