Flaskのアウトプットも兼ねて、企画から設計、開発、そしてデプロイまで全て一人で行いました。
QRabってどんなアプリ？一言で言うと「可変QRコード作成＆管理ツール」です
QRabは、生成したQRコードのリンク先を後から何度でも変更できる「可変QRコード」を作成し、管理することができるWebアプリケーションです。
お店のPOP、イベントのチラシ、名刺、商品のパッケージなど、一度印刷してしまうと内容変更が難しい場所にあるQRコード。QRabを使えば、印刷し直すことなく最新の情報にリンクさせることができます。
なぜ作ったのか？開発の動機
普段の仕事で「一度作ったQRコードのリンク先を変えたい」というニーズことが多々ありました。
個人的にはグラフィック系の仕事をしている方や飲食店の方は考えたことあると思いますがどうですか？
そこで、この課題を解決するアプリケーション開発をFlask学習のテーマに選びました。
QRabでできること（主な機能紹介）
QRabには、可変QRコードを便利に使うための機能がいくつかあります。
- QRコード生成: 直感的な操作で、リンク先URLを指定して可変QRコードを生成できます。
- リンク先変更: 生成済みのQRコードに紐づくリンク先URLを、管理画面からいつでも変更できます。これにより、印刷済みのQRコードの内容を最新に保てます。
- スキャン回数集計: 作成したQRコードが何回スキャンされたかを確認できます。これにより、QRコードの利用状況を把握できます。（現在は合計スキャン数のみですが、今後のアップデートで詳細な分析機能を追加予定です！）
- デザインカスタマイズ: QRコードの色や背景色をある程度カスタマイズできます。ブランドイメージに合わせたデザインにすることも可能です。
使い方を動画で見る
文章での説明に加えて、QRabの基本的な使い方をこちらの短い動画でもご確認いただけます。ぜひご覧ください！
どんな課題を解決できるか？（ターゲットユーザー/利用シーン）
Qrabは、以下のような方々やシーンで役立つと考えています。
- イベント主催者: イベント内容や告知ページが変わっても、同じQRコードを使い続けたい。
- 店舗運営者: 期間限定キャンペーンや日替わりメニューなど、頻繁に情報が変わる告知物に。
- 個人ブロガー/アフィリエイター: 紹介リンクや最新記事のURLが変わるたびにQRコードを作り直す手間を省きたい。
- 名刺や資料: 連絡先や会社のWebサイトURLが変わる可能性がある場合に。
使用した技術スタックについて
今回の開発では、主に以下の技術を使用しました。
- バックエンド: Flask (Python)
- 軽量で柔軟なフレームワークとして、学習しやすく個人開発に適していると感じました。
- データベース: SQLite
- 小規模なアプリケーションには十分で、セットアップが容易なため選びました。
- QRコード生成: qrcode[pil] (Python Library)
- Pythonで簡単にQRコードを生成できるライブラリです。画像処理にPilow（PIL）を使用しています。
- フロントエンド: Vanilla JavaScript + TailwindCSS
- 複雑なフレームワークを使わず、JavaScriptの基本とUtility-First CSSフレームワークであるTailwindCSSでシンプルに実装しました。
- インフラ: AWS (EC2, IAM, Route 53)
- AWSでのデプロイは初めてでしたが、EC2上にFlaskアプリケーションを配置し、Route 53でドメインを設定しました。
開発で一番苦労した話 〜SVG形式での色指定との格闘〜
開発中にいくつか課題に直面しましたが、特に印象に残っているのがSVG形式でのQRコードの色指定です。
PNGやJPEG形式ではライブラリの機能で簡単に色や背景色を設定できたのですが、SVG形式で出力するとどうしてもデフォルトの黒白になってしまう問題にハマりました。
qrcodeライブラリのドキュメントを穴が開くほど読んだり、使い方を変えてみたりしましたが、ライブラリの標準機能だけではSVGの色を直接指定するのが難しいことが判明。外部ライブラリ (cairosvg) を使う方法も検討しましたが、今度は環境依存の問題 (cairo ライブラリが見つからないエラー) に遭遇してしまいました。
最終的に、qrcode ライブラリで生成されたSVGデータ (XML テキスト) を直接操作し、CSS スタイルを文字列として埋め込むという、少し泥臭い方法で解決しました。
学びとしては、ライブラリは便利ですが、その仕様や限界を理解することが重要だと感じました。時には、標準的な方法だけでなく、別の角度からのアプローチや「ワークアラウンド (回避策)」が必要になることもあると学びました。また、外部ライブラリの導入は、環境依存の問題を引き起こす可能性があることも実感しました。
AWSへのデプロイも初めてだったので、作業全般を調べながら作業したことも印象に残っています。
開発で工夫した点・学び
開発の要件定義からデプロイまで、Geminiを活用したことが大きな工夫点です。アイデア出し、技術選定、デバッグ、デプロイ手順の調査など、様々な場面でAIに助けてもらいながら開発を進めました。一人での開発における強力な相棒となってくれました。
また、SVG色指定の件やAWSデプロイを通じて、ライブラリの仕様理解、ワークアラウンドの重要性、外部ライブラリの環境依存性、そして新しい技術（AWS）を習得するプロセスを学ぶことができました。
今後の展望
QRabはまだ生まれたばかりですが、今後も継続的に開発を進めていきたいと考えています。
特に強化したいのは、スキャン回数集計機能です。現在は、リダイレクト先の変更などに関わらず総スキャン数のみを表示しています。今後は、もっと細かくデータを集計し、グラフ化まで行えるようにして、ユーザーがQRコードの効果をより詳細に分析できるようにしたいと考えています。
最後に：ぜひ「QRab」を試してみてください！
ここまで読んでいただき、ありがとうございます！
「QRab」は、まだシンプルな機能ですが、可変QRコードが必要な方の役に立てるアプリだと思っています。
ぜひ一度アクセスして、実際にQRコードを作成・管理してみてください。
QRabはこちらからアクセスできます！ https://q-rab.com/
そして、もしよろしければ、使ってみた感想や「こんな機能があったらいいな」といったフィードバックをいただけると、今後の開発の励みになります！
ご意見、ご感想は、この記事へのコメントや、アプリ内のお問い合わせなどからお気軽にお寄せください。
【開発の応援をお願いします】
QRabは個人開発・個人運営のサービスであり、現在のところ広告などは掲載しておりません。
もしQRabを使って「便利だな」「応援したいな」と感じていただけましたら、クリエイター支援プラットフォーム「OFUSE」を通じて、今後の開発や運営をご支援いただけますと大変励みになります。
いただいたご支援は、Qrabのさらなる機能改善や安定したサービス提供のために大切に使わせていただきます。
もしよろしければ、こちらから応援いただけますと幸いです。
OFUSEで開発者を応援する [[OFUSE]]
この記事が、個人開発に興味がある方や、Flaskを学んでいる方の参考になれば幸いです。
今後もQRabを改善し、より便利なアプリに育てていきたいと思いますので、どうぞよろしくお願いいたします！
こんにちは！Lucaです。今回は、個人開発でリリースしたQRコード管理アプリ「QRab (クラブ)」についてご紹介させてください。