Zenn
🖥️

個人開発でQRコード管理アプリ「QRab」をリリース！初めてのFlask開発とSVG色指定に試行錯誤した話

に公開
Flask
Python
個人開発
QR コード
idea

はじめまして、Lucaです。今回が初めての投稿になります。
記念すべき最初の記事として、先日個人開発でリリースしたWebアプリケーション「QRab (クラブ)」についてご紹介させてください。

今回は、私が個人開発でリリースしたWebアプリケーション「QRab (クラブ)」についてご紹介させてください。企画から設計、開発、そしてデプロイまで全て一人で行った、初めての本格的な開発プロジェクトです。
FlaskというPythonのフレームワークを学び始めたアウトプットとして、実用的なものを作ることを目指しました。

QRabってどんなアプリ？

一言でいうと、「後からリンク先を変えられるQRコード」を作成・管理できるツールです。
お店のPOP、イベントのチラシ、名刺、商品のパッケージなど、一度印刷してしまうと内容変更が難しい場所に貼るQRコード。QRabを使えば、QRコード自体はそのままに、管理画面からリンク先のURLをいつでも変更できます。
「キャンペーンの告知ページURLが変わったけど、もう印刷しちゃった…」
「ブログの最新記事にリンクさせたいけど、記事が増えるたびQRコードを作り直すのは面倒…」
そんな経験はありませんか？ QRabは、こういった課題を解決するために生まれました。

QRabはこちらからアクセスできます！
→ https://q-rab.com/

QRabでできること（主な機能）:

  • 可変QRコード生成: リンク先URLを指定して、変更可能なQRコードを簡単に作れます。
  • リンク先変更: 生成済みのQRコードに紐づくURLを、管理画面からいつでも最新の情報に更新できます。
  • スキャン回数集計: 作成したQRコードが何回スキャンされたかを確認できます。（現在は合計スキャン数のみですが、今後のアップデートで詳細化予定です！）
  • デザインカスタマイズ: QRコードの「色」や「背景色」を、ある程度調整できます。

QRabの基本的な使い方をこちらの短い動画でもご確認いただけます。ぜひご覧ください！
→ https://youtu.be/91aDhtfp_rw

なぜ作ったのか？開発の動機

普段の仕事で「一度作ったQRコードのリンク先を変えたい」というニーズを感じることが多々ありました。特にグラフィック関連や店舗運営に携わる方なら共感いただけるかもしれません。
この具体的な課題を解決できるアプリケーションを、Flask学習のテーマに選んだのが開発のスタート地点です。

使用した技術スタック

今回の開発では、主に以下の技術を使用しました。

  • バックエンド: Flask (Python) - 軽量で柔軟なフレームワークとして、個人開発に適していると感じました。
  • データベース: SQLite - セットアップが容易で、小規模アプリケーションには十分でした。
  • QRコード生成: qrcode[pil] (Python Library) - PythonでQRコードを生成する標準的なライブラリです。
  • フロントエンド: Vanilla JavaScript + TailwindCSS - 複雑なフレームワークを使わず、シンプルに実装しました。
  • インフラ: AWS (EC2, IAM, Route 53) - 初めてのAWSでのデプロイに挑戦しました。

開発で一番苦労した話 〜SVG形式での色指定との格闘〜

開発中にいくつか課題に直面しましたが、特に印象に残っているのがSVG形式でのQRコードの色指定です。
qrcode[pil]ライブラリは、PNGやJPEGなら簡単に色指定ができるのですが、SVGで出力するとどうしてもデフォルトの白黒になってしまう問題にハマりました。ライブラリのドキュメントを読み込み、様々な方法を試しても、標準機能だけではSVGの色を直接指定するのが難しいことが判明。
外部ライブラリ (cairosvg) の利用も検討しましたが、今度は環境依存の問題に遭遇してしまいました。
最終的に、qrcodeライブラリが生成したSVGデータ（XMLテキスト）をPythonで直接文字列操作し、CSSスタイルを<path>要素に埋め込むという、少し泥臭いですが確実に色を指定できるワークアラウンドで解決しました。
この経験を通じて、ライブラリの仕様や限界を理解すること、そして標準的な方法が使えない場合に別の角度から問題解決を試みる「ワークアラウンド」の重要性を学びました。また、新しい技術（AWS）をゼロから調べて習得していくプロセスも大変でしたが、良い経験になりました。

開発で工夫した点・学び

開発全般で、AI（Gemini）を積極的に活用したことが大きな工夫点です。アイデア出しから技術選定、デバッグ、デプロイ手順の調査まで、一人開発の強力な相棒となってくれました。
技術的な学びとしては、前述のSVG色指定の件やAWSデプロイを通じて、ライブラリの深い理解、ワークアラウンド、環境依存性、そして新しい技術を学ぶ過程を体感できたことです。

今後の展望

QRabはまだ生まれたばかりですが、今後も継続的に開発を進めていきたいです。特に、スキャン回数集計機能をもっと詳細に分析できるよう強化することを考えています。

最後に：ぜひ「QRab」を試してみてください！

ここまで読んでいただき、ありがとうございます！
「QRab」は、シンプルながら可変QRコードが必要な方の役に立てるアプリだと思っています。ぜひ一度アクセスして、実際にQRコードを作成・管理してみてください。
QRabはこちらからアクセスできます！
→ https://q-rab.com/
使ってみた感想や、「こんな機能があったら便利なのに」といったフィードバックをいただけると、今後の開発の大きな励みになります！コメントやアプリ内のお問い合わせからお気軽にお寄せください。

【開発の応援をお願いします】
QRabは個人開発・個人運営です。もし「便利だな」「応援したいな」と感じていただけましたら、クリエイター支援プラットフォーム「ofuse」を通じてご支援いただけますと大変励みになります。
→ https://ofuse.me/ac82b3b0
この記事が、個人開発やFlask学習の参考になれば幸いです。これからもQRabをどうぞよろしくお願いいたします！

Discussion