MediaWiki

Extension:Graph

This page is a translated version of the page Extension:Graph and the translation is 98% complete.
Languages:
MediaWiki 拡張機能マニュアル
OOjs UI icon advanced-invert.svg
Graph
リリースの状態: 安定
実装 タグ , ContentHandler
説明 データ駆動グラフ
作者
MediaWiki >= 1.40.0
ライセンス MIT ライセンス
ダウンロード
拡張機能をダウンロード
Git [?]:
パラメーター
  • $wgGraphDefaultVegaVer
  • $wgGraphAllowedDomains
使用するフック
Quarterly downloads 164 (Ranked 62nd)
Public wikis using 960 (Ranked 261st)
translatewiki.net で翻訳を利用できる場合は、Graph 拡張機能の翻訳にご協力ください
問題点 未解決のタスク · バグを報告

Graph (グラフ) 拡張機能は、‎<graph>タグでデータの画像化をJSONで記述しレンダリングします。棒グラフ、円グラフ、タイムテーブル（年表）やヒストグラム（demo）をVega宣言型プログラミングで生成します。

全般的な情報

Graph 拡張機能は強力な Vega ベースのグラフをウィキページに加えます。グラフは対話的なものにできます。

もっとも簡便にグラフを追加するには、既存の{{Graph:Chart}}などのテンプレートを使います。 これらのテンプレートはVegaの複雑さを見ずに済みます。 熟練の利用者ならグラフ用サンドボックスでグラフが作成できます。 グラフのサンドボックスでは、JSON に加えてウィキのテンプレート構文を使用できます。 The extension integrates with VisualEditor, providing a simple tool/wizard which generates basic graphs, by entering values directly to the editor.

有用なリンク

インストール

  • JsonConfig 拡張機能が必要
  • ダウンロードして、ファイルをextensions/フォルダー内のGraphという名前のディレクトリ内に配置します。
  • 以下のコードを LocalSettings.php の末尾に追加します: 
    wfLoadExtension( 'Graph' );
  •   完了 – ウィキの「Special:Version」に移動して、拡張機能が正しくインストールされたことを確認します。


Vagrant installation:

  • Vagrant を使用している場合は、vagrant roles enable graph --provisionでインストールしてください。

追加設定のセットアップ

en.wikiのような本番環境を複製したい場合、以下のステップを実行する必要があります。

ルール (Vagrantを使用することにした場合のみ)

  • graphsロールを有効にする
  • scribuntoロールを有効にする
  • imagemapロールを有効にする

テンプレートとLuaモジュール

表の例

サンプルや使用法の裏技はデモのページ を参照してください。

利用者定義のフォールバック

クライアント サイドのレンダリングを使用する場合、noscript 利用者に静的なフォールバック画像を提供するためにウィキメディア コモンズが使用できます。 これは、サーバーサイドレンダリングを提供するために新しいサービスが実装されるまでの一時的な対処です。

利用者は最初に静的なグラフをウィキメディア コモンズにアップロードする必要があります。

フォールバック画像には2つの変数 fallback と fallbackWidth があります。

fallback はWikimedia Commonsのファイル名に対応します。

fallbackWidth はフォールバック画像の幅のピクセル数です。

これらの変数は以下の方法でグラフを通して渡されます。 

<graph fallback="Graph test seddon.png" fallbackWidth=450>

Module:Graphのようなluaモジュールを使用する場合、これらの変数はタグ関数で提供することができます。 Template:Graph:Chart を適応させると、こんな感じになります。 

{{safesubst:#tag:graph|{{safesubst:#invoke:Graph|chartWrapper}} | fallback = {{{fallback|''}}} |  fallbackWidth= {{{fallbackWidth|''}}} }}

そして、次のような形でテンプレートに活用されることになる。 

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y
 |type=rect|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9|fallback=Graph test seddon.png|fallbackWidth=450}}

fallbackWidth が提供されず、画像が定義されている場合、拡張機能は提供されたグラフ幅から幅を導きます。 その理由は、レンダリング画像の幅と実際の画像の幅に差が生じることが多いからです。 

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y
 |type=rect|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9|fallback=Graph test seddon.png}}

外部データ

HTTP(S)を使ってグラフのデータを取得することはできません。 代わりにwikiraw:やwikiapi:等、固有のウィキ・プロトコルを使用してください。

Graph 拡張機能は GraphAllowedDomains 設定を用いてプロトコルの解決を設定します: Note that because queries rely on the structure of wikibase items, they may suddenly stop working if the underlying data is edited and changes, as it may yield incomplete, empty or invalid data that can't be used to create a graph. In these cases the graph will end up empty (see phab:T168601). 

$wgGraphAllowedDomains = [
    # http + httpsキーで外部のデータアクセスが認められるドメインをすべて一覧にします。
    # ここに列記したドメインはサブドメインもすべて容認します。
    # 〈wikiraw〉のような特製のプロトコルは、どのプロトコルを選ぶべきか調べるために用います。
    # こうするとwikiraw://en.wikipedia.org/Pageはhttps://en.wikipedia.org/w/api.php?action=query&titles=Page&...を呼び出すapiのリクエストになる
    'https' => [ 'wikipedia.org', 'wikimedia.org', ... ],
    'http' => [ 'wmflabs.org', ... ],
    
    # wikirawuploadに用いることが承認されたドメイン一覧: プロトコルにアクセス。
    # 完全一致のみ。サブドメインは対象外。
    'wikirawupload' => [ 'upload.wikimedia.org' ],
    
    # wikirawuploadと同値だがウィキデータSparqlクエリ用
    'wikidatasparql' => [ 'query.wikidata.org' ],
];

既知のバグと制限

  • phab:tag/graph - Graph 拡張機能のバグ
  • ISO 8601タイムスケールの実装に失敗。したがってタイムラインではグレゴリオ暦のみ使用可能。


内部リンク

解析をすると、Graph 拡張機能はテンプレートのパラメーター/式をすべて展開し、グラフのハッシュを識別子に使うと完全なグラフ定義を ParserOutput ページのプロパティとして保存します。

The graph extension adds HTML to the page where graphs should go, a ‎<div> with a graph-id as the attribute. サンプル: 

<div class="mw-graph" data-graph-id="72edc224f0a10b343c1e84f63dbfc97cac9bc957">
</div>

Graph 拡張機能は ResourceLoader の JavaScript モジュールとして Vega ライブラリを含むページに ext.graph を呼び込み、グラフ定義の JSON を通称 wgGraphSpecs と呼ばれる JavaScript mediawiki.config 変数に組み込みます。 このモジュールがクライアントのブラウザに読み込まれると、Vega JavaScriptライブラリは‎<div>を個別のHTMLキャンバスに取り込み、その中にグラフを描画すると静止画像と置き換えます。

セキュリティ機能

信用できないデータソース参照を許可しないように、‎<graph> を設定できます（例: ウィキメディアではウィキメディアのサイト内のデータのみ許可）。

ライセンス

VegaライブラリはBSDライセンスの修正版容認の範囲で使用できるものとして配布されます。

“ BSDライセンスの複写に（容認できる範囲の）微調整を加えたようにも見えます。 使用に際して問題はありませんが、このような変更をライセンスに加えないと理想的です。 ライセンスがオープンソースの使用について安全かどうかという（このような）混乱を防ぐためにも、ライセンス条件にこのような改変を行うことは好ましくありません。 ”

—Stephen LaPorte

設定

wgGraphAllowedDomains

See the section on external data.

その他の変数

  • - wgGraphUrlBlacklist 変数が 787d64a11 で除去されました
  • - wgGraphDataDomains が e0813f85a で除去されました。 代わりに wgGraphAllowedDomains を使用してください。
  • - wgGraphUserServiceAlways が b735f63ff4b で除去されました。
  • - wgGraphIsTrusted が cf80f43e15 で除去されました。
  • - $wgGraphImgServiceUrl が廃止予定になりました

グラフ名前空間の有効化

JsonConfig を設定すると、グラフの設定を単独ページとしてそれぞれの名前空間に保管できます。 

// See https://www.mediawiki.org/wiki/Extension:JsonConfig
$wgJsonConfigModels['graph.jsonconfig'] = 'graph\Content';
$wgJsonConfigs['graph.jsonconfig'] = array(
	'namespace' => <PICK-A-NS-NUMBER>,
	'nsName' => 'Graph',
	'isLocal' => true,
);

ビジュアルエディターのモジュール

2015年の夏以降、Graph 拡張機能にはビジュアルエディターを使ってグラフを編集するモジュール (ext.graph.VisualEditor) が付与されました。

このモジュールは「Google Summer of Code 2015」プロジェクトの成果です。 詳細は phab:T89287 を参照してください。

 

利用者はこのモジュールを使い、外部の拡張機能ノードに頼らずとも、VisualEditor内でグラフを見ることができます。 ユーザーはさらに、グラフの形式、データやパディングを編集するダイアログを開くことができます。 ユーザーインタフェース（UI）ではさらに、ウィキテキスト・エディターに切り替えなくてもビジュアルエディター上でグラフの生JSON定義を直接、編集できます。熟練したユーザーなら、これを使ってUIのサポートしない設定の微調整も可能です。

この第1ステップは、ビジュアルエディター内でどのようなグラフ編集ができるかという試金石になり、またモジュールとして改善したり伸展する方法が十分にあります。

壊れたグラフのトラブルシューティング

グラフを含むエラーは、開発者コンソールに記録されます。

Error: Bad constructor arguments (phab:T277906)

修正方法 filepath:Earthmap1000x500compac.jpg を filepath:Earthmap1000x500.jpg に置き換える。

例.

TypeError: undefined is not an object (evaluating 'datum.firstYear.value')

To fix: Make sure you have not set default as null

Example.

関連項目

  • Extension:GraphViz — エッジ（枝）で結ばれた複数のノード（頂点）のグラフを表示（このページで解説した拡張機能の表形式ではない）
  • Plotly — オープンソースのJavaScriptグラフ作成ライブラリ（3D作表も可能）
  • D3 — データ駆動型ドキュメント
Retrieved from "https://www.mediawiki.org/w/index.php?title=Extension:Graph/ja&oldid=5683497"