1. Sphinx-users.jp
小宮健

2. 自己紹介：小宮 健
Twitter: @tk0miya
 仕事
 (株)タイムインターメディア所属
 テクニカルオフィサ(技術責任者)として活動
 参加コミュニティ
 Sphinx-users.jp
 Python mini hack-a-thon
 Sphinx を中心にツールを開発
 blockdiag シリーズ
 Sphinx 拡張機能の開発
 Googlechart やカレンダー機能
 rst2pdf (コミッタ)

4. → 図作成ツールです。

5. 世にある図作成ツール
 世にある図を作るツール
 Excel (方眼紙エディタ)
 Visio, PowerPoint
 Cacoo
 特徴
 WYSIWYG
 マウスで要素を配置していく
 好きな図が書けるけど、並び替えが大変
 ノードが増えたら、減ったら、移動したら…？

6. 追加/削除が大変
ここに 1 画面追加

7. 追加/削除が大変
１.スキマを作る

8. 追加/削除が大変
２.不要な矢印を消す

9. 追加/削除が大変
３.図形を配置する

10. 追加/削除が大変
４.矢印を調整

11. ずれる

12. ずれる

13. ずれる

14. ずれる

15. ずれる

16. blockdiag シリーズと他のツールの比
較
 Excel 他
 レイアウトは手動で行う
 好きなように並べることができる
 並べないといけない
 blockdiag
 レイアウトは自動的に行われる
 配置のことは考えなくて良い
 好きなようには並べられない
 多くの図形作成ツール(GUI ベース)と異なる考え方
 更新のことを考えて作られた

17. blockdiag シリーズ
 テキストを図に変換するツール群
 blockdiag：ブロック図、画面遷移図、フローチャート
 seqdiag：シーケンス図
 actdiag：アクティビティ図
 nwdiag：ネットワーク図、ラック図
 blockdiag は定義ファイル(テキスト)から画像を生成
する
 レイアウトは自動的に行われる
 増えても減っても適切にレイアウト
 自由に並べ替えたい人には向きません

18. blockdiag の例
 このテキストが…
{
トップページ -> ログイン -> マイペー
ジ;
トップページ -> 商品一覧 -> 商品詳細;
}

19. seqdiag の例
 このテキストが…
{
A => B => C;
}

20. nwdiag の例
 このテキストが…
{
network { web01; web02; }
network { web01; web02; db01; }
}

21. blockdiag：三つのキーワード
 スピード
 構成を書くだけで図が生成される
 配置など余計なことに煩わされない
 メンテナンス性
 自動レイアウトのため並び替えが不要
 モチベーション
 気軽に書いて共有できる
 スピード感があるので楽しい

22.  ドキュメンテーションツールとの連携
 Sphinx
 Redmine
 Trac
 moinmoin
 Mediawiki
 Web API
 既存のドキュメントに対して簡単に図を埋め込める

24. アップデート状況
 odstudy #1 (7/22) からの変化をまとめました
 blockdiag: 0.8.4 → 1.1.0
 actdiag: 0.1.7 → 0.3.0
 seqdiag: 0.3.7 → 0.7.0
 nwdiag: 0.3.0 → 0.7.0
 合計: 1.6.8 → 2.8.0
 大幅アップデート！

25. blockdiag
 クラス機能、プラグイン機能の追加
 属性追加
 シェイプの追加
 大きさ調整
 色まわり
 フォントまわり
 その他
 Hacker news に掲載されました
 http://news.ycombinator.com/item?id=3254588

26. blockdiag
 クラス機能
 属性をまとめて定義しておくことができる
 css の class みたいなもの
class em [color = pink, style = dashed];
A -> B -> C;
A, C [class = em];

27. blockdiag
 プラグイン機能
 autoclass プラグイン
 クラス名に一致したノードに自動的に属性が適用される
class em [color = pink, style = dashed];
plugin autoclass;
A_em -> B -> C_em;

28. blockdiag
 プラグイン機能
 attributes プラグイン：属性を追加できる(Sphinx 向け)
 Sphinx 出力で一覧表に自由項目を追加できる
plugin attributes [filename, hostname];
A -> B -> C;
A [filename = “foo.csv”];
B [hostname = “web001”];

29. blockdiag
 属性追加
 シェイプ追加: square, circle
 グループ形状の追加 (直線グループ)
 ノードごとの大きさ調整可能に

30. blockdiag
 属性追加
 アイコン属性
 太線
 色、フォント切り替え

31. actdiag
 blockdiag で追加された機能のサポート
 actidag としては機能増えてません ><)b

32. seqdiag
 blockdiag で追加された機能のサポート
 オートナンバリング
 エッジラベルの高さ自動調整機能
 失敗シーケンスの追加
 セパレータ追加
 ノート機能

33. seqdiag
 セパレータ追加
 ノート機能
 オートナンバリング
 エッジラベルの高さ自動調整機能
 失敗シーケンスの追加: edge.failed
 blockdiag で追加された機能のサポート

34. nwdiag
 幹線の表現をパイプ状に変更
 ピア接続っぽい文法を追加 (routerA -- serverB)
 blockdiag で追加された機能のサポート
 ラック図に対応 (rackdiag)

35. rackdiag について
 rackdiag は突如開発されたラック図生成ツール
 やっぱりテキストから図を生成
{
8U;
1: UPS [3U]
4: Disk Array [2U]
6: DB サーバ (Master)
7: Web サーバ 1
8: Web サーバ 2
}

36. blockdiag シリーズのわがままドリブ
ン
 Q. なぜラック図なの?
 A. 大学の先輩と合ったときにほしそうだったから。

37. blockdiag シリーズのわがままドリブ
ン
 blockdiag はいろんなわがままによって開発されてま
す
 blockdiag: 仕事で使いたかった (自分)
 seqdiag
 シーケンス図書きたい(師匠)
 あのツールのこの機能がほしい。実装しろ (怖いギー
ク)
 actdiag: アクティビティ図欲しいよね！(某JUS会長)
 nwdiag: qpstudy のLT用にインパクトのあるネタがほ
しい
 rackdiag: ラック図ほしいねー (先輩)

38. 今後の予定
 ドキュメントの整備 (日本語で書く)
 nwdiag
 さくらクラウドのコントロールパネルが気になる
 http://cloud.sakura.ad.jp/function/controlpanel-
cloud.php
 IPMI とかがあるといいらしい http://t.co/oWblsF0S
 図が大きすぎる問題
 rackdiag: ブレードサーバに対応
 物理図 (結線図)
 その他の図

39. 協力者を募集してます
ドキュメント書いたり
コード書いたり
使ってわがまま言ってくれ
る方
 Twitter: #blockdiag
 GoogleGroup: blockdiag-discuss

40. 宣伝
 Sphinx ハンズオンはじめました
 http://atnd.org/events/22421
 インストール、使い方の基礎を教えます.
 #1 (12月分)は満席になりました
 来月以降も何度かやります
 Sphinx & blockdiag ハンズオン(全部俺)やります
 http://atnd.org/events/22450
 見てくださいw