Eclipseをsvgエディタとして利用する

いろいろ調べてみたけれど，フリーのエディタでsvgを手打ちするようなユースケースを想定したものは見つからなかった．そこでEclipseをその代用とするための設定についてまとめてみました．（個人的なメモとも言う）
つーか，Eclipseなんて大物を使うってのもなんだか間違ってる気がするんですが，ubuntu上で探すのは骨なんです…

2014/02/12追記
svgエディタとして探していたから見つからなかったわけで，html5エディタで探していたら良さげなツールを見つけました．
あんまり良い代物ではなかった…

Aptana studio3
http://www.aptana.com/products/studio3

本記事と同様にeclipseをベースとしたオープンソースのweb統合開発環境で，インラインsvgをも編集することが可能なようです．
なお，プログラムの配布形態としては

• eclipse込みのスタンドアロン形式
• eclipse向けのプラグイン形式

の2種類から選べますが，既に別の用途でeclipseを利用している場合はスタンドアロン形式を選択したほうが良いでしょう．筆者はプラグイン形式で導入してしまったため既存の環境設定と干渉し，却って使いにくくなってしまいました（トホホ…）

なお下記のdtdを利用した方法はsvg2を目前として今後使えなくなる事が判っているため，参考程度に考えてください．
どうやらsvgサポートは限定的で属性のリストアップまではサポートしていないようです（エラーとなる）．

はじめに

svgをグラフィカルに編集するツールにはillustratorをはじめ有償・無償を問わず様々なものがあるのですが，これを手で編集するとなるといきなり選択候補が狭まり，割と愕然とすることになります．「無いのなら作っちゃいなよyou!」とも言えるんですが，できればなるべく楽をしたいところ．そこで今回はjavaの統合開発環境として有名なEclipse上にsvg編集環境を整えることとしました．

ところで今回模索したsvgエディタに求めた条件としては下記のものがあります．

• 無償で利用できること
• 要素名や属性名・属性値の自動挿入が出来るとすげー便利
• svgのエラーチェックが出来るとかなり便利
• svgのライブプレビューなぞができるとちょー嬉しい

実はEclipseをもってしてもこれらの条件を100％満たす事は出来ませんでした．やはりsvg専用の仕組みは独自に用意する必要がありそうです．でもまー何もないよりいいよね！
なおwindows環境だったらもっと他の選択肢があるかと思われますorz…

前提条件

当たり前ですが，svg環境を整える前にシステムにEclipseをインストールしておきましょう．
なお本記事ではシステムにxubuntu13.10を，Eclipseとして3.8.1使っています．
またpleiadesを使ってEclipseのインターフェースを日本語化していますので，未導入の環境では内容を適宜読み替えてください．

方針

Eclipseのもつxmlファイル編集機能を使う．

• svgのDTDを登録しておくことで要素名，属性名，属性値のリストアップが可能となる．
• xmlの文法チェック機構を使ってsvgの記述ミスを洗い出せる．
• 内蔵webブラウザによるプレビューが可能となる．

と，一応ひと通りほしい機能は揃う．
但し難点もちらほらと在るので，それについては後述します．

導入手順

大体こんな感じで．既に設定済みなら跳ばしてください．

1. Eclipse XMLエディターの導入
2. ファイル関連付けの追加
3. コンテンツタイプの関連付けの追加
4. XMLカタログへのDTDの追加
5. テンプレートの追加

(1) Eclipse XMLエディターの導入

Eclipseを起動し，「ヘルプ→新規ソフトウェアのインストール」を選択する．

 作業対象を「--すべての使用可能なサイト--」とし，ツールリストから「Eclipse XML エディターおよびツール」にチェックを入れ，「次へ」をクリックする．

 後は道なりにダイアログを進んでインストールを完了する．

この後Eclipseを再起動する．

 (2)ファイル関連付けの追加

「ウィンドウ→設定」を選択する．

左ツリーから「一般→エディター→ファイルの関連付け」を選択し，「追加」をクリックする．

「*.svg」と入力し「ok」をクリックする．

引き続き「関連付けられたエディター」にて「追加」をクリックする．

「エディターの選択」から「xmlエディター」を選択して「ok」をクリックする．

先ほどと同様にして「Webブラウザー」を追加する．

(3)コンテンツタイプの関連付けを追加 

(2)と同様に左ツリーから「一般→コンテンツタイプ」を選択し，右ツリーのコンテンツタイプから「テキスト→xml」を選択すし，「追加」をクリックする．

「*.svg」と入力し「ok」をクリックする．

(4)XMLカタログへのDTDの追加

左ツリーから「XML→XMLカタログ」を選択し，「追加」 をクリックする．

ロケーションに
「http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat.dtd」
鍵のタイプに「パブリックID」
キーに
「-//W3C//DTD SVG 1.1//EN」
と入力し「ok」をクリックする．

(5)テンプレートの追加

※下記の設定の他にも必要に応じて適宜追加しておくと良いでしょう．
左ツリーより「XML→XMLファイル→エディター→テンプレート」を選択し，「新規」をクリックする．

名前，説明の内容を適宜入力し，パターンに下記のようなsvgのテンプレート記述を設定して「ok」をクリックする．

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>

これで作業は終わりです．

簡単な使い方

それでは大体どんな感じになるか見てみましょう．

svgの新規作成

プロジェクトにファイルを追加します．
※予めプロジェクトを作っておきましょう．

このままでは中身が空なので，「編集→コンテンツ・アシスト」を選択する．

すると，先ほど「(5)テンプレートの追加」で行った内容が表示されるのでそれを選択（ダブルクリック）する．

すると，svgのひな形が自動入力される．

コードの入力補助

エディタ上で「alt+/」キーを入力することで，要素のリスト・属性のリスト・属性値のリストが表示される．

svgのプレビュー

ファイル一覧から「次で開く→Webブラウザー」を選択することで内蔵ブラウザでsvgを表示することが出来る．
※大体webkitエンジンを使ってる？
※外部ブラウザを利用することも出来る．

エラーチェック

必須属性が未設定だった場合などはエラー部に下線が表示される．
また右クリックメニューから「検証」を行うことでエラー箇所を明示することも出来る．

制限事項

このように割と完璧っぽい動作に見えますが，次のような問題点もあります．

• 上記の入力チェックを行うにはsvgファイル中にDTD記述が必要となる．
  DTD自体非推奨であり，既存のsvgファイルにはDTD記述そのものが存在しない事のほうが多いかも．
  ※因みにEclipseではxmlスキーマ（xsdファイル）による入力チェックもサポートしているようですが，残念ながらsvg1.1に対応するxsdは存在しないようです．（コレができれば名前空間指定のみでデバッグが出来るんですが）
• xlink:href属性の参照先等がリストアップされることはない．
  まあコレは仕方ないかも．
• d属性とか特殊なフォーマットで記述すべき部分の入力サポートが無い．
  まあコレはテンプレートを自作すれば良いか…
• style要素やscript要素のデバック等は出来ないかも．
  外部ファイルにして別のツールで編集すればよいか．
• html5のインラインsvgどうするよ?
  はぁ，どうすっぺかね?

まぁ， 素のテキストエディタでゴリゴリ記述するよりかはなんぼか効率が良いかと思います．
「あーあの属性値って大文字だっけ小文字だっけ」と悩む必要がなくなりますし．

以上，覚書でした．

おまけ

xhtml+svgのミックス文書（つまりhtml5の前身となったxhtmlでのインラインsvg）であれば，下記仕様のdtdファイルを読み込ませることでxhtml，svg，（及びmathml）の両方の要素について入力補完を行うことが可能になります．
（ちょっとsvgの仕様が古いのですが）

An XHTML + MathML + SVG Profile
http://www.w3.org/TR/XHTMLplusMathMLplusSVG/

じゃーこれで（xhtml限定なるも）インラインsvgも完璧じゃんと言いたかったのですが…ここで初めてdtdがレガシーな仕様であることが露呈します．

• svgの名前空間接頭辞「svg:」 を省くことが出来ない．

これはdtdでsvg文書を定義する際の要素名が「svg:***」と言った形式で固定されているのが原因です．なるほど，これがdtdがxmlの名前空間仕様と食い合わせが悪い原因なんだねと納得した次第でした．