簡単にサブスクリプションできるheadless CMSのホームページを作った話　supabase・stripe　技術選定編　３

[前回](https://qiita.com/edegp/items/4e2de4445a41c1147b45)は、Next.jsとホスティングサービスについて話したのですが

今回はサーバーレスサービスの`Supabase`と決済サービスの`Stripe`について選定理由とメリデメについて話したいと思います。

前回までの記事でLGTMがほとんどないので、もうちょっとわかりやすく役に立つような記事を書けるように頑張ります💪

ちなみに、作ったページはこちら ↓

https://anful.jp

※この記事では具体的な使用方法については書いていません

主に感想と使ってみたサービスの評価になります。

## supabaseとは

最近はやりのBaaS（Backend As A Service）で2020年から提供されているサービスです。

https://supabase.com/

`firebase`代替をっ公式が謳っていて、かなり頻繁にアップデートを重ねています。

読み方はスーパーベースだと思ってます。

UIが非常に使いやすく、`AWS`を使ったことがある`AWS`と比べると比較にならないぐらいスッキリしていてわかりやすいです。
ダッシュボードはこんな感じ↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2604384/4dc5e5eb-1fec-759c-5d5f-95e57e0fd4fc.png)


## 選定理由
* 選定理由は料金が無料
* `firebase`並みの機能なのに、`supabase`を使ってサービスを作った事例があまり見当たらなかった

`firebase`も料金は無料ですが、無料の範囲がまあまあ狭かったので、どうせならこれからぐいぐい新機能が出てきて面白そうな`Supabase`使ってみるかといった感じです。

## サービス内容
* データベース
* 認証
* ストレージ（β）
* ファンクション（β）

### データベース
データベースは`postgreSQL`とほぼ一緒なので`postgreSQL`を使ったことがある人なら簡単に使えます。

SQLの知識があまりない人でもドキュメントがあればダッシュボードからデータベースが簡単に操作できちゃいます。

### 認証
`firebase`のドキュメントとかと比較した感じはほとんど変わらないと思います。

若干使えないSNS認証があるのでそういうのが使いたい方は`firebase`の方がいいかと

### ファンクション
ファンクションは自分が開発しているときはベータがリリースされてすぐだったので、少し実装が複雑なような気がしました。

ファンクションに関しては`AWS lamdba`の方が楽なのかなと思います。

## 人気度
![Screenshot 2022-07-31 at 14-37-09 Google トレンド.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2604384/461acde4-c12d-9c14-cd60-48b2f138b29b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2604384/e64df908-3170-b7fd-66af-b3c93f59f228.png)

徐々に伸びている感じです。`Amplify`にはあと少しで追いつきそうです。

firebaseにはまだ全然といった感じですね。

アプデートもどんどんしているのでこれからが楽しみです。

## 使った感想

とりあえずシンプルで使いやすい！！っていうのが初学者・小規模開発には助かりました。

ドキュメントがまだまだ未発達です。

SDKだけ書いてあって、オプションの説明とか例とかが全然なくて、英語なので、
githubの英語の質問とかissueとかを読んだり、自分で質問したりできる方じゃないと、複雑な機能を実装するのは難しいかもしれないです。

確かに`firebase`や`amplify`のように機能が充実しているのもいい点ですが、どうしても、機能が多いとある機能使いたくなっちゃうと思うんですよね。

シンプルで使いやすいUIと設計だとアプリケーションもシンプルになったユーザーにも優しいアプリが作れるのではないでしょうか。

### 参考

https://qiita.com/kabochapo/items/6a2a391832825d17af7d


次は決済サービスの`stripe`についてです

## Stripeとは
インターネット上でクレジットカード決済を導入できる決済代行サービスです。

プログラムが書けなくても、ダッシュボードからの設定とコードのコピー＆ペーストで決済ページを使うことができます。

https://stripe.com/jp

読み方はストリッペじゃなくて

ストライプです（いつもストリッペって言っちゃうなんて言えない）

プログラムなしでも簡単に決済サービスが利用できると書きましたが
今回は決済時に画面が遷移して読み込み時間が増えると嫌だったので
`Stripe Element`というサービスを使いました。

## Stripe Elementとは
Stripe Elementは自分のサイト上に決済フォームを埋め込みできるサービスです。

https://stripe.com/docs/payments/elements

さらに埋め込みだけでなく、Apple payやGoogle payなどのサービスもサポートしていて、スマホユーザーの決済を楽に行うことができます。

こうしたモバイル決済が利用可能であることは、申し込みをする際に決済が面倒だからやめるといったユーザーを減らることができるので、契約率を上げることができるといわれています。

## 比較される決済サービス
よく比較に出されるサービスとして
* Store

https://coiney.com/

* Square

https://squareup.com/jp/ja

がありますが、
どちらもどちらかといえば店舗決済に力を入れていて、
インターネット上での決済はおまけといった感じなので、
インターネット上で決済がメインで考えている方は`Stripe`をお勧めします。

逆に、店舗決済も必要な場合は`Square`が店舗決済とインターンネット決済をどちらもサポートしている唯一のサービスといえるので、そういう場合はsquareがおすすめです。

## stripeの良かったところ微妙なところ
全体的にいいことばっかりだったのですが、それだけだと偏りがあるのでちょっとな～って思ったところも紹介します。

### 良かったところ
* ドキュメントがめっちゃわかりやすい(Stripe.jsは微妙かも)
* コピペばかっかりでコーディングが少ない
* 結構アップデートが頻繁にある
* ログが見やすい
* コンポーネントデザインがmaterial デザインっぽい

##### stripeのドキュメントはめちゃめちゃ充実してます。

stripeのドキュメントはほぼ全部のことが、コード例ととともに対応するすべての言語で乗っているのでデベロッパーからしたらめちゃめちゃ助かります。

逆に充実しすぎて、`stripe`についてのググっても調べても公式以外の記事がないぐらいです。

##### 機能に関しては結構完成されているのにアップデートがあります。

今回採用した`Element`の機能は比較的最近実装されたのですが、それが使い始めてから3か月ぐらいたった後にアップデートされて新機能が追加されてました。

もうちょっと早くしてほしかった…と言いたいところですが、アップデートがないよりは全然いいと思いました。

#### apiリクエストに対してリスポンスとリクエストのlogが見やすいです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2604384/731e326e-aae3-a5a6-fe81-11ea6b15d3c0.png)


エラーが起きた場合やリクエストが成功した場合などでタブが分かれていて、

エラーも結構具体的なのでトライ＆エラーの回数が増えて早く実装できた気がしています。

### 微妙なところ
* デベロッパーだとダッシュボードが若干使いずらい
* windows向けの`stripe CLI`のインストールの説明が雑
* サブスクリプションの初回メールがstripeからは送れない

#### 毎回必ず微妙だなと思うのがダッシュボードの醜さです。
最近のアップデートでなぜかAPI keyがトップページに表示されなくなりさらに使いにくくなった気がします。
設定も変更したい設定がどこにあるのかパッと見でわかりずらく、設定を変えるときに毎回時間がかかっていしまいます。
APIのログも検索タブからわざわざ「API」と入力しないとログが見れないのでなんだかな～って思っています。
（いい方法知っていたら教えてください！）

### Stripe CLI
loacalでウェブフックのテストをする場合に、eventトリガーを作るために`Stripe CLI`が必要でした。
これがちょっと曲者で`mac`や`linux`だと`brew`でインストールできるんですが、windowsはインストーラーからログインして
使いたいところに`stripe.exe`を移動して
powershellから
```powershell:stripe.exeを配置した任意のディレクトリ内
./stripe login
```

しないといけないのですが、これが公式に乗ってなくて結構苦戦しました。

#### もう一つ困ったのが、サブスクリプションの時に初回メールを送るのに上乗せで手数料を払う必要があることです。

結構重要な機能だと思っていて、登録完了メールが送られないと、ちゃんと登録できたかわかりずらいし、信頼度が低いように感じられてしまいます。

上乗せで手数料払えばいいじゃんと思うかもしれませんが、これだけのために上乗せで0.8%も手数料払うのはちょっと気が引けます。

これまでだけでも無料にしてほしいな～と思ってます。

自分で`webhook`からメール送信すればいいだけなんですけど（笑）

今度メールで通知を実装しようと思いました。

なんか`Stripe`の悪口みたいになっちゃいましたが、初学者でも実装できたのでインターネット決済してみたいよって方には**非常におすすめ**です。


### まとめ
こんな感じで、毎回コードとか実際の動かし方とか全然書いてなくて、読んでる人に役に立つかわからないんですが、
`Supabase`と`Stripe`は記事を書いてる人があまりいないので、使ってみようか迷っている方は参考にしてみてください。

次回は**デザイン**と**CMS**の話ですかね。
書くの結構長くなりますが、頑張って書いていきます！