すべてのカテゴリ

Firebaseによるバックエンドの実装時のCORS設定Firebaseでバックエンドの実装を行う場合には幾つかの実装方法があります。 同じFirebaseのプロジェクトフォルダでバックエンドもフロントエンドも実装してしまう場合は問題になりませんが、フロントエンドとバックエンドを別々に実装する場合には注意が必要です。 フロントエンドとバックエンドの両方をFirebaseを利用してホスティングする場合でも、開発中に一時的にでもフロントエンドとバックエンドのドメインが同じでない状態になる可能性があります。 そうした場合は最新のWebブラウザの多くがセキュリティ対応の一環で違うドメインへのアクセスをブロックすることがあるからです。 こうした場合は、CORS（Cross Origin Resource Sharing）の設定が必要になります。 例えば、バックエンドのサービスを「ｈｔｔｐｓ://xxxx-xxxx.web.app」というドメインにすでに公開していて、フロントエンドの開発のテストを「ｈｔｔｐ://localhost:3000」で行ったりする場合です。この二つのサーバのドメインは同じではないので、CORSの設定が正しくされていない場合、最新のWebブラウザがバックエンドのアクセスをブロックしてしまうのでバックエンドのサービスを利用できません。 一方で、フロントエンドとバックエンドをFirebaseの同じプロジェクトフォルダで実装する場合には、この問題は起きません。フロントエンドもバックエンドも同じドメインになるからです。 フロントエンドとバックエンドの両方の実装が必要

FirebaseでReact Routerを使うには？FirebaseとReactという組み合わせは、Webアプリ、Webサービスを作る場合よく利用される組み合わせです。 Reactと合わせて利用される機能にReact Router (react-router-dom)があります。これは、React内でページを切り替えるための機能の拡張ですが、実際のWebサイトのページを切り替える感覚で利用できるので便利な機能です。 例えば sv-sw.com/firebase のようにドメインに続いて「firebase」のようにパス（Path）を指定すると、そのページがあるかの様に表示を切り替えてくれる機能です。 Reactのアプリのページは基本的に「１ページ」 よく、１ページアプリとも言われますが、実際にReactが使っているページは、通常は「index.html」だけです。Reactのプログラム内で、「firebase」というページ（のようなもの）を作った場合でも、実際のページは存在しません。 実は、この辺りが、実際にWebサーバーにReactアプリを公開しようとする場合（デプロイする場合）にちょっと混乱する部分です。 Webホスト（サーバー）が管理している「ルーティング」 元々は、Webサイトの全てのHTMLファイルはWebホスティングしているWebサーバーにおいてあって、ブラウザから要求されたファイルをWebホストが提供していました。最近のWebサイトは実際のファイルがない場合も多く、仮想ファイルをサーバーが判断してWebブラウザに提供しています。 サーバー側でのレンダ

Firebaseでオンライン決済をするには？Stripeを利用したオンライン決済にもFirebaseを活用できます Webサイトでオンライン決済ができると、Webサイトで商品の販売ができます。 オンラインコンテンツの販売などをするサイトも簡単に構築できます。 オンライン決済を自分で全て作ろうと思うと大変です。 しかし、外部のオンライン決済サービスを利用して、Firebaseと組み合わせるとオンライン決済も意外に簡単に実現できます。 この記事ではStripeというオンライン決済のサービスを利用して自分のWebサイトに組み込む方法について解説しています。 Stripeとは？ オンライン決済を提供するアメリカのサービスです。日本でもサービスを提供しています。他のサービスもありますが、比較的簡単に実装できるStripeを活用した例をこの記事では紹介します。 Stripeのサイトに行って開発者というメニューを選択すると英語の情報が主体ですが、Stripeを利用したオンライン決済の実装の仕方が解説されています。今回紹介するのが構築済みチェックアウトという仕組みです。 これは、Stripeが決済の為の画面（UI：User Interface）を予め構築しているサービスです。これを利用してご自分のWebページからこの画面を呼び出して決済するという方法です。クレジットカードの入力などの決済の手続きは全てこの画面で行うことができるので、あなたのWebページでは決済情報を扱う必要がありません。 Stripeの決済の流れ Stripeでオンライン決済を行う場合の流れです。決済の手続きそのも