モバイル

モバイルでFBEを起動するには、次の方法があります。

m-ブラウザー

FBEには、モバイルアプリまたはモバイルブラウザーにより認証する機能があります。

FBE用のビジネスログインを起動する際には、URLのアプローチを使用することをおすすめします。

  1. Facebook URLの中でwwwmに置き換えます。特に、https://m.facebook.com/を、https://www.facebook.com/の代わりに使用します。

https://facebook.comwwwmも指定せずに渡した場合、Facebookにより、起動元のブラウザーまたはプラットフォームに基づく適切なmまたはwwwのURLが自動的に読み込まれます。

ユーザーインターフェイスの例

以下は、mサイト上に読み込まれた時点でFBEがどう表示されるかを示すUIの例です。

WebView (Android)またはWK/UIWebview (iOS)

Android

コード(webview.getSettings().setUserAgentString("< user_agent>"))のウェブビューのWebSettings()に、DEFAULT UserAgent文字列を渡すことを強くおすすめします。setUserAgentString()メソッドで変更しないでください。ユーザーエージェント文字列を変更すると、レンダリングに問題が生じる可能性があります。

次の例は、Google Nexus 4とSamsung Galaxy S9モバイルデバイスのデフォルトのUserAgent値を示しています。getUserAgentString()を使ってUserAgent値を取得しました。

Google Nexus 4 — Android version 5.1 (API 22) 768x1280

Mozilla/5.0 (Linux; Android 5.1; Google Nexus 4 Build/LMY47D) 
AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 
Chrome/39.0.0.0 
Mobile Safari/537.36

Samsung Galaxy S9 — Android v8.0 (API 26) 1440x2960

Mozilla/5.0 (Linux; Android 8.0.0; Samsung Galaxy S9 Build/OPR6.170623.017; wv) 
AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 
Chrome/58.0.3029.125 
Mobile Safari/537.36

いずれの場合も、UIは期待どおりレンダリングされました。次のSamsung Galaxy S9のスクリーンショットをご覧ください。



次のコードは、Webviewに最小限のアップデートを設定するもので、上記のUIを適切にレンダリングします。

WebView webView;
webView = (WebView) v.findViewById(R.id.webview);
webView.loadUrl('<FBE2.0 URL>');
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
// Sample log to see the Default UserAgent string - Log.i("UserAgent", ""+webSettings.getUserAgentString());
webView.setWebViewClient(new WebViewClient());

また、レンダリングの問題を起こすことなく、次の設定を渡すこともできます。

  • setLoadWithOverviewMode()
  • setUseWideViewPort()
  • setDomStorageEnabled()
  • setJavaScriptCanOpenWindowsAutomatically()
  • UIを変更しないその他の設定オプション

カスタムUserAgentを渡す必要があるビジネスの場合は、getUserAgentString()によって返されるデフォルトUserAgent文字列に追加することを強くおすすめします。レンダリングの問題を回避するため、UserAgent文字列の既存の部分は変更しないでください。

レンダリングの問題が起きる可能性があるので、別のレンダリング設定を渡さないでください。例えば、setLayoutAlgorithm()をAndroid Webviewに渡した場合、HTMLが再編成されレンダリングに悪影響が及びます。

iOS

上で説明したAndroidのアプローチは、iOS UIWebview/WKWebviewでも有効です。

以下はデフォルトUserAgentをiOSで取得するサンプルコードです。

// Sample example - appending UserAgent - Please see latest iOS docs for approach to pass this param
webView.customUserAgent = (UIWebView().stringByEvaluatingJavaScript(from: "navigator.userAgent") ?? "") + "/Custom agent"

iOSの場合も、上記のAndroidに関するベストプラクティスに従ってください。デフォルトUserAgentを使用し、Webviewに影響を及ぼす可能性があるその他のレンダリング設定を渡さないようにすることが重要です。