シリコンバレースーパーウエア

ホーム ブログ Firebaseのログイン機能の選び方 2020年9月29日 Firebaseのログイン機能の選び方 Firebaseはいろいろなログイン方法をサポート Firebaseはいろいろなアプリやサービスに対応するためにいろいろなログイン方法を提供しています。沢山あってどれを使ったら良いか迷いますよね。 今日はFirebaseのログイン方法の中でどれがお勧めかを紹介します。 Firebaseがサポートしているログインは E-Mailアドレスとパスワード 携帯の電話番号 Google Play Games Game Center Facebook Twitter GitHub Yahoo Microsoft Apple などです。以前より増えています！ サービスプロバイダーのログイン 信用してもらえるなら便利！ GoogleやFacebook、Apple、Microsoftなどの大手のサービスプロバイダーの認証結果を受け取ってログインする仕組みですが、サービスの利用者があなたを信用してくれるなら便利で魅力的なログイン方法です。 この方式を使うと、必要以上にユーザー名とパスワードを管理しなくて済むので便利ですし、パスワードの変更も大手のサービスプロバイダーを通して行えるので安心です。オンラインのサービスも最近はこうしたログインをサポートしている所が増えているので私もよく利用しています。 利用する場合、全てではなく、２～３つ自分のサービスを利用する人が良く利用していると思うプロバイダーを選んでサポートするのが一番です。 無難な組み合わせは、「Google」「Apple」「Microsoft」だと思います！  個人情報を盗まれる！？ 実はそんなことはないのですが。。。 ところが、内情を良く知らない利用者も沢山いらっしゃいます。例えば、Googleのアカ

ホーム ブログ Firebaseのデータベース概要 2020年9月29日 Firebaseのデータベース概要 Firebaseのデータベースはリレーショナル型ではない！ Firebaseのデータベース（Cloud Firestore）と一般的に良く利用されているSQLデータベースは少しコンセプトが違います。 SQLデータベースはリレーショナル型データーベース FirebaseのデータベースはJSONベースのデータベース 一言で言えばこれが大きな違いです。 この記事ではさらに詳しく説明していきます！ SQLのデータベース 表をベースにしたデータベース！ 一般的に良く利用されている SQL のデータベースはリレーショナルデータベースに分類されます。厳密な定義はここでは省かせて頂きますが、簡単に言えば表（テーブル）を基にしています。さらに、複数のテーブルを関連付けて使う様に設計されています。  データベース自体は、エクセルの表が沢山あるイメージです。  データベースを利用する上で、最初にこの表の「形」を決めておく必要があります。テーブルの「列」にどんなデータを割り当てるかを予め決めておいて、この列の情報を基に情報の出し入れをします。  SQL のデータベースでは、各列の要素を含んだ「行」の集まりが基本的なデータ構造になります。 Firebaseのデータベース 表の概念がありません！ Firebase のデータベースは「表」という概念がありません！ ここが大きく違う所です。 Firebase

ホーム ブログ FirebaseによるWebホスティング 2020年9月27日 FirebaseによるWebホスティング 10月からFirebaseの本格配信！ 4月からWebサービスをテーマに6カ月間お届けしてきました。この6カ月間でカバーした項目は： お問合せフォーム（シンプル版、VUE版） REST API （外部サービスの取り込み） SendGridによるメッセージ送信（外部サービスの取り込み例） 趣味から作るWebサービス（登山に心拍数を活用！） オンライン決済（Strip・PayPalによるオンライン決済） オンラインコンテンツのダウンロード実装 この全てのテーマで「Firebase」を利用してきました。 そうした中、Firebaseに関するご質問を多数頂きました。そこで、10月からはFirebaseを大きなテーマとして取り上げてもう少し詳しい内容でお届けする事にしました。 今日はその紹介です FirebaseはWebで公開するのに都合が良い！ Webサイトのデータがあれば即公開可能！ Webサービスの実装を紹介する際に、 実際に作って紹介しています！ そうすると、何らかの形でインターネットに公開するのが手っ取り早い方法です。Firebaseはその目的にピッタリです。実際にサンプルの実装してそのままインターネットで手軽に公開できます。 実際に本格運用する場合でも全く問題ありません。 シリコンバレースーパーウエアでも元々は別のホスティングサービスを使って運用していましたが、現在はFirebaseのホスティングで運用されています。 残念ながらそれほど大きなアクセス数がないため、今のところ無料で運営できています。 シンプルなWebサイトの公開は簡単！ 必要な物は、まずは 「Node.js」のパッケージをご使用中のPCに

ホーム ブログ Firebaseによるオンライン決済の導入 2020年9月27日 Firebaseによるオンライン決済の導入 9月のまとめです！ 9月はオンライン決済をWebサービスに取り入れるというテーマでお届けしてきました。Firebaseを利用すると、オンライン決済の仕組みを導入する上で必要な機能を簡単に統合して実装する事ができます。 すでにお伝えしてきたように、オンライン決済を導入する上でオンライン決済を提供するプロバイダーとのやり取りでバックエンドのサービスを利用した方がいろいろと都合が良い事をおつたえしてきました。 バックエンドの処理と、Webサイトのホスティング、そしてWebサービスの提供と全体を見ると、Firebaseの利用は「お得です」 Firebaseによるホスティング 最初は無料から利用できる！ Webサービスを提供するには、Webサイトをホスティングするサーバーが必要です。単にシンプルなWebページを集めたサイトではなく、JavaScriptなどを駆使して、Web上でサービスを提供するような仕組みを考えた場合、利用できるホスティングのサービスは限定されてきます。 その点Firebaseは、アクセスや使用するデータが少ない場合利用料金が発生しません。サービスが認知されてアクセスが増えるとそれに応じた料金が発生しますが、立ち上げ時の多くは無料でWebサービスのホスティングを利用できます。 ビジネスで収益を上げるためにはサーバーの運用費用は低い方が有利です。 さらに、思い立ったらすぐに利用できるのは魅力です！ Firebaseによるバックエンド処理 バックエンド処理が必要な場合選択肢が限られてきます！ バックエンドの処理が必要になる場合、利用できるWeb

Silicon Valley Super Ware 2020年9月24日 PayPalでも出来るオンライン決済 今月は、Webサービスに組み込むオンライン決済をテーマにお届けしています。 いろいろあるサービスからStripeを選んで紹介してきましたが、他のサービスもあります。 比較的利用者が多いのがPayPalです。今回は簡単にPayPalでのオンライン決済について紹介します。 PayPalもStripeと似たオンライン決済を提供しています。PayPalのサイトが提供するオンライン決済のフームを使えば、Stripeの場合と同様にオンライン決済を行う事が可能です。 プログラムをしなくても使える！Stripeとどちらがお勧めか？ PayPalが便利なのは余りプログラムに詳しくない方でも、自分のサイトにオンライン決済の仕組みを簡単に組み込めることです。 PayPalのサイトにある「コード」を自分のWebページのHTMLファイルに埋め込めば、バックエンドの処理なしでオンライン決済が可能です。 PayPalのサイトのコードを利用したHTMLファイルの例です。 <! DOCTYPE   html > < html >    < head >      < meat   charset = "utf-8"  />      < title > ペイパルによるオンライン決済のサンプルページ </ title >    </ head >    < body >      < div   id = "smart-button-container" >        < div   style = " text-align: center " >          < div   id = "paypal-button-container" ></ div >        </ div >      </ div >      < script        src =

Silicon Valley Super Ware 2020年9月23日 Stripeを利用した自分のサイトでのオンライン決済 今月は早々にStripeを利用したオンライン決済の仕組みを紹介しました。 今回紹介したのは一番シンプルな方法です。 Stripeが予め用意した支払いページで決済を行った後、あなたのWebサービスのページに戻る（リダイレクトする）方法でした。 この方法はシンプルで簡単に実装できますし、信頼性も高いですが支払いがあなたの提供するサイトではなく、Stripeのサイトで行われます。 できれば、自分のサイトで（他のサイトに飛ばすに）決済を行いたい場合もあるかと思います。今日はそうした場合の対応方法についての投稿です。 自分のページでも支払いは可能 インターネットで検索をすると幾つかの方法が出てきます。 VUEベースの実装もありますが、今回紹介したStripe側での決済方法以外は私自身で実装した事がありません。したがって、ここでは詳細の紹介は控えさせて頂きます。しかし、幾つかのパッケージもあるようなのでそれを見ると可能だと思います。 今回は実際に私自身で実装している方法についてもう少し詳しく解説します。 この例は「 React 」を利用した事例です： 使用したパッケージは「react-stripe-checkout」というパッケージです。 「npm」を使ってあなたのサービスに取り込む事が可能です。 このような感じで、開発用サーバー（localhost:3000）ですが、開発中のサーバー内で決済を行う事ができます。 このフォームで入力した情報、この場合、E-Mailアドレス、カード番号、有効期限とセキュリティコードを入れると決済に必要な情報がバックエンドに送られて、その情報を基に、Stripeで決済が実行されるという仕組みです。 カスタマイズ可能な「部品」 この例では、一部の最低限の情報のみの入力になっていますが、もっと詳しい情報を入力する事ができます。「react-stripe-checkout」のドキュメントをご覧になるとお分かりかと思いますが、もっと細かいパラメータ（プロパティ）を指定する事も可能です。 例えば、「billingAddress」を指定すれば、住所と名前の入力が必要になり

Silicon Valley Super Ware 2020年9月22日 オンラインコンテンツのダウンロードページ　～　まとめ オンライン決済を利用して、オンラインコンテンツ（情報や教材など）を販売するWebサービスを作る際のダウンロードページの作り方について説明してきました。 今回はまとめとして紹介した３つの方法についてまとめてみました。 バックエンドでダウンロードページを作る いわゆるサーバーサイドのレンダリングです。複雑なサービスの場合は、「NEXT」や「NUXT」で作る方法もありますが、今回はダウンロードのURLへのリンクを含むシンプルなページを作るだけなので、「Express + Handlebars」の組み合わせだけで作る方法の詳細を紹介しました。 掲載が終わると、ダウンロードページのURLにリダイレクト（転送）されるので、ブラウザーはWebサイトのホスティングをしているサーバーにページを要求します。その際に、セッションIDを一緒に送ります。（クエリーのパラメータとして送ります。） サーバ側のバックエンドのサービスは、StripeとFirebaseから必要な情報をセッションIDを基に取得して、ダウンロードページを生成してページ情報をブラウザーに送ります。 ブラウザーは送られてきたページを表示するという流れです。 バックエンドからダウンロードのURLだけを取得 このやり方は、バックエンドで処理する方法に似ていますが、バックエンドはダウンロード先のURLをフロントエンドに返します。これを基にバックエンドでページを作ります。 ページの生成と、ページのルーティングはREACTやVUEのフレームワークを利用して作ります。 ブラウザーで全部の処理をする これは、バックエンドを介さずに全てブラウザーから処理します。ブラウザーからはFirebaseから商品情報を取得します。セッション情報は秘密鍵がないと取得できないので、ダウンロードのURLに転送されてきた場合はオンライン決済は成功したとみなして処理をします。 制限事項がいくつかあって： セッション情報が取得できない ダウンロードのURLは常に有効なリンクのみ使用可 どの方法がお勧めなのか？ というのが、今回紹介した3つの実装事例の概要です。 では、どれが良

Silicon Valley Super Ware 2020年9月21日 オンラインコンテンツのダウンロードページの作り方（２） オンラインで決済を行った後にオンラインコンテンツのダウンロードページをどのように実装するかは、販売サイトを作る上での課題の一つです。前回は、サーバ側でレンダリングする方法を紹介しました。 今日は、クライアント（ブラウザー）側でダウンロードページを作る方法を紹介します。 クライアント側でやった方が楽な場合が多い！ 最近は、NextやNuxtなどを使ってサーバー側でレンダリングする実装も増えています。 もちろん、NextやNuxtなどを使って実装している場合は、前回のような方法ではなく、 NextやNuxtを使ってサーバー側でダウンロードページを準備するのも一つの方法です。 シンプルに実装する場合は、前回のような、1ページだけのレンダリングの実装は一つの方法ですが、やはり楽なのはReactやVueを使ってクライアント側でページを用意する方法が楽です。 クライアント側で行う方法はいくつか考えられます： 全てをクライアント側で実装する方法 URLの取得をバックエンドで行う方法 簡単なのは、すべてをクライアント側で処理してしまう方法です。 最初に、URLのクエリーパラメータのセッションIDを読み取って、Firebaseのデータベースからセッション情報と商品情報を取得して、URLを生成すればOKです。 セッションIDは、Vueの場合は、「created()」で以下のように取得できます。 created () {      const   sessionId  =  this . $route . query . session_id ;        }, 全てをクライアント側で処理する場合、Cloud FirestoreのデータベースとStorageの読み込みのためのアクセスをフロントエンド側に与える必要があります。 もう一つ、期限付きのURLはフロントエンドでは生成できません。（バックエンドでの処理が必要になります） フロントエンドで全部やる場合は、固定リンクを使う必要があります しかも、処理の過程のプログラムをブラウザーで見る事ができるので、悪意がある人がサイト

Silicon Valley Super Ware 2020年9月21日 オンラインコンテンツのダウンロードページの作り方 オンラインで決済を行った後にオンラインコンテンツのダウンロードページをどのように実装するかは、販売サイトを作る上での課題の一つです。 今日は、サーバー側でダウンロードページを作る方法を紹介します。 サーバ側でレンダリングする 要は、サーバー側でダウンロードページを作る方法です。 最近では、サーバーサイドのレンダリングのフレームワークとして、「Next」や「Nuxt」を利用するケースも増えています。 今回は、ダウンロードページを作るだけなのでもう少しシンプルな方法で作る方法を紹介します。 基本は、すでに実装しているExpressともう一つ「express-handlbars」というモジュールを使います。これは、サーバ側で用意したテンプレートを使ってクライアント側（ブラウザー）で表示するページを作る方法です。 手順は 「npm install express-handlebars」でモジュールをインストール 「functions」のフォルダーの下に「views」というフォルダーを作成 「views」のフォルダーの下に、さらに「layouts」というフォルダーを作成 テンプレートのページの作成 になります。モジュールのインストールは実行するだけですので特に説明は必要ないかと思います。 「views」の下は、クライアント側で表示するHTMLファイルの「素」を入れておくフォルダーです。「layouts」はページの構造（基本レイアウト）を記述したファイルを置くホルダーです。 layoutsフォルダーの下に置く「layout.hbs」の例です。 この「express-handlebars」でページを作る際に、ページに埋め込む情報を指定するとそれを取り込んだページを作ってくれます。 「{{xxxxx}}」は通常のテキストとして埋め込みます。 「{{{xxxxx}}}」はHTMLで記述されたテキストを読み込むことができます。 下の例では title (text) body (html) sub_section (html) copyright (text) を必要に応じて指定して埋