カスタムカラー・背景透明化したQRコードの生成・ダウンロードが可能なBubbleプラグイン「Transparent QR Code Generator」の使い方を解説

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

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

プラグインページ

「Transparent QR Code Generator」は以下よりインストール可能です。

Bubble

Transparent QR Code Generator Plugin for Bubble

Transparent QR Code Generator Plugin page on Bubble. Use thi…

できること

✅ 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コードを表示することができます。

①Bubble エディターで 「QR Code Generator」エレメント をページに配置

②各フィールドを設定

③リアルタイムでQRコードが表示される

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

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

①「Download QR Code」アクションをワークフローに追加

②各フィールドを入力

③ユーザーが実行すると、QRコードがダウンロードされます

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

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

①「Generate QR Code(png)」アクションをワークフローに追加

②各フィールドを入力

③実行すると、QRコードがPNG形式で生成されます

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

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

①「Generate QR Code(svg)」アクションをワークフローに追加

②各フィールドを入力

③実行すると、QRコードがSVGで生成されます

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