Amazon商品QRコードメーカー

Amazon のリンクからQRコードを生成し、画像保存できるフリーのAmazon QRコードメーカー
qr.hasethblog.com
2024
PHP
TypeScript
Next.js
Tailwind CSS
Framer Motion
Chakra UI
GitHub Actions
PA-API

コンテンツ

Amazonリンクから、QRコードを生成するサービスです。
これを印刷して冷蔵庫に貼ったり、写真フォルダを長押しすることにより、即時にかつ定期購入することができます。

制作した経緯

Amazonリンク短縮URLジェネレーターと近しい理由で作成しました。
長期的な収益に繋げるというところを目指して作成しました。
仕組みもアイデアも至ってシンプルですが、あれば便利なツールです。
 

制作にあたって

ツール系は、なるべくファーストビューで完結するサービスというものを心がけています。 当サービスも、どこにどんなボタンがあって何をどうすれば目的を達成できるのか。その目的は、どう活用するかみたいなところを簡潔にし、イメージしやすいように実装しました。

便利にしようと思うと、画面が複雑になってしまうので、どこまで機能を追加するかで悩みました。
少し複雑になりすぎたかなと反省しています。なんなら一機能の方がよかったのでは?とも感じます。

Amazonのアプリからリンクをコピーすると商品名などリンク要素以外の文字列などもコピーされます。
そのため、普通であれば貼り付けても機能はしないですが当サービスは、スマホユーザがターゲットだったために、
その内容でも適切にQRが発行できるような仕組みを作りました。

また、生成されるQRコードは、誤り訂正レベルを調節できます。
このレベルが上がれば、汚れていたり一部が欠けていても正しい情報を伝搬することができます。
そういった誤り訂正機能を活かしてQRコードに画像を埋め込むことも可能になります。
その機能も駆使したいと考えていました。
Product Advertising APIで画像を取得していて、QRに埋め込むにはCanvasを使って重ねて画像化というフローです。 ただ、別オリジンであればセキュリティで保護されCanvasには埋めれません。
もし強引に埋めようとするなら、一度Blobオブジェクトに変換するなど余計なフローが発生してしまいます。
コードもシンプル化してフロントエンド完結を目指していたため画像化埋め込みは実装に至りませんでした。