【Bubble】テキスト付きの画像出力方法

概要

BubbleでAPIFlashを用いてテキスト付きの画像を出力する方法について解説します。

APIFlashは、WebページのスクリーンショットやPDF生成などを行うためのAPIプラットフォームです。APIFlashは、モダンなWebアプリケーションにおいて、自動化されたWebページのスクリーンショットやPDF生成が必要な場合に役立ちます。

以下は実際に出力した画像です。

APIFlashとの連携

1.APIFlashのアカウントを作成する

APIFlash公式サイトにアクセスし、アカウントを作成します。アカウントを作成すると、APIキーが発行されます。

2.APIFlashのAPIクエリを作成する

APIFlashアカウントを作成することで、APIクエリを簡単に作成できるようになります。のちほど、Bubbleアカウント内で使用します。

3.プラグインをインストールする

APIFlashと連携する為に、「API Connector」を使用します。

Bubbleでのテキスト付きの画像出力方法

1.画像とテキストエレメントを配置する

出力するテキスト(inputエレメント)と画像(PictureUploaderエレメント)を配置します。

2.ユーザーが入力した画像とテキストを保存するデータベースを作成する

以下のようにユーザーが入力した画像とテキストを保存するようにデータベースを設定します。

3.画像とキャプションが URL パラメータから描画されるページを作成する。

APIFlashを実行する際に画像生成する為に描画されるページが必要です。その為、URLパラメータからユーザー入力した画像とテキストを表示する画像エレメントを設置します。

URLパラメータからユーザー入力した画像とテキストを表示する画像エレメントを設置します。

4.画像出力ボタンにワークフローを設定する

画像出力ボタンに以下のワークフローを設定すると画像を出力できます。