チャットボットシステムのスマートフォン対応について

スマートフォンの普及により、今やパソコンよりスマートフォンでWEBページを閲覧することが多くなっており
WEBシステムを作成する中でスマホ対応は避けては通れないものになってきています。
サポートチャットボットを提供するサービス『ChatDealer』でもスマートフォン対応を行う必要があり
サービス立ち上げ時に行った、スマートフォン対応の手法について共有させていただきます。
また、実際に開発・運用するなかで発生した課題の共有や
品質担保するために行っている施策等についても話させていただきます。

Transcript

1. #RAKUSMeetup ©2021 RAKUS Co., Ltd. ©2021 RAKUS Co., Ltd. 酒井 幸教 チャットボットシステムの スマートフォン対応について
2. #RAKUSMeetup ©2021 RAKUS Co., Ltd. 自己紹介 酒井 幸教（さかい ゆきのり） ラクスに入社後、４つのサービス（いずれもPHP）の開発・運用に携わり 現在、担当しているサービス『チャットディーラー』は サービス立ち上げ時から参加。
3. #RAKUSMeetup ©2021 RAKUS Co., Ltd. 今回話す内容について チャットボットサービス『チャットディーラー』の 下記の内容について共有 • スマホ対応した際の手法 • 開発／運用で発生したスマホに関する課題 • マルチブラウザでの品質担保
4. #RAKUSMeetup ©2021 RAKUS Co., Ltd. チャットディーラーとは チャットボットを提供するサービス サイトに簡単にチャットボットを設置可能 設置 <script type="text/javascript"> <!-- var vgHost='xxx.xxx.xx',vgProtocol='https',vgPort='443',vgAtxt='k7Y7zq0g1T',vgSid=2; (function(){try{ var ins=document.createElement('script'),dt=new Date,tg=document.getElementsByTagName('script')[0]; ins.type='text/javascript';ins.async=!0;ins.setAttribute('charset','utf-8'); ins.src=vgProtocol+'://'+vgHost+':'+vgPort+'/chat/client.js?'+dt.getTime();tg.parentNode.insertBefor e(ins,tg); }catch(e){console.log(e);}})(); //--> </script> 設置タグをHTMLに記載
5. #RAKUSMeetup ©2021 RAKUS Co., Ltd. チャットディーラーの構成 iframe内にチャットディーラーの サイトを読み込んでいる。 ※赤枠がiframe
6. #RAKUSMeetup ©2021 RAKUS Co., Ltd. スマホ対応について
7. #RAKUSMeetup ©2021 RAKUS Co., Ltd. スマホ対応について PC用に最適化されたチャットを、そのままスマホで使用するのは厳しい。 スマホでのチャットの表示を最適化する必要が出てきた。 最適化
8. #RAKUSMeetup ©2021 RAKUS Co., Ltd. スマホ対応について チャットディーラーで実際に行ったスマホ対応の 要件は下記の通り。 要件 • 画面全体にチャットを広げて表示する。 • スマホで操作しやすいサイズでチャットを表示する。 • チャットデザイン・機能はPC/スマホでほぼ同じ。
9. #RAKUSMeetup ©2021 RAKUS Co., Ltd. スマホ対応について 課題／要望 • 端末の画面サイズは一定ではない。 • チャットを埋め込むサイトのサイズも一定ではない。 • 各フォント／要素の大きさを個別に最適化するのは大変。 • チャットデザイン・機能はPC/スマホでほぼ同じなので 出来るだけ共通化したい。
10. #RAKUSMeetup ©2021 RAKUS Co., Ltd. スマホ対応について 対応方針 1. チャット自体はPC/スマホ共通（一部処理分岐あり）。 2. 端末の画面サイズに合わせてチャット外側のiframeを広げる。 3. チャットはiframe全体に伸縮するように実装。 4. 画面サイズに合わせてiframe内のズームを動的に行う。
11. #RAKUSMeetup ©2021 RAKUS Co., Ltd. スマホ対応について 1. チャット自体はPC/スマホ共通（一部処理分岐あり） 2. 端末の画面サイズに合わせてチャット外側の iframeを広げる。 3. チャットはiframe全体に伸縮するようにする。 2,3 1
12. #RAKUSMeetup ©2021 RAKUS Co., Ltd. スマホ対応について 4. 画面サイズに合わせてiframe内のズームを動的に行う。 ズーム
13. #RAKUSMeetup ©2021 RAKUS Co., Ltd. スマホ対応について 4. 画面サイズに合わせてiframe内のズームを動的に行う。 JavaScriptでiframe内のコンテンツのbodyに対しCSSでズームを設定 body { transform-origin: 0px 0px; transform: scale(1.584); } scaleの値はスマホの画面サイズから動的に算出し 適切な値を設定する。
14. #RAKUSMeetup ©2021 RAKUS Co., Ltd. 開発・運用で発生した スマホに関する課題
15. #RAKUSMeetup ©2021 RAKUS Co., Ltd. 開発・運用で発生したスマホに関する課題 スマホ対応を行った後、開発・運用で次のような問題が発生した。 これらは全てiOSのSafariで発生。 課題 1. 大きなサイトでチャットがぼやける 2. ダウンロードを行うとファイルをiframe内で開いてしまう
16. #RAKUSMeetup ©2021 RAKUS Co., Ltd. 開発・運用で発生したスマホに関する課題 1. 大きなサイトでチャットがぼやける スマホに最適化されていないPCサイト等に チャットを埋め込みiOSで見ると 表示中のサイトの拡大・縮小状態によって チャットディーラーのチャットがぼやける。 上に比べ、少しぼやけている
17. #RAKUSMeetup ©2021 RAKUS Co., Ltd. 開発・運用で発生したスマホに関する課題 1. 大きなサイトでチャットがぼやける 原因 スマホ対応の説明のとおり、チャットのiframe内をズームすることにより 表示の最適化しているが、ズーム前の倍率の描画が保たれて 小さな画像を拡大して表示するような状態になっている可能性あり。 解決方法 未解決
18. #RAKUSMeetup ©2021 RAKUS Co., Ltd. 開発・運用で発生したスマホに関する課題 2. ダウンロードを行うとファイルをiframe内で開いてしまう 画像 チャット機能でファイルの ダウンロードが行えるが iOSだとチャットのiframe内で 画像等が開いてしまう。 target指定なども試したが対応できず。 ダウンロード
19. #RAKUSMeetup ©2021 RAKUS Co., Ltd. 開発・運用で発生したスマホに関する課題 2. ダウンロードを行うとファイルをiframe内で開いてしまう 原因 iframe内のクロスドメインのサイトから ダウンロードしていることが原因かと思われる。 解決方法 ダウンロードデータを parent.postMessage() で設置サイトに受け渡して 設置サイト側からダウンロードさせる。
20. #RAKUSMeetup ©2021 RAKUS Co., Ltd. 2. ダウンロードを行うとファイルをiframe内で開いてしまう 設置サイト Iframe（チャットディーラーサイト） 開発・運用で発生したスマホに関する課題 Ajaxでダウンロード（バイナリデータ） バイナリデータを文字列データに変換 （バイナリデータ → Blob → Data URI） 受け取った文字列データを使用して JavaScriptによってダウンロードさせる parent.postMessage()で文字列データを送信 送 信
21. #RAKUSMeetup ©2021 RAKUS Co., Ltd. マルチブラウザでの品質担保
22. #RAKUSMeetup ©2021 RAKUS Co., Ltd. マルチブラウザでの品質担保 マルチブラウザでのサービス品質を担保するために 適切なタイミングでテストを実施している。 こちらは一部チャットディーラー独自のものもあるが ラクスの全サービス共通の基本ルールとして行われている。
23. #RAKUSMeetup ©2021 RAKUS Co., Ltd. マルチブラウザでの品質担保 実施タイミング • OS（iOS/Android）新バージョンリリース • ブラウザバージョンアップ テスト内容 • 重要機能の動作テストを実施 ※場合によっては機能全体のテストを実施
24. #RAKUSMeetup ©2021 RAKUS Co., Ltd. マルチブラウザでの品質担保 実施タイミング • チャットディーラーの新バージョンのリリース前 テスト内容 • 改修機能についてマルチブラウザテストの実施 • 重要機能の回帰テストを実施
25. #RAKUSMeetup ©2021 RAKUS Co., Ltd. まとめ スマホでの問題は、昔はAndroidの標準ブラウザで多く発生していたが Chromiumが標準ブラウザエンジンになってからは問題の発生率が激減した。 逆に最近は、iOSに関する問題が多く見つかっている。 iOSは軽量化のために多くの施策を行っていると思われ 特に描画に関するキャッシュ等がかなり行われていると思われる。 そのため、描画関連の問題の発生率が高い。
26. #RAKUSMeetup ©2021 RAKUS Co., Ltd. まとめ 今回説明したような、環境・ブラウザ特有の課題についての対応は 昔から行われている。（個人的にはIE6対応で何度も苦戦した） 特に近年は、スマホが普及したこともあり端末の多様性が高まっているため 今後も多くの問題が発生していくと思われる。
27. #RAKUSMeetup ©2021 RAKUS Co., Ltd. まとめ マルチブラウザで発生する課題は、前もって対策することが難しい。 サービス品質を保つためには、マルチブラウザテストを実施するための 運用ルールの策定が重要。 • OS/ブラウザのアップデート情報の監視 • テストタイミングの定義 • マルチブラウザでのテストケース作成とメンテナンス
28. #RAKUSMeetup ©2021 RAKUS Co., Ltd. ご清聴ありがとうございました