Bubbleで作成した試作品について

こんにちは、「あや」です。

前回はRich Text Input(Legacy)というプラグインと、それのちょっとした応用方法を紹介しました。

今回はこのRich Text Input(Legacy)を使って簡易な日記アプリの作成に挑戦してみました。作成方法は前回の記事の続きとなっていますので、そちらの参照してから実践してみてください。

①前回配置したRich Text InputエレメントのAppearanceの「intial content」を『Parent group's Post's text』とする。

②Picture Uploaderを前回配置したRich Text Inputのエレメントの下 に配置する。

次にWorkflowの設定で、Data(Things)→Make changes to thingの「Thing to change」を『Group Post's Post』とし、「Change another field」をクリックして『text=This Post's text[img]This PictureUploader's value's URL[/img]』とする。

このように設定しなければ、Click to upload an imageにアップロードしても画像のURLだけが表示されるだけで画像自体は表示されないので注意してください。

③「click here to add an action」をクリックし、Element Actions→Reset dataで「Element」を『Group Post』とする。

④Element Actions→Display dataの「Element」を『Group Post』とし、「Data to display」を『Result of step 1 (Make changes to P...)』とする。

以上で設定は終わりです。Previewを押して確認してみましょう！

赤丸のついた箇所をクリックすると自動的に現在の日付が表示されます。これはRich Text Input(Legacy)の便利な機能ですね。

Click to upload an imageをクリックして画像をアップロードしてみると・・・

Rich Text Input(Legacy)のエレメント内にも画像が表示されました！後はその下に文章を入力するだけです。

いかがでしょうか。「絵日記」ならぬ、「写真日記」のようなものができつつあります。

しかし、アップロードする画像は原寸大のまま表示されるため、画像によっては圧縮しなければエレメント内に収まらない等、使い勝手は非常に悪いです。少しでも使いやすいものになるよう改善していきたいです。

今回はここまでです。最後まで読んでくださりありがとうございます。