すべてのカテゴリ

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でオンライン決済を行う場合の流れです。決済の手続きそのも

占い師が抱える3つの大きな壁占い師として活動していると、必ずぶつかる共通の壁があります。一つ目は、鑑定文を毎回ゼロから書く負担二つ目は、依頼が単発で終わること三つ目は、営業や追加提案の苦手意識押し売りに感じられるのを避けるあまり、チャンスを逃してしまうこともありますよね。多くの占い師は、占いの腕には自信があってもこの「継続依頼を生む仕組み」が欠けておりここが変わらない限り、売上の限界はすぐに訪れます。この最高峰占いGPTが解決できることこのGPTは、20年以上の鑑定経験を持つプロ占い師のフレームを完全移植した、占い師専用の文章生成AIです。最大の特徴は、単に占い結果を出すだけでなく依頼者の心を掴み続けるバックエンド導線まで組み込まれていること。現状のズレを示す「注意点A」と未来を左右する「注意点B」を提示し最後には“心理的余白”を残します。これにより、鑑定後に依頼者が自ら「続きを知りたい」と思い追加依頼や高額メニューへ自然に流れていく構造を作れるのです。導入するべき理由このGPTを導入すべき理由は、シンプルに言えば売上を増やしながら時間を節約できるからです。まず、鑑定文作成時間が1件あたり数分に短縮されるため、件数を増やせます。次に、文章はすべて「心理設計」されているので読み手の感情を動かし再依頼に繋げられます。そしてAI特有の無機質感を排除しまるでベテラン占い師が書いたような温かみある文章が仕上がります。経験が浅い方でも、一瞬で「プロっぽい」鑑定が可能になり差別化ポイントが増えるのも大きな魅力です。つまり、あなたがやるのは情報を入力するだけ。あとはAIが、自動で売れる鑑定文章

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