1. Sphinx-users.jp
小宮健

2. お前だれよ
Twitter: @tk0miya
 仕事
 (株)タイムインターメディア所属
 テクニカルオフィサ(技術責任者)として活動
 参加コミュニティ
 Sphinx-users.jp
 Python mini hack-a-thon
 Sphinx を中心にツールを開発
 blockdiag シリーズ
 Sphinx 拡張機能の開発
 Googlechart やカレンダー機能
 #bookathon 他読書会やってます

3. おしらせ
 Sphinx AdventCalendar
 http://connpass.com/event/1441/
 生贄 参加者募集中！
 SphinxCon JP 2013 Spring
 2013/2/23 開催！
 お手伝い募集中！

4. http://www.flickr.com/photos/huskyte/7512877940/in/photostream/

5. 今日の発表について
役に立つ話はやりません
Excel 方眼紙の撲滅もしませ
ん
Excel 推進もしません

8.  いしもとさんすみません(予定)

10. Excel 方眼紙撲滅委員会とは
 Excel 方眼紙を撲滅するための秘密結社
 表計算はいいと思います
 ツールを作って/使って楽したい
 要は『適材適所』しようということ
 ひとり委員会です。

11. Excel 方眼紙が嫌いなところ
 マージが大変
 誰かが図を壊すことが多い
 更新が超面倒
 ずれてる
 方眼師(Excel 職人)のドヤ顔
 最新版でどこが変わったのかよくわからな
い
 そこで登場、更新履歴シート

12. 更新が超面倒
 Writing screen transions with Excel

13. 更新が超面倒
 Hard to add/remove elements
ここに 1 画面追加

14. 更新が超面倒
 Expanding right node…
１.スキマを作る

15. 更新が超面倒
 Remove unnecessary arrows
２.不要な矢印を消す

16. 更新が超面倒
 Add new page-node…
３.図形を配置する

17. 更新が超面倒
 Connect allows new node and other.
４.矢印を調整

18. ずれる
 Winding nodes… :-p

19. ずれてる
 Winding nodes… :-p

20. ずれてる
 Winding arrows… :-p

21. ずれてる
 Winding arrows… :-p

22. ずれてる
 Winding arrows… :-p

23. 誰かが図を壊す
 Excel で画面仕様書を書く

24. 誰かが図を壊す
 やっぱりずれる

25. 誰かが図を壊す
 やっぱりずれる
!?

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

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

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

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

30. rackdiag の例
 このテキストが…
{
1: UPS [2U, 0.5A, 10kg];
3: DB Master
4: Web Server (1)
5: Web Server (2)
6: LoadBalancer
}

31. packetdiag の例
 このテキストが…
{
0-7: Source Port
8-15: Destination Port
16-31: Sequence Number
32-47: Acknowledgment Number
}

32. sphinxcontrib-webmocks の例
 このテキストが…
.. page::
:名前: :text:`_`
:都道府県: :select:`東京,神奈川,さいた
ま`
:住所: :textarea:`_`
:button:`submit`

34.  活動報告してきた @ #odstudy

35. blockdiag の欠点
 自由にレイアウトできない
 → Excel 方眼紙は無敵
 書き方を覚える必要がある
 → Excel はだれでも使える(ことになって
る)
 環境を整備する必要がある
 → Excel はどこにでも入っている
 自由にレイアウトできない
 → Excel はどこでも吹き出し付けられる！

36. 世の中は Excel 縛りなことが多い
 なんだかんだ言ってみんな使える
 過去の資産が Excel ですよ
 Office は買えるけど、Visio は買えない
 ロートル上司が(ry
 お客さんの指定が(ry
 方眼紙欠乏症
 他人の図をずらしたり壊したりしたい

37. blockdiagcontrib-excelhogan
 blockdiagをExcel方眼紙に対応させるプラグ
イン
 デモやります。

38. blockdiagcontrib-excelhogan
 blockdiagをExcel方眼紙に対応させるプラグ
イン

39. blockdiagcontrib-excelhogan
 blockdiagをExcel方眼紙に対応させるプラグ
イン
 本当に方眼紙 (塗りつぶし)

40. Excelhogan 版の仕組み
 blockdiag の imgaedraw プラグイン
 画像の描画処理を担当
 線書いたり塗ったり
 本体には 3つの imagedraw プラグインを同
梱
 PNG
 SVG
 PDF

41. Imagedraw プラグイン I/F
 __init__, set_canvas_size, save
 初期化と保存
 line, rectangle, polygon, arc, ellipse, image
 図形描画系関数
 arc, ellipse, image は optional
 textlinesize, text, textarea
 テキスト描画系関数

42. Excelhogan 版の実装
 方針：
 描画はすべてセル単位にする
 すべての描画を pixel 単位に置き換える
 セルの塗りつぶし = point() メソッド
 xlwt で Excel ファイルを生成できる

43. Excelhogan 版の実装
 line() メソッド
 ループで point() を呼ぶだけ
 と思いきや
 斜め線が必要
 DDA (Digital Differential Analyzer)
Algorithm
 加減算のみで各ドットの座標を計算

44. Excelhogan 版の実装
 rectangle() メソッド
 背景の塗りつぶし
 ひたすら line() を呼びまくる
 枠線
 四辺それぞれに line() を呼ぶ

45. Excelhogan 版の実装
 polygon() メソッド
 塗りつぶしは面倒なのでやらない
 スキャンライン法とか使うといいはず
 枠線は line() 呼べば解決
ココ

46. Excelhogan 版の実装
 ellipse() メソッド, arc() メソッド
 Optional なので見送り
 blockdiag には ellipse.dots() メソッドがある
 やればできそう

47. Excelhogan 版の実装
 text 系メソッド
 PIL によるダブルバッファリング
 別バッファを作って、そこにレンダリング
 Image#getdata() でピクセル情報が取得できる
 最終的には point() でレンダリング

48. Excelhogan 版の実装
 メソッド間の依存関係

49. Excelhogan 版の実装
 つまり
 excelhogan を継承すると…
 Point() 実装すれば図が書ける
 あと初期化と保存
 効率? 知らんがな

50. デモ
 imagedraw プラグインの活用例
 デモ
 Another SVG
 Shape xls

51. blockdiagcontrib-animatedsvg
 SVG の <animate> タグを使う
 attributeName=“opacity”
 dur=“1s”
 from=“0”
 to=“1”
 opacity(透過度)を 1秒間で 0から 1に増や
す
 begin 属性で順序を調整

52. blockdiagcontrib-excelshape
 blockdiag でExcel方眼紙を出力させる
 @mzp さん作
 OLE を使って、シェイプを生成
 Windows かつ Excel 入り環境でのみ動作

53. blockdiag Excel 対応版(OLE)
 blockdiag でExcel方眼紙を出力させる

54. まとめ
 ネタに困って imagedraw プラグインを
作った
 Excel ネタにしたら反響多すぎて怖い
 アニメーションSVG勉強したり
 GIFアニメとか MPEG は力尽きた
 役に立つかは知りません
 最近地味なアップデートしかしてないので
せめて発表だけは動きを出しました。

55. 蛇足
 blockdiag アップデート月間はじめました
 文句言うと採用されやすい
 Python2.4 捨てようか悩んでます
 意見募集中 @ blockdiag-discuss