ChatGPTに人気が集まっていることもあって、チャット風UIにも注目が集まっています。チャット風UIを使ってChatGPTのAPIを呼び出したり、似たようなアプリを開発できます。
今回は各種言語、フレームワークごとにチャットUIライブラリを紹介します。
Swift
SwiftはもちろんiOS向けになります。
ios-swift-chat-ui-kit
画像はリポジトリより。
CometChatはチャットやメッセージングのAPIを提供しています。ios-swift-chat-ui-kitはそのCometChatで利用できるチャットUIを提供しています。
cometchat-pro/ios-swift-chat-ui-kit: Ready-to-use Chat UI Components for Swift (iOS)
SwiftyChat
画像はリポジトリより。
画像、動画、テキスト表示などに対応したチャットUIです。簡単なHTML（リストなど）にも対応しています。
EnesKaraosman/SwiftyChat: SwiftUI Chat UI (Client) Framework & Documentation to get started!
Chatto
画像はリポジトリより。
iOS標準のメッセージアプリに似たUIです。キーボード、カメラのアイコンが付いており、そこで送信するコンテンツを切り替えられます。
badoo/Chatto: A lightweight framework to build chat applications, made in Swift
MessengerKit
画像はリポジトリより。
チャットUIとして、横向きをサポートしています。細かなカスタマイズも可能で、メッセージ送信者のアイコン有無を指定できます。
steve228uk/MessengerKit: A UI framework for building messenger interfaces on iOS
Android向け
ChatKit
画像はリポジトリより。
テキスト、画像、位置情報、音声、動画などを扱えます。日付のフォーマットが指定できたり、グループチャットも想定されているなど多機能です。
A messages UI library for Android
画像はリポジトリより。
シンプルなチャットUIです。テキストのみ対応しています。送信ボタンの色などはカスタマイズ可能です。
timigod/android-chat-ui: A messages UI library for Android
Ready-to-use Chat UI Components for Java (Android)
画像はリポジトリより。
iOSのものと同じくCometChatが提供しているUIKitです。ステッカー、リアクション、サムネイル生成、グループチャットなど大抵の機能が揃っています。
cometchat-pro/android-java-chat-ui-kit: Ready-to-use Chat UI Components for Java (Android)
android-kotlin-chat-ui-kit at v3
こちらはCometChatによるUIKitのKotlin版です。
cometchat-pro/android-kotlin-chat-ui-kit at v3
Flutter
Flutter向けのライブラリを使えば、iOS/Android/Web向けに開発できるのが利点です。ただしライブラリによってサポートするプラットフォームが異なるので、導入前にチェックが必須です。
Flutter Chat UI
画像は公式サイトより。
Flutter Chat UIはかなり高機能なライブラリで、入力フィールドと表示部分をひとまとめに提供してくれます。また、メッセージコンポーネントが写真やテキストなどに分かれており、表示したいデータによって使い分けるだけで表示を行ってくれます。
対応プラットフォームはAndroid/iOS/Linux/macOS/Web/Windowsと幅広くなっています。バックエンドとしてFirebaseが一例に挙がっていますが、特にサービスは選ばず利用できます。
flutter_chat_ui | Flutter Package
chat_bubbles
画像は公式サイトより。
chat_bubbles pluginはメッセージのバブル表示に特化したコンポーネントです。テキスト、オーディオ、画像など幅広い種類のデータに応じた表示をサポートしています。
バブル表示に特化しているので、他の部分については自由に設計できます。よりカスタマイズして導入したい時に利用できそうです。
chat_bubbles | Flutter Package
dash_chat_2
画像は公式サイトより。
DashChatはAndroid/iOS/WebのみをサポートしたチャットUIライブラリで、かなり高性能・多機能です。メッセージ中のリンクをタップできるようにしたり、クイックリプライ機能も用意されています。
タイプ中の表示も行えたりと、より実践的な機能が数多く用意されています。
flutter_chat_bubble
画像は公式サイトより。
Flutter Chat Bubble/UIはWhatsAppやTelegramを参考に開発されているチャットUIライブラリです。
flutter_chat_bubble | Flutter Package
chatview
画像は公式サイトより。
chatviewでは通常のチャットに加えてグループチャット、メッセージへのリアクション、リプライ、リンクプレビュー、設定など数多くの機能が提供されています。
React Native
React NativeもFlutterと同じくiOS/Android/Webなど幅広いプラットフォームで利用できます。
react-native-gifted-chat
画像はリポジトリより。
react-native-gifted-chatはかなり高性能ですが、使いこなすのが若干難しい印象です。チャット風UIを実現できればいい、というよりもアプリの中にチャット機能を組み込むという明確な目的が必要かも知れません。
FaridSafi/react-native-gifted-chat: 💬 The most complete chat UI for React Native
HTML/JavaScript
Web向けのライブラリであれば、Monacaアプリに組み込むことができます。素のJavaScriptというよりもVueやReactなどのUIフレームワークと連携するものになります。
ChatUI
Vue製のチャットUIデモです。チャットのUIはすべてcomponentsに入っているので、再利用しやすそうです。デモアプリなので、そのまま使うというよりも参考にするといった形になりそうです。
stuffish/ChatUI: A simple Chat UI in Moblie with Vue.
react-chat-ui
React製のチャットUIです。デスクトップ、モバイルの両方に対応しています。画像のプレビューができ、さらにスタイル設定なども指定できます。
chat-ui-kit-react
chat-ui-kit-reactはReact向けのチャットUIです。テキストメッセージのみサポートしています。Messengerアプリに近いUIです。
Messages | Framework7
Framework7のMessagesコンポーネントはチャットUI、機能を手軽に実現できます。入力欄もサポートされているので、Framework7を使っているならばメッセージ機能を簡単に実現できるでしょう。
データフォーマットは決まっているので、それに合わせてセットすれば良いだけです。ただし日付の表示部分については、表示判定処理が必要です。
Messages | Framework7 Documentation
まとめ
今回紹介したUIライブラリを使うことで、アプリの中にチャット画面を簡単に組み込めます。もちろん、UIだけでなくバックエンド（データを保存する、認証するなど）が必要になるので注してください。
ニフクラ mobile backendではリアルタイム通信機能がありませんが、NCMBプロキシーまたは○○と組み合わせることでチャット機能を実現できます。ぜひお試しください。
