Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

YS
October 06, 2021

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

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

YS

October 06, 2021
Tweet

More Decks by YS

Other Decks in Programming

Transcript

  1. #RAKUSMeetup ©2021 RAKUS Co., Ltd. ©2021 RAKUS Co., Ltd. 酒井

    幸教 チャットボットシステムの スマートフォン対応について
  2. #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に記載
  3. #RAKUSMeetup ©2021 RAKUS Co., Ltd. スマホ対応について チャットディーラーで実際に行ったスマホ対応の 要件は下記の通り。 要件 •

    画面全体にチャットを広げて表示する。 • スマホで操作しやすいサイズでチャットを表示する。 • チャットデザイン・機能はPC/スマホでほぼ同じ。
  4. #RAKUSMeetup ©2021 RAKUS Co., Ltd. スマホ対応について 課題/要望 • 端末の画面サイズは一定ではない。 •

    チャットを埋め込むサイトのサイズも一定ではない。 • 各フォント/要素の大きさを個別に最適化するのは大変。 • チャットデザイン・機能はPC/スマホでほぼ同じなので 出来るだけ共通化したい。
  5. #RAKUSMeetup ©2021 RAKUS Co., Ltd. スマホ対応について 対応方針 1. チャット自体はPC/スマホ共通(一部処理分岐あり)。 2.

    端末の画面サイズに合わせてチャット外側のiframeを広げる。 3. チャットはiframe全体に伸縮するように実装。 4. 画面サイズに合わせてiframe内のズームを動的に行う。
  6. #RAKUSMeetup ©2021 RAKUS Co., Ltd. スマホ対応について 4. 画面サイズに合わせてiframe内のズームを動的に行う。 JavaScriptでiframe内のコンテンツのbodyに対しCSSでズームを設定 body

    { transform-origin: 0px 0px; transform: scale(1.584); } scaleの値はスマホの画面サイズから動的に算出し 適切な値を設定する。
  7. #RAKUSMeetup ©2021 RAKUS Co., Ltd. 開発・運用で発生したスマホに関する課題 1. 大きなサイトでチャットがぼやける 原因 スマホ対応の説明のとおり、チャットのiframe内をズームすることにより

    表示の最適化しているが、ズーム前の倍率の描画が保たれて 小さな画像を拡大して表示するような状態になっている可能性あり。 解決方法 未解決
  8. #RAKUSMeetup ©2021 RAKUS Co., Ltd. 開発・運用で発生したスマホに関する課題 2. ダウンロードを行うとファイルをiframe内で開いてしまう 画像 チャット機能でファイルの

    ダウンロードが行えるが iOSだとチャットのiframe内で 画像等が開いてしまう。 target指定なども試したが対応できず。 ダウンロード
  9. #RAKUSMeetup ©2021 RAKUS Co., Ltd. 開発・運用で発生したスマホに関する課題 2. ダウンロードを行うとファイルをiframe内で開いてしまう 原因 iframe内のクロスドメインのサイトから

    ダウンロードしていることが原因かと思われる。 解決方法 ダウンロードデータを parent.postMessage() で設置サイトに受け渡して 設置サイト側からダウンロードさせる。
  10. #RAKUSMeetup ©2021 RAKUS Co., Ltd. 2. ダウンロードを行うとファイルをiframe内で開いてしまう 設置サイト Iframe(チャットディーラーサイト) 開発・運用で発生したスマホに関する課題

    Ajaxでダウンロード(バイナリデータ) バイナリデータを文字列データに変換 (バイナリデータ → Blob → Data URI) 受け取った文字列データを使用して JavaScriptによってダウンロードさせる parent.postMessage()で文字列データを送信 送 信
  11. #RAKUSMeetup ©2021 RAKUS Co., Ltd. マルチブラウザでの品質担保 実施タイミング • OS(iOS/Android)新バージョンリリース •

    ブラウザバージョンアップ テスト内容 • 重要機能の動作テストを実施 ※場合によっては機能全体のテストを実施