1. Bubbleのプラグインを使ってみよう。
Bubbleでは、様々なプラグインが用意されています。 自作でもプラグインはできますが、既に公開されているものがあればそれを利用する方が便利ですよね。 ただ、有料、無料とあり、有料のものは、有料プランを利用していないと使用できないので注意です。
1-1．はじめに
先日Bubbleで元号ジェネレータの作成方法について説明しました。 （その時の記事はコチラ） blog.nocodelab.jp
元号ジェネレータでは、指定した漢字２文字を元画像にその漢字２文字を上から重ねて表示する、という処理をしていました。 これは、あくまで元画像と文字の二つなので、単純に一つの画像にはなっていません。 それを画像にしてダウンロードできるようにしてみます。
ここでは、無料プラグインのエレメントを画像に変換するプラグインを利用してみましょう。
2. プラグインを準備しよう。
では、早速プラグインを使用するための準備をしましょう。 ここでは、「Element To Image」というプラグインを使用します。
2-1. プラグインをインストールしてみよう。
プラグインのインストールは、左端のPluginタブからインストールできます。
「Add Plugins」のボタンを押下すると、プラグイン検索画面が表示されます。 検索欄に「Element To Image」と入力しましょう。
現在2つプラグインがでてきますが、上の青いアイコンの方をインストールします。 インストール後、「DONE」ボタンを押下すると、プラグイン検索画面が消え、プラグインがインストールされていることがわかります。
2-2. HTMLのIDを利用できるように設定しよう。
このプラグインを利用するには、一つBubbleの方の設定をしなければなりません。
「Settings」タブの「General」タブの中に、 「Expose the option to add an ID attribute to HTML elements」というチェックボックスがあります。 デフォルトではチェックボックスはオフになっているので、オンにしておきましょう。
これで、各エレメントで、HTMLのIDを設定できるようになりました。 この設定で色々なことができそうですよね。
これでプラグインを使用する準備ができました。
3. プラグインを使用してみよう。
ここでは、「Element To Image」プラグインの利用方法について説明します。
3-1.画像をグループ化しよう。
画像にしたい部分を一つのグループエレメントの中にいれましょう。 そして、そのグループのHTML IDを設定します。 グループの設定ウィンドウの一番下に「ID Attribute」という欄あるので（2-2の設定をしたからです）そこにID値をいれます。
ここでは、「gengo_image」にしました。
3-2.プラグインのエレメントを配置しよう。
「Element To Image」プラグインをインストールすると、Visual elementsタブの中に、このプラグインで定義されたエレメントが追加されます。 タブ内の一番下に、「Element to PNG」があるので、これをここではポップアップ内に配置します。
このエレメントは大きさを変更はできませんが、大きさは特に問題にならないので、気にしなくて大丈夫です。
3-3.画像のダウンロードをしよう。
次に、ポップアップウィンドウにボタンを追加して、そのアクションにダウンロード処理を追加してみましょう。
Elements Action内に、プラグインで定義されているアクションが追加されています。それの「Download Element As PNG a Element To PNG」を選択します。
次に、プロパティの設定を行います。
「Element」には、Element To PNGエレメントを指定します。
「Element ID」は、3-1で定義した、グループのHTML IDを指定します。
ここでは「gengo_image」です。
「File Name」はダウンロードした時のファイル名です。これは何でも良いので、今は、「Element ID」と同じにしています。
これで、エレメントを画像にし、ダウンロードする処理ができました。
プレビューで実際にダウンロードできるか確認してみましょう！
4. 注意事項
プラグインを利用してエレメントを画像化し、ダウンロードする、という工程は終わりなのですが、一つ、問題点があります。
元号ジェネレータでは、既存の画像の上にテキストを重ねてそれを画像化する、ということをしていますが、このプラグインでは、画像が含まれていると、画像部分のみ画像化されません。（※プラグインはhtml2canvasを利用していて、こちらのライブラリの問題かと思われます）
これをするために、少々裏技的なのを使っています。 それは、画像をバイナリデータからBase64でエンコードし、それをimageエレメントで読み込ませる、ということをしています。
Base64にエンコードする方法は、画像からエンコードするサイトがありましたので、そちらを利用させていただきました。
通常なら、固定画像なら、Static imageからアップロードすればよいのですが、Base64エンコードされたデータから読み込むため、Dynamic imageに直接Base64のデータを入力します。 これで、画像が含まれているデータも画像化されるようになります。
プラグインを利用することでBubbleの可能性が広がると思います。 是非利用してみてください。
ここまで読んでいただき、ありがとうございました！
