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が含まれているならば、出力されるテンプレートは本プロジェクトによる変更に影響されるでしょう. インターウィキ間で同等な現地語化された名前では、まだこの影響は受けないでしょう.

The following templates are not classed as "page issues", as they are only used in the non-article-namespace (NS_MAIN, 0) but are related to this project, in that they are collapsed for readability on mobile:


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

Note, any template that does not identify itself as an "ambox" is not an issue, this explicitly includes:


 * w:Template:Asbox (article stub box) - these are suggestions for improvement (not issues)

深刻度と短い説明とは
「type」パラメーターのテンプレートでは表示は問題の深刻度に限定します. このパラメーターの詳細はプロジェクトごとのambox テンプレートのページと、ウィキを参照してください（日本語版のリンクはこちら）. Issues that do not contain the type parameter within the template will still appear on the page using the default styling.

同様に、短い説明がテンプレートそのものに用意されている場合のみ、それを表示します. An overview of the templates that already have this text can be found on this phabricator task.

ワークフロー

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

全般
Mobile page issues will display the following:
 * 問題の説明
 * 場合により、問題を短くまとめた説明を使用.
 * 短い説明がない場合、長文の問題の説明文の冒頭を表示.
 * 短文でも長文でも説明文の長さは、画面表示域の大きさによって制限を受ける.
 * 問題の深刻度
 * 深刻度の設定は以下のとおりw:en:Template:Ambox#type|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:



Multiple issues without Template:Multiple issues
We do not support the case where the multiple issues template is not used. If several issues are adjacent to one another but are not wrapped in the multiple issues template, then there are potential problems with the display - in particular with icon display. See phab:T202349 for further discussion.

節の問題
このプロジェクトのインプリメンテーション（HTMLテンプレートを使った抽出）は当初、個別の節の問題は表示しない予定です. 初期の変更が終了した時点で、この課題を再度、検討することになります.

Potential future improvements
Once we put these styles in place, we would like to look at being able to provide them in a more centralized way by delivering mobile-friendly CSS using the TemplateStyles extension. This will allow us to cover a larger percentage of templates with specialized treatment and give more power to template editors to select the specialized treatment for each template.

ページの問題点の様式ー最初の更新
閲読者チームはページの問題モダールに関し手始めに以下の変更を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改良のデモ画像はこちら.

記事用テンプレートに構造化された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:記事メッセージボックスというカテゴリに属するテンプレートをすべてパーシングします. 次にそれらのテンプレートをHTMLテーブルにまとめCSSを付与して、縮小化できるものとできないものを選別します. そこから縮小版テンプレートの一覧も取り出すことができます.

免責事項

この方法は「ページの問題」すべてをまとめたカテゴリのある言語版で有効です. 言語によってはもっと特化したカテゴリはあっても、一般化したカテゴリがあるとは限りません. そこでこの報告の対象は、上位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