「Stripe」の記事 - Crieit

Flutter用問い合わせフォームウィジェット＆サービスを作った

2022-04-11T23:43:19+09:00

Flutter用の問い合わせフォームのウィジェットを簡単に設置できるパッケージ及び連携サービス Contact Nite を作りました。

上記画像のように簡単なコードを設置するだけで、サービス上で設定した項目通りの問い合わせフォームウィジェットを表示することができます。また、
送信された問い合わせはサービス上で確認することができるようになっています。

サービス
https://contact-nite.com/ja
パッケージ
https://pub.dev/packages/contact_form

無料プランもありますので気になる方は是非試してみてください。僕も自分のアプリに入れて試してみています。

問い合わせが来るとメール及びSlack通知を行うことができます。そのうちサービス内で直接問い合わせ下ユーザーとやり取りができるようにしてみようと思っています。

技術的な話

パッケージ自体は純粋なFlutterパッケージです。サービス側は今回 Next.js, PlanetScale, Cloud Run を利用しました。

PlanetScale

丁度開発している途中で知った、MySQLサービスです。最近記事も書いたので良ければ見てみてください。

サーバーレスMySQLのPlanetScaleをNext.js+Prismaで使ってみた
 PrismaでPlanetScaleを使う時のエラーあれこれ

ここ最近はずっとFirestoreを使ってサービスを作っていました。安くて容量が大きいとなるとこれくらいしかなかったためです。ところがPlanetScaleを知りそちらに乗り換えてみることにしました。とにかく容量が大きいというのが決め手です。本当はMySQLの方が好きなので僕にとっては嬉しいサービスです。

まだリリースしたサービスで利用した経験が無いのでどうなるかわかりませんが、これから見ていこうと思っています。問題なければこれからの僕の定番になりそうです。

Next.js

Next.jsで作っています。サーバー側もNext.jsのAPI Routesです。もうとにかく楽ちんですね、サーバーサイドとフロント側の連携とか、何も考えなくて良いというのは。仕事だと色々問題が出てくるのかもしれませんがとにかく個人で開発するものだと今はこれが楽すぎて他を考えられません。

特に日本専用サービスとする必要もないためInternationalized Routingを使って日本語と英語の対応を行っています。

デプロイ

Cloud Runを利用しています。最近こればかり使っているので元々持っている資産的に楽になってきたため他を考えられません。といいつつPlanetScaleを使っているのでDBまわりで悩まなくてもいいしHerokuとかで良かったかもしれません。

push時に連動もできるのですが、自動テストはGitHub Actionsでやったほうが超簡単なため、push→GitHub Actionsでテスト→Cloud Buildでビルド＆Runにデプロイという流れをとっています。DBのマイグレーションもCloud Buildでビルドしたイメージを利用して自動化しています。

テストはJestによるシンプルなAPIのテストと、Cypressを使ったE2Eテストを行っています。Cypressはあまり使ってないですがCypress Dashboardと連携して動画も見れたりするの面白いですね。

メール

SendGridです。Dynamic Templatesむっちゃ楽ちんですね。SendGrid上でメールの本文を調整して簡単に送信できます。ごちゃごちゃプログラムやDB上にテンプレートを定義しなくていいので良いです。

あとはメール受信のhookを利用して、メールも見ずにサービス上だけでやり取りできるようにもしたいなと思っています。なんかできるっぽいので。

Flutter側

多言語化

ハマりどころとして、多言語化が結構複雑でした。パッケージを作成する場合一緒に作成されたサンプルプロジェクトと連携して動作させるのですが、そのプロジェクト内だとうまくいくのに、別途他のアプリに組み込んでみたらちゃんと言語が反映されないという問題が発生したりして手こずりました。

ちなみにFlutterはVS Code拡張Flutter Intlを使うことで簡単にローカライズできるのですが、それも使えたようです。

テスト

パッケージは公開ということもありGitHub Actionsでのテストが無料で放題なので、せっかくなので自動テストをいれてあります。

まとめ

小ネタですがサービスサイトの問い合わせフォームもWebではありますがContact Niteに送信して実現しています。

数日で有料サービスをリリースしてみた話

2021-11-17T09:36:55+09:00

有料サービスを２，３日位で作ってリリースしてみました。多分計10時間ほど？　急にぱっと思いついて次の日の夜くらいにはだいたい完成していました。作ったのは下記のHand Refactorerというプログラムのコードを手動的にリファクタリングしてくれるサービスです。

130円でプログラムのコードを手動的にリファクタリングしてくれるサービスをリリースしました。プログラミングを始めたばかりの方にはもしかしたら役立つ場合もあるかもです。よろしければお試しください！！https://t.co/bHlNXJFbTh pic.twitter.com/VhPI80a6Cl
— だら@Flutterもやってる (@dala00) November 14, 2021

ちなみにこれ自体は単に自動的じゃなくて手動かよというツッコミがほしいだけのために作ったネタクソアプリです。

色々やるべきことを削ったりなどで考えたりしたので書いておきます。

サービスの流れ

そもそもサービスの流れですが、まずユーザーがリファクタリングしてほしいコードを入力して登録します。

それを僕が人力でリファクタリングし、回答として登録するとユーザーがそれを確認できる、という形です。

課金関連の開発を極限まで削る

課金となると、結構色々考えなければなりません。ユーザー登録し、そのユーザーに対して課金ログを保存し、購入履歴などを用意する必要があります。ただそこまでするとどうしても工数がかかってしまいます。そのため下記のようにして開発事項を削りました。

オーソリを使う

オーソリというのは、仮売上です。即課金確定するのではなく、注文が確定した時にキャプチャという処理を行って決済を確定させる方法です。ユーザーが注文してきた時に仮売上とし、僕が処理を行って納品でき、ユーザーがそれを意図的に閲覧した場合に納品確定としキャプチャを行うようにしました。

この方法には色々メリットがありました。

ユーザーの心理的不安を取り除ける

個人サービスですので、そこに課金するのにはちょっと不安があります。ただ、ちゃんと納品が行われないと課金が確定しないということが事前にわかっていればその不安をある程度取り除くことができます。

確定する場合には、ユーザーに回答画面のURLが貼られたメールが送られます。ここでも実際に見て課金を確定するかどうかをユーザーが意図的に選ぶ事ができます。興味がなければ見ずに終わらせればいいですし、お金を払ってでも見たいと思っていれば閲覧して確定できます。

運営側の不安も取り除ける

個人サービスで課金機能を提供するのは、運営者としてもなかなか気持ち的に不安になることが多いです。うまくサービスを提供できなかったらどうしよう、大きなミスに気づかず迷惑をかけてしまったらどうしよう、など。

しかしオーソリを利用してユーザーがお金を払って結果を見たいと確信して行動する時に初めて課金が行われるようにすれば、なかなか間違えたり問題が起こる可能性は低くなります。そうなると運営側としても問題が発生しにくく安心です。

また、最悪僕が怠けたりなにか急なトラブルで全然手を付けられず放置したとしても一切課金されることはありません。また、そんなにリファクタリングすることがないコードであれば確定しないことでキャンセル扱いにすることもできます。

このようにしてお互いの不安をなるべく少なくすることでユーザーは購入を、運営はリリースをしやすい気持ちにできるようにしました。これができなければ色々と複雑なテストをしたり入念にいろいろな機能をつくったりしてなかなかリリースはできなかったでしょう。

チェックアウトを使わない

Stripeにはチェックアウトというプログラムを書かなくても商品を売れる機能があります。すごく簡単なのですが今回はそれは使いませんでした。というのも売上の結果を知るためにWebhookでチェックする必要があり、ちょっとそれが面倒でした。プログラムで決済してしまえば登録時に一緒にやってしまえばすべてが終わるためそちらの方が処理的にもわかりやすくテストもしやすかったためです。

メールアドレスを使う

メールアドレスを使うことでログイン機能を削りました。ユーザー登録をすると、やはり離脱率は上がります。ちょっと投稿して利用するだけのサービスでユーザー登録は面倒くさいです。

また、ログイン機能を作るとそれはそれで結構面倒です。Next.js と Firebase を使っているのですが、それで認証を入れるとFirestoreのセキュリティルールも設定しなければなりませんし、その状態だとNext.jsのサーバーサイドレンダリング時にエラーが発生することもあり、結構確認事項が増えます。ログイン機能を作らずメールアドレスのみの照合とすることでそれら全ての開発を削りました。

メールアドレスだけでは勝手に決済されて危険なのでは？　と思われるかもですが、クレジットカード自体は操作している人自身のものを入れなければならないためなりすましは難しいですし、できたとしても結局オーソリまでしか進めないため、利用者が最後まで進まないとお金は一切動きません。

またこれにより結果のURLはメールで本人しか知ることができないため漏洩の心配などもありません。

最初はユーザーもメールアドレス登録するのはいやかな…とも思ったのですが、そもそも大量の依頼がくるとそれはそれで僕のスケジュールがパンクしてしまうのである意味抑制になっていいかなと思っています。

極限までハードルを下げる

このハードルというのはユーザー、運営者両方のことです。

まず費用は130円という自販機でジュースを買うのと同じ（？）ような料金にしました。また、説明分にはレジャー感覚で使ってほしいということ、意図した結果が帰ってくるとは限らないということを書いておき、運営者的にもちゃんとした結果をださなければ、という不安をなくし、利用者としてもさほど結果に期待しない状態を作っておきました。

ハイクオリティになったり、ハードルの認識の齟齬があると開発もそれに対処するためにちょっとやることや考えることが増えたりなど、すぐにリリースはできません。とにかくすぐに作るレベルのサービスに連動したクオリティの商品をそれに見合った低価格で提供することによってリリース時の負担を下げました。

管理機能を公開しない

リファクタリング結果の送信ですが、Firestoreのダッシュボードだけではできません。そのためそこは返答用の画面を作ってあげる必要がありました。

しかし前述の通り認証もありませんし、URLを作ってしまうと万が一アクセスされてしまった時に情報が漏洩してしまいます。

そのため管理画面は公開せず、別プロジェクトとして作り、ローカルのデバッグ実行だけでできるようにしました。絶対に他の人にアクセスされることもありませんので安全です。また、作っていたプログラムをコピーするところから始めたのでベース部分はまるまる流用でき、特に大変でもありませんでした。

Firebaseクライアントを使わず全部APIのみにする

前述の通り、セキュリティルールを設定するのが面倒だったためFirebaseのクライアントはアクセス解析にしか使っていません。セキュリティルールは全部のデータへのアクセス不許可にしています。

普通に単なるAPIとしてfirebase-adminを利用してサーバーサイドのDBのようにして作っています。なにもかんがえることもなく非常に楽です。勝手に変なデータにアクセスされてしまうこともありません。

また、Firestoreを使うことによってデプロイする場所を選ばなくてもよいようにもなっています。

今回はCloud Runにデプロイしました。前述の通りDBはFirestoreなのでどこにでもデプロイできます。本来はVercelが一番楽なのですが、この無料プランは個人的な利用のみに限られますので、今回の場合は利用できません。ということでCloud Runを使いました。GitHubにpushしたのに連動して自動的にデプロイもできますし。Herokuでも良いと思いますが頻繁に利用されるサービスではありませんし、あまりアクセスして遅いのもあれかなと思いCloud Runにしました。

せっかくなのでDockerfileを使わないでデプロイできるBuildpackというものを試してみたかったというのがあったのですが、どうもビルド無しで実行されてしまうようでエラーになったので今回は諦めてDockerfileを使うことにしました。だいたいDockerfileならどっかーにあると思いますので。

今回は下記を使いました。
【Node.js/Next.js】Cloud Runで動作する軽量なDockerを構築してみた

これの真ん中のやつでだいたいデプロイに8分ほどかかります。それほどパフォーマンスが必要ではないので一番最初の簡易的なやつでも良かったのかもしれません。なんにしろVercelよりはやはりどうしても遅くなってしまいますね。

あと日本リージョンにしたのでちょっとネットワーク料金がかかります（アクセスがちょっと多ければ月何十円とか100円とか？）

CSSも使わない

今回はChakra UIを使いました。とにかくデフォルトのデザインパーツで、カスタマイズは全部Chakraコンポーネントのプロパティのみで、ぶわっと作りました。非常に楽です。

DIFFの表示

リファクタリングということで、DIFFを表示したほうがわかりやすいかなと思いました。

React Diff Viewerというのを使いました。
https://github.com/praneshr/react-diff-viewer

まとめ

最初に書いたとおりクソアプリですので、ものすごい依頼が増えない限りは特にアップデートする予定はありません（依頼がきたらちゃんと対応します。リファクタリングは結構好きなのでわりと楽しんでやっています）。

ただ数日で作れたので、これを機に低価格で同じように自分で提供できることを売るのも面白いかなとは思います。どうしても手がかかるので規模が大きくなるとスケールもしないし限界がありますので、あくまでも今回のようにジョーク交じりかつすごく負担の少ない作業だけになるとは思いますが。

逆に言うと、低価格でちょっとなにか提供できる、というひとはたくさんいると思いますので、みんながこういうサービスを各々作れたら面白いのにな、とも作ってる途中に思いました。例えば小説の手直し、絵の手直し、もしくはちょっとした絵を書いてあげたり、サービスの感想を伝えてあげたり、なにか写真をとってあげたり、ロゴをつくってあげたり。皆自分の得意なことを提供して少しでもお金になれば楽しいのでは、と思いました。

もちろんそういうモール的なサービスはいくつかあると思いますが、あくまでも自分の個人商店的な感じで運用するのも面白いと思います。

自分でみんながそういうことを提供できるサービスを作ればよいのでは、とも一瞬思ったのですが、やはり価格的に運営者に入るお金はかなり薄利になり、儲けを出すにはかなり大量に集客しないといけませんし個人だと逆に大変なことが多そうなので、無理かなと思いました。Skebのもっと安くて気軽バージョン的な感じかもです。

なので可能な方は是非同じ様なサービスを作ってなにか提供してみると面白いのではないかと思います。

Stripeアカウントの連結手順

2020-04-27T20:36:57+09:00

Stripeと連携する処理を進めると下記の画面に遷移します。

ここでStripeアカウントを作成しますが、画像の右上にあるリンクから既にお持ちのStripeアカウントを利用することも出来ます。

基本的に全ての入力内容は、あなたご自身が事業を行う前提での質問となります。「お客様の事業」はあなたが記事を販売する事業、「顧客」はあなたの記事を購入したユーザーのこととなります。あくまでもCrieitとあなたの事業の手数料連携のみという扱いになり、Crieitがあなたの事業の管理及び保護を行うものではありませんので、その前提で入力を進めてください。

コンプライアンス関連の質問

まず最初にコンプライアンス関連の質問に回答します。こちらは自動的に下書きされますのでゆっくり入力して途中であとから続きを進めることも可能です。

基本的には下記のように回答すれば問題ありません。その他は適宜確認のうえ適切なものを選択してください。

今後、顧客のカード番号を取り扱う予定はありますか？

→いいえ

今後、お客様の事業で、または他事業の代理として決済を生成する接続アプリケーション (Connect Standard) で、顧客の身元を特定することを目的として、何らかの種類の付加的な検証手段を利用する予定はありますか？

→いいえ

今後、お客様の事業で、または他事業の代理として決済を生成する接続アプリケーション (Connect Standard) で、決済ごとにカードのセキュリティコードを要求する予定はありますか？

→はい

今後、お客様の事業で、または他事業の代理として決済を生成する接続アプリケーション (Connect Standard) で、疑わしい配送先住所を検出するための対策を講じる予定はありますか？

→いいえ

本番環境利用の申請

ご自身が事業者としての入力を行ってください。Crieitの情報を書く部分はありません。「ビジネスの Web サイト」はCrieitのご自身のプロフィールページURLを使って頂いて大丈夫です。