MediaWiki をモバイル対応させる MobileFrontend extension

この記事を読むのに必要な時間は約 6 分です。


Wikipedia にも利用されている MediaWiki ですが、最近ではモバイルへの対応は Google 検索ランキングにも影響するため、対応は必要不可欠です。

当記事では、MediaWiki でモバイル対応させるための extension である MobileFrontend の導入方法と、ちょっと便利に利用するための編集についてご紹介したいと思います。

スポンサーリンク
スポンサーリンク

前提・環境

私が導入した環境は以下の通りです。

PHP5.6.16
MediaWiki1.25.2

当記事により何ができるか

MediaWiki 上で、以下をできるようになります。

  • Google のモバイルフレンドリーテストに合格します。
  • Wikipedia のモバイルページと同じような動作をするようになります。
  • スマホ等モバイル機器からのアクセス時に、自動的にモバイル用画面に切り替わります。

Extension:MobileFrontend とは

MobileFrontend という extension は、Mediawiki をモバイル対応させるための extension です。Wikipedia でも利用されていますので、モバイルでアクセスした際の動作も Wikipedia と同じような感じになります。

MobileFrontend 導入に当たっての注意点

MobileFrontend は、ちょっと機能を追加したりする、他の extension と異なり、かなり独特な動きをする extension ですので、導入には注意が必要です。

動作イメージとしては、各ページの生成を、標準の生成機能ではなく、自前で作りなおしているようなイメージですので、大きな影響があります。

具体的には、以下の点などが挙げられます。

  • サイト内共通の CSS である Common.css が読み込まれない
  • 他のプラグインから読み込む JS や CSS が無効化される
  • サイドバーも独自メニューになり、MediaWiki:Sidebar の内容は全く反映されない

上記動作となっているのは、不具合ではなく仕様です。考え方として、以下のような考え方があるようです。

  • 標準であるデスクトップビューと、モバイルビューとで、必要となる機能が異なる可能性がある
  • 共通化していて後から分けるよりは、予め分けておく方が柔軟に対応できる
  • 他の extension は、モバイルを意識したりテストしたりしていない可能性があり、それらがモバイルビューでは不具合を招く恐れがある

おそらく、現在のように高性能なスマホ等が出てくる前に、extension が作成されたといったことも影響しているのではないかと思われます…。

いずれにしても、おそらく他の選択肢はあまり無いと思いますので、上記を受け入れて導入するしかないかと思います。

導入後は、単ページの表示確認だけでなく、モバイルビューにおいて、サイト内の導線や機能に問題がないか、しっかり確認することをおすすめ致します。

導入

Mediawiki 標準で付属している extension であるため、導入した Mediawiki の extensions ディレクトリを見ると、おそらく既に MobileFrontend ディレクトリがあるかと思います。

プラグインを有効化することで、ひとまずの導入は完了します。

LocalSettings.php への設定追加

MediaWiki のトップディレクトリにある、LocalSettings.php に、以下を追記し、拡張機能を読み込むように設定します。

$wgMFAutodetectMobileView は、名前の通り、自動的にモバイル判定を行うかの設定です。通常は true に設定しておくと良いかと思います。

設定しない場合、アクセスする環境に関係なく、ページ最下部の「モバイルビュー」リンクをクリックするまでモバイルビューに切り替わりません。当然、Google のモバイルフレンドリーテストも不合格になります。

動作確認

設定が完了したら、スマホ等モバイル機器からアクセスするのが手っ取り早いでしょう。

うまく動作していないような場合には、「特別:バージョン情報」ページにアクセスし、インストール済み拡張機能に MobileFrontend が表示されているか確認しましょう。

もし表示されていなければ、LocalSettings.php の設定がうまくいっていない可能性が高いです。スペルミスがないか等、追記した内容をご確認下さい。


今回は以上です。


スポンサーリンク
スポンサーリンク
  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です