Emacsでスムーズに図形編集ができるようになるcacoo.elを作ってみた

emacs web

Cacoo(http://cacoo.com/)というWeb上の図形描画ツールを、Emacsからシームレスに使える cacoo.el を作りました。
Emacsユーザーにとっては他のWordやExcelなどのアプリを超える文書作成環境になるのではないかと、勝手に妄想しています。

Cacooについては以下のサイトを見てください。自分はCacooで方眼紙Excelをやめることが出来ました。

インストール方法

必要なものは、Emacs22以上（たぶん）、ImageMagick、wgetです。Mac, Linuxだとあまり問題ないと思います。Windowsの場合は、Cygwinなどと組み合わせることになるかと思いますが、今のところconvertのバージョンが古いとpngの透過色をうまく扱えない問題があります。

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

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

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

あとは、以下のような呼び出しの内容を .emacs などに書きます。

(require 'cacoo)
(global-set-key (kbd "M--") 'toggle-cacoo-minor-mode)

この場合、Altキーを押しながら「-(ハイフン)」を押すとOn/Offが切り替わるようになります。

使い方流れ

まず、Cacooにログインして絵を描きます。

この図を公開の設定で保存して右上の「戻る」ボタンを押すと詳細画面に来ます。（2010/05/08 追記）

ここで右上の「リンク」をクリックすると画像のURLが出ますので、クリックしてクリップボードにコピーします。

今度はEmacs上での作業です。Cacooモードを有効にします（上の設定であれば、Altキーを押しながらハイフンを押す）。有効になるとモードラインに「Cacoo」と出てきます。

ここで「C-c , y」と打つか、クリップボードのテキストを貼り付けて手で以下のように入力します。

[img:https://cacoo.com/diagrams/6m4ATG1ddlUiHPqd-0FAF7.png]

最後に「C-c , D」と入力してしばらく待つとテキストが図に置き換わります。

またテキストに戻したい場合は、もう一度「Alt+-」でCacooモードをOffにするか、「C-c , T」でテキストに戻ります。

図をクリックするとCacooの編集画面が開きますので、すぐに編集できます。編集した図は、「C-c , R」でリロードすることで即座に反映させることが出来ます。

Cacooの絵以外でも、Web上でアクセスできる図であれば大抵表示できます。以下、可能なURLの例です。もちろん編集はできません。

[img:http://example.com/xxx.jpg]
[img:file:///ローカルのファイルへのフルパス]
[img:ローカルのファイルへの相対パス]

以上が簡単な使用の流れです。

活用方法

マイナーモードですのでどのメジャーモードとも組み合わせて使えます。

個人的にはhatenaやwikiの下書きをhowmで書くことが多いのですが、そこで絵を表示させることでイメージを確認しながら書くことができます。特に、スクリーンショットを取るときにCacooが便利です。また、すぐに図を修正できるので、ちょっとした修正でも思いついたときに作業できます。

ソースコードにコメントだけでなく、Cacooの絵を貼ることによってクラス図などの絵をメンテナンス可能な形で貼ることができるようになります。詳細なコメントとしてBacklogなどのBTSやWikiのURLを貼っておくことは良くやっていたのですが、絵がはれるとさらに分かりやすくなると思います。（ただし、Emacsに限りますが。。。）

キーバインド

以下はデフォルトの挙動です。使いやすいようにcacoo-minor-mode-keymapをカスタマイズしてください。

  • バッファ全体に対して
    • C-c , T : バッファのすべての図をテキストに戻す
    • C-c , D : バッファのすべての図を表示する（キャッシュがあればネットワークに接続しない）
    • C-c , R : バッファのすべての図を取得し直す
  • カーソール直後の図に対して
    • C-c , t : テキストに戻す
    • C-c , d : 図を表示する（キャッシュがあればネットワークに接続しない）
    • C-c , r : 図を取得し直して表示する
    • C-c , e : 図の編集画面を表示する
    • C-c , v : 図の詳細画面を表示する
    • C-c , V : ローカルの図を外部ビューアーで開く
  • Cacooの機能に対して
    • C-c , N : 新規図の作成画面をブラウザで開く
    • C-c , l : 図の一覧画面をブラウザで開く
  • ナビゲーション、編集
  • その他
    • C-c , C : キャッシュディレクトリを空にする
    • 図のクリック : 図の編集画面を表示する

動作詳細、カスタマイズなど

図はローカルにキャッシュされます。キャッシュは現在のディレクトリ（バッファが保存されるディレクトリ）のなかの「.cimg」というディレクトリに保存されます。オリジナルの図とリサイズされた図が保存されます。

キャッシュがあればネットワークに接続にいきません。リロードするとキャッシュを消して取りに行きます。リサイズもこのときに行われるので、サイズを変えたいときはリロードしてください。

非同期で取りに行ったり縮小したりするため、Emacsはそれほど固まらないはずだと思います。ただ、あまり賢い制御をしていないため、同一バッファで同一画像は複数回表示することができません。（2010/05/08追記）

convertでエラーが出たり、図の背景が黒くなってしまう場合は、以下の設定を入れてください。convertで新しい設定を使うのを止めて、強引に背景を白く塗りつぶします。（2010/05/08追記）

(setq cacoo:png-background "white")

ブラウザーはEmacsで設定してあるデフォルトブラウザーを使います。うまく開かない場合は browse-url-browser-function 周辺を設定してみてください。

正規表現で図のマークアップを調べます。cacoo:img-regexp, cacoo:img-pattern を変更することで、Wiki記法などにあわせることができます。

キャッシュ用のディレクトリ名は cacoo:img-dir で指定します。いちいちディレクトリ作成で確認が必要なければ、 cacoo:img-dir-ok を t に設定してください。

画像の縮小サイズは cacoo:max-size で指定します。以下のようにスペース区切りで書くことで画像ごとにも指定できます。

[img:file:///xxx/yyy/zzz.png 600]

外部画像ビューアーのプログラムは cacoo:external-viewer で指定します。nilに設定するとEmacsのimage-modeで開こうとします。

自分のところでは、以下のような感じで .emacs に書いています。

(require 'cacoo)
(global-set-key (kbd "M--") 'toggle-cacoo-minor-mode)
(setq cacoo:img-dir-ok t)
(setq cacoo:max-size 450)
(setq cacoo:external-viewer nil)

いろいろ

別のエントリーを書こうとしていて、スクリーンショットや図の編集をしていたのですが、いちいちCacooの画面をブラウザで開くのが面倒になったので作りました。もともと昨年のCacooリリース後から構想はあって、仕様だけはメモしていたので、技術検証だけでわりと早くできました。

似たようなものに、iimageという標準添付のelがあります。これを改造することも考えたのですが、リサイズができなかったので、w3mやその他の画像を扱うelを参考にしていちから作ることにしました。

特に自分は仕事柄オフライン環境も多いため、ローカルにCacooの絵が残ることが重要でした。いままではいちいち名前をつけて保存していました。

個人的にはEmacsとCacooの組み合わせは、かなり破壊力のある環境ではないかなと思っています。Wordやほかの文書作成ツールやドローツールの組み合わせでは、ここまで快適に編集はできなかったです。Cacooの方でAPIとか提供してもらえると、画像の一覧をAnythingで絞り込んだりできたりするので、さらに便利になりそうだなーと思っています。

ということで、ぜひどうぞ。

※今のところ、Windowsなどで古いImageMagick（6.3.x以前など）を使うとエラーになる問題があります。後ほど修正する予定です。修正しました。

（2010/05/07 追記：rubikitchさんにご指摘いただき、キーバインドを修正しました。ありがとうございました。）
（2010/05/08 追記：いくつか機能追加、修正しました。エラーの箇所に色が付いたり、処理状況を表示するようにしました。本文に現状の制限などを追記しました。）