ネットワークエンジニアのアレ

技術情報メインの備忘系ブログです

www.flickr.com

NoCodeサービス「Bubble」でTagを表示する

Bubble_NoCode_Tag設定

最近SNSなどで目にするようになってきた「NoCode(ノーコード)」
自分も「Bubble(バブル)」というサービスを触ってます。

 

bubble.io


この記事では「Bubble」のTipsについて紹介したいと思います。

 

「Bubble」とは何か?や一通りの使い方は@__shinji__さんが恐ろしく詳しく解説しているので、下記動画をぜひご覧ください。

www.youtube.com

 

 

Tag(タグ)を表示する

今回はブログやSNSで標準的な機能の Tag(タグ)を表示する方法の紹介です。

 

完成イメージ

完成イメージはこちら。

入力したキーワードが下記画像のように表示されるやつです。

Bubble_NoCode_Tag設定

作り方

データベース作成

まず、Tagを格納するデータベースを作成します。

Type(テーブル) :article
Field(カラム)  :tag

上記の名前で作成。Field typeは”List of texts”を選択します。

Bubble_NoCode_001

1つのレコードの内容はこんな感じです。

Bubble_NoCode_Tag設定

Element設置

こんな感じでElementを設置します。

Bubble_NoCode_Tag設定

 

Tagを登録

WorkflowでTag登録(tag Fieldに格納)の設定を行います。

今回は以下の仕様にします。

  • Inputフォームに入力された単語をTagとして登録
  • 単語の間にスペースがある場合は別の単語として登録

 

設定は以下のように行います。

 

Bubble_NoCode_Tag設定

正規表現で単語を抽出しているので、”extract with Regex”でParrernに”\S+”を入力します。

これで空白以外の単語抽出してtag Fieldに格納します。

 

また、tag FieldのField typeが”List of texts”なので”set list”を選択します。

Bubble_NoCode_Tag設定

 

上記設定で下記動作を行うようになります。

  • Inputフォームに入力された単語をTagとして登録
  • 単語の間にスペースがある場合は別の単語として登録


「猫 ねこ cat」と入力し登録ボタンをクリックした場合、Listでtag Fieldに格納されます。

Bubble_NoCode_Tag設定

 

Tagを表示する 

HTML ElementをRepeating Group内に設置します。

Bubble_NoCode_Tag設定

Appearance内に以下を入力します。

太字のところはdynamic dataです。

<style>
.tag-list span {
padding: 2px 4px;
border: 1px dotted rgba(1, 176, 187, 0.65);
border-radius: 5px;
color: rgba(1, 176, 187, 1);
font-family: Roboto;
font-size: 12px;
margin: 0 5px 10px 0;
font-weight: 500;
display: inline-block;
word-wrap: break-word;
white-space: normal;
}
</style>
<div class="tag-list"><span>

Current cell's article's tag join with </span><span>:uppercase

</div>

上記記述はBubbleコミュニティでTipsとして掲載されていました。

(とても助かりました。)

コミュニティが活発なのもBubbleの特徴です。調べると何かしら出てきます。

forum.bubble.io

 

これでtag Fieldから単語を取り出してTagのように出力可能になります。

Bubble_NoCode_Tag設定

動作イメージ

Bubble_NoCode_Tag設定

 おわりに

「Bubble」を使いはじめて1ヶ月。

コードを書かなくても動くものができるのはとても良いですね。

込み入ったことをすると、「Bubble」の仕様に依存して逆に大変・・・ってこともありますが、前述のとおりコミュニティも充実しているので何かしら解決策が見つかります。

Pluginも豊富で自分でも作成できるので、必要な機能があったら追加することも可能です。

 

近いうちに「Bubble」でサービスをリリースしたいと思います。