vibe codingでQRコードを作成するWEBアプリを作ってみた
無料のQRコードを作成するアプリって結構あるんですが、自分用のが欲しかったので、今回作ってみました。
正直このレベルだと、特に難しい事を考えなくても作れちゃいます。
アクセス先はこちらです。
https://test.aisgm.me/test_prog/app/QR_Code/
更新履歴
2025/06/27 公開
2025/07/05 QRコードの生成に失敗するケースがあったので修正
一応課程を乗せておきます
制作環境ですが「Claude 4 Sonnet」を利用して作成しました。
今回はシンプルなQRコードなので以下の条件を設定しました。
- 文字列を指定したらQRコードへ変換
- 画像の下部にテキストでタイトルを記入できるようにする
- QRコードのサイズを選択できるようにする
- ダウンロードボタンでQRコードとタイトルを画像としてダウンロードできる
- スマホからも利用可能にする
これで作成すると、画面構成は現在の完成形ができあがりましたが、QRコードの生成ボタンが押しても反応しないなど、動きませんでした。
QRコード生成のJSのライブラリを利用するような仕組みだったのですが、リンク切れしていたみたいで、エラーが出ていました。
そこで、なんとかしてってお願いすると、出来合いの物を利用しないで、QRコードそのものを生成する機能から実装してくれましたが、実際に実行してみると、中途半端な画像を生成しました。
こちらの画像です
中身が無い枠だけです。
なので、中身のテキストが変換されてない旨と、この画像を直接AIに渡すと、これで動くようになってしまいました。
このツールで出したQRコードです。
この生成サイトへのリンクをQRコードに変換しました。
問題無くスマホからもアクセスできたので、生成したQRコードも問題なさそうです。
QRコードを生成にご自由に利用してくださいｗ
もし変換に失敗するとかあれば教えてください。
