はじめに
モバイル,タブレット端末といえば通常はiOS,Androidが用いられますが,やんごとなき事情でWindowsタブレット向けのアプリケーションを開発することになりました.
開発メンバーのスキル等を考慮し,C#による実装ではなくWebBrowser Control & IE+Twitter Bootstrapで画面を作ることにしましたが,思わぬところで落とし穴が多数存在したため,これを共有します.
目次
WebBrowser Controlに起因する落とし穴
全体的に動作が遅い
IEではサクサク表示されるにも関わらず,WebBrowserでは画面表示,スクロールといったアニメーションといったあらゆる動きが明らかに遅いという事象が発生しました.
解決策
上記にあるように,レジストリの値を変えることでWebBrowserの動作が明らかに速くなりました.
iOS,AndroidではwebViewにセキュリティ脆弱性があったり足りない機能がありこそすれ,ここまで遅くなるということはなかなか想定ができないと思います.iPadは偉大ですね.(?)
HTMLコンポーネントの動きがIEと異なる
optionのスクロール部分がタッチに反応せず,スクロールする際はかなり細いサイドバーでしか反応しないという事象でした.
非常に操作がしづらいため,なんとか修正する必要がありました.
解決策
WebBrowser Controlをタッチ対応にするためには,上記のレジストリ変更が必要でした.これにより,上記の問題は解消しました.
Twitter Bootstrapのモーダルでズームが使いずらい
WebBrowser ControlでBootstrapのモーダルを表示すると,ズームしようとした箇所ではなく見当違いのところがズームされてしまうという事象でした.
これについては解決をあきらめ,ズームをしない運用をお願いしました.
IEに起因する落とし穴
IEとWebBrowser Controlで論理ピクセル数が異なる
タブレット自体の論理ピクセルは1920*1080,WebBrowser Controlも同じ,にも関わらずIEでは1280*720となる事象でした.
調べてみると,なんとIEの拡大設定がデフォルトで150％に設定されていることが原因でした.
これはタブレットの機種にも依る可能性がありますが,Windowsタブレットで表示する画面を作る際には要注意です.
そして厄介なことに, BootstrapはIEのズーム機能をサポートしていません.
のちにズームが有効の場合にモーダルを表示し,これを操作すると画面に黒い線が現れるというバグを踏んだのですが,これについてはMS側もBootstrap側も一切対応する気がないという悲しい事象が起きました.
ちなみにこれはedgeでも発生します.
https://github.com/twbs/bootstrap/issues/15677
すでにこの150％ズームを前提にCSSを書いてしまっていた画面が本番投入されていたため,ズーム率を変えることもできません。。。
泣く泣く,モーダル部分を別画面として作り直しました.
解決策
IEではモーダルを使わない(?)
終わりに
.NETでWebベースのアプリを作ると,このように様々なトラブルに遭遇します.
こうしたトラブルを回避する,または対処するには
- マイクロソフトのプレミアムサポートを使う
- WebBrowser ControlではなくCefSharpを使う(https://github.com/cefsharp/CefSharp)
- webベースではなく,C#で作りこむ
といった方策が有用であると感じました.