Bubbleで絵文字を使おう！

Bubbleでも絵文字の入力が出来ます。しかもとても簡単に。利用方法を説明したいと思います。

ゴールイメージ

以下のように入力ボックスに絵文字を入力し、その結果を画面に表示したいと思います。

実装方法

プラグインをインストール

Emoji One Area Pickerのプラグインをインストールします。

画面の作成

Multiline input、ボタン、表示用のテキストを配置します。
そして、Emoji One Area Pickerの要素「EmojiOA」も画面に配置します。

以下のようなイメージです。

Multiline inputにID Attributeを設定します。今回は以下のように「emoji」と設定しました。

画面上に配置した「EmojiOA」の要素のID Attributeに先ほどMultiline inputに設定したID Attributeと同じ値を設定します。

ボタンを押した際に画面下部に入力した絵文字を設定するための設定もしておきます。

Group（Group text)の中にTextエレメントを配置します。Group (Group text)のType of contentは”text”としておきます。
中に格納したテキストは”Parent group’s text”を表示するようにしておきます。
以下のイメージです。

これで画面の設定は完了です。

Workflowの設定

ボタンを押した際に先ほど配置したtextに入力した絵文字と文章を表示するようにします。

ここでのポイントはMultiline inputのvalueを表示対象にするのではなく、EmojiOAのContentを表示対象とすることです。
Multiline inputのvalueを設定すると空になっているので気を付けてください。

これで設定は完了です。

最後に

如何でしたでしょうか？

プラグインを使うことで非常に簡単に絵文字を入力できるようになります。LINEクローンのアプリを作る際などにも活躍しそうですね。

他の有益な記事も是非参考にしてノーコードライフを楽しんでください。