Recommendations for mobile friendly articles on Wikimedia wikis/ja

本文書では、MediaWiki のウィキの経験から、どうすればモバイル端末利用者に最も役立つ編集者になれるかアドバイスを行います. この文書の執筆はモバイル用アプリとウェブの複数の開発者で、MediaWiki のコンテンツ担当歴はそれぞれ6年以内です. モバイルに適したコンテンツから選んだいくつかの要点に基づき、実用的なガイドにまとめてあります.

ウィキメディアのウィキでは、訪問者の過半数がモバイル版サイトにアクセスしており、多くの地域ではウィキメディアのコンテンツにアクセスできる主要な手段は、モバイル版になっています.

Category:モバイルに適していないテンプレート（wikipedia:Category:Templates that are not mobile friendly）など、テンプレート管理用のカテゴリの使用が推奨されており、モバイル版で問題のあるテンプレートにフラッグを立て、修正の手間を分担するために役立つ方策です.

プロジェクト横断的なテンプレートのHTMLは標準的なクラス名を使ってマークアップ
メッセージ用テンプレートのチェコ語版は、出力は見た目は英語版に似ていても、HTMLマークアップは全く異なります.

モバイル版サイトは、同じ用語を使って書かれたコンテンツに依拠しています. モバイル版の使用感を異なる言語間で一貫させるには、意味論的に類似した用語を使うことが重要です.

多くの言語版でテンプレートを英語版ウィキペディアからコピー&amp;ペーストしている現状から、「標準的」名前のほとんどが英語優先という傾向があるものの、名前には最も広く使われるクラスを反映するような方向転換を大いに検討したいと考えています. とりわけ、ambox の名前は意味論的定義を改良する必要があります.


 * .infobox - 事項 (例 dob = 2018-12-25; name = Santa Claus Junior) の要旨を構成要素で示す. 例えばTemplate:Infoboxなど.
 * .hatnote - リダイレクトや類似の記事名があることをページ冒頭に示す. ja:Template:Hatnote (頭注) など.
 * .ambox - ページに問題点があると示す. ja:Template:Amboxなど.
 * .ambox .mbox-image - 問題点ごとにアイコンを割り当てる. ja:Template:Amboxなど.
 * .ambox .mbox-text-span - 問題点のみ記述する（修正法はなし）.
 * .ambox .hide-when-compact - 問題点の修正法を説明. （訳注:おそらくモバイルでは非表示にする）

悪い例
 * （訳注：おそらく、意味論的に非常にあいまいなクラス名を使っている）

Template:Infobox

良い例

可能であれば基礎情報ボックスをウィキテキストの上に配置しない
infobox（基礎情報ボックス）を記事の最初に配置すると、モバイル版での記事の可読性と読み込み時間に影響します. 現在のモバイル版ソフトウェア はこの問題を修正処理しますが、時には失敗することもあるため、可能なら常に以下の並べ方にしてください. さもなければ正しい順序に修正できたか、実際にモバイル機器で編集結果を確認してください.

infobox を最初に置く場合の可読性の点では、閲覧者がその主題の導入文や文脈に触れないうちに詳細情報を読むことになり、しばしば混乱をもたらします. 特に閲覧者がよく知らない主題では、わざわざ infobox の内容をスクロールしないと自分が読みたかった記事を読んでいるかすら確認できない事態が露見しました. モバイル版とデスクトップ版はサイト表示の一貫性を実現し（デスクトップ版も第1段落をページの上位に配置）、閲覧者は先に記事の主題に触れてからinfobox をスクロールすればよいように変更しました.

読み込み性能の観点から、 infobox を2番目の位置へ移動して平均読み込み時間が大幅に減少すると、閲覧者に対してコンテンツを以前よりも早く表示できるようになります.

詳細情報:

悪い例

良い例

メタデータ（座標を含む）は記事の末尾に
デスクトップ版表示では座標テンプレート(coordinate)を記事の右上に置く傾向があり、その位置はモバイル版だと実用的ではありません. 画面サイズのせいで上部にスペースが確保できないからです. こうした情報を記事本文の例えば末尾などに配置すると、モバイル版機能の選択肢を増やし、同時にモバイル版でも表示位置を確保できます.

メタデータを末尾に配置することの恩恵は他にもあります. MediaWiki の処理を助けるということです. （ポップアップされる）や、モバイル版用に記事を要約するために重要となる、記事の第一段落を認識する処理が簡単になります.

悪い例

良い例

ハットノート、ambox、infoboxテンプレートを一貫した順序で使用する
モバイルでコンテンツは異なった見栄えになることがありますが、移動できません. 要素が種類別にグループになっているかを判別している、モバイル版サイトとアルゴリズムに適合します.

モバイルでは、私たちは構成要素が、ハットノート (Template:Hatnoteなど)に続いて、ambox (Template:Amboxなどページの問題点)、がページの最上部に表示されると想定しています. Infobox や他の要素はこれらの下です.

この順序が守られていなければ、モバイル版サイトはコンテンツをモバイル用に最適化できません.

悪い例

良い例

インラインのスタイルで、サイズと配置に影響するプロパティを使わない
CSSのプロパティの width, float, height はモバイル版で問題となりやすいです.

大きな値が指定されていると、padding, border, margin は問題となりやすくなります.

通則的に、CSSのプロパティにて 100px 以上のピクセル値を使う場合、モバイル版で表示テストを行う必要があります.

理想的な処理は、これらのプロパティでは、クラスと とメディアクエリを使って、モバイル版とデスクトップ用に異なる処理が提供できることです.

悪い例

良い例

データを除いて表の使用を避ける
説明のための表(tabel)を使用することはやめてください. モバイル用に表を最適化することは非常に手間がかかることです. モバイル用の最適化処理のために、こうした説明のための要素は通常壊れています. 表 ( タグ) を使ったレイアウトは、 タグを使ったレイアウトに変更すべきです.

よい解決策を適用する代わりに、私たちはよく、これらの要素をモバイル版では非表示にします. ナビゲーションボックスがこの分かりやすい例です.

メインページをモバイルに適したものへ
説明があります.

テンプレートには認識可能なCSSクラスを持つ単一の要素を最上位にする
ウィキペディアのコンテンツの大部分は構造化されていません. コンピュータによる解析に対して最適化するためにヒントをお話しします. テンプレートの最も外側を単一のHTML要素にし、その要素は固有のCSSクラス名を持ち、このクラス名は各言語版のウィキを通じて共有されているということです. このことは、ソフトウェアに対して、コンテンツを認識するために劇的な手助けになります. こうしたソフトウェアには、モバイル版サイト、コンテンツサービス、Andoroid や iOSのアプリがあるでしょう.

悪い例

良い例

複数の問題点テンプレートの折りたたみの問題
記事に複数の問題点がある場合、それらを折りたたんで単一の「問題テンプレート」を使っています. Issues can take up value space on mobile and when collapsed more options to mobile friendly skins can take place.

このことは特に、削除依頼に出された記事で問題です.

悪い例

良い例

画像、情報ボックス、表の配置位置を想定しない
記事の説明に、前提されていることを含めることに注意してください. デスクトップ版では2つの画像を特定の方法で配置することができますが、モバイル版でもそう表示する必要はありません. このため「右の表」とか「左に示した画像」のような文章をさけてください.

記事の表示状態は、それぞれのパソコン、モバイル端末で流動的に表示されていると考えることが大事です.

画像を参照することが説明に必要ならば、縦の配置が安全です.



悪い例

良い例

画像数を制限する
モバイル用サイトでは画像の遅延読み込み (lazy load) を行っているため、モバイル端末では大量の画像がある記事でタイムアウトが起きることがあるでしょう.

ブラウザの開発者ツール（デベロッパーツール）で次の JavaScript を実行することでも画像の数を確認できます. 理想的には画像は100枚以下です（小さなものでも）. 画像が1万枚もあればモバイルではアクセスできません.

以下の例では表の中で画像の代わりに、UnicodeのEmojiやシンボルを使っています.

悪い例

良い例

モバイルに適した「ページの問題点」（amboxテンプレート）の作り方
「ページの問題点」のテンプレートをモバイルに適合させるには、いくつかのルールがあります.

ambox クラスを使う
クラスが「ページの問題点」の最上位の要素に必要です.

amboxクラスを使って重大性を明確にする
Minerva の外装との適合性のために、これらのテンプレートのクラスによって指定されたメタデータから取得して表示されます. 画像の場合は、 クラスです. （または  クラスの要素の中に入れる）クラスを追加して（以下に示す）重大性の正確性に従って、その問題の種類が取得されるようにできます.

悪い例

良い例

このクラス指定が存在すれば、Minervaスキンは適切なアイコンを使います.

問題についての文章を2行に制限する
2行を超えたら、 クラスを指定した要素の中に入れます.

悪い例

良い例

問題点のテキスト部分をマーク付けする
「ページの問題点」のテンプレートには画像、メタデータなど複数の要素があり、どの部分でその問題点を説明しているかを、コンピューターが認識できるということが実に重要となってきます. そのため、ほとんどのプロジェクトではクラスの  か   を使っています. このことでメッセージの重要部分を抜き出すことができ、モバイル用の低い解像度の画面において乱雑に表示される部分を減らします.

悪い例

良い例