Written by Akihito Kitakatsu

【bubble】綺麗なチャット機能の作り方、テキストの長さを変える方法

こんにちは、あきです。

オーストラリアのシドニーに学生として滞在をする傍ら、Webcamperという会社を立ち上げ、そこでエンジニアとして働いております。

昨日、Faslanceファスランスという新サービスをリリースし、たくさんの反響をいただきました。ありがとうございます。

本日は、Faslanceの核の一つ、綺麗なメッセージ欄の構築について、お話していきます。

職歴なしの30歳が、オーストラリアで起業した話

Audible 完全版、Kindle版

Amazonで見る

【bubble】綺麗なチャット機能の作り方、テキストの長さを変える方法

昨日リリースした【Faslance】については、こちらの記事をご参照ください。

bubbleでのチャット機能については、制作中に結構苦労しましたが、最終的にはプラグインを使わずにHTMLとCSSを直書きすることで、以下のように綺麗な見た目を構築できました。

問題点：テキストの長さを変えられない

最初は、普通にテキストエレメントで構築していました。

テキストにbackground-colorを付け、border-radiusを20px、right-bottomのみを0pxにすることで、吹き出しのような見た目を作ることができます。（相手が送信者の場合は、left-bottomを0pxに）

これだけでかなりそれっぽい見た目になったのですが、しかし、テキスト文の長さが短い時にも、widthが変わることなく、吹き出しが全て横長になってしまいました。

エレメントの横幅が可変にならない

解決策：HTMLとCSSを書く

これを改善するのにかなり試行錯誤を繰り返しましたが、どうしてもテキストエレメントでは横幅が固定になってしまっていたので、最終的にHTMLとCSSを書くことで、無事思っていたような見た目にすることができました。

ということで、テキストエレメントは削除し、HTMLエレメントに置き換えます。内容は以下のとおり。

<style>
div.document.me {
text-align: right;
}
div.document.me span.message {
background: #3672D4;
border-radius: 20px 20px 0;
color: white;
font-family: ‘Barlow’;
font-size: 15px;
border-width: 1px;
margin: 0;
font-weight: normal;
display: inline-block;
word-wrap: break-word;
white-space: pre-line;
text-align: right;
padding: 10px 20px;
line-height: 1.4;
}
div.document.me span.message a {
overflow: hidden;
vertical-align: bottom;
display: inline-block;
max-width: 360px;
}
div.document.me span.message a[href=”このメッセージは削除されました”] {
pointer-events: none;
}
</style>

<div class=”document me”><span class=”message”><a target=”_blank” href=”Parent group’s Message’s Attached File’s URL”>Parent group’s Message’s Attached File’s file name</a></span></div>

ここは主にCSSがメインなので細かい解説まではしませんが（めちゃくちゃ長くなるため）、上記を参考に、ご自身の思うデザインに合うよう色々と書き換えてみてください。

div.document.me span.message a[href=”このメッセージは削除されました”] {
pointer-events: none;
}

この部分では、ファイルが添付され、それが削除された際に、リンクをクリックできないようにする処理をしています。

HTMLエレメントの注意点

これは大きな落とし穴というか盲点というか、bubbleの罠に嵌められてしまった気分だったのですが、Repeating Groupの中でHTMLを書く際は、注意が必要です。

ここでConditionalを付ける場合、一つのセルの条件がTrueなら、他のセルにも全てTrueが適用されてしまいます。

例えば今回のFaslanceの場合、テキストで送ったときの背景色は緑、ファイルを添付した際の背景色は青、という分け方をしています。

また、添付ファイルの送信が取り消された際に、クリックできなくする必要もありました。

これらをConditionalタブで分けてしまうと、ひとつリンクが送信されれば、全ての背景色が青に変わってしまいます。

さらに、ひとつの添付ファイルが削除されれば、すべての添付ファイルが開けなくなってしまいました。

普通にテキストエレメントで作成していた際には問題がなかったのですが、なぜかHTMLエレメントだと、全てにTrueが適用されてしまうようです。

上記の回避策

これを回避する為に、テキストのときと添付ファイルのとき、それぞれ別のエレメントを作成し、それらをグループ化しました。

そしてそのグループに対して、Conditionalタブで「This element is visible」を操作しました。（※HTMLエレメントのConditionalタブは触りません）

更に、添付ファイルが削除されたときにクリックできないようにするところは、CSSで制御しました。

使うかどうか迷ったプラグイン

チャット欄を綺麗に構築するためのプラグインに「Chat / Message bubble element」というものがあります。

しかし、このプラグインには、「border」に関するオプションがありませんでした。

つまり、右下だけborder-radiusを0pxにして吹き出しを作る、といったことができなかったのです。ですので、このプラグインを使うのは辞め、自作することにしました。

とはいえ、吹き出しにこだわらないならすごく便利で強力なプラグインだと思います。

今回感じたこと

bubbleはかなりフレキシブルなノーコードツールとはいえ、やはり痒い所に手が届かないことが多々あります。

そのとき、今回のようにHTMLやCSSを書くと解決できることもあるので、やはりいくらノーコードツールが普及してきたとはいえ、コーディングスキルというのは非常に大切だなと思いました。

チャット機能は様々なサービスに導入されているので、ぜひ参考にしていただければ幸いです。

おまけ

今回テキストからHTMLに置き換えることによって、メッセージを削除するためのゴミ箱の位置が、かなりズレてしまいました。

こちらも全然解決できなかったので、CSSを直書きしました。

「CSS Tools」というプラグインを導入し、

このようなCSSを書きました😌

Audible 無料会員登録

関連記事