こんにちはEPICs合同会社です！
今回は多くのチャットツールやSNSで実装されているメンション機能をノーコードツールBubbleで作る方法をお伝えしていきます！
最初にお伝えしておくと今回のメンション機能は有料のプラグインを使用した実装方法になりますので、その点をご理解ください！
実装イメージ
実装手順
以下の手順で実装します。
- 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 Num | メンション時に表示するデータ |
| Mention ID Data | 表示するデータ項目のID |
今回は@を入力した際にユーザーのフルネールのデータを対象として引っ張ってきて、メンションの選択肢にも同じくフルネームを表示をさせたいので下記のように設定をしました！
ちなみにTriggerの項目でメンションを起こす際のトリガーの変更も可能です！（デフォルトは@）
メンションを表示する要素の指定
最後にメンションを表示する要素の指定です！
今回はインプットに@を入力した際にメンションができるようにしたいを思います！
ということで画面上にinputを配置しましょう！
inputを配置したら「Atturibute ID」に先ほどMention-Tag Users/itmes設定項目で指定したinput IDを入力しましょう！
この時Atturibute IDが出てこない！という方はSettingのGeneralの項目にある「Expose the option to add an ID attribute to HTML elements」にチェックがついているか確認してみましょう！
これで設定は以上です！
input内にトリガーとなる文字を入れた際にメンションができるかを確認してみましょう！
①ノーコード特化の豊富な開発実績
ノーコード開発に特化しマッチングアプリやSNSアプリなど様々な開発実績がございます！
豊富な経験をもとに開発を行うにとどまらず、より良い開発を行うためのアドレスや公開後のご不安やご相談にも対応させていただきます！
②最安30万円！通常の1/10~1/5ほどの低コストで開発
コーディングの工程を削減できるノーコードは、最適かつ最小限の人員で対応が可能です。また弊社では豊富な開発実績があるため、経験を活かした開発を行うことで開発費用を大幅に削減することができます。
③最短2週間！圧倒的な短期間で納品
ノーコード開発では複雑なコードを１から書く必要がないため開発工程を省略することができ、開発期間の大幅な短縮が可能です。
見出し
アプリ・システム開発のご相談はこちら
EPICs合同会社ではAdalo、Bubble、Flutter Flow、STUDIO、Glideなど様々なノーコードツールを活用しています。
ノーコード開発を行うことで、皆様のアイデアをより簡単に迅速に形にすることができるかと思います！
また弊社はスタートアップ、中小企業、新規事業でのアプリ開発に強みを持っており、アイデアベースから伴走をしていくことも可能です。
アプリやWebサービスの開発をご検討の方はぜひお気軽にこちらからご相談ください。
EPICsはノーコードでの開発に特化をしたプロの開発組織です。
従来のスクラッチでの開発でよく発生する「費用が高い」 「開発期間が長い」 「知識がなく開発に踏み切れない」という課題に対し、ノーコードでの開発という選択肢で皆様の開発を支援します！
そんな弊社に開発相談をいただくメリットは大きく4つあります！
①豊富な開発実績
創業よりノーコード開発を軸に多様な開発を行ってまいりました。SNSやマッチングアプリ、ECアプリなど多様な開発実績がございます。
豊富な経験をもとに、ただ開発を行うにとどまらず、より良い開発を行うためのアドレスや公開後のご不安やご相談にも対応させていただきます！
②最安30万円！通常の1/10~1/5ほどの低コストで開発
コーディングの工程を削減できるノーコードは、最適かつ最小限の人員で対応が可能です。また弊社では豊富な開発実績があるため、経験を活かした開発を行うことで開発費用を大幅に削減することができます。
③最短2週間！圧倒的な短期間で納品
ノーコード開発では複雑なコードを１から書く必要がないため開発工程を省略することができ、開発期間の大幅な短縮が可能です。
④公開後の保守や運用の徹底サポート
アプリは開発後の運用もとても重要です。EPICsでは開発のみならずその後のサポートも対応可能です！
またノーコードで開発したアプリは、スクラッチで開発したアプリに比べて保守や運用にかかる費用を削減することも可能です！
