Recommendations for mobile friendly articles on Wikimedia wikis/ja

From MediaWiki.org
Jump to navigation Jump to search
This page is a translated version of the page Recommendations for mobile friendly articles on Wikimedia wikis and the translation is 97% complete.

Other languages:
English • ‎dansk • ‎ไทย • ‎日本語

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

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

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

プロジェクト横断的なテンプレートのHTMLでは標準的なクラス名を使う

cs:Šablona:Cedule の出力された見栄えは en:Template:Ambox に似ていますが、HTMLマークアップにおいて完全に異なります。

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

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

<div class="my-infobox-like-component"></div>

良い例

<!-- モバイル版の適合性のため、意味論的な infobox クラスを追加。詳細は[[:mw:Recommendations_for_mobile_friendly_articles]] -->
<div class="my-infobox-like-component infobox"></div>
{{Infobox}}

可能であれば基礎情報ボックスをウィキテキストの上に配置しない

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

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

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

詳細情報: 閲覧/Web/プロジェクト/導入段落の移動

悪い例

{{Infobox}}
記事の第一段落です。

良い例

記事の第一段落です。
{{Infobox}}

メタデータ(座標を含む)を記事の末尾に配置する

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

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

悪い例

{{Coord|35|N|136|E|type:country_region:JP|display=title}}
記事の第一段落です。

良い例

記事の第一段落です。

....
....
....
{{Coord|35|N|136|E|type:country_region:JP|display=title}}

ハットノート、ambox、infoboxテンプレートを一貫した順序で使用する

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

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

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

悪い例

{{infobox}} <!-- infobox -->
{{page issue}} <!-- .ambox -->
{{disambiguation}} <!-- .hatnote -->
{{page issue}} <!-- .ambox -->

良い例

{{disambiguation}}  <!-- .hatnote -->
{{page issue}}  <!-- .ambox -->
{{page issue}}  <!-- .ambox -->
{{infobox}} <!-- infobox -->

インラインのスタイルで、サイズと配置に影響するプロパティを使わない

CSSのプロパティの width, float, height はモバイル版で問題となりやすいです。

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

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

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

悪い例

<div style="width: 700px; float: left; padding: 5px; border: solid 1px black;">何か文章</div>

良い例

<templatestyles src="..." />
<div class="mybox">何か文章</div>
.mybox { width: 100%; padding: 5px; border: solid 1px black; }

@media all and ( min-width: 720px ) {
  .mybox { width: 700px; float: left; }
}

データを除いて表の使用を避ける

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

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

メインページをモバイルに適したものへ

この記事に 説明があります。

テンプレートには認識可能なCSSクラスを持つ単一の要素を最上位にする

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

悪い例

<div>foo</div>
<div>bar</div>

良い例

<div class=FoobarTemplate>
  <div>foo</div>
  <div>bar</div>
</div>

複数の問題点テンプレートの折りたたみの問題

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

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

悪い例

{{fringe|date=June 2018}}
{{rewrite|date=April 2018}}
{{Proposed deletion/dated
    |concern = Clear plagiarism
    |timestamp = 20180829061154
    |help = 
}}
{{Unreferenced|date=December 2009}}

良い例

{{multiple issues|
  {{fringe|date=June 2018}}
  {{rewrite|date=April 2018}} 
}}
{{Deletion notice with multiple_issues|
    {{Proposed deletion/dated
    |concern = Clear plagiarism
    |timestamp = 20180829061154
    |help = 
    }}
|
    {{Unreferenced|date=December 2009}}
}}

画像、情報ボックス、表の配置位置を想定しない

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

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

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

この例では、2枚ではなく1画像とするか、縦に並べる方が適しています。

悪い例

<div>
  <div class="tsingle" style="float:left;margin:1px;width:102px;max-width:102px">
  [[File:Felipe Massa]]
  </div>
  <div class="tsingle" style="float:left;margin:1px;width:102px;max-width:102px"><
  [[File:Sergey Sirotkin]]
  </div>
  <div class="thumb-caption">マーサ(左)、シロトキン(右)。</div>
</div>

良い例

<div>
  <div class="tsingle" style="float:left;margin:1px;width:102px;max-width:102px">
  [[File:Felipe Massa]]
  </div>
  <div class="tsingle" style="float:left;margin:1px;width:102px;max-width:102px"><
  [[File:Sergey Sirotkin]]
  </div>
  <div class="thumb-caption">マーサ(上)、シロトキン(下)。</div>
</div>

画像数を制限する

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

ブラウザの開発者ツール(デベロッパーツール)で次の JavaScript を実行することでも画像の数を確認できます。

$( 'img' ).length

理想的には画像は100枚以下です(小さなものでも)。画像が1万枚もあればモバイルではアクセスできません。

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

悪い例

Rank Article Views
1 A Symbol b class.svg Symbol b class.svg Symbol b class.svg Symbol b class.svg Symbol b class.svg Symbol b class.svg Symbol b class.svg 3,895,581,597
2 B Symbol b class.svg Symbol b class.svg Symbol b class.svg Symbol b class.svg Symbol b class.svg Symbol b class.svg Symbol b class.svg 62,210,344

良い例

Rank Article Views
1 A 🅱️ 🅱️ 🅱️ 🅱️ 🅱️ 🅱️ 🅱️ 3,895,581,597
2 B 🅱️ 🅱️ 🅱️ 🅱️ 🅱️ 🅱️ 🅱️ 62,210,344

モバイルに適した「ページの問題点」(amboxテンプレート)の作り方

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

ambox クラスを使う

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

amboxクラスを使って重大性を明確にする

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

目的 使用すべきクラス
中立的な観点 ambox-POV
移動(改名)/統合 ambox-move
重大性は中間的 ambox-content
重大性が大きい ambox-serious
重大性は低い ambox-style

悪い例

<div class="ambox custom-class-issue-icon-POV">
    <div class="ambox-image">[[File:Commons-emblem-issue.svg]]</div>
</div>

良い例

<div class="ambox custom-class-issue-icon-POV ambox-POV" data-severity="2">
    <div class="ambox-image mbox-image">[[File:Commons-emblem-issue.svg]]</div>
</div>

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

問題についての文章を2行に制限する

2行を超えたら、.hide-when-compact クラスを指定した要素の中に入れます。

悪い例

<table class="ambox">
    </tr>
    <td class="avviso-testo">
        <b>内容について議論があります。<a href="/wiki/Aiuto:Voci_da_aiutare" title="Aiuto:Voci da aiutare">出典を追加してください</a></b>
        <div style="font-size:90%;">
            <b>理由</b>: <i>何であるかを理解するための説明が不足しています。検証することのできる出典が必要です。</i>
        </div>
    </td>
    </tr>
</table>

良い例

<table class="ambox">
    </tr>
    <td class="avviso-testo">
        <b>内容について議論があります<a href="/wiki/Aiuto:Voci_da_aiutare" title="Aiuto:Voci da aiutare">出典を追加してください</a></b>
        <div style="font-size:90%;" class="hide-when-compact">
            <b>理由</b>: <i>何であるかを理解するための説明が不足しています。検証することのできる出典が必要です。</i>
        </div>
    </td>
    </tr>
</table>

問題点のテキスト部分をマーク付けする

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

悪い例

<div class="ambox">
    <div>
        このページには問題があります。
        <div class="hide-when-compact">修正方法の説明です。</div>
    </div>
    <div>
        これは誰もが編集できるwikiだということはご存知ですか?編集についての全般的な助言については
<a>ガイドライン</a>を参照してください。
    </div>
</div>

良い例

<div class="ambox">
    <div class="mbox-text-div">
        修正方法の説明です。
        <div class="hide-when-compact">修正方法の説明です。</div>
    </div>
    <div>
        これは誰もが編集できるwikiだということはご存知ですか?編集についての全般的な助言については
        <a>ガイドライン</a>を参照してください。
    </div>
</div>