プロフィールサイトを作りました

最近ではあまり見られなくなったプロフィールサイトですが、
お客さんから相談を受けて作らせて頂きました。

具体的なサービス名はセキュリティのこともあるので今回は伏せますが、
サービス内容としてはとてもシンプルなもので、
ユーザ登録をして用意された名前などの項目をうめていけば、
自分のことを紹介できるページが出来上がる。というようなものです。
課金ユーザのためのプレミアム機能も用意して、サイト上で決済ができるようにもします。

はじめはレンタルサーバにPHPを置いて、
MYSQLなどのデータベースと連携させて作ろうかと考えていましたが、
せっかくなので流行りのFirebaseを使うことにしました。

Firebaseは、Vueなどのフロントエンドを置くためのhostingや、
NoSQL系のデータベースとして利用できるFireastore、
バックエンドの機能を実行できるfunctionsなどのサービスがパッケージングされている便利なサービスです。

似たようなサービスで使いやすいものにCloudflareがありますが、
TwitterログインなどSNS周りの機能を実装することが少し手間だったりします。
その点、FirebaseはAuthenticationというサービスがはじめから提供されており、
Twitterやメールアドレスなどを使ったユーザ認証機能を簡単に実装できるのです。

今回の依頼で実装した構成は以下になります。

フロントエンド: hosting (Vue)
バックエンド: functions
認証: Authentication
データベース: firestore
画像などのリソース: storage
課金: stripe (外部API利用)

全体的には滞りなく進みましたが、いくつか苦労した点もありました。

まず、決済の実装です。APIを使ってstripeの公式ドキュメントを見ながらすすめるのですが、
ユーザが何かしらアクションを起こした場合にそのアクションに対して処理を行う、
webhookという仕組みがあるのですが、そのアクションの種類が多すぎて、
最低限の実装をするためにはどのアクションを選ぶべきなのか、というのがわかりませんでした。
結果的に、それっぽいアクションを選んで、細かい検証と動作確認を繰り返して実装しなければならなくなり、予想以上に時間をとってしまうことになりました。

あとは課金ユーザ向けの機能としてフォロワー情報の取得というものがありました。
Twitterではユーザ情報やそのフォロワーの情報を取得するのに制限があり、
数万人のフォロワーがいるユーザからまとめて情報を取得しようとするとその制限にひっかかってしまい、一部の情報しか取得できないのです。
また、取得した後にfirestoreにその情報を保存するときも同じような制限があり、一度に保存できる数が限られています。
そのため、Twitterの制限にひっかからず、かつ、firestoreの制限にもひっかからないだけの数を、1度に取得・保存できる上限値とし、その処理を例えば20分ごと(ここも制限を考慮する必要があります)に繰り返すような形で少しずつ情報を取得していくようにしました。

ユーザからすると、フォロワー情報を全件取得するために数時間〜数日待たされるという状況になってしまいますが、Twitterの仕様上仕方がありません。

サービスはまだスタートしたばかりですが、上手くいけばいいなと思っています。

ABOUTこの記事をかいた人

フリーランスとして働く、フルスタックエンジニア 初崎 匠のサイト。仕事のことから趣味のアニメーション制作、英語学習など、様々なことを通じて、少しでも多くの人が幸せになれるような価値を提供できるよう挑戦し続けます。