NoCodeサービス「Bubble」でTagを表示する
最近SNSなどで目にするようになってきた「NoCode（ノーコード）」
自分も「Bubble（バブル）」というサービスを触ってます。
この記事では「Bubble」のTipsについて紹介したいと思います。
「Bubble」とは何か？や一通りの使い方は@__shinji__さんが恐ろしく詳しく解説しているので、下記動画をぜひご覧ください。
Tag（タグ）を表示する
今回はブログやSNSで標準的な機能の Tag（タグ）を表示する方法の紹介です。
完成イメージ
完成イメージはこちら。
入力したキーワードが下記画像のように表示されるやつです。
作り方
データベース作成
まず、Tagを格納するデータベースを作成します。
Type（テーブル） ：article
Field（カラム） ：tag
上記の名前で作成。Field typeは”List of texts”を選択します。
1つのレコードの内容はこんな感じです。
Element設置
こんな感じでElementを設置します。
Tagを登録
WorkflowでTag登録（tag Fieldに格納）の設定を行います。
今回は以下の仕様にします。
- Inputフォームに入力された単語をTagとして登録
- 単語の間にスペースがある場合は別の単語として登録
設定は以下のように行います。
正規表現で単語を抽出しているので、”extract with Regex”でParrernに”\S+”を入力します。
これで空白以外の単語抽出してtag Fieldに格納します。
また、tag FieldのField typeが”List of texts”なので”set list”を選択します。
上記設定で下記動作を行うようになります。
- Inputフォームに入力された単語をTagとして登録
- 単語の間にスペースがある場合は別の単語として登録
例
「猫 ねこ cat」と入力し登録ボタンをクリックした場合、Listでtag Fieldに格納されます。
Tagを表示する
HTML ElementをRepeating Group内に設置します。
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の特徴です。調べると何かしら出てきます。
これでtag Fieldから単語を取り出してTagのように出力可能になります。
動作イメージ
おわりに
「Bubble」を使いはじめて1ヶ月。
コードを書かなくても動くものができるのはとても良いですね。
込み入ったことをすると、「Bubble」の仕様に依存して逆に大変・・・ってこともありますが、前述のとおりコミュニティも充実しているので何かしら解決策が見つかります。
Pluginも豊富で自分でも作成できるので、必要な機能があったら追加することも可能です。
近いうちに「Bubble」でサービスをリリースしたいと思います。
