はじめに
諸事情により、ちょっと間が空いてしまったので、復習がてらに自分の作ったアニメーションコードを販売するサイトを作ってみました。
元々何かを作ろうと思った時に課金制度は必須だったので、これを機にstripeの学習をすることを決めて、実際に作ってみました。
また、今回はレスポンシブなどは行っておりません！！
理由は、ターゲットユーザーがPCであるため、そのユーザーに対していち早くサービスを届けるというのが今回のテーマだったからです。
実際に今回のサービスでスマホユーザーは使っても、
メリットないんじゃないかって思います。。。
一応、ローンチ後にgoogle formを設置予定なので、
そこでアンケートなどを取れたらいいなって思ってます。
どんなサービスか
一言で表すと、
私が作ったアニメーションのソースコードを販売するwebサイト
です。
まず、ユーザー側で会員登録をしてもらう必要があるのですが、
会員登録は新規で基本的にはメールアドレスのみとなっております。
（のちにgoogleのアカウントで登録できるよう設定予定です）
商品の購入に関しては、
画像のようにモーダルが出てきます。
ここの購入ボタンをクリックすることでstripeの決済ページの飛びます。
※支払いはクレカのみです
購入しましたら、ホームの戻り、商品をクリックすると、
購入した商品の詳細ページに飛ぶことができます。
そのページにあるダウンロードボタンをクリックすることで、
ソースコード一式をダウンロードすることができます。
↓
詳細ページには一部、やったことがいいことを書いてありますので、
そちらを参考に行ってみてください。
作った理由
一番は勉強のためが大きいです。
ただ、ずっと前から他の人がコード集を販売しているのをみて漠然と自分もしてみたいなと言う考えがありました。
その販売しているコード集とかをみると、
- コードの解説動画（たまにある）
- コード一覧テンプレート
- その他コンサル
みたいな感じなのをセットで、且つまあ安くはないお値段で販売している人が多いなと言う印象があり、
「俺、このコードだけ欲しいのにな・・・」
とか、
「全部一式はいらないな・・・」
って常日頃、思っていたので、
自分がコード集を販売するってなった時に、余計な機能はつけず、
ただコードだけを販売したいって思ったのがきっかけです。
一点だけお伝えしたいのは、他の販売者へのアンチでは全くなく、
むしろ素敵なサービスを揃えていて素晴らしいと思うし、初学者へのアプローチもいいなって思っていました。
しかし、初学者ではない自分は全てのコードを欲しいと思えていなかったのです…
なのでコード単体で販売し、余計なサービスをつけない代わりに安く販売しようって言う気持ちで今回作りました。
また、アニメーションに関して
- コードのメンテができていない
- ある程度の自走力は必要
- 初心者には全く向かない（勉強したい人にはいいかも）
ってところで、だいぶ安い値段にしてます。
あくまで一個人として作ったアニメーションのソースコードって意味で楽しんでもらえたらかなり嬉しいです。
開発環境について
フレームワーク：
Next.js（typescript）
インフラ：
OpenNext×Cloudflare workers
DB：
supabase
決済フォーム：
stripe
って感じです。
cloudflare workersを使った理由としては、
ドキュメント上でNext.js(app router)がpagesを使うことを非推奨になっていたため、
OpenNextを使ってねって書いてあったため、学習目的で触ってみようと思いました。
現状、この環境が一番格安でできる環境かなって思ってます。
他にもいい組み合わせがあったらぜひ教えてください。
作ってみた感想
結論として結構満足しました。
最初の方はMVPを逆に詰め込みすぎて、「あれ？これなんのサービスだっけ？」ってなっていました。紆余曲折あって必要な機能だけを絞ってしまって、
とにかく早くリリースするのを目標に組みました。
結果的にMVPを変更してから4日ほどで完成したため、目標は達成して今は満足感でお腹いっぱいです。
まだまだこのサービスをよくするためにやるべきことは沢山ありますが、
それは追々にしていこうと思います。
完成品のLPはこちら↓
完成品の商品ページはこちら↓
技術的な面での感想は、Server Actionsをめちゃくちゃ使ったので、
フォーム管理に関してかなり学びになったのが一番です。
その他、APIに関する実装方法やベストプラクティスもわかってきた気がしてます。
完成品について
簡単なフローとして下記になります。
私の方で、商品を投稿
↓
ユーザー側で商品を選び、決済
↓
決済されたコードの詳細ページに飛ぶことができ、ファイルをダウンロードできる
結構シンプルですね。
stirpe側ではwebhookを呼び出すことで、
購入後のテーブル操作なども行えるようにしました。
また、商品ページにある商品のサムネイルは、
gifにして実際のアニメーションが動いている様子を見せるようにしてます。
どのように開発をしたのか
- 組み方や方向性などはchatGPTと壁打ち
- デザインは全てAIにお任せ
- ロジック部分は自分で対応
- ドキュメントにもないエラーなどは日本語訳にしてもらって自分でテスト
- 単体テストはビジネスロジックのみ
って感じです。
いわゆるハイブリッド型ですが、個人的には比重はAIにあると思います。
私自身、cursorを使っているので、最初に決めたプロジェクトルールから逸らさず、
コンポーネントのテンプレートを作ってもらい、必要であれば自分で修正するようにしました。
また、エラーなどは基本的に自分で調べることが多く、
どうしてもエラーが解決できない場所はAIに聞くパターンにし、
ドキュメントを見る時間がかなり多かった気がします。
そのおかげで技術力を身につけつつ、
AI駆動で開発できたのかなと思っています。
あと、個人的な話ですが、RLSポリシーに対して理解度は抜群に上がった気がします。
バックエンドエンジニアの方とお話をする機会があり、沢山覚えることができました。
今回学べたこと
-
Next.jsにおけるAPIの取り扱いに関するベストプラクティス - stripeなどの決済フォームの使い方
一つずつ解説していきます。
Next.jsにおけるAPIの取り扱いに関するベストプラクティス
感想でも書いた通り、一番学びになったのかなと。
今までの私は何があってもRoute Handlerを使うマンだった気がします。
ただ、調べてみるとdb側ですでに用意されているテーブル処理操作を
Route Handlerを使って呼び出すと二重リクエストになってしまうため、
Next.js側では推奨されていませんでした。
今考えれば仕様的に当たり前なのですが、ここをちゃんと掘り下げて理解できたことは大きかったのかなと。
stripeなどの決済フォームの使い方
webhookはもちろんのこと、最初はstripeってなんやねんって感じでした。
最初はドキュメントや他の人の講座を見ながらやっていきましたが、
結構エラーも出て、解消は早かったものの辛かった記憶があります。
挫折の一歩手前まで行きましたが、なんとかできたって言う印象です。
今もう一回やれと言われると、同じくハマりそうな予感がします。
特に商品を購入後のwebhookでsupabaseのテーブルへ購入履歴を登録する処理に関して、
ドキュメントをめちゃくちゃ検索してそこでwebhookって言葉を知ったレベルでした。
ただ、自分で全て完成まで持ち込めたのが今回の宝な気がします。
その他要件定義について
基本的にはAIとの壁打ちをしながら、本当にできるのか調査を行い、
質問しながら行いました。
ここでの壁打ちもたった一つだけブレて欲しくない要件を決めます。
私の場合、
- とにかく早くリリースすること
理由は、自分がいいって思って作っても使われなきゃ価値がないし、ユーザーの反応を見て改善したいから
ここの部分だけをとにかく意識して、AIにも何度も言ってた気がします。
AIに関しては、最初のテーブル設計などは案外スムーズに行ったものの、
その他コンポーネントや必要な機能の洗い出しは若干弱い印象でした。
また、supabase functionsやtriggerなどの操作も一通り扱えたので、
楽しかったです。
ここではセキュリティ上、テーブル設計のお話は割愛させていただきます。
これからについて
このサービスについては個人的にまだまだ沢山やりたいことはあるものの、
学習メインだったこともあり、現状維持のままにしてフィードバックをもらいながら修正していくような形にしていきます。
折角作っても、それが使われなかったら意味がないですしね。
ただ、タブ機能による商品の並び替えは行いたいなって思います。
しかし、お問い合わせに関してはザルなので、
「このアニメーションを作ってほしい！」
「ここの機能を追加してほしい！」
みたいな要望を受け取れるお問い合わせフォームを設置したいなって思ってます。
また、googleのアナリティクスやサーチコンソール系は一応入れておこうかなって思ってます。
どうなるかはわかりませんが、どんなユーザーが使っているのかなどは少しみておきたいなと思いまして。。。
もうすでに新しいサービスの構想があり、そのサービスの開発に早く入りたくてワクワクしているので、
品質などのウェイトを全て新しいSaaSに当てていきたいです。
ただ、運営していく上で必要なことは沢山あるので、
そういった部分を学んでいこうと思います。
総括
このサービスで販売するアニメーションは、全て私が仕事であったり、趣味であったりで実際のwebサイトで使用されているアニメーションを作ってみたものです。
- 仕事で使うもよし
- 自分のポートフォリオサイトに組み込むもよし
- 改造して新しいアニメーションを作成するもよし
色々な用途でたくさん楽しんでもらえたら嬉しいです！
今回は自分だけの課題を解決させるためだけのサービスを作ってもらいました。
stripeやインフラなど今まで自分が作ったものからかけ離れているものばかり触ったので、リハビリには少々大変だったかなって思いましたが、振り返ってみると本当に学べたことが沢山あったと感じています。
次回の構想は実際に困っている人へ向けたサービスになっているので、今から作るのがすごい楽しみです。
また、今後行なっていく個人開発に関しての情報や、このサービスの新商品紹介に関しましては、
Xにて開発過程も含めて情報を流していきますのでぜひフォローしてください！
@ichidk06
追記
収益0→1達成！
実際に買ってくださった方、ありがとうございます！
このように反応があったらめっちゃ喜べるのは個人開発ならではですね！