Bubbleのプラグインを使ってみよう。関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。Bubbleのプラグインを使ってみよう。2019-08-30Bubbleのプラグインを使ってみよう。Bubbleのプラグインを使ってみよう。Bubbleでは、様々なプラグインが用意されています。自作でもプラグインはできますが、既に公開されているものがあればそれを利用する方が便利ですよね。有料、無料とあり、有料のものは、有料プランを利用していないと使用できないので注意です。1-1.はじめに先日Bubbleで元号ジェネレータの作成方法について説明しました。blog.nocodelab.jp元号ジェネレータでは、指定した漢字2文字を元画像にその漢字2文字を上から重ねて表示する、という処理をしていました。これは、あくまで元画像と文字の二つなので、単純に一つの画像にはなっていません。それを画像にしてダウンロードできるようにしてみます。ここでは、無料プラグインのエレメントを画像に変換するプラグインを利用してみましょう。2.プラグインを準備しよう。プラグインを使用するための準備をしましょう。Image」というプラグインを使用します。プラグインをインストールしてみよう。プラグインのインストールは、左端のPluginタブからインストールできます。Plugins」のボタンを押下すると、プラグイン検索画面が表示されます。Image」と入力しましょう。現在2つプラグインがでてきますが、上の青いアイコンの方をインストールします。インストール後、「DONE」ボタンを押下すると、プラグイン検索画面が消え、プラグインがインストールされていることがわかります。HTMLのIDを利用できるように設定しよう。このプラグインを利用するには、一つBubbleの方の設定をしなければなりません。elements」というチェックボックスがあります。デフォルトではチェックボックスはオフになっているので、オンにしておきましょう。これで、各エレメントで、HTMLのIDを設定できるようになりました。この設定で色々なことができそうですよね。これでプラグインを使用する準備ができました。プラグインを使用してみよう。Image」プラグインの利用方法について説明します。3-1.画像をグループ化しよう。画像にしたい部分を一つのグループエレメントの中にいれましょう。Attribute」という欄あるので(2-2の設定をしたからです)そこにID値をいれます。ここでは、「gengo_image」にしました。3-2.プラグインのエレメントを配置しよう。elementsタブの中に、このプラグインで定義されたエレメントが追加されます。PNG」があるので、これをここではポップアップ内に配置します。このエレメントは大きさを変更はできませんが、大きさは特に問題にならないので、気にしなくて大丈夫です。3-3.画像のダウンロードをしよう。次に、ポップアップウィンドウにボタンを追加して、そのアクションにダウンロード処理を追加してみましょう。Action内に、プラグインで定義されているアクションが追加されています。PNG」を選択します。次に、プロパティの設定を行います。PNGエレメントを指定します。ここでは「gengo_image」です。Name」はダウンロードした時のファイル名です。ID」と同じにしています。これで、エレメントを画像にし、ダウンロードする処理ができました。プレビューで実際にダウンロードできるか確認してみましょう!4.注意事項プラグインを利用してエレメントを画像化し、ダウンロードする、という工程は終わりなのですが、一つ、問題点があります。元号ジェネレータでは、既存の画像の上にテキストを重ねてそれを画像化する、ということをしていますが、このプラグインでは、画像が含まれていると、画像部分のみ画像化されません。(※プラグインはhtml2canvasを利用していて、こちらのライブラリの問題かと思われます)これをするために、少々裏技的なのを使っています。それは、画像をバイナリデータからBase64でエンコードし、それをimageエレメントで読み込ませる、ということをしています。Base64にエンコードする方法は、画像からエンコードするサイトがありましたので、そちらを利用させていただきました。imageに直接Base64のデータを入力します。これで、画像が含まれているデータも画像化されるようになります。プラグインを利用することでBubbleの可能性が広がると思います。利用してみてください。11:25Bubbleのプラグインを使ってみよう。作成!「学習サポートアプリ」をリリースします。nocodelabスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。