Reading/Web/Projects/Mobile Page Issues/ja

ページの内容ついてのお知らせを表示するテンプレートは、モバイル版ウィキペディアでは表示されません. そのため閲読者には読んでいるページの信頼性に気づきません. このことは問題となることがあり、特に重大な問題がある場合は、例えば大言壮語があったり、削除が検討されている記事です.

閲覧者部門ウェブチーム では、モバイル版ウェブサイトにおける、ページの問題関連のテンプレートの改善に取り組もうとしています. （amboxテンプレートとウィキ群横断的に開始します）目標は、問題の性質についての説明を含めることで、同様に問題の重大性についても説明されることです. これにより閲読者は読んでいる記事の信頼性をよりよく判断できるようになるはずです. また問題を表示することで、ウィキメディアのプロジェクトの仕組みに興味を持ってもらうこともでき、自分も貢献しようと思うきっかけを増やすことにつながるかもしれません.

以下の例は、この改善がどう表示されるかです. 反響は歓迎しています.

2018年10月1日
以下のウィキでこの機能のA/Bテストを実施を予定しています. このテストは2週間実行される予定です. この機能の定量的なパフォーマンスを追跡する予定ですが、読者や編集者からの反響も望んでいます.

2018年9月24日
ラトビア語のWikipediaでこの機能のA/Bテストを開始しました.

はじめに
記事に問題があれば、記事本文の上部に色付きのメッセージボックスが表示され、閲読者や編集者にその問題について通知します. これらの通知は、実際には記事に挿入された特別なテンプレートです. この通知にはそれぞれ独自のテンプレートがあり、テンプレートごとにさらに （Article message box:記事用メッセージボックス） というメタテンプレートを使っています. Amboxはモジュール:Message boxというLuaモジュールを使っています. MediaWikiのその他の名前空間では、例えばカテゴリやノートページにおいて、それぞれの名前空間に特化した通知テンプレートがあります. これらの通知は10年以上前から存在し、その使い方には多くの慣習があります. これらの通知テンプレートの管理は、編集者が行っています. どの言語コミュニティも、それぞれのプロジェクトのニーズに合わせて、独自の通知を導入したり作成したりすることは自由です. 例えば、コモンズでたくさんの種類があるライセンスに関する通知は、ウィクショナリーが用いる通知とは全く異なっています.

幅広くまた種類が多様なため、これらの通知を標準化することは一見すると不可能です. が、2007年に英語版ウィキペディアで行われました.

この見直しは、モバイル版サイトがまだ存在しない時代に行われました. その後、ウィキメディア財団はこれらの通知をモバイル版に持ち込もうと取り組んだものの、あまりモバイルに適合したものではありません. そこで、この企画の出版点として、 テンプレートがベースとなっている記事名前空間の通知の改善に焦点を当てています.

現在のモバイル版の表示方法
これまでのウィキペディアのモバイル版サイトでは、 テンプレートの全文は表示されません. 代わりに記事名の下に、「ページの問題点」（Page issues）と小さく灰色で表示されます. このリンクをクリックすると、問題点の一覧が記事の手前に重ねて表示される仕組みです. 一部の通知では、テンプレートの「小形版」の文章があり、これが用意されていれば、これのみが表示されます.

制限
これまでの実装方法は、 テンプレートが生成したHTMLを修正するという方法です. テンプレートのHTMLにささいにでも変更があると、モバイル版では正常に機能しなくなることがあります. この実装方法ではすべてのウィキで動くものでもありません. テンプレートは言語版ごとに違うためです. 例えばフランス語版ウィキペディアでは、2016年にメッセージボックスの改善を行い、英語版とは異なる体系のテンプレートを採用しました. ここにフランス語版ウィキペディアの管理モジュール一覧があります. この変更が原因で、フランス語版ウィキペディアのモバイル版では通知は表示されていません.

英語版ウィキペディアの「井戸端」の提案
英語版ウィキペディアでは2016年に提案がありました. 「ぺージの問題点」のリンクが、問題の重大性を伝えていないということです.

2016年9月、コミュニティはモバイル版サイトでページの問題点を明らかにするという提案を承認しました. モバイル版で一部の警告テンプレートを一目瞭然にするということは、明確な合意です.

"「AfDテンプレートが表示されている記事で、医学的な出典が不十分ということで大言壮語の警告表示があれば、その記事をパソコンで閲覧した読者は全員、ページの上部に赤とオレンジが配色され交通標識の「止まれ」が添えられた大きな通知に出くわす. （中略）同じ通知のある記事をスマホから開くと（中略）記事名の下に、たった二言、灰色で〈ページの問題点〉と表示されるにすぎない（後略）」"

目的
このプロジェクトの目標は、モバイル版サイト内で特定の問題があるということの認識性を改善することです. その実現のため、ページの問題点の視覚的表現を変更します.

担当チームはコミュニティと協働し、テンプレートの書式のためのガイドラインを提供します. この作業ではデスクトップ版での書式変更なく、モバイル版での問題の書式方法を最適化します.

この目標は、閲読者部門年次計画の目標1―プログラム2の以下に対応します. 「記事の閲読体験において、読者が記事の質と信頼性を評価できること」("Enable readers to gauge the quality and reliability of an article during their reading experience")

変更点の提案
ページの問題点の定義

このプロジェクト（ならびにこの文書で説明する以下の）範囲において、特定のページに「ページの問題点」があるかどうかは、それがメインの記事名前空間 (NS_MAIN, 0) に存在し、下記のテンプレートを参照読みこみ（ならびに入れ子の参照読みこみ）する場合と定義します.


 * Ambox （記事の情報ボックス）

より厳密には、もし、 などのCSSのクラスがあるHTMLのtableが含まれているならば、出力されるテンプレートは本プロジェクトによる変更に影響されるでしょう. インターウィキ間で同等な現地語化された名前では、まだこの影響は受けないでしょう.

以下のテンプレートは「ページの問題点」(page issues)には分類されず、非-記事名前空間 (NS_MAIN, 0ではない) でのみ用いられています. しかしモバイル版では可読性を理由に折り畳みされているということで本プロジェクトに関連しています.


 * Tmbox (ノート・トークページの情報ボックス) ノート名前空間
 * Cmbox (カテゴリの情報ボックス) カテゴリ名前空間
 * Fmbox (ファイル情報ボックス) ファイル名前空間

注・ambox に識別されていないテンプレートは問題ではなく、明確には以下があります.


 * w:Template:Asbox (article stub box、スタブ用) 改善の提案をします (問題ではない)

type と issue 引数
テンプレートに type 引数があれば、問題の重大性だけを表示します. この引数の詳細については、各々のプロジェクトやウィキごとの ambox テンプレートのページをご覧ください（日本語版のリンクはこちら）. テンプレートに type 引数がない問題では、デフォルトの表示方法がとられます.

同様に、テンプレートそのものの issue 引数に短い説明文が用意されている場合のみこれを表示します. この説明文が既にあるテンプレートの概要は、このphabricatorのタスクにあります.

操作の手順

 * 1) 利用者が問題のあるページを開く.
 * 2) 利用者が「ページの問題点」の要素に触れる.
 * 3) 利用者をページの問題点の詳細へ誘導する.

全般
モバイル版のページの問題点は以下のように表示されます.
 * 問題の説明
 * 設定があれば、問題点の短い説明を使用.
 * 短い説明がなければ、長文の問題の説明文の先頭部分を表示する.
 * 短文でも長文でも説明文の長さは、画面表示域の大きさによって制限を受ける.
 * 問題の重要性
 * 重大性はamboxの type引数に従う. （つまりテンプレートの種類の色を継承する）
 * 重大(Severe): type=speedy, type=delete
 * 中程度(Medium): type=content
 * 低(Low): type = style
 * お知らせ(Notice): type = notice, type = move, type = protection
 * その他のテンプレートはすべて、通常の重大性として表示.
 * どの重大性でも、ページ内での見た目と位置はカスタマイズされた形で表示されます.
 * もし問題に別のページへのリンクが含まれていると、本文からリンクを削除し、そのリンクはページの問題点詳細の様相に表示されるでしょう.

Examples:



問題点がひとつ

 * ページの問題点が単一の場合は、上記に定義したテンプレートに重大性が由来します.
 * 例. テンプレート の問題の重大性が「中程度」ならば、記事には問題が単一で重大性は中程度として表示されます（サンプル）.

Multiple issues
Note: the icon for multiple issues might be generic where articles have more specific icons (e.g. low priority `sweep` icon for cleaning articles and medium priority `balance` icon for issues with article point of view) a more generic priority icon will be used. See phab:T202351 for further information.
 * 複数の問題では、問題点の重大性は、個々の問題ごとにその重大性を反映します.
 * 記事内に テンプレートがある場合、最も重大な問題の重大性を表示.
 * 例として、 テンプレートが「重大」 の記事は、重大性が大きいと表示される（サンプル）.
 * 複数の問題では、それぞれ個別の文章とデザイン、ページ内の位置が与えられます.

Example:



Template:複数の問題 ではない複数の問題点

複数の問題テンプレートが使用されていない場合は、このプロジェクトの対象外です. もしいくつかの問題点が隣接して指定してあっても、複数の問題テンプレートで包まれていなければ、表示上に問題があります. 特にアイコン表示です. phab:T202349 の議論を参照してください.

節の問題
このプロジェクトの初期の実装方法は、個別の節に問題を表示します.

将来の改良点
これらのスタイルを適切に反映したら、TemplateStyles extensionを使ったモバイル適合的なCSSを提供し、より集中的に提供できるようにしたい. これにより、特化された対処法のとれるテンプレートの割合を増やし、それぞれのテンプレートの編集者に助力したい. （意訳）

ページの問題点の様式―最初の更新
2018年3月最初に、ページの問題の様式に関し、閲読者チームは以下の変更を行いました. この変更の目的は、ページの問題点の詳細情報を明らかにするということです. また閲読者に対し、問題の解決方法について情報提供できます.

機能の評価
閲読者チームは理解したいと望んでいます. それは、特に読者がページの質と信頼性を捉える事について、モバイル版サイトでページの問題点の存在が目立ち認識性が向上するとどんな効果があるかということです. 目標は、読んでいる記事の信頼性と質をよりよく評価することを手助けすることです. 理論的には、ページの問題点に気づきやすくことでこの目標に貢献できるでしょう.

以下の質問にお答えします.

新しいページの問題点の通知方法によって、閲読者はページの問題点への認識性が向上したか？

ページの問題点の通知を見たユーザーの反応は？ ページの問題点に気づくとウィキペディアに対する印象は変化するか？
 * 量的調査：
 * ページの問題の通知方法が新しくなって、以前より閲読者の目にとまるようになりましたか？
 * 閲読者にとって新しい通知法のBバージョン（タイトル付き）の方がAバージョン（タイトルなし）より目に付きやすいですか?
 * ページの問題の表示位置は、導入文の前より後に置く方が閲読者の目にとまりやすいですか？
 * 量的調査:
 * 表示が新しくなって、ページの問題の表示のクリック閲覧は増えましたか？（記事のページから問題のモダールへの遷移の増加）
 * 問題の重大性とクリック閲覧の間に相関関係は見られましたか？

その他のアンケート項目:
 * 量的調査:
 * RQ1 - ページの問題は閲読者にとって理解しやすいですか？
 * RQ2 - 閲読者はページの問題に関心を示しますか？ 役に立つと感じていますか？ 重要だと思っていますか？
 * RQ3 - 閲読者は以前からページの問題を知っていましたか？ 他の記事でも目にしたことがありますか？
 * RQ4 - 閲読者はページの問題通知の仕組みが理解できますか？ 言い換えるなら、ページにどう表示されるか理解できますか？
 * RQ5 - ページの問題に気づくと、閲読者のウィキペディアのイメージは変わりますか？
 * 閲読者はウィキペディアのページに対して、質や信頼性をどう考えていますか？
 * 閲読者はウィキペディアが重大性が低いと評価した問題より、大きいとした問題に注目しますか？
 * ページの問題の認知度が上がったことで、どんなフィードバックの重複（発生した場合）が見られましたか？ 例えば問題のあるページで、モバイル版の編集が増えましたか？ ページの問題の扱いが変わってから、問題解決率に影響が出ましたか？

技術的な難点
記事用のメッセージボックス改良には技術的に難点があります. 一言で言うなら、テンプレートに一貫性がないからです.

の出力結果はさまざまな面で一貫性に欠けています.

テンプレートの内容を抽出する機械可読で一貫性のある方法がありません.
 * 言語ごと
 * タイプの異なるテンプレートごと
 * 記事内の位置ごと

要注意の点

 * 文の長さ
 * 記事用メッセージボックスの文章はかなりの長文が多く、モバイル機器に適合していない.
 * デスクトップ用のHTML
 * 「使うテンプレートは表形式で表示した部分が多いが、その書式だとモバイル版では表示されない.
 * 言語に特化したHTML
 * HTML の出力は言語間で違いがあり、メッセージの内容を取り出してモバイル版向けに転用することがほぼ不可能.

技術的な解決作の提案
モバイル版に適したテンプレートCSS開発にTemplateStyles拡張機能を使う

''将来のバージョンのために議論していきます. ''

ページの問題の表示にページコンテンツサービスを利用

https://phabricator.wikimedia.org/T172002

現存するテンプレートのマークアップを有効にするため、MobileFrontendとMinervaのCSS を修正

''この対処法は現存するテンプレートの構造で有効かもしれないが、おそらくは英語版ウィキペディア限定となる. ''

多くの 使用のテンプレートには、 という CSS クラスを使ったものがあります. CSS を使うことで、余分な文章を隠し、利用者に「要旨」の文章のみ提示します. この文章は現状は、本文に重ねて表示されるものと同文です. 多くのテンプレート、特に削除テンプレートなど、この CSS クラスはありません. この文章量の問題は、テンプレートごとに取り組む必要があります.

CSS改良のデモ画像はこちら.

Amboxテンプレートに構造化されたHTML属性を追加 

''この解決法ではテンプレートの修正が必要です. ''

前述の通り、 テンプレートから生成される HTML は様々です. 必要に応じ、言語版に合わせ変更されます. こうした変更を妨げるべきではありませんが、モバイル版など新しい環境に適合するように検証する必要があります.

HTML の意味属性を指定すると、Ambox の内容を抜き出すための「フック」となります. モバイル版で適切な方法で表示できます. テンプレート編集者向けに標準的な属性型を提供し、自作のテンプレートに導入することもできます. この方法は、適用するテンプレートあるいは言語に関係なくうまく動作するでしょう. これらの属性は「機械可読」なので、解析したり抜き出すことが可能だということです. 例として、モバイル版アプリ向けのPage Content Serviceがあげられます. これら意味属性は閲読者には非表示で、既存のテンプレートの外観に影響しません.

セマンティックな（意味を持たせる）HTML属性は「マイクロフォーマット」のカテゴリに分類されます. 基本の考え方は、機械可読ができる方法で、特定の種類のデータを伝達する能力によってHTMLを拡張するということです. 様々なプロパティを持つ「メッセージボックス」としてテンプレートが認識されるように、属性を持つ Ambox HTML に拡張するということです. このプロパティには、優先順位、日付、実施可能な手順といったものがあります. この情は解析可能で、モバイル用のサイトとアプリに取り込んだり、モバイルに適した形で表示することもできます.

ウィキメディア独自の規格を設けることもできますが、世の中にはすでにW3C推奨規格の RDFaが普及しています. RDFa とは、属性を使って HTML に複雑なメタデータを与える方法を標準化する規格です.

RDFa を用いて「用語集」のようなデータが豊富な構造や、データ構造を定義するプロパティ群を定義します. 「メッセージボックス」のプロパティを記載した独自の「用語」を定義でき、それらのプロパティをHTML属性として利用できます.

RDFa に用いる HTML 属性の例として や 、 や があげられます. テンプレートへの導入の方法は下記の例で説明します.

モバイル版に適したページの問題点の目録
上記の修正案で、ページの問題テンプレートのほとんどが解決すると予想されます. そのうち2種類のテンプレートは別格の扱いをしています. 1つ目は明瞭で短い説明文があるもの（「省略形を非表示にする」とマークした文を含むもの）. 2つ目はメッセージ用ボックスが設定されたテンプレートです. これらはメッセージをモバイル版向けに短く表示します. また問題の深刻度を示す視覚的な表示を含みます.

縮小したとき非表示にする
これら変更の訴求範囲を調べるため、テンプレートの目録を作りました. テンプレートで「縮小したとき非表示にする」という文言を含むものに着目しています. 集計結果は次の通りです. 詳細はT189132を参照してください.

方法

「ページの問題」テンプレートをさまざまな言語版から多方面にわたって目録化するため、MediaWiki API ならびにリンク先のスクリプトを使いました. スクリプトは特定のカテゴリに属するテンプレートを解析し、例えば日本語版ウィキペディアの場合、Category:記事メッセージボックスというカテゴリに属するテンプレートをすべて解析します. 次にそれらのテンプレートはCSSつきのHTMLの表として表示され、縮小化できるものとできないものを識別します. そこから縮小版テンプレートの一覧も生成できます.

免責事項

この方法は「ページの問題」すべてをまとめたカテゴリのある言語版で有効です. 言語によってはもっと特化したカテゴリはあっても、一般化したカテゴリがあるとは限りません. そこでこの報告での対象は、上位10件のウィキペディアに限定しました.

High level design goals:
1) Compact: page issues come in a wide variety of lengths, but screen space on phones is limited and we want to respect the reader's desire to access the content, so we decided the banners needed to be compact (two lines of text, or roughly 62px tall max). We hope that in turn template editors will further refine page issue descriptions to (more) succinctly describe the issue.

2) Easy to understand: there are over 300 unique page issues on English Wikipedia, many with beautiful, custom icons. While editors may be familiar with each individual issue we wanted a way to simplify them for readers. In a Vector-like manner we chose severity (i.e. type) as the main concept to communicate visually using 5 generic, globally understandable icons.

3) Easy to engage with: we think that it's important for readers to have the opportunity to easily access additional information about a page issue, and perhaps even be intrigued enough to try fixing it. While many page issues have various links embedded in their descriptions, we wanted to focus the reader's attention on a single action: Learn more. The consistent placement of the blue Learn more link makes it easy for anyone to further engage with an issue they discover.

Here is an example of an ideal page issue banner:



Compatibility across Wikis:
Since page issues are not structured in any way across the hundreds of Wiki projects we knew there would be a large compatibility challenge. In other words, there was no simple way for us to render all page issues from all projects in a consistent manner on mobile devices that met our design goals listed above. Since we are most familiar English Wikipedia we decided to anchor the rendering code around how English page issues are formatted. Page issues on some other Wikis work quite well out of the box (e.g. Japanese, Chinese), however for other projects reformatting of page issue templates will be necessary in order to get them to play nicely with how we render them on mobile.

Here are a few examples from various Wikis that explain what kinds of fixes we recommend:

Making page issues (ambox templates) mobile friendly
See Recommendations_for_mobile_friendly_articles_on_Wikimedia_wikis