Jump to content

Extension:MobileFrontend/ブラウザー自動検出の設定

From mediawiki.org
This page is a translated version of the page Extension:MobileFrontend/Configuring browser auto-detection and the translation is 85% complete.

この文書は、サイト管理者がモバイルサイト(利用者がモバイルデバイスからサイトを訪問した際、自動的にデスクトップビューではなくモバイルビューへリダイレクトされるような MediaWiki の拡張)を有効化する方法について説明します。

組み込みの自動検出

コミット 5a1867e 以後、MobileFrontend は最小限の設定による自動デバイス検出に対応しています。 あなたがしなければならないことは $wgMFAutodetectMobileView = true;LocalSettings.php に設定することだけです。 これが最も簡単な方法ですが、ほぼ確実に最低限の機能が使えるようになるでしょう。 この方法はフロントエンドキャッシュに適合しません。これは、キャッシュにモバイルビューとデスクトップビューとの違いを識別させる方法を提供しないためです。

Apache Mobile Filter (AMF)

コミット 0fb2c72d 以後、MobileFrontend はデバイス検出のため Apache Mobile Filter (AMF) に対応しています。 あなたは Apache webサーバを使用していなければなりません。 AMF のセットアップ・構成設定の説明に従えば、「そのまま動く」はずです。 この機能は組込みの自動検出に非常に似ていて、また特別な設定なしではフロントエンドキャッシュに適合しないでしょう。

Web サーバ/プロキシキャッシュによるデバイス検出

いくつかのリバースプロキシ(Varnish 等)は、MediaWiki にモバイル版が必要かどうかの情報を提供することができます。これにより、キャッシュフレンドリーな自動検出が可能となります。

For Varnish 4.0 or later, replace the keyword remove with unset.

Varnish を利用した検出:モバイルサイトを別ドメインにする場合

Varnish を利用していて、wiki.example.com でデスクトップ版を、m.wiki.example.com でモバイル版を表示したい場合があるとします。 その場合、次のようにします。

sub vcl_recv {
	remove req.http.x-subdomain; # リクエスト送信者が任意で X-Subdomain ヘッダを提供することを許可しません
	if (req.http.host == "m.wiki.example.com") { # モバイル版のドメイン
		set req.http.host = "wiki.example.com"; # デスクトップ版のドメイン
		set req.http.x-subdomain = "m";
	}
}
sub vcl_hash {
	# ページのモバイル版を別々にキャッシュします。
	#
	# ノート:x-subdomain ヘッダは唯一の値をもつべきです(値が存在する場合)。そのため vcl_recv() は利用者が提供した X-Subdomain ヘッダを除去する必要があります。
	hash_data(req.http.x-subdomain);
}

LocalSettings.php は以下を含む必要があります:

$wgMFAutodetectMobileView = false;
$wgMobileUrlCallback = fn ( $domain ) => "m.$domain"; // モバイルサイトのドメイン
$wgCookieDomain = ".wiki.example.com";

ここで "%h<#>" は $wgServer のホストネームのセグメントに対応します。 すなわち、$wgServer = 'en.wikipedia.org'; の場合、%h0 は "en"、%h1 は "wikipedia"、%h2 は "org" です。 この場合、上記の $wgMobileUrlTemplate はモバイル URL を "en.m.wikipedia.org" のように展開します。 これはウィキメディア財団とウィキペディアのようなプロジェクトで特に役立ちます。それらは <言語コード>.wikipedia.org というテンプレートに従うため、モバイルドメインは常に <言語コード>.m.wikipedia.org のように見えます。

MediaWiki が Varnish の決定に疑問を投げ掛けないようにするため、この方法では組込みの自動検出は無効化されるべきです ($wgMFAutodetectMobileView = false;)。

Varnish を利用した検出:デスクトップ/モバイルサイト共に同じドメインにする場合

Varnish を利用していて、wiki.example.com にまったく同じ URLで("m.wiki.example.com" のような追加のドメインを作ることなく)デスクトップ/モバイル版を表示させたい場合があるとします。 その場合、次のようにします。

sub vcl_recv {
	remove req.http.x-subdomain; # リクエスト送信者が任意で X-Subdomain ヘッダを提供することを許可しません
	if(req.http.User-Agent ~ "(?i)^(lg-|sie-|nec-|lge-|sgh-|pg-)|(mobi|240x240|240x320|320x320|alcatel|android|audiovox|bada|benq|blackberry|cdm-|compal-|docomo|ericsson|hiptop|htc[-_]|huawei|ipod|kddi-|kindle|meego|midp|mitsu|mmp\/|mot-|motor|ngm_|nintendo|opera.m|palm|panasonic|philips|phone|playstation|portalmmm|sagem-|samsung|sanyo|sec-|sendo|sharp|softbank|symbian|teleca|up.browser|webos)") {
		set req.http.x-subdomain = "m";
	}

	if(req.http.Cookie ~ "mf_useformat=") {
		# これは利用者がフッタにある切替えリンク「モバイルビュー」をクリックしたことを意味します。
		# これがモバイルページとしてキャッシュされるべきだと vcl_hash() に通知します。
		set req.http.x-subdomain = "m";
	}
}
sub vcl_hash {
	# ページのモバイル版を別々にキャッシュします。
	#
	# 注: x-wap ヘッダーは唯一の値をもつべきです (値が存在する場合)。そのため vcl_recv() は利用者が提供した X-Subdomain ヘッダーを除去する必要があります。
	hash_data(req.http.x-subdomain);
}

LocalSettings.php should contain the following:

$wgMFAutodetectMobileView = true;
$wgCookieDomain = ".wiki.example.com";
この方法では、組込みの自動検出を有効化する必要があります(キャッシュには影響を与えません):
$wgMFAutodetectMobileView = true;

そのようにしない場合、MobileFrontend は誤動作します($wgMobileUrlCallback を設定しない場合、X-Subdomain ヘッダを無視します。それを設定した場合、フッタにあるモバイルビュー切替えリンクのためのクッキー "useformat" を設定しません)。

Detection using nginx: mobile site on another domain

Suppose we use nginx, and we want wiki.example.com to show desktop version, and m.wiki.example.com to show mobile version. Here's how to do that. This configuration mimics the behavior of WMF sites.

# [...]

server_tokens off;
set_real_ip_from localhost;
real_ip_header X-Forwarded-For;

map $cookie_stopMobileRedirect $mobile_redirect {
	default ?01;
	"" ${http_sec_ch_ua_mobile}1;
}

ssl_certificate /path/to/ssl-certificate.pem;
ssl_certificate_key /path/to/ssl-certificate-key.pem;
ssl_dhparam /path/to/ssl-dhparams.pem;

server {
	listen 443 ssl;
	listen [::]:443 ssl;

	root /var/www/html/example;

	index index.php;

	server_name localhost;

	location ~ ^/w/(index|load|api|thumb|opensearch_desc|rest|img_auth)\.php$ {
		include fastcgi_params;
		fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
		fastcgi_pass unix:/run/php/php8.1-fpm.sock;
	}

	location /w/images {}

	location /w/images/deleted {
		deny all;
	}

	location ~ ^/w/resources/(assets|lib|src) {
		try_files $uri 404;
		add_header Cache-Control "public" always;
		expires 7d;
	}

	location ~ ^/w/(skins|extensions)/.+\.(css|js|gif|jpg|jpeg|png|svg|wasm|ttf|woff|woff2)$ {
		try_files $uri 404;
		add_header Cache-Control "public" always;
		expires 7d;
	}

	location = /w/images/favicon.svg {
		add_header Cache-Control "public" always;
		expires 7d;
	}

	location = /favicon.ico {
		rewrite ^ /w/images/favicon.ico;
	}

	location = /w/images/favicon.ico {
		add_header Cache-Control "public" always;
		expires 7d;
	}

	location /w/sitemap {}

	location = /sitemap.xml {
		rewrite ^ /w/sitemap/sitemap-index-wiki.xml;
	}

	location ~ ^/w/(COPYING|CREDITS)$ {
		default_type text/plain;
	}

	location /w/rest.php/ {
		try_files $uri $uri/ /w/rest.php?$query_string;
	}

	location /wiki/ {
		rewrite ^/wiki/(?<pagename>.*)$ /w/index.php;
	}

	location = / {
		return 301 /wiki/Main_Page;
	}

	location / {
		return 404;
	}

	error_page 404 /w/images/404.html;

	location /w/images/404.html {
		internal;
	}
}

server {
	listen 80 default_server;
	listen [::]:80 default_server;

	server_name wiki.example.com;

	return 301 https://$host$request_uri;

	return 404;
}

server {
	listen 443 default_server ssl;
	listen [::]:443 default_server ssl;

	server_name wiki.example.com;

	location / {
		if ($arg_mobileaction = toggle_view_desktop) {
			add_header Set-Cookie "stopMobileRedirect=true; Domain=.wiki.example.com; Path=/; Max-Age=2592000; HttpOnly; Secure";
			break;
		}

		if ($mobile_redirect != ?01) {
			return 302 https://m.wiki.example.com$request_uri;
		}

		if ($http_host != wiki.example.com) {
			return 301 https://wiki.example.com$request_uri;
		}

		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_pass https://localhost;
	}
}

server {
	listen 443 ssl;
	listen [::]:443 ssl;

	server_name m.wiki.example.com;

	location / {
		if ($arg_mobileaction = toggle_view_mobile) {
			add_header Set-Cookie "stopMobileRedirect=; Domain=.wiki.example.com; Path=/; Max-Age=0; HttpOnly; Secure";
		}

		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header X-Subdomain m;
		proxy_pass https://localhost;
	}
}

LocalSettings.php should contain the following:

$wgMFAutodetectMobileView = false;
$wgMobileUrlCallback = fn ( $domain ) => "m.$domain";
$wgCookieDomain = ".wiki.example.com";