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

by YS

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

#RAKUSMeetup ©2021 RAKUS Co., Ltd. チャットディーラーとはチャットボットを提供するサービスサイトに簡単にチャットボットを設置可能設置  設置タグをHTMLに記載

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

#RAKUSMeetup ©2021 RAKUS Co., Ltd. スマホ対応について 4. 画面サイズに合わせてiframe内のズームを動的に行う。 JavaScriptでiframe内のコンテンツのbodyに対しCSSでズームを設定 body { transform-origin: 0px 0px; transform: scale(1.584); } scaleの値はスマホの画面サイズから動的に算出し適切な値を設定する。

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

#RAKUSMeetup ©2021 RAKUS Co., Ltd. 2. ダウンロードを行うとファイルをiframe内で開いてしまう設置サイト Iframe（チャットディーラーサイト）開発・運用で発生したスマホに関する課題 Ajaxでダウンロード（バイナリデータ）バイナリデータを文字列データに変換（バイナリデータ → Blob → Data URI）受け取った文字列データを使用して JavaScriptによってダウンロードさせる parent.postMessage()で文字列データを送信送信

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

#RAKUSMeetup ©2021 RAKUS Co., Ltd. まとめスマホでの問題は、昔はAndroidの標準ブラウザで多く発生していたが Chromiumが標準ブラウザエンジンになってからは問題の発生率が激減した。逆に最近は、iOSに関する問題が多く見つかっている。 iOSは軽量化のために多くの施策を行っていると思われ特に描画に関するキャッシュ等がかなり行われていると思われる。そのため、描画関連の問題の発生率が高い。