Zenn
📁

カスタムカラー・背景透明化したQRコードの生成が可能なBubbleプラグイン「Transparent QR Code Generator」

に公開
QR コード
bubble
plugin
ノーコード
tech

Bubble で カスタムQRコードを生成・表示・ダウンロード できるプラグインを開発しました。
このプラグインを使うと、色や背景色をカスタマイズ でき、PNG や SVG 形式での表示も可能 になります。

本記事では、このプラグインを使った QRコードアプリの機能と実装方法 を解説します。

プラグインページ

「Transparent QR Code Generator」は以下よりインストール可能です。
https://bubble.io/plugin/transparent-qr-code-generator-1740061286000x992769572946575400

できること

✅ QRコードの色・背景色を設定可能
✅ 背景を透明にするオプション
✅ QRコードを画面に表示（Element）
✅ QRコードをPNGとして生成（Action）
✅ QRコードをSVGとして生成（Action）
✅ QRコードをPNGとしてダウンロード（Action）

これにより、例えば以下のような カスタムQRコード生成アプリ を作成できます。

  • オリジナルのQRコード作成ツール
  • ビジネス用の名刺にカスタムQRコードを追加
  • イベントやプロモーション用のQRコード発行
  • SVG形式でQRコードを保存し、印刷やデザインに活用

使い方

このプラグインには Element と Action の 2つの主要機能 があります。

QRコードを画面に表示（Element）

この機能は、Editorにエレメントを配置することで動的にQRコードを表示することができます。

  1. Bubble エディターで 「QR Code Generator」エレメント をページに配置
  2. 各フィールドを設定
フィールド 値の説明
URL QRコードに変換するURL
QRcode color QRコードの線の色
Background color QRコードの背景色
Background Transparent チェックすると、”Background color”は無効化され、背景は透過されます。
  1. リアルタイムでQRコードが表示される

QRコードをPNGでダウンロード（Action）

PNG形式のQRコードをユーザーがダウンロードできるようにする機能です

  1. 「Download QR Code」アクションをワークフローに追加
  2. 各フィールドを入力
フィールド 値の説明
File name ダウンロードするQRコードのファイル名
URL QRコードに変換するURL
Size QRコードのサイズ(px)
QRcode color QRコードの線の色
Background color QRコードの背景色
Background Transparent チェックすると、”Background color”は無効化され、背景は透過されます。
  1. ユーザーが実行すると、QRコードがダウンロードされます

QRコードをPNGで生成（Action）

PNG形式のQRコードを生成する機能です。後続のワークフローで使用することができます。

  1. 「Generate QR Code(png)」アクションをワークフローに追加
  2. 各フィールドを入力
フィールド 値の説明
URL QRコードに変換するURL
Size QRコードのサイズ(px)
QRcode color QRコードの線の色
Background color QRコードの背景色
Background Transparent チェックすると、”Background color”は無効化され、背景は透過されます。
  1. 実行すると、QRコードがPNG形式で生成されます

QRコードをSVGで生成（Action）

PNG形式のQRコードを生成する機能です。後続のワークフローで使用することができます。

  1. 「Generate QR Code(svg)」アクションをワークフローに追加
  2. 各フィールドを入力
フィールド 値の説明
URL QRコードに変換するURL
Size QRコードのサイズ(px)
QRcode color QRコードの線の色
Background color QRコードの背景色
Background Transparent チェックすると、”Background color”は無効化され、背景は透過されます。
  1. 実行すると、QRコードがSVGで生成されます

このプラグインを使えば、カスタマイズ可能なQRコードをBubbleで簡単に作成・管理・ダウンロード できます！
あなたのアプリに QRコード機能を追加 し、ユーザーの体験を向上させましょう！

https://blog.devspark.jp/plugin-qrcodegenerator/

Discussion