こんにちはEPICs株式会社です！
今回は多くのチャットツールやSNSで実装されているメンション機能をノーコードツールBubbleで作る方法をお伝えしていきます！
最初にお伝えしておくと今回のメンション機能は有料のプラグインを使用した実装方法になりますので、その点をご理解ください！
また、本メディアを運営する「EPICs株式会社」は、ノーコードを活用したアプリ・システム開発を行っております。大手ノーコードツールであるBubbleからも、公式代理店として認定されています。
従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。
- 開発期間をおよそ1/3に抑えられる → 検証や新規事業に向いている
- 開発費用をおよそ1/3に抑えられる → 浮いた費用を別の領域に利用できる
- リリース後の改修スピードも早い → PDCAを早く回せる
日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。
- 日本最大級のノーコード開発実績 → 高度な開発もスピーディー
- 複数のノーコードツールに対応 → 最適なツール選びで開発費用・期間を最大限抑えられる
- マーケティングまで支援が可能
プロが無料で提案
実装イメージ
実装手順
以下の手順で実装します。
- Mention-Tag Users/itmes（プラグイン）をインストール
- Mention-Tag Users/itmesを画面上に配置しデータ設定
- メンションを表示する要素の指定
Mention-Tag Users/itmes（プラグイン）をインストール
まずは「Plugins」を開きMention-Tag Users/itmes（プラグイン）をインストールしましょう！
Mention-Tag Users/itmesを画面上に配置しデータ設定
Mention-Tag Users/itmesのインストールができたら、designのvisualElement部に「Mention-Tagger」という選択肢が表示されるようになります。
こちらを選択して、メンション機能を使用したスクリーン上に配置しましょう！
次に設定です！
必須の設定項目は下記になります！
| 設定項目 | 内容 |
|---|---|
| input ID | TagのIDどのinputと連携するか？を指定するもの |
| Mention Name Data | メンションの対象とするデータ |
| Mention Display Nam | メンション時に表示するデータ |
| Mention ID Data | 表示するデータ項目のID |
今回は@を入力した際にユーザーのフルネールのデータを対象として引っ張ってきて、メンションの選択肢にも同じくフルネームを表示をさせたいので下記のように設定をしました！
ちなみにTriggerの項目でメンションを起こす際のトリガーの変更も可能です！（デフォルトは@）
メンションを表示する要素の指定
最後にメンションを表示する要素の指定です！
今回はインプットに@を入力した際にメンションができるようにしたいを思います！
ということで画面上にinputを配置しましょう！
inputを配置したら「Attribute ID」に先ほどMention-Tag Users/itmes設定項目で指定したinput IDを入力しましょう！
この時Attribute IDが出てこない！という方はSettingのGeneralの項目にある「Expose the option to add an ID attribute to HTML elements」にチェックがついているか確認してみましょう！
これで設定は以上です！
input内にトリガーとなる文字を入れた際にメンションができるかを確認してみましょう！
