やだ…私のコード、汚すぎ…？
しばらく触っていないソースコードを見るときとかに、よく思います。
「この変数、色んな所に散らばってるけど、何のための変数なんだ…？」
「この関数、中身を変更したいけど、どこで呼ばれているんだ…？」
「ぎゃあ！ 勘違いして処理を書き換えて、とんでもない動きをした！」
頭を抱えたくなります、そして昔の自分を小一時間問い詰めたくなります。
そんなことにならないように、少しでも理解を助ける資料があってもいいものです。
今回の便利グッズ
今回は「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
日本語文字を使うときに嵌らないためのメモです。
