翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
# Connect Customer チャットをモバイルアプリケーションに統合する
このトピックでは、Amazon Connect Chat をモバイルアプリケーションに統合する方法について説明します。次のオプションの 1 つを使用できます。
+ [WebView 統合](#webview)
+ [iOS および Android 用Connect Customer Chat SDK](#integrate-chat-with-mobile-sdks-for-mobile)
+ [React Native 統合](#react-native-integration)
Connect Customer [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html) APIを呼び出し、コンタクトを開始します。
**Topics**
+ [使用する統合オプション](#integrate-options)
+ [Connect Customer チャット統合ワークフロー](#integrate-chat-with-mobile-workflow)
+ [Connect Customer チャット統合の使用を開始する](#integrate-chat-with-mobile-getting-started)
## 使用する統合オプション
このセクションでは、ソリューションに使用する統合オプションを決定するのに役立つ各統合オプションについて説明します。
### WebView 統合
Amazon Connect Chat WebView 統合により、最小限の開発作業で完全なチャットエクスペリエンスをモバイルアプリケーションに埋め込むことができます。このメソッドでは、Android では `WebView`、iOS では `WKWebView` を使用して、シームレスで包括的なチャットインターフェイスを提供します。これは、広範囲のカスタマイズなしでチャット機能を統合するための、既成の迅速なソリューションを求めるチームに最適です。
このアプローチにより、セキュアな通信が保証され、ウェブベースの Amazon Connect チャットインターフェイスが活用されます。ただし、Cookie と JavaScript を適切に処理するようにアプリを設定する必要があります。
WebView 統合の実装の詳細については、「Amazon Connect チャット [UI の例](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples)」GitHub リポジトリを参照してください。
**推奨事項**: WebView ベースの統合は、包括的なチャット機能を確保しながら、迅速な開発と最小限のメンテナンスに最適です。
### Connect Customer Mobile 用チャット SDKs
iOS および Android 用 Connect Customer Chat SDKs、ネイティブモバイルアプリケーション用の Connect Customer チャットの統合を簡素化します。SDK は、Amazon Connect ChatJS ライブラリと同様にクライアント側のチャットロジックとバックエンド通信の処理に役立ちます。
Connect Customer Chat SDKs Amazon Connect Participant Service APIsをラップし、チャットセッションと WebSocket の管理を抽象化します。これにより、すべてのバックエンドサービスとやり取りするために Connect Customer Chat SDK に依存しながら、ユーザーインターフェイスとエクスペリエンスに集中できます。このアプローチでは、独自のチャットバックエンドを使用して `StartChatContact` API を呼び出し Connect Customer て問い合わせを開始する必要があります。
+ Swift ベースの iOS SDK の詳細については、「[Connect Customer iOS 用チャット SDK](https://github.com/amazon-connect/amazon-connect-chat-ios) GitHub」ページを参照してください。
+ Kotlin ベースの Android SDK の詳細については、「[Connect Customer Android 用チャット SDK](https://github.com/amazon-connect/amazon-connect-chat-android) GitHub」ページを参照してください。
**メリット**: ネイティブ SDK により堅牢な機能と高いパフォーマンスを実現でき、深いカスタマイズとシームレスなユーザーエクスペリエンスを必要とするアプリケーションに最適です。
### React Native 統合
Amazon Connect Chat React Native 統合は、クロスプラットフォームソリューションを提供します。これにより、チームは共有コードベースを使用して Android と iOS の両方のチャット機能を構築できます。このメソッドでは、React Native の機能を活用して堅牢なモバイルアプリケーションを作成しながら、カスタマイズと開発の効率のバランスを取ります。
この統合では、ネイティブブリッジを使用して高度な機能にアクセスし、プラットフォーム間で一貫したパフォーマンスと統一されたユーザーエクスペリエンスを実現します。`react-native-websocket` や API コールなどのライブラリを `axios` で使用すると、WebSocket 通信などの主要な機能を簡単に実装できます。
**最適**: 機能の柔軟性を維持しながらコードの再利用を最大化したいチーム。
## Connect Customer チャット統合ワークフロー
次の図は、モバイルアプリケーションを使用する顧客とエージェント間のプログラミングフローを示しています。図の番号付きのテキストは、画像の下にある番号付きのテキストに対応しています。
**図の説明**
1. 顧客がモバイルアプリでチャットを開始すると、アプリは [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html) API Connect Customer を使用して にリクエストを送信する必要があります。これには、チャットを認証して開始するための[インスタンス](amazon-connect-instances.md)および[コンタクト](connect-contact-flows.md)フローの API エンドポイントや ID など、特定のパラメータが必要です。
1. `StartChatContact` API はバックエンドシステムとやり取りして、チャットセッションの一意の識別子として機能する参加者トークンとコンタクト ID を取得します。
1. アプリの UI は、SDK が [Connect Customer Participant Service](https://docs.aws.amazon.com/connect/latest/APIReference/API_Operations_Amazon_Connect_Participant_Service.html) と適切に通信し、顧客のチャットセッションを設定するために、モバイル SDK に `StartChatContact` レスポンスを送信します。
1. SDK は [chatSession](https://github.com/amazon-connect/amazon-connect-chat-ios?tab=readme-ov-file#chatsession-apis) オブジェクトを UI に公開します。UI には、チャットセッションでやり取りするための使いやすいメソッドが含まれます。
1. フードの下で、SDK は [AWS SDK](https://aws.amazon.com/developer/tools/) を使用して [Connect Customer Participant Service](https://docs.aws.amazon.com/connect/latest/APIReference/API_Operations_Amazon_Connect_Participant_Service.html) とやり取りします。 Connect Customer Participant Service を利用したコミュニケーションは、チャットセッションでの顧客とのやり取りすべてを担当します。これには、`CreateParticipantConnection`、`SendMessage`、`GetTranscript`、または `DisconnectParticipant` などのアクションが含まれます。
1. SDK は、エージェントからメッセージ、イベント、添付ファイルを受信するために必要な WebSocket 接続も管理します。これらはすべて SDK によって処理および解析され、理解しやすい構造で UI に表示されます。
## Connect Customer チャット統合の使用を開始する
次のステップとリソースは、 Connect Customer チャットをネイティブモバイルアプリケーションに統合し始めるのに役立ちます。
1. GitHub の [startChatContactAPI](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/cloudformationTemplates/startChatContactAPI) の例を参照して、StartChatContact を呼び出すために必要なバックエンドを提供する [CloudFormation](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/Welcome.html) スタックをすばやく設定できます。
1. Amazon Connect Chat SDK を活用してモバイルチャット UI を構築する方法の例については、[UI の例](https://github.com/amazon-connect/amazon-connect-chat-ui-examples) GitHub プロジェクトを参照してください。
Chat SDK for [iOS](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples/iOSChatExample)/[Android](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples/androidChatExample) を使用してチャットアプリケーションを強化する方法を示すサンプル iOS および Android Connect Customer チャットの例を参照してください。
1. [Connect Customer iOS 用チャット SDK](https://github.com/amazon-connect/amazon-connect-chat-ios) および [Connect Customer Android 用チャット SDK](https://github.com/amazon-connect/amazon-connect-chat-android) GitHub のページをご覧ください。GitHub ページには、API ドキュメントと、前提条件やインストール手順を説明する実装ガイドが含まれています。
1. React Native 統合を設定する: React Native ベースのソリューションの実装に関するガイダンスについては、[React Native](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples/connectReactNativeChat) の例を活用します。
1. モバイルアプリケーションでの Connect Customer Chat SDK の設定または使用に関して質問や問題がある場合は、「[Connect Customer iOS 用チャット SDK の問題](https://github.com/amazon-connect/amazon-connect-chat-ios/issues)」ページまたは「[Connect Customer Android 用チャット SDK の問題](https://github.com/amazon-connect/amazon-connect-chat-android/issues)」ページのいずれかに問題を報告することができます。モバイルチャット UI の例に問題がある場合は、[Connect Customer チャット UI の例の問題](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/issues)ページに問題を報告することができます。