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

Silicon Valley Super Ware 2020年9月17日 Stripeでオンライン決済した後のダウンロードページの作り方 Stripeでオンライン決済をした際のダウンロードページの作り方について触れておきます。 今回紹介している方法は、Stripe側で事前に用意したユーザーインターフェースを利用しています。したがって、決済が完了した後に表示するページのURLはセッションを作成する際に指定する必要があります。 ここで考えなくてはいけないのは、複数の商品（サービス）を販売する場合、提供するファイルへのリンク先も異なります。決済が終わった後にそのページが呼び出される際に何を表示するかを事前に決めておく必要があります。 Stripeが提供する方法は？ Stripeの開発者向けの記事を読むと紹介されている一つの方法は、「クエリーパラメータ」を指定する方法です。 要は、URLの最後に「?session_id=XXXX」の様に、セッションIDの情報を渡す方法です。この方法を使うと、表示する際にセッションIDを基に販売した商品（サービス）情報を取得して、必要なダウンロード情報を表示するという方法が一番簡単です。 先日の全体の流れの時の説明では詳しい事を書いていませんでしたが、バックエンドからセッション情報を受け取ってStripeの決済画面を呼び出す前に、商品情報とセッション情報をFirebaseに残すようにします。 決済が完了（成功）した場合は、クエリーパラメータと一緒に指定したページが呼び出されるので、Vueルータでクエリパラメータを読みだして、商品情報を基にページを作成すれば商品、ユーザーごとのダウンロードページの作成が可能です。 Vueで記述する場合は、「created」の所に以下のような記述を書けば、セッションIDを取得できます。 created :   function () {      console . log ( "create" );      console . log ( this . $route . query . session_id );  ...

Silicon Valley Super Ware 2020年9月14日 FirebaseとStripeで作る商品販売サイトの作り方 前回までで、オンライン決済を含めた商品販売サイトの作り方の基本的な「機能」についてお伝えしてきました。 今回からFirebaseとStripeを使って作る商品販売サイトの作り方について紹介していきます。 基本的な構成は、 Firebase　データベース機能とオンラインストレージ機能 Stripe　オンライン決済 Vue.js　フロントエンドのフレームワーク Express　バックエンドサービスのサーバーのフレームワーク という構成で作ります。 まずは全体の流れを理解する！ 今月はいきなりオンライン決済の仕組みを作ってしまいましたが、実際のサービスの実装の前に全体の流れをきちんと理解しておきましょう ブラウザー（フロントエンド）は、Firebaseのデータベース（Cloud Firestore）から商品情報を取得して商品一覧のようなページを作ります。つまり、オンラインストアです。 利用者は、商品を見て購入を決めます。この部分はいろいろなオンラインストアを参考に作ります。カートに入れてから決済という本格的な物から、単純に商品を選ぶと決済を開始するというシンプルなものまで、必要に応じて作ります。 オンラインの決済の手順は、以前に説明した通りです。 バックエンドに決済を要求 バックエンドはStripのサーバーに決済のためのセッションを要求 Stripeのサーバーは決済のためのセッション情報を提供 バックエンドが決済の為のセッション情報をフロントエンドに提供 フロントエンドは受け取ったセッション情報を基にStripeに決済を要求 Stripeは決済の完了（エラーの場合もあり）を通知 フロントエンドはダウンロード画面を表示 Firebaseのストレージから商品をダウンロード という流れです。今回は処理の流れの概念を図解したので少し分かり易いかと思います。 一連の処理自体は、4月からお届けしてきた機能の集大成なので、一つ一つはシンプルです Firebase・REST APIが基本...

Silicon Valley Super Ware 2020年9月13日 バックエンドで解決するFirebase Storageの制限事項 便利なFirebase Storageですが、幾つか制限事項があります。 Firebaseのストレージのアクセスはセキュリティルールであろう程度制限する事ができます しかし、取得したURLの取り扱いは注意が必要です。 このURLは、Firebase storageのファイルをダウンロードする際に必要です。 ただし、このURLにはアクセスの為の「トークン」が含まれています。 つまり、このURLを使うと、ログインしなくてもファイルにアクセスできてしまいます。 オンライン上のコンテンツを販売する場合、このリンクをどのように考えるかが一つの課題です。 クライアントで出来る事は限られています！ 最初の、ダウンロードの為のURLの発行には、Firebaseへのログインや支払い完了などの条件を付ける事は可能です。しかし、ここで取得したURLはファイルのアップロードをやり直さない限り有効になります。 つまり、誰かが購入してURLを取得して、そのURLを別の人と共有した場合、実際の購入者以外でもファイルにアクセスできる事になります。 この対策としては、サーバー側でダウンロードのURLを管理するという方法があります。 オンライン決済をする以上、サーバー側のバックエンドサービスは必須になるので、この方法を採用すると、ダウンロードをする度にログインをしてURLを取得する必要があります。この方法を利用すると、購入後のみのダウンロードに制限したり、購入者は購入後いつでもダウンロードできるようになります。 URLは一定時間で向うになるようにすれば、仮に共有されたとしても、不正にダウンロードが出来る時間は限られるのでセキュリティは大きく向上します。 サーバー側のコードの例です const admin = require ( "firebase-admin" ); const bucket = admin.storage().bucket(); const ristrictURL = { v...

Silicon Valley Super Ware 2020年9月10日 Firebase Storageの使いかた 今日は、Firebase Storageの使いかたを紹介します。 初期設定は、Cloud Firestoreと同様に、Firebaseコンソールから簡単にできます。 やる事は、「Storage bucket」を作って、暫定版のセキュリティルールを設定するだけです 後は、Firebaseのドキュメントに詳しく書かれていますが、以下のような記述でFirebaseのストレージにアクセスできるようになります。 // Firebase ストレージサービスへのリファレンス const storage = firebase.storage(); // ストレージへのリファレンス const storageRef = storage.ref(); これでFirebase Storageのトップレベルのフォルダーにアクセスできるようになります。 さらにサブフォルダーを作成したり、サブフォルダー内のファイルへのリファレンスは以下の様にできます。 // サブフォールだーへのリファレンス const subFolderRef = storageRef.child("subfolder"); // ストレージへのリファレンス const fileRef = storageRef.child("subfolder/file.txt"); ファイルのアップロードはFirebaseコンソールからできるので、これだけでもサービスを構築する事は可能です。 プログラム（Webサービス）からアップロードするには、アップロードのコードを書く必要があります。 const uploadTask = storageRef.child("subfolder/test.txt").put(file); のように書くだけです。ちょっと面倒なのは、この処理は、ファイルのアップロードを開始するだけです。なので、アップロードの状態を監視...

Silicon Valley Super Ware 2020年9月8日 クラウドストレージからダウンロード オンラインで決済の仕組みが作れると、クラウドストレージからあなたの商品をダウンロードして販売するWebサービスが簡単に実現できます。 Webサービスの価値は、こうした既存のサービスや機能を組み合わせるとより大きなものになります。オンライン決済の仕組みがなければクラウドストレージから商品がダウンロードできる事だけでは、価値が半減してしまうからです。 結局決済の処理をする時に商品を提供すれば良いだけなのでわざわざクラウドストレージを使って仕組みを作る必要性は余りないという事です。 一方で、オンライン決済が実現できると、そのまま商品を提供できる仕組みがあれば、商品の販売と提供が自動化されます。そうすると、重要になるのは、商品の宣伝や集客になりますが、そこに集中して時間をかける事が可能になります。 どのクラウドストレージのサービスを使うか？ オンラインのコンテンツを提供する以外でも、クラウドのストレージは利用されます。 利用者が多いクラウドストレージのサービスは： Appleの「iCloud」 Googleの「Google Drive」 Box Dropbox などは有名です。制限はありますが、無料から利用できるサービスも多く、便利です。 ファイルの管理を既存のサービスの提供するWebサイトやUIで行うことも十分に可能です。必要なファイルをクラウドストレージにアップロードして、そのファイルへのリンク（URL）を取得して、それらの情報をデータベースに入れてしまえばあとは、簡単なプログラムを書けば、ブラウザーでもスマホのアプリからでもクラウドストレージからダウンロードを行う機能は提供できます。 オンラインコンテンツの管理も自動化したい場合は、APIの利用が必要です！ クラウドストレージを提供するサービスの多くが、APIを公開していて、このAPIを使えば簡単にWebサービスに組み込む事が可能です。そう考えると、どのサービスにするか迷いますよね？ お勧めはFirebaseのStorageが便利です 理由は簡単で、既にユーザーの認証（ログイン）やデータ...

Silicon Valley Super Ware 2020年9月7日 オンラインコンテンツの販売は？ 商品のリストをデータベースで管理すると、オンラインショップのサービスも比較的簡単に実現できます。 オンラインでビジネスでは、オンラインのコンテンツ（教材や情報）を販売して収益を上げるという方も沢山いらっしゃいます。 オンラインのコンテンツの販売は、一番シンプルな方法は、EメールやSNSで注文を受け付けて、支払いを確認したらコンテンツ（教材や情報）を提供するという方法です。 まだ、販売数が多くなくて、「少し待ってでも」欲しいと思うような商品やサービスならばこの方法でも十分機能します。 ところが、「購入意欲」は欲しいと思った瞬間が一番高く、時間の経過とともに落ちて行くといわれています。そう考えると、Eメールなどのメッセージのやり取りをしている間に購入しない方に傾く場合も結構あるはずです。 そのようなビジネスチャンスを逃さないために、オンラインコンテンツ販売の「しくみ」を作るのは効果が期待できます。 オンラインコンテンツをどう提供するか？ オンライン決済の仕組みの大枠は既にできています。 とても簡単な仕組みでオンライン決済は実現できます。 オンラインコンテンツを販売する場合に、課題になるのは、商品となるオンラインコンテンツをどこに置いて、利用者にどのように提供するかになります。 クラウドのストレージスペースに置くのが扱いやすい！ 最近は、以前の様に記憶用のメディア（USBドライブや外付けのHDDなど）を使わずに、オンラインに良く使う情報をおくような使いかたが普通になっています。 これは、PCではなく、スマホやタブレットなどを使う人が増えたことも一つの理由ですが、インターネットの接続も比較的どこでも得られるようになったので、わざわざドライブを持ち歩かなくて済むようになったことが大きく関係しています。 オンラインコンテンツもこのようなインターネット上のストレージスペースにおいてしまえば、インターネット接続があればどこからでもダウンロードできるので便利です。 ただ一つ、個人的に利用しているクラウドのオンラインスペースの場合、自分の為の情報と混在する事になってし...

Silicon Valley Super Ware 2020年9月6日 オンラインショップで商品を選べるようにする 今月は早くも、前回まででWebサービス上でのオンライン決済の仕組みができました。 前回の終わりに触れていますが、今後はより「リアル」なオンライン決済にするための実装を中心にお送りします。 前回までのサンプルのオンライン決済の仕組みは「商品固定」でした。 Webサービスで課金する場合、商品やサービスによって価格は違います。 また、オンラインの教材などの「情報」を売る場合は、支払い後商品をダウンロードできるようにすると、利用者にとって便利なサービスにすることができます。 そうした事を考えながら必要な機能を実装していきます！ 決済のAPIを作る 前回まででオンライン決済の流れは理解できたでしょうか？ もう一度復習しておくと フロントエンドが決済の「セッション（作成）」をバックエンドに要求 バックエンドがStripeにセッションをリクエストして情報を取得 バックエンドがフロントエンドにセッション情報を返信 という流れです。 前回までに作った決済の仕組みは バックエンドで固定の商品情報を使って決済のリクエストをStripeに送信しています これをいろいろな商品を決済できるようにする方法は大きく2つの方法があります。 商品ごとに別のAPI(URL)を作成して呼び出す 商品情報をフロントエンドからリクエスト時にバックエンドに送る Webサービスで課金対象になる「項目（商品・サービス）」が少ない場合は、最初の方法も一つの選択肢です。実装もデータベースなどは必要なくシンプルに行う事ができます。 しかし、商品が増えると、この方法は余り効率が良くありません。 商品が増えた場合は、商品情報をデータベースで保持して、そこから必要な情報を取得する方法にした方が全体の実装がはるかにシンプルになります。 例えば、データベースのエントリー（商品情報）に以下のような項目を設定します。 商品コード（商品を区別するためのID） 商品名 商品の写真など（インターネット上のURLなどを記憶） 価格 決済後の画面のURL（場合によっては個別の決済...