MediaWiki

Extension:Graph

This page is a translated version of the page Extension:Graph and the translation is 96% complete.
Languages:
MediaWiki 拡張機能マニュアル
Graph
リリースの状態: 保守されていない
実装 タグ , ContentHandler
説明 データ駆動グラフ
作者
MediaWiki >= 1.45
ライセンス MIT ライセンス
ダウンロード
拡張機能をダウンロード
Git [?]:
パラメーター
  • $wgGraphDefaultVegaVer
  • $wgGraphShowInToolbar
  • $wgGraphAllowHttp
  • $wgGraphAllowedDomains
使用するフック
translatewiki.net で翻訳を利用できる場合は、Graph 拡張機能の翻訳にご協力ください
問題点 未解決のタスク · バグを報告

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

This extension is expected to be replaced in part by the Chart extension. Some capabilities may be covered by Extension:EasyTimeline and Extension:Kartographer.

全般的な情報

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

もっとも簡便にグラフを追加するには、既存の{{Graph:Chart}}などのテンプレートを使います。 これらのテンプレートはVegaの複雑さを見ずに済みます。 熟練の利用者ならグラフ用サンドボックスでグラフが作成できます。 グラフのサンドボックスでは、JSON に加えてウィキのテンプレート構文を使用できます。 この拡張機能はVisualEditorと統合されており、エディタに直接値を入力することで基本的なグラフを生成するシンプルなツール/ウィザードを提供します。

有用なリンク

インストール

  • JsonConfig 拡張機能が必要
  • ダウンロードして、ファイルをextensions/フォルダー内のGraphという名前のディレクトリ内に配置します。
    開発者とコード寄稿者は、上記の代わりに以下を使用してGitからインストールします:
    cd extensions/
git clone https://gerrit.wikimedia.org/r/mediawiki/extensions/Graph
  • 以下のコードを LocalSettings.php ファイルの末尾に追加します: 
    wfLoadExtension( 'Graph' );
  •   完了 – ウィキの「Special:Version」に移動して、拡張機能が正しくインストールされたことを確認します。


Vagrantでのインストール:

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

追加設定のセットアップ

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

グラフのデバグ方法、 Vega 2 から Vega 5 へポートするには

Special:GraphSandbox に置いたサンドボックスでは、Vega グラフ編集機能と似た動作をします。 MediaWiki ツールには互換性コードがあり、旧来の Vega スケマを現行の有効なバージョンと紐付けます。 本文の領域に旧版のスケマを加えると、可能な場合はグラフの下に改変して更新済みのスケマを出力します。

Vega のオブジェクトは vega.github.io/editor に似て、VEGA_DEBUG JavaScript global を使った動作確認ができます。 Vega の操作は、デバグのガイドを参照。

Vega の旧版からスケマを取り込む

グラフ機能は従来、Vega 2 に対応。 グラフの JSON は http://vega.github.io/vega-editor/?mode=vega にペーストすると、旧来はどうレンダリングしたかVega 5 と比較できます。

古いスケはを Special:GraphSandbox を使うと（最新のコードは[1]）新しいものに紐づけできます。 古いスケマをメインのテキスト領域にコピーすると、更新済みのスケマをグラフの下の文字エリアに表示。 新しいスケマを使用するコードにコピー。

表の例

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


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

クライアント サイドのレンダリングを使用する場合、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 設定を用いてプロトコルの解決を調整します: 注意点として突然、クエリが動作を停止することがあり、ウィキベース項目の構造に依存するクエリは、基底のデータが編集や変更を受けると不完全か空白あるいは無効なデータを生成してしまい、グラフ作成に使えない事態になるかもしれません。 これらの事例だと、成果のグラフは空白になります（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' ],
];

内部リンク

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

グラフ拡張機能は、そのグラフを置くページ内に HTML を追加して、属性は ‎<div> に graph-id を添えます。 サンプル: 

<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

外部データの見出しを参照（external date）。

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

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

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

 

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

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

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

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

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

修正方法: 既定値が null でない点を確認。

例。

関連項目

  • Diagram extensions
  • Plotly — オープンソースのJavaScriptグラフ作成ライブラリ（3D作表も可能）
  • D3 — データ駆動型ドキュメント
Retrieved from "https://www.mediawiki.org/w/index.php?title=Extension:Graph/ja&oldid=7693394"