WebView は、「ネイティブアプリに内蔵して使うブラウザ」です。
HTML5 をベースにするなどして、ネイティブアプリっぽい見栄えになったウェブアプリケーションであっても、利用するには URL を打ち込むか、ブックマークから選択するなどして(つまり、あくまでウェブページとして)利用することになります。
でも、そのようなウェブアプリは簡単にネイティブ化する方法があります。それが上述の WebView を使う方法です。WebView 自体はネイティブアプリケーションに組み込んで使う部品ですが、例えば「全画面 WebView だけを表示するネイティブアプリ」を作れば、(メニューの表示項目は何にするか、JavaScript を有効にするか無効にするか、最初に表示するページの URL はどうするか・・・などの設定項目はありますが)それはウェブブラウザでウェブページを見ているのと大きく変わりません。モバイルUIに対応したウェブページを比較的簡単にネイティブアプリ化する方法、といえます。
実際に自分も Android アプリ開発の中で使ってみる機会があったのですが、そこで想定外のことに1つ躓きました。それがタイトルにある「何も考えずに Android の WebView を使うと viewport が無視される」ということです。
これがバグ扱いなのか、何らかの理由があっての仕様なのかもよくわかりませんが、ともあれ何故か viewport は無視されてしまいます。
そしてそれが原因で、本来モバイルUIで表示されるべきページが、WebView を使って見た時だけモバイル端末と判断されず、PC 用の UI で表示されてしまう、という現象が起こってしまいます。
で、これを回避するための方法がこちらです。色々設定してますが、今回の肝は青字部分の2つ:
(1) 読み込み時にページ横幅を画面幅に無理やり合わせる
(2) ワイドビューポートへの対応
これで viewport を読んでいる時と同様に画面幅を強制的に変更して、本来の(モバイルUIの)ページに対応させることができました。
なお、WebView に関しては Android 4.3 以下の(WebKit ベースの)WebView については Google による脆弱性サポートが提供されなくなる、というニュースがありました(4.4 以上の Chrome ベースの WebView に対してのみサポート継続):
Google No Longer Provides Patches for WebView Jelly Bean and Prior
4.3 以下ってまだ結構多いはず。そして WebView を使ってるアプリってどのくらいあるんだろ?? その意味でも少し気になるニュースではあります。
HTML5 をベースにするなどして、ネイティブアプリっぽい見栄えになったウェブアプリケーションであっても、利用するには URL を打ち込むか、ブックマークから選択するなどして(つまり、あくまでウェブページとして)利用することになります。
でも、そのようなウェブアプリは簡単にネイティブ化する方法があります。それが上述の WebView を使う方法です。WebView 自体はネイティブアプリケーションに組み込んで使う部品ですが、例えば「全画面 WebView だけを表示するネイティブアプリ」を作れば、(メニューの表示項目は何にするか、JavaScript を有効にするか無効にするか、最初に表示するページの URL はどうするか・・・などの設定項目はありますが)それはウェブブラウザでウェブページを見ているのと大きく変わりません。モバイルUIに対応したウェブページを比較的簡単にネイティブアプリ化する方法、といえます。
実際に自分も Android アプリ開発の中で使ってみる機会があったのですが、そこで想定外のことに1つ躓きました。それがタイトルにある「何も考えずに Android の WebView を使うと viewport が無視される」ということです。
これがバグ扱いなのか、何らかの理由があっての仕様なのかもよくわかりませんが、ともあれ何故か viewport は無視されてしまいます。
そしてそれが原因で、本来モバイルUIで表示されるべきページが、WebView を使って見た時だけモバイル端末と判断されず、PC 用の UI で表示されてしまう、という現象が起こってしまいます。
で、これを回避するための方法がこちらです。色々設定してますが、今回の肝は青字部分の2つ:
(1) 読み込み時にページ横幅を画面幅に無理やり合わせる
(2) ワイドビューポートへの対応
public class MainActivity extends Activity{
public WebView webView = null;
protected void onCreate(Bundle savedInstanceState){
:
:
super.onCreate( savedInstanceState );
setContentView( R.layout.activity_main );
webView = ( WebView )findViewById( R.id.webView1 );
//. JavaScript 有効
webView.getSettings().setJavaScriptEnabled( true );
//. リンクタップ時に標準ブラウザを使わない
webView.setWebViewClient( new WebViewClient() );
//. (1) 読み込み時にページ横幅を画面幅に無理やり合わせる
webView.getSettings().setLoadWithOverviewMode( true );
//. (2) ワイドビューポートへの対応
webView.getSettings().setUseWideViewPort( true );
:
:
//. 初期URLを指定してロード
webView.loadUrl( "http://neppi.co/" );
}
:
:
}
これで viewport を読んでいる時と同様に画面幅を強制的に変更して、本来の(モバイルUIの)ページに対応させることができました。
なお、WebView に関しては Android 4.3 以下の(WebKit ベースの)WebView については Google による脆弱性サポートが提供されなくなる、というニュースがありました(4.4 以上の Chrome ベースの WebView に対してのみサポート継続):
Google No Longer Provides Patches for WebView Jelly Bean and Prior
4.3 以下ってまだ結構多いはず。そして WebView を使ってるアプリってどのくらいあるんだろ?? その意味でも少し気になるニュースではあります。
コメント