Jump to content

Manual:携帯機器、タブレット、レスポンシブ デザイン

From mediawiki.org
This page is a translated version of the page Manual:Mobiles, tablets and responsive design and the translation is 51% complete.
MediaWiki.org with Minerva Neue skin and MobileFrontend extension on a mobile device

MediaWikiは多くの携帯機器(スマートフォンやタブレットなど)で動作しますが、携帯機器向けに最適化されていません。 外装や拡張機能を追加しない限り、メニューやレイアウト、メディアが最適な場所に表示されず、サイトが見づらくなる可能性があります。

Timeless 外装を除いて、最新の既定の外装である ベクター を含む、MediaWiki に同梱されている外装のいずれも携帯機器での使用に最適化されていません。 このページでは、スマートフォンやタブレットなどの携帯機器でMediaWikiを利用するためのアドバイスを提供しています。

解決策

There are two common approaches:

  • Skin:Timeless is already bundled with MediaWiki. Make sure it is registered in LocalSettings.php so it is available as a setting in preferences. Consider using it as the default .
  • Skin:Minerva Neue is bundled with MediaWiki since version 1.38. Its mobile mode requires installing Extension:MobileFrontend . This is the method Wikipedia uses.

拡張機能

  • Extension:MobileApp - ウィキメディアのモバイルアプリケーションで使用するスタイルとスクリプトを提供するシンプルなアプリ
  • Extension:MobileFrontend - モバイル フレンドリーな表示を提供します。ウィキメディアが開発し、ウィキメディアで使用されています。この拡張機能をインストールするだけで、MediaWiki サイトをモバイル フレンドリーにすることができ、独自の外装も含まれています。

外装

外装を使用する場合、拡張機能は必要ありません。携帯ブラウザ用の外装は 2 種類あります。

  1. 携帯機器での使用に特化して設計されたもので、携帯機器以外のデバイスではうまく表示されないことがあります。MediaWikiは実行されているデバイスの種類を検出して、適切な外装に切り替えます。(Extension:MobileDetectを参照)
    1. WPtouch - A skin which formats your wiki with a mobile theme
  2. レスポンシブ外装は、デスクトップPC、タブレット、スマートフォンを問わず、画面の大きさに自動的に対応するように設計されています。
    1. Tweeki - optimized for Semantic wikis
    2. Chameleon - customizable with five different layouts
    3. Citizen
    4. Medik
    5. Metrolook
    6. Refreshed - uses responsive CSS to adapt to mobile devices
    7. Foreground
    8. Timeless (MW 1.31+) - レスポンシブ デザインをサポートするウィキメディアの外装
    9. ...など!

CSSとJS

Extension:MobileFrontend を使用すると、ウィキ ページ MediaWiki:Mobile.css (Manual:CSS を参照) や MediaWiki:Mobile.js を編集して、携帯機器でのみ適用されるグローバルなスタイルやスクリプトを作成できます。

開発者

関連項目: MediaWikiをモバイルに適したものにする

See also