すべてのカテゴリ

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

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 サイトを構成する必要があります。もちろん、

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 アカウントの取得です。既にお持ちの場合はそのままお持ちのアカウントで利用できます。お持

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

Firebaseを活用したもっと手軽なホスティングFirebase の提供するホスティング機能はとても手軽で便利です。設定も慣れてしまえば簡単です。シンプルなサイトならば作り始めたその日にインターネットに公開することも可能です。必要な手順もシンプルで大きく分けると以下の３ステップです。＊　Firebase のプロジェクトの作成＊　公開するプロジェクトフォルダの初期化＊　公開の手続きもちろん、公開する Web サイトの中身を作る作業は必要ですが、Firebase 側の作業はこの３ステップで完了です。簡単ですよね！？実は Firebase にはもう一つ Web サイトをホスティングする方法があります。この記事は、一番簡単な Firebase を利用した Web ホスティングをご紹介します！LP(ランディンングページ)のホスティングを考えるおそらく、「Web サイト」を作る場合は、通常の Firebase のホスティング機能を利用する方が便利です。サイトのページ数が多くて、色々なプログラムを Web ブラウザで動かして実現するようなサービスの場合は、Firebase のプロジェクトを作って普通にホスティングの機能を利用する方が、サイトの管理もしやすいので他の方法を探す必要はあまりありません。Web ホスティングを利用するもう一つのケースは LP（ランディングページ）を作成する場合です。 ランディングページの利用用途は色々ありますが、ビジネスで人を集めたり、特定の商品の宣伝・販売を行う場合によく使われます。基本的に、１ページだけで構成されていて、販売や会員登録などを促したい場合に、使わ

Firebaseのバックエンドを利用したお問合せフォームの作り方！Firebaseのバックエンドでのお問合せフォームの処理のやり方を紹介しました。 この記事では、バックエンド処理でお問合せフォームのサービスを実現する方法について解説しています。今回紹介する例の方針は： * シンプルなバックエンドの処理の組み込み方の例 * フロントエンドとの連携 に重点を置きました。 シンプルにするために、フロントエンドの実装はシンプルなHTMLファイルで対応しています。今回の例ではフロントエンドでは一切プログラムは利用していません。 Firebaseのプロジェクトフォルダ FirebaseのプロジェクトをFirebaseコンソールで作成して、Firebaseのプロジェクトフォルダ（公開用のデータを置くフォルダ）を作成します。 Firebaseコンソールでは、データベース（Cloud Firestore）の作成を行います。 セキュリティルールは本番用（production mode）で問題ありません。 今回は、データベースにはバックエンド側からしかアクセスしないので、シンプルにフロントエンドからのアクセスは禁止にして問題ありません。 セキュリティルールの設定例です。 rules_version = '2'; service cloud.firestore {   match /databases/{database}/documents {     match /{document=**} {       allow read, write: if false;     }   }

FirebaseのホスティングのコストFirebase は Google が提供するサービスで、Web サイトのホスティングの機能も持っています。 アクセスが非常に多いサイトの場合は、アクセスに応じた料金が発生しますが、Web サイトの立ち上げ時などは、殆どの場合大きなアクセスがないのが普通です。そう考えると無料から始められるお得なサービスだと言えます。 Firebase の料金プラン Firebase のサイトに行くと詳しい料金プランが載っています。例えばストレージ容量は５ GB までは無料。 気になるホスティングは、保存容量が１０ GB までは無料です。ただし、１日の転送容量が３６０ MB を超えると料金が発生します。単純計算で、１日のアクセスが千件前後ならば一応無料の範囲内という計算になります。そう考えると多くの個人が運営するサイトの殆どは無料の範囲内でも運営が可能なサイトが多いと言えます。 Firebase のログイン機能 例えば会員制のサイトを運用している場合、ユーザーの認証が必要になりますが、こえは月に１万件までは無料です。１日あたりならば３００件までの認証ならば無料という計算です。 データベースの料金 データベース（Cloude Firestore）の無料の範囲は 項目 無料の上限 超過料金 保存データ 合計 1GiB $0.18/GiB ドキュメントの書き込み 20k/day $0.18/100k ドキュメントの読み込み 50k/day $0.06/100k ドキュメントの削除 20k/day $0.02/100k (２０２０年１０月６日現在) でデ

Firebaseプロジェクトの作成方法Firebase のプロジェクトの作成は、Firebase のコンソールから行うことができます。しかし、初めて Firebase を使う場合、分かりにくい場合もあると思います。この記事では、Firebase のプロジェクトの作成のポイントを解説しています。Google アカウントはお持ちですか？Firebase は Google が提供するサービスの一つです。利用には Google のアカウントが必要です。Google のアカウントをお持ちでない場合は、まず最初に Google のアカウントを作成してください。Firebase コンソールFirebase コンソールは Firebase の色々な設定を行うための Web サイトです。Firebase のプロジェクトの作成の他、各機能の設定などを行うことができます。 実際に、Web アプリや Web サービスの管理の為には、専用の管理アプリなどを作った方が便利な場合が多いですが、開発中に開発者が行う設定や確認などは、Firebase コンソールを利用すると大抵のことはカバーできます。Firebase を利用するメリットは、Web アプリや Web サービスで利用するログインやデータベースの機能だけではなく、Firebase の色々な設定を Firebase コンソールから特別な管理ツールを作ることなく行えることも含まれています。Firebase のプロジェクトの作成も、Firebase コンソールからおこうなう事ができます。この記事では、Firebase コンソールから Firebase プロ

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