FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

チャットのUIを作るライブラリまとめ

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

画像はリポジトリより。

テキスト、画像、位置情報、音声、動画などを扱えます。日付のフォーマットが指定できたり、グループチャットも想定されているなど多機能です。

stfalcon-studio/ChatKit: Android library. Flexible components for chat UI implementation with flexible possibilities for styling, customizing and data management. Made by Stfalcon

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ライブラリで、かなり高性能・多機能です。メッセージ中のリンクをタップできるようにしたり、クイックリプライ機能も用意されています。

タイプ中の表示も行えたりと、より実践的な機能が数多く用意されています。

dash_chat_2 | Flutter Package

flutter_chat_bubble

画像は公式サイトより。

Flutter Chat Bubble/UIはWhatsAppやTelegramを参考に開発されているチャットUIライブラリです。

flutter_chat_bubble | Flutter Package

chatview

画像は公式サイトより。

chatviewでは通常のチャットに加えてグループチャット、メッセージへのリアクション、リプライ、リンクプレビュー、設定など数多くの機能が提供されています。

chatview | Flutter Package

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です。デスクトップ、モバイルの両方に対応しています。画像のプレビューができ、さらにスタイル設定なども指定できます。

MinChatHQ/react-chat-ui: Build your own chat UI with React components in a few minutes. Chat UI Kit from minchat.io is an open source UI toolkit for developing web chat applications.

chat-ui-kit-react

chat-ui-kit-reactはReact向けのチャットUIです。テキストメッセージのみサポートしています。Messengerアプリに近いUIです。

chatscope/chat-ui-kit-react: Build your own chat UI with React components in few minutes. Chat UI Kit from chatscope is an open source UI toolkit for developing web chat applications.

Messages | Framework7

Framework7のMessagesコンポーネントはチャットUI、機能を手軽に実現できます。入力欄もサポートされているので、Framework7を使っているならばメッセージ機能を簡単に実現できるでしょう。

データフォーマットは決まっているので、それに合わせてセットすれば良いだけです。ただし日付の表示部分については、表示判定処理が必要です。

Messages | Framework7 Documentation

まとめ

今回紹介したUIライブラリを使うことで、アプリの中にチャット画面を簡単に組み込めます。もちろん、UIだけでなくバックエンド(データを保存する、認証するなど)が必要になるので注してください。

ニフクラ mobile backendではリアルタイム通信機能がありませんが、NCMBプロキシーまたは○○と組み合わせることでチャット機能を実現できます。ぜひお試しください。

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。