DokuWiki

It's better when it's simple

ユーザ用ツール

サイト用ツール


サイドバー

この翻訳は元のページよりも更新日が古く、内容が古い可能性があります。 変更点を参照して下さい。
このページの翻訳?:

DokuWiki について知る

開発

法人利用

我々のコミュニティ


FacebookTwitterや他のソーシャル・ネットワークからフォローしてください。

ja:plugin:sketchcanvas

SketchCanvas プラグイン

互換性のある DokuWiki バージョン

  • 2018-04-22 "Greebo" 不明
  • 2017-02-19 "Frusterick Manners" 不明
  • 2016-06-26 "Elenor Of Tsort" 不明
  • 2015-08-10 "Detritus" 確認済

plugin DokuWiki の中に埋め込んで SketchCanvas 文書を書き込みます。

最終更新日
2015-09-12
種類
Syntax, Action
リポジトリ
ソース
作者 Masahiro Sakuta

このプラグインは、Wiki 文書にスケッチを埋め込むことができます。 ブラウザ上の埋込み GUI エディタで各スケッチを編集できます。

スケッチは、非常に単純な形式で書式化されています。

インストール

プラグイン管理とプラグインの最新バージョンを指す上記のダウンロード URL を使用して、プラグインをインストールします。 手動でプラグインをインストールする方法はプラグインを参照してください。

前提条件

  • ブラウザが HTML5 のキャンバスに対応している必要があります。

HTML5 のキャンバスに対応していない古いブラウザで閲覧した場合、スケッチは表示されません。 1)

例・使用方法

動きを確かめるのには、ここ のデモサイトを見るのが最適です。

スケッチは <skcanvas> タグで囲まれます。

<skcanvas> タグが存在すると、タグの代わりにスケッチが画像リンクのように描画され、その下に編集ボタンが表示されます。

新しいスケッチを挿入するために、新しいボタンが編集ページのツールバーに追加されます。 (あなたがテーブル編集プラグインを使用している場合、ほとんど同じようように動作します。)

簡単なスケッチは、スケッチのサイズ情報とメタ要素で構成されます:

<skcanvas>
- type: meta
  size: [200, 100]
</skcanvas>

もう少し複雑なソース:

<skcanvas>
- type: meta
  size: [200, 100]
- type: rect
  points: '35,25:137,64'
- type: text
  points: '45,45'
  text: Example
- type: arrow
  points: '14,46:30,46'
- type: arrow
  points: '142,46:174,46'
</skcanvas>

このような図の結果になります:

パス

パスは複雑なスケッチ線をカバーする多目的なツールです。

  • パスは線分の集合としても使えますし、スプライン曲線にもなります。
  • パスはどちらか片方あるいは両方の終端に矢印を描画することができます。

下図は実際にレンダリングして画像に変換したものです。 (ソース省略)

ページ編集

スケッチを使用するための構文を覚えておく必要はありません。 各スケッチの下に編集ボタンがあります。

編集ボタンを押すと、編集ページが表示されます。

新規スケッチ

新規スケッチを文書に追加したいときは、編集モードのツールバーから「新規スケッチ」ボタンを押してください。 編集ページにて < skcanvas > タグ全体を選択してからボタンを押すことで、既存のスケッチを編集することもできます。

PDFへ出力

このプラグインは dw2pdf プラグインと協調して、埋め込まれた SketchCnavas ドキュメントを PDF に出力することができます。 この機能をキャンバス内の文字列要素と一緒に使うには、 NotoSansCJKjp-Regular.otf というフォントファイルを https://noto-website.storage.googleapis.com/pkgs/NotoSansCJKJP-hinted.zip からダウンロードし、サーバの phplib/ サブディレクトリに置いておく必要があります。

構文

SketchCanvas 構文は YAML 文書です。 <skcanvas> と </skcanvas> との間のすべての文書は、有効な YAML 文書でなければなりません。

構文を覚える必要はありませんが、完全な構文の定義は syntax にあります。

設定

まだ設定オプションはありません。

変更履歴

動機

Wiki システムが、誰もが参加できる知識ベースであるのであれば、誰もがすべての内容を容易に編集できなければなりません。 十分に簡単ではない場合、文書を書くために結局 MS Word を使用することになります。

テーブルには、とても簡単に編集できるテーブル編集プラグインがありますが、Wiki 文書内にスケッチを含めると未だに扱いにくいです。 Adobe Illustrator・Inkscape・Excelのような気の利いたドローソフトを持っている場合、ラスター化した画像ファイルを添付することだけは可能です。 しかし、ソースを別に提供しない限り、別の人が編集することはできません。 というわけで、私は、要件を満たしているスケッチの書式を作ることにしました:

  • (HTML5 準拠の場合)ブラウザ単独で編集可能である必要があります。
  • スケッチ画像と同様にソースが提供されます。
  • 人にも読むことができ、テキスト差分で比較が簡単な書式です。

SVG で同様のことができる SVG-Edit plugin があります。 わざわざ車輪を再発明する必要があるでしょうか?

いくつかの面で SketchCanvas は SVG とは全く違います:

  • 外部画像ファイルではなくて Wiki 文書内に埋め込むことができます。
  • 簡単で人間にも読み易い構文です。
  • 構文は比較と意味のある差分作成が容易です。
  • ソーステキストが複雑になり過ぎないように、機能を意図的に思い切り制限します。

主な目的は、アイデア・概念を素早くスケッチすることであり、芸術的な絵画をすることではありません。

予定

青色の領域は、計画済ですが実装されていません。 ところで、この画像自体が SketchCanvas で作成されています。

既知のバグと問題

  • 編集ページに表示されるツールバーが役に立たない。

TODO・要望一覧

  • 構成要素の種類数を増やす。
1)
ラスター化した画像を表示するためにサーバー側で画像生成させることも可能ですが、大規模な開発が必要です。 仮にそうなっても、古いブラウザー上で編集作業はできません。
ja/plugin/sketchcanvas.txt · 最終更新: 2015-09-12 16:20 by msakuta