iPhoneから簡単な操作で物理ステッカーを作れるサービス・Stickifyをリリースしました
iOSデバイスで撮った写真を簡単に物理ステッカーにできるStickifyというサービスをリリースしました。
サービス概要
iOS16から、被写体切り抜き機能が標準で搭載されました。また、iOS17からは、切り抜いた被写体画像もiOSアプリ上のさまざまな場所でステッカーとして貼り付けられるようになりました。
でも、やっぱり物理的なステッカーも欲しいですよね。そんなわけで、このサービスを作りました。こんな感じで使えます。
仕組み
おおむね、以下のような流れになっています。
- iPhoneで撮った写真から被写体を切り抜く
- 共有メニューからショートカットを実行する
- 被写体のみの画像を前処理してAPIへアップロードする
- APIからSUZURIへ投稿し、ステッカーを作成する
写真アプリからすぐにステッカーが作れるという体験を重視しているので、タイトル等を設定できないどころか、すべてのステッカーが同じアカウントのSUZURIストアに投稿されます。そのあたりはこの体験とのトレードオフですね。
Webの方には、編集・削除画面をそのうちつけようかと思っているところです（認証のしようはやっぱりないのですが）。
ショートカット
iOSのショートカットアプリは面白いですね。かなりいろんなことができて、今回のようにWeb APIとの連携もできます（HTTPヘッダもいじれるので、APIキーをつけたりもできます）。
今回作ったショートカットは、以下の通りです。後学のため、記しておきます。
1. 共有メニューから画像を受け取る処理
画像自体を受け取って、リサイズしています（VercelのServer Functionsが4.5MBまでのペイロードしか受け付けないため）。
2. APIへPOSTする処理
普通のフォームと同じように、multipart/form-dataで送信しています。API側で適切にハンドリングして画像を取得しています。
3. APIからのレスポンスが正常な時の処理
ショートカットのifの仕様がよくわからないのですが、真偽というより、値があるかないかしか条件に指定できなくて、困りました（ちゃんと使えてないだけな気がします）。
それで、エラーの時のみ返却されるJSONにerrorというキーを持つ値を付与することで、それがあるかないかで判定しています。エラーがなければ、作成されたステッカーの、SUZURI上での販売画面に遷移します。
4. ショートカット全体の完了処理
成功時もエラー時も、返ってきたメッセージを通知で表示して終わりです。
5. ショートカットの共有
また、これも今回のサービスを実現する上での肝になったことなのですが、自分で作ったショートカットを他の人と共有することもできます。これも簡単にできてしまいます。
ショートカットアプリはマジでヤバい。
所感
昨晩、寝る前にふと思いついてそこから開発を始め、仕事などしつつ、24時間も経たない内にリリースしました。ごく簡単なものなので、もとより開発に時間がそんなにかかるものではないのですが、このスピード感は昔のWeb2.0の時代を思い出しますね。
今後もあれこれ作っていきたいと思います。Next.jsやそのまわりのエコシステムは、最初のうちはかなり大変でしたが、慣れると色々整っていてとても使いやすいですね。
特に何をやっているわけでもないですが、コードをGitHubにアップしています。
おわりに
けっこう面白い体験ができると思うので、お試しください。ステッカーを作ったら、ぜひSUZURIにユーザ登録した上で、お買い求めくださるようお願いします
（※私はSUZURIを運営している会社に勤めています）。
Discussion