Mobile Gateway/Mobile homepage formatting/ja

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

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

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

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


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

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

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

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



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

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

には、共通する問題に対するいくつかのヒントが紹介されています.

「」をクリックします.

これでほぼ完了です.

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

もし再び変更を行うには手順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 は現在、メインページに特化したケーシング関連のコードについて廃止処理の段階に入りました. 皆さんの管理するウィキでこれを採用している場合は、直ちに使用を停止してください. もし処理方法など不明点がある場合は、ぜひ迷わずにトークページに投稿をお願いします！

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

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

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

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

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

You can now add CSS @media queries to your page by adding CSS inside Template:Main Page/styles.css to display different content to different device resolutions.

You can apply the "nomobile" class to any elements you wish to continue to hide on mobile. In some cases use of this class is the most straightforward way to update your page.

Known problems are listed below:

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

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

DivTable converter provides a way for you to convert a table HTML to divs. You should aim to put the associated CSS in MediaWiki:Common.css. This act alone should improve your rendering in mobile greatly.

2. Review any inline styles

Search for any instances of styles which make use of the css properties " ", " ", " " or " "

例:

Move these into a TemplateStyle. Use a class and move the css declaration to css.

CSS の例:

e.g. Example - note the pre tag is only included for example purposes - this should be put into a TemplateStyle.

3. Reskin for mobile

With the above steps applied your page should look no different on a desktop browser, but as you shrink the screen (horizontal width) to under 720px - the threshold you introduced in step 2 the styles should disappear. You'll want to add new styles (outside the media query you introduced in step 3). These styles will apply to mobile devices and will be overridden.

If there is any content in the page that you do not want to render in the mobile skin you should add the class "nomobile". e.g.

4. Apply the new template

Copy and paste the sandbox page into your Main page. Refresh the browser and verify that it works as expected on both mobile and desktop.

5. Make a site request to turn off main page special casing

If your site is now no longer using the special page casing and your site appears in this config:

You'll want to let a Wikimedia site admin know that you are ready for main page special casing to be turned off. File a Phabricator ticket using this link that links to this web page and lists your wiki.

You'll be able to tell when this has been successful if you've been using the  prefixes as suddenly other content will display on your mobile site!

6. Remove any mobile specific ids.

i.e. any instance of the following:

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

例: こちらの例

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

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

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

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