Recommendations for mobile friendly articles on Wikimedia wikis/ja

本文書では、経験上、MediaWiki の編集者として、どうすればモバイル端末利用者に最も役立つかについてのアドバイスを行います. この文書の編集者は、6年までの経歴で MediaWiki のコンテンツを担当してきた、モバイル用アプリとモバイル用ウェブの開発者です. 実用的なガイドとなっており、モバイルに適したコンテンツの文書内のいくつかの要点が基になっています.

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

私たちは、Category:モバイルに適していないテンプレート（wikipedia:Category:Templates that are not mobile friendly）のような、テンプレート管理用のカテゴリの使用を推奨します. こうしてモバイル版で問題のあるテンプレートを分類し、修正にかかる負担をみんなで分散してください.

プロジェクト横断的なテンプレートの構成要素には共通的なクラス名の用語を使う
cs:Šablona:Cedule の出力された見栄えは en:Template:Ambox に似ていますが、マークアップにおいて完全に異なります.

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

多くのプロジェクトで英語版ウィキペディアからテンプレートをコピー&amp;ペーストすると、多くの「標準的」な名前が英語中心的です. しかし、最も広く使われているクラスを反映するために、こうした名称を変更することは非常に自由なことです. とりわけ、ambox の名称にはよりよい定義が必要です.


 * .infobox - 事項の要旨 (例 dob = 2018-12-25; name = Santa Claus Junior) en:Template:Infoboxなど.
 * .hatnote - リダイレクトや類似の記事名があることを冒頭で示す. en:Template:Hatnoteなど.
 * .ambox - ページの問題点がある. en:Template:Amboxなど.
 * .ambox .mbox-image - 問題点に関するアイコンがある. en:Template:Amboxなど.
 * .ambox .mbox-text-span - 問題点（しかし修正不要）がある.
 * .ambox .hide-when-compact - 問題点の修正について説明.

悪い例

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

Template:Infobox

良い例

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

可読性については、infobox が最初にある場合、閲覧者がその主題についての導入文や文脈に触れる前に、詳細情報を読むことになりしばしば混乱をもたらします. 特に閲覧者がよく知らない主題では、自分が読みたかった記事を読んでいるかどうかを確認するために infobox の内容をスクロールする必要が生じます. 私たちはモバイル版とデスクトップ版サイトとで一貫的に表示されるよう実装しました. infobox をスクロールする前に、閲覧者に記事の主題について触れることができます. （デスクトップからは第一段落も上位の位置にあります）

読み込み性能の点では、infobox を第二位置へ移動すると平均読み込み時間は大幅に減少し、閲覧者に対してコンテンツを早く表示できます.

詳細情報:

悪い例

良い例

メタデータ（座標を含む）を記事の末尾に配置する
デスクトップ版サイトでは、座標テンプレート(coordinate)は、記事の右上に表示されているでしょう. モバイル版では、モニタのサイズは制限となり、記事の上部の表示のためのスペースが確保できないため、上部に表示することは実用的ではありません. こうした情報を例えば記事の末尾など記事本文に配置することで、モバイル版でも表示のための多くの選択肢を持ったまま、モバイル版でも配置し表示することができます.

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

悪い例

良い例

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

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

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

悪い例

良い例

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

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

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

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

悪い例

良い例

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

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

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

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

悪い例

良い例

Collapse issues with a multiple issues template
When an article has more than one issue use a single issues template to collapse them. Issues can take up value space on mobile and when collapsed more options to mobile friendly skins can take place.

In particular this is a problem when articles are nominated for deletion.

悪い例

良い例

Do not assume positions of images, infoboxes, tables in text
Be careful when making assumptions about the presentation of an article. While two images may be floated and positioned in a certain way on desktop, it won't necessary display the same on a mobile device. Thus avoid sentences such as "the table on the right shows" or "the image on the left shows".

It's important to think of the article as being fluid and subject to change.

If referring to the image is essential, consider vertical stacking which is a safer alternative.



悪い例

良い例

Limit number of images in a page
Due to the fact that the mobile site lazy loads images, articles with large amounts of images will timeout on mobile.

You can determine the number of images in a page by using a JavaScript developer console and running: Ideally, a page should have no more than 100 images (regardless of how small). Note if you have more than 10,000 images in your page, the page will be inaccessible on mobile.

In the case of tables you might want to consider using emojis or unicode characters.

悪い例

良い例

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

ambox クラスを使う
クラスが「ページの問題点」の最上位の要素に必要です. このクラスが存在すれば、モバイル版サイトはそのページに問題点があることを認識し、表示のための適切な処理を行います.

悪い例

良い例

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

悪い例

良い例

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

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

悪い例

良い例

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

悪い例

良い例