【Flutter】Flutter開発アプリでZendeskのチャットボット画面を表示してみた

はじめに

私自身Zendeskについての知見等がなかったのですが
Flutterのアプリに対してZendeskのチャットボットが利用できるのか
調査する機会があり、試してみてAndroidの実装で少し詰まった点があったので残そうと思います！

開発環境

• MacOS: 12.4(Monterey)
• Androidstudio: 2021.2.1 patch1
• flutter: 3.7.6
• dart: 2.19.3

Flutter用のパッケージがあるのかどうか

以下の公式Developerサイトを確認したのですが公式では
Android,iOSネイティブSDKの提供のみでFlutter用はなさそうでした。
https://developer.zendesk.com/documentation/zendesk-web-widget-sdks/sdks/android/getting_started/

これは自作するしかないかとも思ったのですが調べてみると既にパッケージで作成されているものが
ありましたのでこちらを調査。

zendesk 2.0.0

まず１つ目にこちらのパッケージを見つけました。
さっそく導入してみようと思ったのですがビルドした際にエラーになりました。。。
エラーの内容は「don't support null safety」でした。
確かに最終更新が2020年でストップしてましたので今回はこのパッケージを使うことを諦めました。
https://pub.dev/packages/zendesk

zendesk_plugin 2.0.0

次にこちらのパッケージを見つけました。
こちらのパッケージはNull safety対応もされておりましたので
今回はこちらのパッケージを用いてZendeskのチャットボット画面を表示していこうと思います。
https://pub.dev/packages/zendesk_plugin

実装内容

ここから実際に実装の話に入っていきます。
主に「zendesk_plugin」のpub.devサイトのReadmeを元に進めていくのですが
そのままではエラーが発生したのでそこも併せて記載できればと思います。

(1)AndroidManifest.xmlの設定

You must set a compatible theme theme in the AndroidManifest.xml file's
The example Android setup follows the pattern described in the post.

上記のような記載があるので公式のAndroidManifest.xmlの設定手順を確認していきます。

• repositoriesに以下の記載を追加

repositories {
	maven { url 'https://zendesk.jfrog.io/zendesk/repo' }
}

• dependenciesに追加する内容ですが今回はUIコンポーネントを使用するため以下を追加していきます。

dependencies {
    implementation group: 'com.zendesk', name: 'chat', version: '3.3.7'
    implementation group: 'com.zendesk', name: 'messaging', version: '5.3.0'
    ...
}

これで公式ページに記載されているAndroidManifest.xmlの設定は以上となります。

(2)プラグインの初期化

今回はチャットボットの画面を表示するところを目標としているので
チャットボットの画面を表示する前に以下のプラグインの初期化を実行する必要があります。
初期化に必要な項目は２つありますのでこちらは自身のものを設定いただければと思います。

• account key : Zendeskのアカウントキー
• application id : アプリに設定している「applicationId」
  (※こちらはプッシュ通知を使用する場合のみ設定する必要があります。)

await Zendesk.initialize(<account key>, <application id>);

その他Visitor情報やタグの設定等のメソッドが用意されておりますが
今回は割愛させていただきます。

(3)チャットボットの起動

チャットボットの画面を起動する際は以下のメソッドを呼び出すだけで
問題ないようです。なのでいざ実行！

Zendesk.startChat(primaryColor: Colors.red); // チャットの色の設定が可能・なくても良い

・・・・と思ったのですがこのままだとチャットのメソッドを呼び出したタイミングでクラッシュします。
次はそのクラッシュ対応になります。

(4)クラッシュ対応

エラーログを確認するとまず以下のエラーが出ておりました。

Caused by: java.lang.ClassNotFoundException: Didn't find class "zendesk.messaging.MessagingActivity" on path

MessagingActivityが見つからない？？
これに対してパッケージのインポートやプラグインの中身の実装を探っていましたが原因は掴めずでした。
そんな中、もう一度公式のドキュメントを確認すると以下のメッセージを見つけました。

警告
注: からMessaging: 5.3.0、 の依存関係がzendesk.messaging.MessagingActivityに変更されましたzendesk.classic.messaging.MessagingActivity。

原因はこちらでした。
使用したFlutterパッケージの「zendesk_plugin」の最終更新は「2021年4月」で
まだZendeskのmessageライブラリの5.3.0には対応されていなかったようです。
なのでchatライブラリと合わせて「(1)AndroidManifest.xmlの設定」で設定したバージョンを以下に変更しました。

implementation group: 'com.zendesk', name: 'chat', version: '3.1.0'
implementation group: 'com.zendesk', name: 'messaging', version: '5.1.0'

これで解決したと思い、いざ実行するとまだエラーが発生します・・・・

次なるエラーは以下となります。

java.lang.RuntimeException: Unable to start activity 
ComponentInfo{{applicationId}/zendesk.messaging.MessagingActivity}: android.view

エラーを見る限りチャットActivityのView周りでエラーが発生しているとのこと。
これにつきましても公式のドキュメントを確認していくとテーマの設定が必要のようでした。
追加の内容は以下となります。

<application
        android:label="XXXXXXXXX"
        android:name="${applicationName}"
        android:theme="@style/ZendeskSdkTheme.Light" // ←こちらを追加
        android:icon="@mipmap/ic_launcher">

(5)いざ実行

いざ実行してみましたらようやく以下のチャットボットの画面が立ち上がりました！
お疲れ様でした!

まとめ

Flutter開発アプリでZendeskのチャットボットを起動する際に
Android版で少し困ったので記事にしました！（iOSの方は特にエラーなどで困ることなく実装可能でした）
まだ活用方法については調べ切れていないのでこれから色々と試していこうと思います。

あと今回使わさせていただいたパッケージについての懸念点もあります。
というのも上記で記載させていただいているのですが「zendesk_plugin」の最終更新は「2021年4月」となっており、
最新の公式SDKのバージョンには対応されておらずでしてた。
この先更新いただけるのかは分かっていないため他の手段を見つけないといけなくなる可能性がありそうです。

他にこうやって対応したなどの知見がある方がいらしたらご教示いただけますと幸いです。