excel 方眼紙撲滅委員会 活動報告 2012.09 #yapcasia #ltthon

Excel 方眼紙撲滅委員会活動報告 2012.09

Sphinx-users.jp小宮健

お前だれよ

仕事( 株 ) タイムインターメディア所属テクニカルオフィサ ( 技術責任者 ) として活動

参加コミュニティSphinx-users.jpPython mini hack-a-thon

Sphinx を中心にツールを開発blockdiag シリーズSphinx 拡張機能の開発

Googlechart やカレンダー機能#bookathon 他読書会やってます

Twitter: @tk0miya

みんな大好きExcel 方眼紙

Many Japanese managers loves MS-Excel(for writing design documents)

前回：画面遷移図とか書いちゃうよ

Two years ago:we wrote screen transitions with MS-Excel…

Excel で画面遷移図を書くWriting screen transions with Excel

追加 / 削除が大変Hard to add/remove elements

ここに 1 画面追加

追加 / 削除が大変Expanding right node…

１ . スキマを作る

追加 / 削除が大変Remove unnecessary arrows

２ . 不要な矢印を消す

追加 / 削除が大変Add new page-node…

３ . 図形を配置する

追加 / 削除が大変Connect allows new node and other.

４ . 矢印を調整

ずれるWinding nodes… :-p

ずれるWinding nodes… :-p

ずれるWinding arrows… :-p

ずれるWinding arrows… :-p

ずれるWinding arrows… :-p

解決策 / Resolutions

blockdiag を使いましょう / Use blockdiagテキストから図を簡単に生成できます。

blockdiag generates diagrams from text input

解決策 / Resolutions

blockdiag を使いましょう / Use blockdiagテキストから図を簡単に生成できます。

blockdiag generates diagrams from text input

{ A -> B -> C;}

解決策 / Resolutions

blockdiag を使いましょう / Use blockdiagテキストから図を簡単に生成できます。

blockdiag generates diagrams from text input

{ A -> B -> C;}

その他blockdiag ファミリは増え続けている

blockdiag and its family supports many diagrams

blockdiag: ブロック図 (block diagram)seqdiag: シーケンス図 (sequence diagram)actdiag: アクティビティ図 (activity diagram)nwdiag: ネットワーク図 (network diagram)rackdiag: ラック構成図 (rack structure

diagram)packetdiag: パケットヘッダ図 (packet header

diagram)

そして、今回…Years later, it’s show time!

画面仕様とか書いちゃうよ

we challenge to write screen diagrams…

画面仕様 (Excel) / Screen diagram(Excel)

Excel で画面仕様書を書くJP guys love writing screen diagrams

w/Excel

Excel で書くのはとっても大変

Writing with Excel is very tiredやっぱりずれる

Off cource crushed…

Excel で書くのはとっても大変

Writing with Excel is very tiredやっぱりずれる

Off cource crushed…

!?

解決策 / Resolutions

Sphinxcontrib-webmocks を使いましょうSphinx を使って画面仕様を作ることができるテキストから図を簡単に生成できます

webmocks generates screen diagrams from reST

かんたん、自動レイアウトEasy and auto-layouting

解決策 / Resolutions

.. page::

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

:button:`submit`

解決策 / Resolutions

.. page::

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

:button:`submit`

まとめ

blockdiag シリーズ作ったよsphinxcontrib-webmocks つくったSphinx も便利だよ