Firebaseを使った簡単なWebサービス


Silicon Valley Super Ware

2020年4月12日


Firebaseを使った簡単なWebサービス

Firebaseの設定が出来たら実際にFirebaseを体験するのが一番です！
Firebaseの体験サンプルとして、「お問合せフォーム」を取り上げています。 ビジネス関連のWebサイト（Webページ）やLP（ランディングページ）を 作る場合、お客様側からのアクションを受け取る仕組みが必要になる場合が殆どです。 お客様側からのアクションには、例えば「問い合わせ」、「購入」、「クレーム」など いろいろな物があります。
基本的な考え方は一緒で、お客様の「リクエスト」を届ける事です。
E－Mailなどで送れば良いのですが、設定がスマホやPC、ブラウザーなど 違う場合が殆どで、「確実に」「簡単に」送れる必要があります。 そう考えると、メールで送るよりは、ページに埋め込まれた「フォーム」 から遅れた方が簡単です。
そこで、今日はその「お問合せフォーム」をFirebaseで作る事を考えて見る事にしました。

お問合せフォームの仕組み

基本的な操作はシンプルです。Webブラウザー上でお問合せ内容を入力して、 それを送るだけです。

問題は「どこに送るか？」です。

メールで送れば良いと思うかもしれませんが、メールで送るためには メールの設定にアクセスしないと送れません。 セキュリティー上こうしたアクセスは制限されているので簡単には送れません。 端末側がそれに対応している必要があります。
そこで一般的に使われている方法は、Webサイトのサーバーに送る方法です。 Webサイトのサーバーに受け取る仕組みがあれば、それで解決です。 例えば、ワードプレスの場合はそれが可能です。 プラグインを入れれば、お問合せフォームも実現できます。
今回の目的は、お問合せフォームを作る事ではなく、Firebaseを体験する 事ですので、Firebaseを使って実現する方法を説明します。

Firebaseを使うメリットは？

単にお問合せフォームを作るだけならば、恐らくワードプレスのプラグインを使う方が簡単です。 Webサイト内でちょっとした事をやる場合にはワードプレスを使う方が簡単ですし、 労力も少なくなります。

本格的なWebサービスを作るにはFirebaseの方が楽！

しかし、将来的に本格的なWebサービスを作るにはワードプレスには限界があります。 例えば、顧客管理のシステムを作るとなった場合にはFirebaseを利用した方が 簡単に作る事ができます。 （ワードプレスでも作れます）
シリコンバレースーパーウエアがFirebaseを推奨する理由は幾つかありますが 一番大きい理由は

JavaScriptだけで作れる！

これが大きな理由です。
ワードプレスで実現するにはプラグインを作る必要があります。 この場合、PHPも合わせて勉強する必要があります。 既に、PHPを知っている人や、時間に余裕がある人は別ですが、 これから勉強する人には負担です。
全てのプログラミングがJavaScriptで住めば勉強する範囲も小さくて済みます。
しかも、簡単な物だけではなく、かなり複雑なWebサービスも実現できます。 つまり、最初だけではなく、本格的なWebサービスまで拡張していけるという事です。

Firebaseで作る仕組み

Firebaseでお問合せフォームを作る場合は、利用者が入力したデータは Webサイトのサーバーでは無く、Firebaseのサーバーに送ります。

感じとしては、上の図のような流れになります。

難しそうですが。。。。

前置きが長くなりました！
なんだか難しそうな感じがしますよね！

Firebaseに関連したプログラムは1行だけです！

firebase.firestore().collection("message").add(message);
実際のプログラムは数行になりますが、Firebaseにデータを送る部分は 一行だけです。あとは、フォームからデータを読み取る 部分があるだけです。

実際にやる事は！

では、実際にやる事をまとめてみますね！
  • HTML/CSSで入力フォームを作る
  • 数行のJavaScriptのプログラムを書く

これだけです！説明は長かったのですが、やる事はとても簡単です！ プログラムも短いので一つのHTMLファイルでもできます。
如何ですか？ブログですので大まかな流れだけの説明ですが、 無料プログラムにお申込みいただければ、さらに詳しい作り方と 実際に作ったソースコードを差し上げています。
この機会に是非体験してみてください。詳しくはお問合せください！


またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。



Copyright(c) 2020 by Silicon Valley Super Ware, all rights reserved.

コメント

コメントを投稿

このブログの人気の投稿

ユーザーインターフェースの設計

イメージ
ホーム ブログ Firebase情報 ユーザーインターフェースの設計 2022年10月12日 ユーザーインターフェースの設計 前回は、入力フォームを変更して四則演算をできるようにしました。利用しているフォームは数式の穴埋め形式になっています。計算をする場合、一般的な電卓のようなインターフェースの方が一般の方には使いやすい場合が多いと言えます。今回は、ユーザーインターフェースを変更して一般的な電卓のようにする方法について考えてみました。 HTML でデザイン これまでの、ユーザーインターフェースは、数式の穴埋め形式のフォームでした。 今回は、一般的な電卓のようなユーザーインターフェースを実現します。 この記事では、プログラムの部分は取り敢えず別にして、まずはユーザーインターフェースを作成することにします。 Web アプリの場合、ユーザーインターフェースは基本的に HTML で記述します。 今回の電卓形式のユーザーインターフェースは、電卓の数字を表示する部分（ディスプレイ部分）と数字や演算子を入力する部分（ボタン部分）に分けて考えることができます。 HTML では、「input」のタグでディスプレイ部分を、「button」のタグでボタン部分を記述できます。 <!DOCTYPE html> <html> <head> <title>Calculator</title> </head> <body> <div class="calc"> <div> <input class="display" type="text" /> </div> <div class="keypad"> <div> <button class="clea
続きを読む

足し算以外もできるようにする

イメージ
ホーム ブログ Firebase情報 足し算以外もできるようにする 2022年9月29日 足し算以外もできるようにする 穴埋め形式の数式のフォームを使って足し算をするプログラムを紹介しましたが、同じ要領で、引き算、掛け算、割り算もサポートできるとさらに便利です。この記事では、足し算のプログラムを拡張して、整数の子息演算をできるようにした例を紹介します。 演算子を選べるように変更する 足し算のアプリでは、計算できるのは足し算だけだったので、フォームには「＋」を固定で表示していました。 この部分に変更を加えて、必要な演算子を選択できるようにすれば、引き算、掛け算、割り算もサポートできるようにできます。 これには、HTML の記述を変更してフォームを変更する必要があります。 <label>+</label> を以下のように変更します。 <select onchange="operatorChanged(event)"> <option>+</option> <option>-</option> <option>*</option> <option>/</option> </select> HTML の「select」タグを使って、選択肢は、「option」タグで記述するだけです。 演算子の変更を反映する プログラム側でやることは三つです。 初期状態の演算子を設定する　（最初にフォーム上で表示されている演算子をセットする） 演算子の変更を検出して、現在選択されている選択肢を更新する 「Calcullate」ボタンがクリックされたら必要な処理を呼び出す 現在どの演算子が選択されているかを知る必要があります。実装方法は幾つかありますが、今回は選択が変更される度に現在選択されている演算子を更新する方法を採用した例を紹介します。 これには、現在選択されている演算子を保存する変数「operator」を用意して管理します。
続きを読む

改良版足し算プログラム

イメージ
ホーム ブログ Firebase情報 改良版足し算プログラム 2022年9月15日 改良版足し算プログラム 前回は、入力データのチェックを工夫することで、データを処理する前に想定外のデータの入力を制限するユーザーインターフェースの設計について紹介しました。この記事では、そのコンセプトを使って、実際に足し算をするプログラムにしてみました。今回のポイントは、ユーザーインターフェースとデータ処理を分けるという点に注目してみました。プログラムの設計の際には、この二つの境界をきちんと設定する事が大切です。 データの処理は？ このプログラムは、入力された二つの整数を足して結果を表示するというシンプルなプログラムです。 このプログラムのデータ処理部分は、実は二つの整数の足し算をするだけです。 つまり、プログラムのデータ処理部分は以下の関数「add(a, b)」だけです。 function add(a, b) { return a + b; } 処理自体は、二つの整数「a」と「b」を受け取って、この二つの整数を足し算した結果を返すというシンプルなものです。 残りのプログラムは？ このプログラムのデータ処理部分は、至ってシンプルです。 では、残りのプログラムは何かというと、これがユーザーインターフェースになります。 <!DOCTYPE html> <html> <head> <title>Add Program</title> </head> <body> <div> <input id="opeland0" type="text" placeholder="Please input integer" /> <label>+</label> <input id="opeland1" type="text&qu
続きを読む