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

 Sphinx AdventCalendar
    http://connpass.com/event/1441/
    生贄 参加者募集中!
 SphinxCon JP 2013 Spring
    2013/2/23 開催!
    お手伝い募集中!
http://www.flickr.com/photos/huskyte/7512877940/in/photostream/
今日の発表について


 役に立つ話はやりません
Excel 方眼紙の撲滅もしませ
           ん
   Excel 推進もしません
 いしもとさんすみません(予定)
Excel 方眼紙撲滅委員会とは

 Excel 方眼紙を撲滅するための秘密結社
 表計算はいいと思います
 ツールを作って/使って楽したい


 要は『適材適所』しようということ


 ひとり委員会です。
Excel 方眼紙が嫌いなところ

 マージが大変
 誰かが図を壊すことが多い
 更新が超面倒
 ずれてる
 方眼師(Excel 職人)のドヤ顔
 最新版でどこが変わったのかよくわからな
  い
 そこで登場、更新履歴シート
更新が超面倒
 Writing screen transions with Excel
更新が超面倒
 Hard to add/remove elements

                                ここに 1 画面追加
更新が超面倒
 Expanding right node…


                          1.スキマを作る
更新が超面倒
 Remove unnecessary arrows


                          2.不要な矢印を消す
更新が超面倒
 Add new page-node…


                       3.図形を配置する
更新が超面倒
 Connect allows new node and other.


                           4.矢印を調整
ずれる
 Winding nodes… :-p
ずれてる
 Winding nodes… :-p
ずれてる
 Winding arrows… :-p
ずれてる
 Winding arrows… :-p
ずれてる
 Winding arrows… :-p
誰かが図を壊す

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

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

 やっぱりずれる


            !?
解決策 / Resolutions
 blockdiag シリーズを使おう
 テキストを図に変換するツール群
    blockdiag:ブロック図、画面遷移図、フローチャート
    seqdiag:シーケンス図
    actdiag:アクティビティ図
    nwdiag:ネットワーク図、ラック図、パケットヘッダ
     図
    sphinxcontrib-webmocks: 画面仕様書
 blockdiag は定義ファイル(テキスト)から画像を生成
 する
  レイアウトは自動的に行われる
  増えても減っても適切にレイアウト
  自由に並べ替えたい人には向きません
blockdiag の例
 このテキストが…
 {
   トップページ -> ログイン -> マイペー
 ジ;
   トップページ -> 商品一覧 -> 商品詳細;
 }
seqdiag の例
 このテキストが…

 {
     A => B => C;
 }
nwdiag の例
 このテキストが…
 {
     network { web01; web02; }
     network { web01; web02; db01; }
 }
rackdiag の例
 このテキストが…
 {
     1: UPS [2U, 0.5A, 10kg];
     3: DB Master
     4: Web Server (1)
     5: Web Server (2)
     6: LoadBalancer
 }
packetdiag の例
 このテキストが…
 {
     0-7: Source Port
     8-15: Destination Port
     16-31: Sequence Number
     32-47: Acknowledgment Number
 }
sphinxcontrib-webmocks の例

 このテキストが…
  .. page::

  :名前: :text:`_`
  :都道府県: :select:`東京,神奈川,さいた
 ま`
  :住所: :textarea:`_`

  :button:`submit`
 活動報告してきた @ #odstudy
blockdiag の欠点

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

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

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

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

 blockdiagをExcel方眼紙に対応させるプラグ
 イン
  本当に方眼紙 (塗りつぶし)
Excelhogan 版の仕組み

 blockdiag の imgaedraw プラグイン
    画像の描画処理を担当
    線書いたり塗ったり
 本体には 3つの imagedraw プラグインを同
 梱
  PNG
  SVG
  PDF
Imagedraw プラグイン I/F

 __init__, set_canvas_size, save
    初期化と保存
 line, rectangle, polygon, arc, ellipse, image
    図形描画系関数
    arc, ellipse, image は optional
 textlinesize, text, textarea
    テキスト描画系関数
Excelhogan 版の実装

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

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

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

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

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

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

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

 つまり
 excelhogan を継承すると…
    Point() 実装すれば図が書ける
    あと初期化と保存


 効率? 知らんがな
デモ

 imagedraw プラグインの活用例
 デモ
  Another SVG
  Shape xls
blockdiagcontrib-animatedsvg

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

 blockdiag でExcel方眼紙を出力させる
 @mzp さん作
 OLE を使って、シェイプを生成
 Windows かつ Excel 入り環境でのみ動作
blockdiag Excel 対応版(OLE)

 blockdiag でExcel方眼紙を出力させる
まとめ

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

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

Inside of excel 方眼紙撲滅委員会 #pyfes