モバイル・ゲートウェイ/モバイル用ホームページ整形

This page is a translated version of the page Mobile Gateway/Mobile homepage formatting and the translation is 100% complete.
Other languages:
Bahasa Indonesia • ‎Deutsch • ‎English • ‎Lëtzebuergesch • ‎Tiếng Việt • ‎dansk • ‎español • ‎français • ‎interlingua • ‎italiano • ‎kurdî • ‎lietuvių • ‎magyar • ‎polski • ‎suomi • ‎svenska • ‎български • ‎македонски • ‎олык марий • ‎русский • ‎удмурт • ‎العربية • ‎روچ کپتین بلوچی • ‎سنڌي • ‎فارسی • ‎پښتو • ‎বাংলা • ‎မြန်မာဘာသာ • ‎中文 • ‎日本語 • ‎粵語 • ‎한국어

もし皆さんのウィキメディア・プロジェクトでメインページ(ホームページ)の整形をモバイル端末(スマートフォンやタブレットなど)の閲覧に対応していない場合、さらにそのプロジェクト管理者があなたである場合は、以下の手順に従って対処をお願いします。

留意点:多くの場合、メインページの編集には管理者権限が必須です。

手順1

最初に、モバイル用のホームページに適したコンテンツを決めてください。

下記の要点によって、デスクトップ版のページのコンテンツ(「今日の一枚」など)を評価します。

  • どれくらい人気か。
  • 定期的に更新されているか。
  • ざっと読みに適しているか。
  • モバイルの画面にうまく適しているか。

どのコンテンツが理に適っているか決めたら、手順2に進みます。

手順2

以下を行うためには、ログインして管理権限を持たなければなりません。ホームページをデスクトップ表示に切り替え、「編集」 をクリックして携帯端末向けの表示に加えるコンテンツを選びます。

各コンテンツの中で、ページから非表示にしたいものに nomobile クラスを追加するか、このクラスを持つ要素の子要素となるようにします。

<div class="nomobile"> ... </div>

div タグの開始タグと終了タグの間に入れるものとは? おそらく「今日の一枚」など、ページに表示するコンテンツ用のテンプレートがあるはずです。

スタイルの更新

一部のスタイルは、モバイル版に適していません(フレンドリーではない)。例えばCSSの指定においてwidth(幅)、height(高さ)、padding(余白)などをピクセル値固定で指定した場合です。もしスタイル指定を変更する必要があれば、Extension:TemplateStyles を用いたり、MediaWiki:Common.cssMediaWiki:Mobile.css にて指定します。

MediaWikiをモバイルに適したものにする には、共通する問題に対するいくつかのヒントが紹介されています。

「ページを保存」をクリックします。

これでほぼ完了です。

手順3

モバイルビューで表示します。アドレスは通常は、languagecode.m.project.orgとなり、日本語版ではja.m.project.orgです。あるいはブラウザの幅を狭くすると、擬似的にモバイル版の表示を試すことができます。ページはうまく表示されましたか?

もし再び変更を行うには手順2に戻ります。満足できるまで手順2、手順3と繰り返します。

満足がいけば完了です!

MFSpecialCaseMainPage

$wgMFSpecialCaseMainPage が有効の場合は (既定では無効)、モバイル版とデスクトップ版の利用者に異なるコンテンツを提供できます。 この方法は既に廃止されており、メインページ以外では無効で、さらに管理作業の障害になるため、皆さんのMediaWikiのサイトを携帯端末版に対応させる移行期に、暫定的にあてがう以外は非推奨です。 2020年に除去されます。

ウィキぺディアの各言語版ホームページにしても、その他ウィキメディアのプロジェクト群のそれにしても、非常に多様であるため、万能なサンプルの提示は不可能です。しかしながら皆さんのサイトでの「見た目」をご理解いただくため、ドイツ語版ウィキペディアの例をあげます。 https://de.wikipedia.org/ "Lesen"タブの隣の、ソース表示タブ ("Quelltext anzeigen") を押すと、ウィキ文表示に切り替わり、ブラウザの検索機能で文字列 "mf-" を探します。

この事例では mf 選択子を仕切り子 div タグで囲んでから、さらに大きなページ要素に組み込んでいます。当該のプロジェクトのホームページの書式(整形)に詳しい人なら、詳細がわかるはずです。

次へ: https://de.m.wikipedia.org/

すると整形済みのモバイル版のページが表示されます。選択子 mf に対応するコンテンツは、モバイル対応に処理されたはずです。

MFSpecialCaseMainPage を採用するウィキの廃止の流れ

MobileFrontend は現在、メインページに特化したケーシング関連のコードについて廃止処理の段階に入りました。皆さんの管理するウィキでこれを採用している場合は、直ちに使用を停止してください。もし処理方法など不明点がある場合は、ぜひ迷わずにトークページに投稿をお願いします!

これを採用しているかどうか見分けるには?

利用者登録しているプロジェクトのモバイル版で、クエリ "?mfnolegacytransform=1&debug=1" を実行します。そして実行しない場合との見た目を比較してください。 英語版ウィキペディアを例にすると、https://en.m.wikipedia.org/?mfnolegacytransform=1&debug=1https://en.m.wikipedia.org/ の比較になります。 もし同じ見た目にならない場合は、いますぐ新しい整形処理が必要です。

修正方法は?

メインページのデザイン面はほぼ同じまま、必要な処理だけする場合は、このページの解説に従ってください。

メインページのマークアップをいったん、サンドボックス(例=利用者名前空間/sandbox/ページ名)にコピーペーストして保存。そのページの表示をモバイルビューに切り替える。デスクトップ版でページ最下部の「モバイルビュー」を押すと、携帯端末向けの表示に切り替わる。モバイル版サイトでウィキ文の編集機能が利用できる場合は、そちらを使う。

管理するウィキにTemplateStyles拡張機能を実装する必要がある。Special:Versionを開くと、インストール済みかどうか確認できる。理由はなんであれ、未実装の場合は申請する

ページに書式テンプレートを追加するには、次の文字列を新規に作成した下書きページ(前述のサンドボックス)の1行目に追加。

<templatestyles src="Template:Main Page/styles.css" />

これで CSS @media クエリをページに追加する準備が整いました。具体的にはTemplate:Main Page/styles.css を開き CSS を追記することで、機器の解像度に対応して異なるパターンでコンテンツを表示することができます。

モバイル版で今後も非表示にしておきたい要素は、クラスを"nomobile"に指定します。 このクラスを採用すると、場合によっては、もっとも手早くページを更新します。

既知の問題を以下に示します。

1. 表組みはつかわない。

メインページでどのような形式でも表組みを採用している場合は、除去します。コラム形式の表示指定は、ウェブ上にいろいろな方法が紹介されています。愛用している検索エンジンで「responsive column layout」を検索すると見つかります。もし難しいと感じたら、CSS の達人に相談しましょう。

DivTable 変換機能により、表組みは HTML 書式から div タグ書式に変換できます。関連する CSS を MediaWiki:Common.css内に追記する必要があります。この処置ひとつでもモバイル版での画面表示の処理が改善されるはずです。

2. インラインの書式を確認

検索をかけ、css プロパティの"width"、"float"、"padding"、"margin"のいずれかを採用する書式がないか調べる。

例:

<div style="float: left; width: 200px;"

これらをTemplateStyle書式設定に追加。具体的にはクラス指定をして css 宣言を css に設定。

<div class="main-page-box"

CSS の例:

/* 書式をモバイルクエリに組み込む。つまりタブレットもしくはデスクトップ版限定で有効にする。  */
@media all and ( min-width: 720px ) {
    .main-page-box {
        float: left;
        width: 200px;
    }
}

例:サンプル - pre タグは、このサンプル表示用にのみ記述してある点に注意。 - これを TemplateStyle に記述する必要がある。

3. モバイル向け外装の修正

上記の対応を済ませた後、ページの表示は携帯端末でもデスクトップ機器でも同じでなければいけません。ところが画面幅 (水平幅) を最大 720px に縮小したため、手順2で指定した閾値のせいで書式が消失します。もっと新しい書式がほしくなるかもしれません (手順3で指定したメディアクエリ以外の設定値)。これらの書式はモバイル版の既存の書式を上書きして適用されます。

モバイル版外装では見せたくないコンテンツがある場合は、次の例のように、クラス指定を "nomobile" に変更します。

<div class="nomobile">このコンテンツは、携帯端末では非表示、デスクトップ版では表示が正しい状態です。</div>

4. 新しいテンプレートの付与

ここまで作業したサンドボックスの内容をコピーし、皆さんのサイトのメインページを上書きします。ブラウザのキャッシュを消去、想定した画面表示になるか、携帯端末とデスクトップ機器の両方で確認します。

5. メインページの特定ケーシング停止を依頼する

皆さんのサイトで特定のページ・ケーシングの無効化が成功すると、設定ファイルで以下の表示になります。

https://github.com/wikimedia/operations-mediawiki-config/blob/master/dblists/mobilemainpagelegacy.dblist

できたらウィキメディアのサイト管理者に連絡し、メインページの特殊なケーシング処理を停止する準備完了と伝えてください。具体的には このリンクからPhabricator チケットを作成すると、このウェブページのリンク付きで皆さんのウィキをリストにして投稿します。

接頭辞mp-を採用していると、上記が成功したかどうかすぐにわかります。突然、モバイル版さいとにほかのコンテンツ要素が出現するからです。

6. モバイル版に特化した識別子の除去

つまり以下のいずれも削除対象です。

id="mp-

これらの処置はもう無用です。以前はモバイル版でどのコンテンツを表示させるか、指定するための処理でしたが、現在はモバイル版に特化した双方向型のデザインが提供されており、mainは処理せずにスルーする設計です。

例: こちらの例

応急処置 (手抜き)

  警告: 明白な事実ではありますが、あちこちに実装する前に、必ず安全な場所(サンドボックスなど)でテストをしなければなりません。 臨時の応急処置としては使えますが、そのまま固定して採用することは非推奨です。

皆さんのウィキで、もっとも時間をかけずに修正するにはごく限定数のデスクトップ版Minerva の利用者には我慢してもらい、Minerva 表示を手直しして水平方向に圧縮させることです。

応急処置が有効かどうか調べるには、メインページに次の文字列を追加して確認します。

<templatestyles src="Template:Main Page/styles.css" />

合わせて、 Template:Main_Page/styles.css を開き、以下の CSS を末尾に追加します。

body.skin-minerva table,
body.skin-minerva tr,
body.skin-minerva td,
body.skin-minerva tbody {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box;
}

留意点は、これはあくまでも応急処置として打つ手であって、複雑な構造のメインページの表示が壊れる可能性を含みます (例=表組みの入れ子)。また同じメインページなのに、小型のデスクトップ機器では表示が崩れ、画面が大きめの携帯端末ではむだに余白が入るという既知の問題の改善にはなりません。 どうしても処理作業に当てる時間がない場合は、暫定的にこの処理をすることは可能ではあります。しかしながら本気でユーザ体験の修正を実施し、サイズ条件にしばられる表示方法をモバイル版 (ならびに画面サイズが小さなデスクトップ機器) 向けに修正しなければなりません (あるいはメインページのデザインそのものを変更すると対処できます。) この方法で処理すると決めた場合は、ほんとうに想定した表示になるかどうか、必ずモバイル表示に切り替えて確認する必要があります。