cacoo.el 機能追加：SVG, imgタグ追加

emacs

cacoo.elをバージョンアップしました。前回のエントリーからの追加機能は以下のようです。

  • 画像記法の複数指定
  • はてなフォトライフ記法対応
  • cacoo:browser-function でCacooを起動するブラウザを指定できるように修正
  • SVGプラグイン追加
  • URLにパラメーターが付いていた場合は省くように修正

大きな変更は、画像記法の複数正規表現の追加とブラウザ指定になるとおもいます。

導入と設定

導入方法は前回同様 auto-install.el か手動でいれます。

auto-install.elを持っている人は、以下の式を評価することで取って来れます。

(auto-install-from-url "http://github.com/kiwanami/emacs-cacoo/raw/master/cacoo.el")

手動で入れる場合は、以下のリンク先をload-pathに保存してください。

設定例についてですが、自分のところでは以下のようにしています。

(require 'cacoo) ; cacooを読み込み
(global-set-key (kbd "M--") 'toggle-cacoo-minor-mode) ; Alt+「-」で切り替え
(setq cacoo:img-dir-ok t) ; 画像フォルダは確認無しで作る
(setq cacoo:max-size 450) ; 画像の長辺は450px
(setq cacoo:external-viewer "eog") ; eogというアプリを標準画像ビューアーにする
(setq cacoo:img-regexp 
     '("\\[img:\\(.*\\)\\][^]\n\r]*$" ; imgのデフォルト記法
       "\\[f:\\(.*\\)\\][^]\n\t]*$"   ; はてなフォトライフ記法
       "<img src=[\"']\\(.*\\)[\"'][ ]*\\/>[^\n\t]*$" ; HTMLのimgタグ
       ))
(setq cacoo:img-pattern "<img src=\"%s\" />") ; 貼り付けはimgタグで

そのほかの設定については、cacoo.el の頭のカスタマイズ変数のあたりを参照してください。

活用

hatenaにCacooの画像を貼る

hatenaの下書きでcacooを使う場合、Cacooの画像の直リンクを貼ると便利です。以下のように指定することで、サイズを指定して貼り付けることが出来ます。

<img src="https://cacoo.com/diagrams/7aIJdAKusssLSAFg-23B16.png?width=600" /> ← 横幅600pxに縮小

画像サイズはCacoo側で縮小されます。（CacooはURLでいろいろと画像を制御できるので、Cacooのページのソースを調べるとおもしろいです。）

画像サイズの制限をやめる

大きな画像は cacoo:max-size などのサイズに縮小されます。たまに縮小されると困る場合があると思いますので、 cacoo:max-size を 10000 などの大きなサイズにすると縮小されなくなります。

ImageMagickが無い場合や、画像がおかしくなってしまう場合にも、逃げの手段として使えるかもしれません。

SVG

前回のエントリーで登場したプラグイン機能ですが、テキストで即座に絵を描けるということでついでにSVGに対応してみました。

丁度、スタートアップ SVG (gihyo.jp)にて os0X さんの SVG の入門が始まりました。Emacsとcacoo.elがあれば、以下のように書くことですぐに試すことが出来ます。インラインで表示でき、また「C-c , g」でカーソールが含まれている画像の更新が出来るので、ブラウザで確認するより速いかもしれません。

第2回 SVG実習の「sample3.svg」から引用
[img:SVG sample3.svg]
<?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 width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
    <circle id="C" cx="20" cy="20" r="20" style="fill:red;" />
  </defs>
  <use xlink:href="#C" x="20" y="20" />
  <use xlink:href="#C" x="80" y="80" />
  <use xlink:href="#C" x="140" y="140" />
</svg>
<<<

そのままでは入力支援はありませんが、mumamoとかmmm-modeでXML支援をつければ良い感じになるのではないかと思います。