graphvizを使ってわかりやすいプログラミングを

はろはろ、セルディアです。

やだ…私のコード、汚すぎ…？

しばらく触っていないソースコードを見るときとかに、よく思います。

「この変数、色んな所に散らばってるけど、何のための変数なんだ…？」
「この関数、中身を変更したいけど、どこで呼ばれているんだ…？」
「ぎゃあ！　勘違いして処理を書き換えて、とんでもない動きをした！」

頭を抱えたくなります、そして昔の自分を小一時間問い詰めたくなります。

そんなことにならないように、少しでも理解を助ける資料があってもいいものです。

今回の便利グッズ

今回は「graphviz」を紹介します。

こいつは、テキストで書いたグラフ構造を、自動的に画像出力してくれるツールです。
様々な意味の点を定義して、点と点の繋がりを決めると、あとはえんやこらさして適切な配置で線を引いてくれるのです。

いったい何の役に立つのか、シューティングで一つ例を挙げてみます。




シューティングというゲームがどんな流れで実装すべきか、ちょっとした図でまとめてみました。
タイトル画面でボタンを押すと、メニューが出てきます。
一番左の流れは、ゲームスタートを押すと、機体選択画面へ、選択するとステージプレイ画面へ行きます。（実際の、十字キーで動いて、弾を撃って、弾を避けてっていう画面ですね）
その他、ステージセレクトやオプションにも行けます。

恐らく、プログラミングではこの流れを、関数やif文条件分岐で実装しますが、プログラムが大きくなってくると、パッと見ただけではこの流れがわかりづらくなります。逆に、パッと見ただけでわかる、という資料は、思っている以上にとても強い味方になります。
関数や変数の役割は、あるとき、ふっ…と忘れてしまうものなので、大まかな流れだけでも図に残しておきましょう。きっとミスや勘違いを減らしてくれます。

これは単なる使い方の一例ですが、想像力を膨らませていろんな使い方ができるようになると、もっとプログラミングが楽になるかもしれません。

簡単な使い方

実は上の図は以下のようにDOT言語で書かれています。

----------------sample.dot----------------------
digraph graph_name {
graph [
   charset = "UTF-8";
fontname="ＭＳ ゴシック";
]
node [
   charset = "UTF-8";
fontname="ＭＳ ゴシック";
fontsize = 14;
]
edge [
   charset = "UTF-8";
fontname="ＭＳ ゴシック";
fontsize = 10;
]
  TITLE [label = "タイトル画面"]
  MENU [label = "メニュー画面"]
  SELECT_PLAYER [label = "機体選択画面"]
  PLAY_STAGE [label = "ステージプレイ画面"]
  RESULT [label = "リザルト画面"]
  GAMEOVER [label = "ゲームオーバー画面"]
  ENDING [label = "エンディング画面"]
  SELECT_STAGE [label = "ステージセレクト画面"]
  PLAY_SELECT [label = "ステセレ用プレイ画面"]
  OPTION [label = "オプション画面"]
  
  {rank = same; SELECT_PLAYER; SELECT_STAGE; OPTION;}
  
  TITLE -> MENU [taillabel = "決定ボタン押下"];
  MENU -> SELECT_PLAYER;
  SELECT_PLAYER -> PLAY_STAGE;
  PLAY_STAGE -> RESULT [taillabel = "ステージクリア"];
  PLAY_STAGE -> GAMEOVER[taillabel = "残機0"];
  GAMEOVER -> TITLE;
  RESULT -> PLAY_STAGE [taillabel = "最終面以外"];
  RESULT -> ENDING [taillabel = "最終面クリア"];
  ENDING -> TITLE;
  MENU -> SELECT_STAGE;
  SELECT_STAGE -> PLAY_SELECT;
  PLAY_SELECT -> SELECT_STAGE;
  MENU -> OPTION;
  OPTION -> MENU;
}
----------------sample.dot----------------------

このdotファイルをコマンドプロンプト上で次のように指定します。

dot -Tgif sample.dot -o sample.png

これでグラフ構造を書いたテキストファイルから、画像出力できます。

（コマンドプロンプトを使わないGUI版もあるようですが、詳しく調べていないのであしからず）

参考サイト

Graphvizとdot言語でグラフを描く方法のまとめ
http://qiita.com/rubytomato@github/items/51779135bc4b77c8c20d
Graphvizでできることがわかりやすくまとめられています。
上から読むだけでGraphvizマスター。

Graphviz チュートリアル
http://homepage3.nifty.com/kaku-chan/graphviz/
もう少し詳しい、グラフとノードとエッジの仕様が書かれています。
思い通りの配置にしたいときに。

Graphvizで日本語を使う
http://d.hatena.ne.jp/simply-k/20100705/1278326617
日本語文字を使うときに嵌らないためのメモです。