Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

3,156 views

Published on

Published in: Technology
  • Be the first to comment

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

  1. 1. Sphinx-users.jp 小宮健
  2. 2. お前だれよ Twitter: @tk0miya 仕事  (株)タイムインターメディア所属  テクニカルオフィサ(技術責任者)として活動 参加コミュニティ  Sphinx-users.jp  Python mini hack-a-thon Sphinx を中心にツールを開発  blockdiag シリーズ  Sphinx 拡張機能の開発  Googlechart やカレンダー機能 #bookathon 他読書会やってます
  3. 3. おしらせ Sphinx AdventCalendar  http://connpass.com/event/1441/  生贄 参加者募集中! SphinxCon JP 2013 Spring  2013/2/23 開催!  お手伝い募集中!
  4. 4. http://www.flickr.com/photos/huskyte/7512877940/in/photostream/
  5. 5. 今日の発表について 役に立つ話はやりませんExcel 方眼紙の撲滅もしませ ん Excel 推進もしません
  6. 6.  いしもとさんすみません(予定)
  7. 7. Excel 方眼紙撲滅委員会とは Excel 方眼紙を撲滅するための秘密結社 表計算はいいと思います ツールを作って/使って楽したい 要は『適材適所』しようということ ひとり委員会です。
  8. 8. Excel 方眼紙が嫌いなところ マージが大変 誰かが図を壊すことが多い 更新が超面倒 ずれてる 方眼師(Excel 職人)のドヤ顔 最新版でどこが変わったのかよくわからな い そこで登場、更新履歴シート
  9. 9. 更新が超面倒 Writing screen transions with Excel
  10. 10. 更新が超面倒 Hard to add/remove elements ここに 1 画面追加
  11. 11. 更新が超面倒 Expanding right node… 1.スキマを作る
  12. 12. 更新が超面倒 Remove unnecessary arrows 2.不要な矢印を消す
  13. 13. 更新が超面倒 Add new page-node… 3.図形を配置する
  14. 14. 更新が超面倒 Connect allows new node and other. 4.矢印を調整
  15. 15. ずれる Winding nodes… :-p
  16. 16. ずれてる Winding nodes… :-p
  17. 17. ずれてる Winding arrows… :-p
  18. 18. ずれてる Winding arrows… :-p
  19. 19. ずれてる Winding arrows… :-p
  20. 20. 誰かが図を壊す Excel で画面仕様書を書く
  21. 21. 誰かが図を壊す やっぱりずれる
  22. 22. 誰かが図を壊す やっぱりずれる !?
  23. 23. 解決策 / Resolutions blockdiag シリーズを使おう テキストを図に変換するツール群  blockdiag:ブロック図、画面遷移図、フローチャート  seqdiag:シーケンス図  actdiag:アクティビティ図  nwdiag:ネットワーク図、ラック図、パケットヘッダ 図  sphinxcontrib-webmocks: 画面仕様書 blockdiag は定義ファイル(テキスト)から画像を生成 する  レイアウトは自動的に行われる  増えても減っても適切にレイアウト  自由に並べ替えたい人には向きません
  24. 24. blockdiag の例 このテキストが… { トップページ -> ログイン -> マイペー ジ; トップページ -> 商品一覧 -> 商品詳細; }
  25. 25. seqdiag の例 このテキストが… { A => B => C; }
  26. 26. nwdiag の例 このテキストが… { network { web01; web02; } network { web01; web02; db01; } }
  27. 27. rackdiag の例 このテキストが… { 1: UPS [2U, 0.5A, 10kg]; 3: DB Master 4: Web Server (1) 5: Web Server (2) 6: LoadBalancer }
  28. 28. packetdiag の例 このテキストが… { 0-7: Source Port 8-15: Destination Port 16-31: Sequence Number 32-47: Acknowledgment Number }
  29. 29. sphinxcontrib-webmocks の例 このテキストが… .. page:: :名前: :text:`_` :都道府県: :select:`東京,神奈川,さいた ま` :住所: :textarea:`_` :button:`submit`
  30. 30.  活動報告してきた @ #odstudy
  31. 31. blockdiag の欠点 自由にレイアウトできない  → Excel 方眼紙は無敵 書き方を覚える必要がある  → Excel はだれでも使える(ことになって る) 環境を整備する必要がある  → Excel はどこにでも入っている 自由にレイアウトできない  → Excel はどこでも吹き出し付けられる!
  32. 32. 世の中は Excel 縛りなことが多い なんだかんだ言ってみんな使える 過去の資産が Excel ですよ Office は買えるけど、Visio は買えない ロートル上司が(ry お客さんの指定が(ry 方眼紙欠乏症 他人の図をずらしたり壊したりしたい
  33. 33. blockdiagcontrib-excelhogan blockdiagをExcel方眼紙に対応させるプラグ イン デモやります。
  34. 34. blockdiagcontrib-excelhogan blockdiagをExcel方眼紙に対応させるプラグ イン
  35. 35. blockdiagcontrib-excelhogan blockdiagをExcel方眼紙に対応させるプラグ イン  本当に方眼紙 (塗りつぶし)
  36. 36. Excelhogan 版の仕組み blockdiag の imgaedraw プラグイン  画像の描画処理を担当  線書いたり塗ったり 本体には 3つの imagedraw プラグインを同 梱  PNG  SVG  PDF
  37. 37. Imagedraw プラグイン I/F __init__, set_canvas_size, save  初期化と保存 line, rectangle, polygon, arc, ellipse, image  図形描画系関数  arc, ellipse, image は optional textlinesize, text, textarea  テキスト描画系関数
  38. 38. Excelhogan 版の実装 方針: 描画はすべてセル単位にする すべての描画を pixel 単位に置き換える セルの塗りつぶし = point() メソッド xlwt で Excel ファイルを生成できる
  39. 39. Excelhogan 版の実装 line() メソッド ループで point() を呼ぶだけ と思いきや 斜め線が必要 DDA (Digital Differential Analyzer) Algorithm  加減算のみで各ドットの座標を計算
  40. 40. Excelhogan 版の実装 rectangle() メソッド 背景の塗りつぶし  ひたすら line() を呼びまくる 枠線  四辺それぞれに line() を呼ぶ
  41. 41. Excelhogan 版の実装 polygon() メソッド 塗りつぶしは面倒なのでやらない  スキャンライン法とか使うといいはず 枠線は line() 呼べば解決 ココ
  42. 42. Excelhogan 版の実装 ellipse() メソッド, arc() メソッド Optional なので見送り  blockdiag には ellipse.dots() メソッドがある  やればできそう
  43. 43. Excelhogan 版の実装 text 系メソッド PIL によるダブルバッファリング  別バッファを作って、そこにレンダリング  Image#getdata() でピクセル情報が取得できる  最終的には point() でレンダリング
  44. 44. Excelhogan 版の実装 メソッド間の依存関係
  45. 45. Excelhogan 版の実装 つまり excelhogan を継承すると…  Point() 実装すれば図が書ける  あと初期化と保存 効率? 知らんがな
  46. 46. デモ imagedraw プラグインの活用例 デモ  Another SVG  Shape xls
  47. 47. blockdiagcontrib-animatedsvg SVG の <animate> タグを使う  attributeName=“opacity”  dur=“1s”  from=“0”  to=“1” opacity(透過度)を 1秒間で 0から 1に増や す begin 属性で順序を調整
  48. 48. blockdiagcontrib-excelshape blockdiag でExcel方眼紙を出力させる @mzp さん作 OLE を使って、シェイプを生成 Windows かつ Excel 入り環境でのみ動作
  49. 49. blockdiag Excel 対応版(OLE) blockdiag でExcel方眼紙を出力させる
  50. 50. まとめ ネタに困って imagedraw プラグインを作った  Excel ネタにしたら反響多すぎて怖い  アニメーションSVG勉強したり  GIFアニメとか MPEG は力尽きた  役に立つかは知りません 最近地味なアップデートしかしてないのでせめて発表だけは動きを出しました。
  51. 51. 蛇足 blockdiag アップデート月間はじめました  文句言うと採用されやすい Python2.4 捨てようか悩んでます  意見募集中 @ blockdiag-discuss

×