Extension:Graph
警告: ここで記述しているコードまたは設定には、セキュリティ上の重大なリスクがあります。 サイトの管理者へ: このセキュリティ上の問題が解決されるまで、これを使用しないように勧告します。 問題点: 利用者からの入力をブラウザーへ直接出力するため、クロスサイト スクリプティング攻撃に対して脆弱です。 これにより利用者アカウントが乗っ取られるなどの問題点が発生するおそれがあります。 See タスク T336556 for more information. 解決法: strictly validate user input and/or apply escaping to all characters that have a special meaning in HTML |
現在、この拡張機能は積極的な保守が行われていません! それでも機能する可能性はありますが、バグ報告や機能の要望は無視される可能性が高くなります。 この拡張機能の開発や保守の作業を引き受けることに興味がある場合は、リポジトリの所有権を申請できます。 礼儀として、作者に問い合わせることをお勧めします。 保守を引き継いだ場合、このテンプレートは除去すべきです。また、拡張機能ページの {{Extension }} 基礎情報ボックス内のリストにあなたの名前を保守担当者として追加してください。 |
Graph リリースの状態: 保守されていない |
|
---|---|
実装 | タグ , ContentHandler |
説明 | データ駆動グラフ |
作者 | |
MediaWiki | >= 1.43 |
ライセンス | MIT ライセンス |
ダウンロード | |
|
|
四半期ごとのダウンロード数 | 30 (Ranked 105th) |
使用中の公開ウィキ | 884 (Ranked 281st) |
translatewiki.net で翻訳を利用できる場合は、Graph 拡張機能の翻訳にご協力ください | |
問題点 | 未解決のタスク · バグを報告 |
Graph (グラフ) 拡張機能は、<graph>
タグでデータの画像化をJSONで記述しレンダリングします。棒グラフ、円グラフ、タイムテーブル(年表)やヒストグラム(demo)をVega宣言型プログラミングで生成します。
全般的な情報
Graph 拡張機能は強力な Vega ベースのグラフをウィキページに加えます。 グラフは対話的なものにできます。
もっとも簡便にグラフを追加するには、既存の{{Graph:Chart}}などのテンプレートを使います。 これらのテンプレートはVegaの複雑さを見ずに済みます。 熟練の利用者ならグラフ用サンドボックスでグラフが作成できます。 グラフのサンドボックスでは、JSON に加えてウィキのテンプレート構文を使用できます。 この拡張機能はVisualEditorと統合されており、エディタに直接値を入力することで基本的なグラフを生成するシンプルなツール/ウィザードを提供します。
有用なリンク
- Vega 2ドキュメント – nyurik/vega/wiki 上の復元されたVega 2ドキュメントページ。
- Guide - ウィキでグラフを使う方法の標準的な推奨。
- Interactive Tutorial - ゼロから複雑でインタラクティブなグラフ完成まで、段階的に解説する説明書。
- デモページ - 多くのサンプルと使い方のトリックを紹介します。
- TechTalk 動画 - ウィキメディア財団技術部門の議論。Graph 拡張機能を取上げ、Lyra エディターを分かりやすくデモしている (labsにも合わせてインストールする)。
- 興味があれば、Vegaの将来的な機能の動画も参照できる(Jeffrey Heerの基調講演)。
- 開発者のための Vega 解説 - Vegaのリソースを探すならこちらが最適。
- Vega 2.0 への移行
- 対話的な Vega の紹介動画
インストール
- 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のような本番環境を複製したい場合、以下のステップを実行する必要があります。
- Install Scribunto , Imagemap and TemplateStyles , and enable SVG uploads
- If you use vagrant, you can use
vagrant roles enable --provision scribunto imagemap templatestyles svg
- If you use vagrant, you can use
- Import mediawiki.org's Module:Graph, Module:Graph/doc, Template:Nowrap and Template:Nowrap/styles.css (export link)
- Import enwiki's Module:Chart and Module:Chart/Default colors (export link)
- Import the file File:Circle_frame.svg
Debugging graphs and porting graphs from Vega 2 to Vega 5
A sandbox is provided at Special:GraphSandbox that works similar to the Vega graph editor. The MediaWiki tool includes compatibility code that maps older Vega schemas to the currently enabled version. Inserting an old schema in the main text area will print a modified and modernized schema underneath the graph where possible.
Similar to vega.github.io/editor, the Vega object can be inspected via the VEGA_DEBUG
JavaScript global.
See Vega's debugging guide on how to use it.
Migrating schemas from older Vega versions
Previously Graph supported Vega 2. You can paste the JSON of graphs in http://vega.github.io/vega-editor/?mode=vega to see how they previously rendered for comparison with Vega 5.
Special:GraphSandbox (for latest code see the beta cluster version of the sandbox) can be used to map older schemas to new schemas. Copy the old schema into the main textarea and the updated schema will appear in the text area below the graph. Copy the new schema into your code.
表の例
サンプルや使用法の裏技はデモのページ を参照してください。
利用者定義のフォールバック
クライアント サイドのレンダリングを使用する場合、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' ],
];
内部リンク
解析をすると、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.
ビジュアルエディターのモジュール
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
関連項目
- Diagram extensions
- Plotly — オープンソースのJavaScriptグラフ作成ライブラリ(3D作表も可能)
- D3 — データ駆動型ドキュメント
この拡張機能は以下のウィキ ファーム/ウィキ ホスト/パッケージに含まれています: これは正式な一覧ではありません。 一部のウィキ ファーム/ウィキ ホスト/パッケージは、ここに記載されていなくてもこの拡張機能を含んでいる場合があります。 必ずご利用のウィキ ファーム、ウィキ ホスト、バンドルで確認してください。 |
- Pages with disabled graphs
- Extensions with XSS vulnerabilities/ja
- Unmaintained extensions/ja
- Tag extensions/ja
- ContentHandler extensions/ja
- MIT licensed extensions/ja
- Extensions in Wikimedia version control/ja
- OutputPageParserOutput extensions/ja
- ParserFirstCallInit extensions/ja
- All extensions/ja
- Extensions included in Canasta/ja
- Extensions included in WikiForge/ja
- Graph extensions/ja
- Extensions with VisualEditor support/ja
- Discovery/ja