Extension:MobileFrontend/ja
MobileFrontend 拡張機能は、MediaWiki インスタンスのモバイル表示を改善するのに役立ちます。
![]() | この拡張機能は Web チームによって保守されています。 |
以下の機能を含みます:
- モバイルトラフィック向けの独立したモバイルサイトを作成します。
- システム管理者は Skin:Minerva Neue のような異なる外装を提供できます。
- コンテンツをより扱いやすくするため、様々なコンテンツ整形機能を提供します。
- 特に、セクションの折りたたみ、コンテンツの再配置や削除(ページのソースコードでリード段落がそれらの下にある場合でも、リード写真や情報ボックスの上に置くなど)。
- モバイル用のフッターをシンプルにし、デスクトップ用/モバイル用を切り替えるリンクを追加します。
- ベータモードを提供し、機能管理システムによって匿名利用者を対象とした試験的機能を追加します。
このページは、開発インスタンスにインストールしようとする利用者向けです。 また開発したり、改良を手伝ってくださる方の参加もお待ちしています。
要件
MobileFrontend をインストールする前に、テンプレートやインラインのCSSスタイル(style
属性)を多用する皆さんは、モバイルに適しているかコンテンツを見直してください。
TemplateStyles 拡張機能はモバイルやデスクトップにて、コンテンツがうまく描画されるようデザインするのに使えます。MobileFrontend には、魔法のような修正をかける機能はありません!
特に、ランディングページ(ホームページ)を見直してください。 モバイル・ゲートウェイ/モバイル用ホームページ整形を参照してください。
インストール
- ダウンロードして、ファイルを
extensions/
フォルダー内のMobileFrontend
という名前のディレクトリ内に配置します。
開発者とコード寄稿者は、上記の代わりに以下を使用してGitからインストールします:cd extensions/
git clone https://gerrit.wikimedia.org/r/mediawiki/extensions/MobileFrontend - 以下のコードを LocalSettings.php ファイルの末尾に追加します:
wfLoadExtension( 'MobileFrontend' );
- 必要に応じて設定を変更します
完了 – ウィキの「Special:Version」に移動して、拡張機能が正しくインストールされたことを確認します。
Vagrantでのインストール:
- Vagrant を使用している場合は、
vagrant roles enable mobilefrontend --provision
でインストールしてください。
Nearby のセットアップ
MobileFrontend は、わずかな設定で Special:Nearby (特別:付近)ページを提供します。このためには少しオプションの設定が必要です。
- ブラウザのセキュリティを確保するため、SSL経由の安全なサイトで実行する必要があります。HTTP経由で利用者の位置情報を要求することはできません。
- GeoData 拡張機能 をインストールする。
- update.php を実行する。
LocalSettings.php
に$wgMFNearby = true;
を追加する- 記事の位置情報を確認する:
- 記事に位置情報を追加するには、たとえば
{{#coordinates:37.786971|-122.399677|primary}}
などcoordinates
パーサ機能を使用します。 構文の詳細は、GeoData の解説文書をご参照ください。 - 代替策として、ローカルの
LocalSettings.php
ファイルに$wgMFNearbyEndpoint
を設定することによって、付近用の別個の MediaWiki 実装を使用できます。 一例として$wgMFNearbyEndpoint = 'https://en.m.wikipedia.org/w/api.php';
ではウィキペディア英語版の記事について位置情報を使っています。 付近エンドポイントは、与えられた地理的位置に関連するコンテンツを検索するために使用されます。
- 記事に位置情報を追加するには、たとえば
外装の設定
既存のデスクトップ版サイトと並行して、MobileFrontend はモバイル用に整形されたウェブサイトを提供します。どんな外装にでもできます。
// これらのいずれかを選択し、選択したコードを LocalSettings.php ファイルの末尾に追加します:
wfLoadSkin( 'MinervaNeue' );
$wgDefaultMobileSkin = 'minerva'; // Minerva 外装を使用 (MediaWiki 1.37 以前では、個別にダウンロードしてインストールする必要があります。そうしないと例外が発生します)
wfLoadSkin( 'Vector' );
$wgDefaultMobileSkin = 'vector'; // ベクター外装を使用
wfLoadSkin( 'Timeless' );
$wgDefaultMobileSkin = 'timeless'; // Timeless 外装を使用
以下の外装は MobileFrontend と互換性があります:
- Skin:Minerva Neue (安定版、WMF のウィキ群の既定の外装)
- Skin:Vector (デスクトップ用の既定の外装、モバイルでは実験的なレスポンシブ モード)
- Skin:Timeless (実験的な外装)
- Skin:モノブック
- Skin:Citizen (responsive skin)
環境設定
Extension:MobileFrontend/設定 を参照
All configuration options are detailed in the README.md file.
追加の調整
以下の互換性がある拡張機能を選択して追加すると、MobileFrontend を最大限に活用できます。
- Extension:GeoData - 特別:付近 (Special:Nearby) を追加すると、記事にジオタグが指摘できます。
- Extension:PageImages - 検索と「付近」の結果に画像を追加します。
- Extension:VisualEditor - モバイル用のビジュアル編集機能を追加します。
ローカルなカスタマイズ
CSSスタイル
MediaWiki バージョン: | ≦ 1.40 |
モバイル向けテーマに CSS を適用するには、MediaWiki:Mobile.css を編集してください。これは MediaWiki:Common.css と同等のものです。
スタイルシートが機能するためには、mw.loader.using('mobile.site.styles')
を MediaWiki:Mobile.js に追加する必要がある場合があります。
MobileFrontend はグローバルなMediaWiki:Common.css も、どの利用者スタイルシートも読み込みません。
詳細情報
モバイル拡張機能を、デスクトップのブラウザやモバイル版を表示しない端末でテストしたい場合、以下のキーと値の組みをURLクエリ文字列に追加します:?useformat=mobile
。例:https://en.wikipedia.org/wiki/MediaWiki?useformat=mobile
特定のページのモバイル版を表示したいけれど、サイト全体で拡張機能を有効にしたくない場合に、そのページのURLに文字列を追加することもできます。
MobileFrontend の歴史の長い機能
MobileFrontend は、長く使われ巨大な拡張機能になっています。多くの機能は、現状で、あるいはいずれ必要以上にふくらむでしょう。 そうした機能を以下に挙げていきます。
API
API は MobileFrontend 拡張機能によって提供されますが、長期的にはページ コンテンツ サービスを優先していき、API を廃止する予定です。 これらのAPIは自己責任で使用してください。 消去される可能性あります(とはいえ十分にお知らせしてからです)。
拡張された action=parse
action=parse
は以下の追加のパラメーターを受け付けます:
mobileformat=
- ページのHTMLをレンダリングしてモバイル形式で返します 1.23+。
mainpage
- モバイル版のメインページ整形を適用する。
例:
結果 |
---|
{
"parse": {
"title": "Therion (band)",
"text": {
"*": "<div><table class=\"infobox vcard plainlist\" style=\"width:22em\"><tr><th colspan=\"2\" style=\"text-align:center;font-size:125%;font-weight:bold;background-color: #b0c4de\"><span class=\"fn org\">Therion</span></th>\n</tr><tr><td colspan=\"2\" style=\"text-align:center\"><a href=\"/wiki/File:2130860153_281d30b3bf_b.jpg\" class=\"image\">
...
|
meta=siteinfo
一般的な siteinfo 情報の mobileserver
キーから、サイトのモバイル版のドメイン(通常のドメインと同じでない場合、同じ場合があります)を取得することができます。
開発者/システム管理者向け
セットアップ
拡張機能で何を実行したいかにもよりますが、事前コミットしたフックを実行するには、npm install
を実行しphpコンポーザをインストールする必要があるかもしれません。
外部ウィキ上の記事を使ったテスト(ライブデータ)
Extension:MobileFrontendContentProvider を参照してください。
モバイルビューの利用
ウィキメディア財団のサイト群
Wikimedia 財団の運営するサイトでは、デバイスのユーザーエージェントを調べるために Varnish キャッシュサーバーを利用しています。
ウィキメディア財団以外のサイト
ウィキメディア財団以外のサイトでは、ウィキメディア財団で行われる動作(プロキシ層でのデバイス検出および固有の X-Device ヘッダ設定)を模倣するように設定するか、記事がモバイルビューを使うように切り替えるため単に "?useformat=mobile" を使うことができます。 See Extension:MobileFrontend/ブラウザー自動検出の設定 .
$wgMFMobileHeader = 'X-WAP';
を設定するか、キャッシュ(Varnish)のヘッダ設定を変更するか、どちらかが一致すればよいでしょう。Using Apache (.htaccess or httpd.conf)
To set up a mobile domain, add the following rule to .htaccess or http.config
<IfModule mod_headers.c>
<If "req('Host') =~ /^mobile./i">
RequestHeader set X-Subdomain "mobile"
</If>
</IfModule>
ホストファイル内の記述例(ここではデスクトップサイトの所在をlocalhost
と仮定):
127.0.0.1 mobile.localhost
LocalSettings.php
内:
wfLoadExtension('MobileFrontend');
$wgMFAutodetectMobileView = true;
$wgMobileUrlCallback = fn( $domain ) => "mobile.$domain";
ここで mobile.localhost を開くと、モバイル版のサイトを表示するはずです。
よくある質問
議論ページで、以下の質問が頻繁にあります。 議論ページでそれらについて投稿する前にこの一覧を確認するか、もし可能ならば、既存の議論トピックを使用して説明を受けてください。
Q: How do I detect the mobile site in frontend code?
Ideally you shouldn't need to do this.
It is preferable to use mw.config.get('skin')
or window.matchMedia('(max-width: 1119px)').matches
to detect a mobile user.
You can also make use of the stable mw-mf
class which is present on the BODY element if the mobile site is active.
If your code makes modifications to content, you may need to update your code to consider MobileFrontend markup by inspecting the DOM for presence of certain elements.
Please note while mw.config.get( 'wgMFMode' )
exists and can be used by extensions as a last resort (for now) it should not be considered stable for use by gadgets.
Q:Minerva 外装のメインメニューをカスタマイズするにはどうしますか?
A: この件について phabricator で議論されていますが、Extension talk:MobileFrontend/2017#h-MODIFY THE MAIN MENU-2017-01-04T02:24:00.000Z に暫定的な解決策が掲載されています。
Q:Minerva 外装に広告や追加の script タグのような HTML を追加するにはどうしますか?
A:外装のテンプレートファイル(現在は include/skins/minerva.mustache
)を編集することによって可能です。詳細については、この議論を参照してください。
Q:使用している拡張機能が MobileFrontend では動作しないようです。なぜでしょうか?
A:おそらく、拡張機能が古く、MobileFrontend との互換性を追加する必要があります。 拡張機能の開発者に連絡し、ResourceLoader/Writing a MobileFrontend friendly ResourceLoader module(モバイル版に適したリソースローダのモジュール)を参照するようお伝えください。 迅速に対応してもらうには、議論ページに投稿するのではなく、この場合は Phabricatorでバグを報告するのがよいでしょう。(ログインには MediaWiki.org で使用する利用者名を使用。)
Q:MobileFrontend を更新すると、致命的な例外が発生してしまいました!
A:おそらく互換性のないバージョンの MobileFrontend と MediaWiki を使用しています。 多くの場合、ここではお力になれません。 問題を解決するには、MobileFrontend または MediaWiki を更新してみてください。
Q:MediaWiki の更新後、wgMFDefaultSkinClass is not setup correctly という例外が発生します。
A:現在、MobileFrontend は Minerva Neue 外装がインストールされていることを前提とします。 インストールしていない場合は、上記の説明に従い、この外装をインストールしてモバイル外装として設定する必要があります。
拡張機能の開発者向け
既定では、拡張機能内のリソースモジュールはモバイルビューでは読み込まれません。
モバイルビューでもモジュールが読み込まれる必要がある場合には、この MobileFrontend フレンドリーなモジュールを書くためのガイドが役立つでしょう。
関連項目
- MobileFrontend にサポートされているモバイル Web ブラウザ
- Extension:TextExtracts
- Commons:Category:MediaWiki extension MobileFrontend
- Extension:MobileDetect
- Extension:Progressive web application: turn any wiki into a mobile app
脚注
- ↑
- Fatal error: Uncaught ExtensionDependencyError: MobileFrontend is not compatible with the current MediaWiki core (version 1.32.2), it requires: >= 1.33.0.
![]() | この拡張機能は 1 つ以上のウィキメディアのプロジェクトで使用されています。 これはおそらく、この拡張機能が安定していて高いトラフィックのウェブサイトでも十分に動作することを意味します。 この拡張機能がインストールされている場所を確認するには、ウィキメディアの設定ファイル CommonSettings.php および InitialiseSettings.php 内で、この拡張機能の名前を探してください。 特定のウィキにインストールされている拡張機能の完全な一覧は、そのウィキの Special:Version ページにあります。 |
![]() | この拡張機能は以下のウィキ ファーム/ウィキ ホスト/パッケージに含まれています:
|