08

24

Inkscape おすすめです。

2013.08.24(11:28)

グリッドを効かせた図面をできるだけきれいに描きたくて、オープンソースのドローソフトを探してみた。

Inkspace
is1.png
気に入ったところ
  • 90分でほぼ使えるようになった。
  • 日本語フォントも使える。
  • SVGフォーマットで保存できる。
    SVGフォーマットは、いまや、ほとんどのブラウザでサポートされている。
    http://inkscape.paix.jp/manual/overview/browser/
  • 普通にオブジェクト指向でできているので、描いたオブジェクトを1つ以上選んで、
    太さを変更とか、色を変更とか、あとから変更指示がいくらでもできる。
  • グループ化したものをさらに別のグループとグループ化でき、それを解除したときに、
    グループ化の逆順で解除されてゆく。直観と合っている。
  • グリッドに合わせてオブジェクトをきれいに配置してゆける。
  • グリッドは、図のように複数の色を使って、見やすくできる。マスターグリッド、グリッドという。
  • オブジェクトを複数選択して、中心を等間隔に並べて、上部を垂直方向に揃えるとか、
    きれいに並べるための処理が豊富。
  • 点線でも太くできる。
  • 点線や一点鎖線の終点付近の微調整ができる
  • 末端に矢印付きの直線も描ける。末端の修飾は矢印以外に、UMLで出てくるような◇とか〇とかたくさん選べる。
    is3.png
  • 四角形と文字をグループ化した状態で、文字の編集がグループを解除しなくてもできる。
  • オブジェクトコネクタといって、別々のオブジェクトを線分でつないでおいて、片方のオブジェクトを移動させると、線分がついてくるような編集方法が使える。
    is2.png
  • もちろん、ベジェ曲線が描ける。
  • 1つの図面にたくさん描いておいて、範囲指定した部分だけをPNGフォーマットで書きだす、とか柔軟にできる。

ちょっと残念なところ
  • オブジェクトをにぎって、グリッドに吸い付けることはできるのだけど、
    オブジェクトをコピペすると、ペーストしたオブジェクトはグリッドに吸着しない。テキトーなところに浮かんでいる。
    これは仕様なのかなあ。
  • 直線の始点に矢印マーカーを設定したあと、直線の長さを長くすると、矢印が大きくなってしまう
    寸法線みたいに使いたいので、直線の長さを長くしたり短くしても矢印の大きさは変わらないでほしい
  • (それ以外に残念なところが見つからない)

ヒント
  • ファイル - Inkscapeの設定 - ツール - 鉛筆で、
    新規オブジェクトのスタイルを
    このツール独自のスタイル から
    最後に使用したスタイル に
    変更すると、同じスタイルで描き続けることができて便利。
    鉛筆以外もその設定にする。
  • 左下、フィルの色を変えるには、パレットの色をクリック。
    ストロークの色を変えるには、SHIFTを押しながら、パレットの色をクリック

参考にしたサイト

03

08

Graphviz サンプル集 (使い方)

2013.03.08(19:45)

無向グラフ、有向グラフ作成ツール
Graphviz
http://www.graphviz.org/
のサンプル集です。

Graphvizをインストールして、
以下のようなテキストをいれたdotファイルを作り、
コマンドラインから、
dot -Tpng nagano.dot -o nagano.png
などと打てば、画像ファイルができあがります。

位置の微調整とかできませんが、てっとりばやく
説明図面が作りたいときには重宝します。

路線図やプロセスフローダイヤグラム、関数呼び出し関係図、データ構造の図などが簡単に描けます。
ただいま少しずつサンプルを増やしています。

木が2本の無向グラフ。辺にラベルがついている例。
日本語を使いたいときはUTF-8でdotファイルを作成し、
さらにフォント指定するとうまくいく。
jr_nagano.png
// comment
graph G {
  graph [charset="UTF-8"];
  matsumoto [label="松本", fontname="MS UI Gothic",fontsize=20];
  shiojiri [label="塩尻", fontname="MS UI Gothic"];
  okaya [label="岡谷", fontname="MS UI Gothic"];
  tatsuno [label="辰野", fontname="MS UI Gothic"];

  nagano [label="長野", fontname="MS UI Gothic"];
  karuizawa [label="軽井沢", fontname="MS UI Gothic"];
  takasaki [label="高崎", fontname="MS UI Gothic"];

  matsumoto -- shiojiri [ label = "13.3km", fontname="MS UI Gothic",fontsize=20 ];
  shiojiri -- tatsuno;
  okaya -- tatsuno;
  shiojiri -- okaya;

  nagano -- karuizawa;
  karuizawa -- takasaki;
}

根が左で葉が右に伸びるグラフ。頂点を囲む図形を四角形、楕円、円などから選択できる。

pfd.png
digraph G {
  rankdir=LR; // 左から右へ
  graph [charset="UTF-8"];

  node [shape=box]; // ここから下は四角形
  spec1 [label="仕様書1", fontname="MS UI Gothic"];
  spec2 [label="仕様書2", fontname="MS UI Gothic"];
  spec3 [label="仕様書3", fontname="MS UI Gothic"];
  product1 [label="成果物1", fontname="MS UI Gothic"];
  product2 [label="成果物2", fontname="MS UI Gothic"];

  node [shape=circle]; // ここから下は円

  node [shape=oval]; // ここから下は楕円
  process1 [label="プロセス1", fontname="MS UI Gothic"];
  process2 [label="プロセス2", fontname="MS UI Gothic"];

  spec1 -> process1;
  spec2 -> process1;
  process1 -> product1;

  product1 -> process2;
  spec3 -> process2;
  process2 -> product2;

  overlap=false
  label="プロセスフローダイヤグラム"
  fontsize=12;
  fontname="MS UI Gothic"
}


二分木で、根から葉に向かって少しずつ左に降りてゆくようなグラフを描きたいときは
以下のように色指定できるので、色がついているところを白にすると、
希望するグラフが描ける
avl_tree3.png
digraph G {
  1 -> 2; 
  1 -> 3 [color="blue"];
  3  [style=filled, fontcolor="green" color = "red", fillcolor="yellow"];
  2 -> 4;
  2 -> 5 [color="blue"];
  5  [style=filled, fontcolor="green" color = "red", fillcolor="yellow"];
}

複数の頂点を長方形で囲む
apache.png
digraph G {
  "modules" -> "include"
  "modules" -> "srclib"
  "server" -> "http"
  "server" -> "proxy"
  "server" -> "include"
  "include" -> "srclib"
  "server" -> "srclib"

  subgraph cluster_a {
    "modules"
    "http"
    "proxy"
  }

  overlap=false
  label="Apache HTTP Server 2.0.55"
  fontsize=12;
}

あまり美しくない二分木
構造体のメンバーから辺が延びている例
vertex.png
digraph structs { 
	rankdir = "TB"
	node [shape=record];
	struct1 [label="<f0>|<f1>1|<f2>"];
	struct2 [label="<f0>|<f1>2|<f2>"];
	struct3 [label="<f0>|<f1>3|<f2>"];
	struct4 [label="<f0>|<f1>4|<f2>"];
	struct5 [label="<f0>|<f1>5|<f2>"];

	struct1:f0 -> struct2:f1;
	struct1:f2 -> struct3:f1;
	struct2:f0 -> struct4:f1;
	struct2:f2 -> struct5:f1;
}

隣接リスト
一次元配列から延びるリンクリスト
構造体の例
vertex3.png
digraph structs { 
	//rankdir = "TB"
	rankdir = "LR"
	node [shape=record];
	struct01 [label="1"];
	struct02 [label="2"];

	struct11 [label="3"];

	struct21 [label="1"];
	struct22 [label="3"];

	struct0 [label="{<f0>state0} | {<f1>state1} | {<f2>state2} | {<f3>state3}"];

	struct01 -> struct02;
	struct21 -> struct22;

	struct0:f0 -> struct01;
	struct0:f1 -> struct11;
	struct0:f2 -> struct21;
}

関手
functor.png
ノードの高さを揃えることと、ノードを長方形で囲むことが同時にできないみたい。方法がないかただいま研究中。
// dot -Tpng functor.dot -o functor.png
digraph G {
  rankdir = "TB"
  "String" -> "Maybe String" [label = "Maybe"]
  "String" -> "[String]" [label = "[]"]

  "Int" -> "Maybe Int" [label = "Maybe"]
  "Int" -> "[Int]" [label = "[]"]

  "String" -> "Int" [label = "f"]
  "Maybe String" -> "Maybe Int"  [label = "fmap f"]
  "[String]" -> "[Int]" [label = "fmap f"]

  subgraph "cluster_a" {
    label = "普通の型圏"; fontname="MS UI Gothic"; "String"; "Int";
  }
  subgraph cluster_b { 
    label = "失敗するかも圏"; fontname="MS UI Gothic"; "Maybe String"; "Maybe Int";
  }

  subgraph cluster_c {
    label = "たくさんあるかも圏"; fontname="MS UI Gothic";     "[String]"; "[Int]";
  }
  label = "関手、Functor"; fontname="MS UI Gothic";
}

関手2
functor2.png
ノードの高さを揃えることと、ノードを長方形で囲むことが同時にできないみたい。方法がないかただいま研究中。
// dot -Tpng functor.dot -o functor.png
digraph G {
  rankdir = "TB"

  {
   rank = same; "[String]"; "String"; "Maybe String";
  }
  {
   rank = same; "[Int]"; "Int"; "Maybe Int";
  }

  "String" -> "Maybe String" [label = "Maybe"]
  "String" -> "[String]" [label = "[]"]

  "Int" -> "Maybe Int" [label = "Maybe"]
  "Int" -> "[Int]" [label = "[]"]

  "String" -> "Int" [label = "f"]
  "Maybe String" -> "Maybe Int"  [label = "fmap f"]
  "[String]" -> "[Int]" [label = "fmap f"]
  label = "関手、Functor"; fontname="MS UI Gothic";

}

10

31

オンラインプログラミングサイト Ideone の 使い方

2012.10.31(20:32)

Ideoneは、ブラウザでプログラムを入力すると実行した結果を返してくれるサイト。

http://ideone.com/

C/C++/Java/Haskell/Rubyなど私が好きなプログラミング言語をサポートしている。サポートしている言語の数が多く、言語のインタプリタ・コンパイラのバージョンが比較的新しい。
C/C++はgcc-4.3.4、Rubyはruby-1.9.2, Haskellはghc-6.8.2。(2012/10/31現在)

詳しくは、
http://ideone.com/faq
の一番下参照。

無料でアカウントを作ることができ、アカウントを作ると、ラベル分類して無期限保存でき、月1000投稿まで無料。

使い方は、左下で言語の種類を選び、右上にプログラムをいれて、右下の ideon it! ボタンを押すだけ。

以下はHaskellのソースコードと実行例。ソースコードの色づけも自動。
ideone1.png

Webサイト上で実行しているので、常識的に考えて無理なことはできないけれど、プログラミングを教えるときにちょっとしたコードを確かめることができてとても便利。いれたコードを共有することもできる。

標準出力のほか、標準入力もサポートしているので、ideon it! ボタンを押す前に、標準入力として与えたいデータをいれておけばよい。

無限ループに陥るコードを実行させると、途中で止めることはできないけれど、ideone it! ボタンの左でタイムアウト時間を5秒にするか15秒にするか選べる。しばらく待てば、result: Time limit exceeded などと言って制御を戻してくれる。

使える言語のインタプリタ・コンパイラのバージョンは、右上の Help - FAQ から確認できる。

他人がいまどういうコードを実行したかを、右上の recent code で見ることができる。最新の十数個の code が見られる。

ideone it!するときに、ボタンの左にある、privateをチェックしておくと、上記のrecent code には載らなくなる。

右上のloginで、ユーザー名とパスワードを登録すれば、できることが増える。自分が実行したものを再度editしたりdeleteしたりできる。実行したものは全てあとから見ることができる。また1つ1つのプログラムを、private(非公開)にしたり、public(公開)にしたり切り替えることができる。

私はC/C++,Ruby,Haskellで利用している。日本語でファイルリストにコメント付けられる。
ideone2.png

privateにして作ったとしても、URLを知っている人は誰でも見ることができるので、大事なコードを共有するのには使えないことに注意。

プログラムを入力したあと、templateボタンで登録しておくと、そのコードはいつでも、templateボタンで呼び出して、プログラム領域にセットしてくれる。mainに相当する決まり文句をセットしておくとラク。templateは新しいtemplateをセットすることで上書きできる。

source code 右下のsyntax highlight をチェックすると、行番号表示になり、フォントサイズを調整でき、Find - Replace もできるようになる。チェックする前に右下のつまみで入力部を広げておくといい。

iPadで、RubyやHaskellのプログラムの動作を確認でき、ツイッターでは書ききれない簡単なプログラム共有に使える。おすすめ。

おまけ。
プログラミング言語をTextにしておくと、実行しないでそのままテキスト保存になる。

私がちょっといれて見たコードです。

C言語
http://ideone.com/1aAKE

C++言語
http://ideone.com/xNRI1

Haskell
http://ideone.com/DTlEF

Ruby
http://ideone.com/CRZW9

Text
http://ideone.com/e9OJY

テーマ : インターネットサービス
ジャンル : コンピュータ

10

10

固定幅フォント大切

2012.10.10(21:04)

毎日プログラミングするプロにとって、固定幅フォントの選択はとても大切。
私はマイクロソフトのConsolasを使っています。

視認性の高いプログラミング用フォントConsolasの入手方法
http://d.hatena.ne.jp/teppeis/20080123/1201097082

標準、太字、太字斜体、斜体の4種あります。以下は標準。

consolas.png

さきほどのニュースでこういうのが流れていました。
ソースコードを表示するためのフォント「Source Code Pro」をアドビがオープンソースで無料公開
http://www.publickey1.jp/blog/12/_source_code_pro.html

標準、中太、太字、極太、細字、特細 の6種そろっています。以下は中太。

source_code_pro_semibold.png

インストールは簡単です。Win7の場合
  1. http://sourceforge.net/projects/sourcecodepro.adobe/
  2. よりダウンロードしてきて解凍する。
  3. コントロールパネル - フォント
  4. ダウンロードしてきたファイルのうち、拡張子がttf (TrueTypeフォント)なものを、ドラッグ&ドロップ

フォントって、文字の形だけじゃなくて、文字と文字の間隔とか行と行の間隔とかも見やすさに効いてくるので、なかなか難しいですね。

06

12

codepad の 使い方

2012.06.12(21:10)

すでに有名な codepad の使い方について

http://codepad.org/

ブラウザでプログラムを入力すると実行した結果を返してくれるサイト。C/C++/Haskell/Rubyなど私が好きなプログラミング言語をサポートしている。なぜかJavaはサポートされていない。

言語の種類を選び、プログラムをいれて、Submitボタンを押すだけ。

Webサイト上で実行しているので、常識的に考えて無理なことはできないけれど、プログラミングを教えるときにちょっとしたコードを確かめることができてとても便利。いれたコードを共有することもできる。

無限ループに陥るコードを実行させると、途中で止めることはできないけれど、少し待てばTIMEOUTして制御が戻ってくる。

使える言語のインタプリタ・コンパイラのバージョンは、右上のAboutから確認できる。

プログラムを入れて実行させることをPasteと呼んでいる。

他人がいまどういうコードをPasteしたかを、右上のRecentPastesで見ることができる。最新の十数個のPasteが見られる。

Pasteするときに、Submitボタンの左にある、Privateをチェックしておくと、上記のRecent Pastesには載らなくなる。

右上のloginで、ユーザー名とパスワードを登録すれば、できることが増える。自分がPasteしたものを右上でsaveしたりdeleteしたりできて、saveしたものはあとから見ることができる。また1つ1つのPasteを、private(非公開)にしたり、public(公開)にしたり切り替えることができる。

privateにして作ったとしても、URLを知っている人は誰でも見ることができるので、大事なコードを共有するのには使えないことに注意。

ツイッターでは書ききれない、簡単なプログラム共有に使える。

私がちょっといれて見たコードです。

C言語
http://codepad.org/f0PFaX9O

C++
http://codepad.org/PoCejkIA

Haskell
http://codepad.org/4GhcHsAA

Ruby
http://codepad.org/wGi28FgC

Haskellは Hugs, September 2006 なので、今のとはずいぶん違う。


プロフィール

島敏博

Shima Toshihiro 島敏博
信州アルプスハイランド在住。HaskellとElixirが好き。組み込みソフトウェアアーキテクト、C++プログラマ、山歩き、美術館巡り、和食食べ歩き、日本赤十字社救急法指導員、インデックス投資、クラシック音楽、SESSAME会員、状態マシン設計、モデル駆動開発、ソフトウェアプロダクトライン、Rubyist、実践ビジネス英語

■ ツイッター
http://twitter.com/saltheads
■ Facebook
http://www.facebook.com/saltheads
■ Qiita
http://qiita.com/saltheads

印刷する場合は、ブラウザの印刷メニューではなく、このページの上から3cmくらいの青いところにある、「印刷」を押してみてください。少しうまく印刷できます。まだ完全ではないのですが、これで勘弁してください。


カテゴリ
最新記事
月別アーカイブ
最新コメント
検索フォーム
リンク
sessame
RSSリンクの表示