《Bubble》URLからQRコードを生成する方法（プラグイン）
概要
QRコードとは、バーコードを拡張するために開発された2次元コードです
今回はBubbleで、任意のURLからQRコードを生成する方法について解説します。
※QRコードを生成する方法はいくつかありますが、今回は実装が容易であるプラグインを使った方法をご紹介します。
URLからQRコードを生成する方法（プラグイン）
1．プラグインのインストール
Pluginsタブにて、「Colour QR Code Generator」をインストールします。
https://bubble.io/plugin/colour-qr-code-generator-1589286705656×418893179359068160
2．実装方法
１．QRコードの表示のみ
まずはデータベースへの保存を行わず、入力した文字列からQRコードを表示してみましょう。
完成イメージ
URLを入力し「表示する」ボタンを押すと、QRコードが表示されました。
①エレメントを配置する
Input、Button、Image、ColourQRCodeを配置します。
ImageエレメントのDynamic imageに「ColourQRCode A’s QR Image」を設定します。
これで、生成したQRコードがImageエレメントに表示されます。
② ワークフローを設定する
Buttonを押下時のワークフローを設定します。
Buttonエレメントにて「Start/Edit workflow」をクリックし、ワークフロータブへ移動します。
Textの欄に、Inputエレメントの値を設定します。(Input URLを入力’s value)
これで完成です。プレビューでQRコードを表示できることを確認してみてください。
２．作成したQRコードをDBに保存する
続いて、生成したQRコードをデータベースへ保存してみましょう。
文字を入力し「DB保存」ボタンを押すと、QRコードが表示された上に、データベースに保存されました。
①データベースを作成する
今回は、QRコードの画像データと、画像データの名前を格納します。
Field name | Field type | 意味 |
image | image | QRコードの画像を保存する |
name | text | 画像の名前を保存する |
②エレメントを配置する
DB保存のButtonを新しく追加します。
③ワークフローを設定する
Buttonを押下時のワークフローを設定します。
データベースを利用するので、Save to Databaseを”yes”にします。
Filenameは画像データの名前です。任意で設定してください。
続いて、QRコードの生成が完了したことをトリガーとし、データベースへ保存します。
imageに「This ColourQRCode’s QR Image」、nameに「This ColourQRCode’s Saved Image Filename」を指定します。
これで完成です！
プレビューでQRコードが保存されることを確認してみてください。