【Bubble】公式プラグイン　「Rich Text Input(Legacy)」の紹介

はじめまして。Bubble初心者で勉強中の「あや」と申します。

Bubbleに限らずブログ投稿自体が初めてなので、拙い部分ばかりだと思いますがよろしくお願いします。

初投稿は.bubbleの公式プラグイン「Rich Text Input(Legacy)」について紹介しようと思います。

●「Rich Text Input(Legacy)」とは？

「Rich Text Input(Legacy)」は、リッチテキストエディタを使って文字を入力するためのエレメントで、フォントカラーやサイズの変更もできます。

●インストールしてみよう！

①まず、Pluginsタブから『＋Add plugins』をクリックする。

②次に、検索欄で「Rich Text Input(Legacy)」と検索する。

すると、右側に表示されるため、『Install』をクリックした後、『DONE』をクリックする。

これで「Rich Text Input(Legacy)」のインストールが完了しました！

Designのページで「Rich Text Input(Legacy)」を選択して配置するだけで機能します。

しかし、せっかくなので少し応用したいところです。

入力したらウィンドウの外に表示されるように設定してみましょう。

①Rich Text Input(Legacy)エレメントを左に、Textエレメントを右に配置する。そして、この2つを選択して右クリックし、「Group elements in a Group」を選んでグループ化する。

②グループ化したものの『This element is visible on page load』のチェックを外す。

③Buttonを配置し、New Postと入力する。

④ButtonのStart/Edit workflowをクリックしてワークフローの設定にとび、Dara(Things)→Create a new thingのTypeを『Post』とする。

⑤「Click here to add an action」でElement Actions→Display dataのElementを「Group Post」 とし、Data to displayを「Result of step 1(Create a new Post)」とする。

⑥「Click here to add an action」でElement Actions→ShowでElementを「Group Post」とする。

⑦Designのページに戻り、最初に配置したTextエレメントをクリックしAppearanceで「Parent group's Post's text」とする。

⑧最初に配置したRich Text Input(Legacy)エレメントを右クリックし、「Start/Edit workflow」をクリックしてRich Text Input(Legacy)エレメントのワークフローの設定にとぶ。

「Data(Things)→Make changes to thing」でThing to changeを「Parent group's Post」とする。

次に、「Change another field」をクリックし、「text=This Rich Text input's value」と入力する。

以上で設定が終わりました。Previewをクリックして確認してみましょう！

最初にNew Postボタンのみが表示されます。それをクリックするとRich Text Input(Legacy)のウィンドウが表示され、文章入力ができます。

入力が終わったらウィンドウの外をクリックしてください。

テキストエレメントを配置した場所に入力内容が表示されました！

最後まで読んでくださりありがとうございました！