(21日目) Interactive shell for blockdiag の紹介

今日は blockdiag の強力なパートナーである interactive shell for blockdiag の紹介をします。
とはいえ、interactive shell は blockdiag のデモとしていろんな所でお見せしているので、
ご存じの方が多いかもしれません。

もともと interactive shell は blockdiag のデモ用に開発されました。
blockdiag を作った当初、僕はいろんなイベントで発表をしまくってきたのですが、
短い発表時間の中で効果的にデモするためにはコマンドラインで編集していては時間が足りなくなります。
そのために、ブラウザ上で定義を書くと図をすぐさま見ることのできる interactive shell を作ったのです。
interactive shell は生成された図をすぐ見ることができるので、インパクトのあるデモができたのではないでしょうか :-)

もともとはデモ用に開発された interactive shell ですが、定義を書きながら実際の図を見られることもあって、
自分で blockdiag の図を作るときも使うようになりました。
今では blockdiag にとって重要なツールのひとつになっています。

interactive shell の仕組み

interactive shell は PythonJavaScript で作られています。
画像生成 APIPython で提供し、それ以外を JavaScript で実装しています。
全体のフローはこんな感じになっています。

Python では画像の生成だけを処理しています。
図の生成自体は blockdiag を呼び出しているので、
interactive shell として書いている Python のコードはほとんどありません。
フレームワークとして Flask を利用して作成されており、
API へのリクエストを blockdiag に渡して、その結果(SVG画像)を json 形式にラップしているだけです。

Google AppEngine 上で動いているのですが、まったく AppEngine の機能を使っていないので、
他の環境でも問題なく動かすことができます(dotcloud などでも動作が確認されています)。


JavaScript の部分はテキストエリアの変更を検知して、
サーバー側の API を呼び出すというシンプルな Ajax です。
ちょっとだけ複雑なことをしている箇所として、permalink の生成を行なっています。

interactive shell では、サーバー側でデータの保管を行いたくないという理由*1から、
ユーザー間で図を共有するための方法として URL パラメータ部を使用しています。
permalink として生成される URL には図の定義がすべて納められています。
図の定義は一度 JavaScript で圧縮を行った後、base64 エンコードされてパラメータ化しています。
なお、ページを表示する際に URL のパラメータを解釈する部分も JavaScript で書かれています。

interactive shell の既知の問題としては、

  • URL が非常に長くなってしまう
  • 図が非常に大きく、URL 長が長くなりすぎるとエラーが発生する

などがあります。ただ、いまのところこれは interactive shell の制約として考えています。
どちらも、ユーザーからのリクエストが多くなってから対応すべきかどうか考えるつもりです。

interactive shell live!!

interactive shell のもうひとつの形として実装されているのが、
@hekyou さんが開発されている interactive shell live!! です。

interactive shell live!! は blockdiag の図を複数人で同時に編集するというアイディアを元に
実験的に実装された Web アプリです。
interactive shell を改造し、図の定義を node.js を介してブラウザ間で共有するという方法で実現しているとのことです。

現時点では編集しているとカーソル位置が変わってしまったり、
反映されるタイミングがずれていたりといくつか気になる点があるのですが、
interactive shell の可能性のひとつとして面白い試みが進められています。

僕が複数人と話しながら図を書く場合はプロジェクタで映しながら、というスタイルが多いので、
この interactive shell live!! を使うことでまた違った進め方ができそうです。

その他の編集支援ツール

interactive shell は図のエディタとしてかんたんに使うことができますが、
普段使い慣れたエディタを使って定義を書きたいという方が多いかと思います。

いろんな方が blockdiag 用の設定を公開されているので
こちらで把握しているものをご紹介したいと思います。

まとめ

blockdiag シリーズの強力なパートナーとして interactive shell が実装されています。

blockdiag の定義ファイルはなるべくシンプルにしているため、
出力結果は予想しやすいのではないかと思いますが、
やはり編集しながらリアルタイムに図を見ることのできる仕組みはありがたいものです。
interactive shell や各エディタの拡張を利用してかんたんに図を書いて行きましょう :-)

*1:blockdiag で書く情報は設計情報が多いと思われるので、サーバー側で保存してしまうと扱いが面倒だ>という側面もあります。