TreeDrawer インストール版 (MacOSX) の使い方
(2016.4.18)
加藤幹治

目次

1

インストールの仕方. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12

樹形図の書き方 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

22.1

起動画面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

22.2

基本動作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

22.2.1

Add Node . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

32.2.2

Edit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

42.2.3

Delete Tree . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

82.2.4

Line Width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

82.2.5

Change Parent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

92.2.6

Swap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

102.3

Save と Load . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

112.4

Word などワープロへの貼り付け . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

112.5

TreeDrawer の樹形図情報と樹形図の関係 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

11

TreeDrawer は、樹形図を簡単に書くためのソフトウェアです1 。描かれた樹形図は、それぞれのコンピュータに保存可能なので、それをそのまま Word にコピーすれば、論文等に用いることができます。また、その樹形図情報をテキストファイルとして保存しておくこともできるので、コンパクトに保存しておくこともできます。現在 MacOSX 版は v.1.0 です。

1 インストールの仕方
次の場所から dmg ファイルをダウンロードしてください。

http://www.gges.org/library/class1/docuclass1/TreeDrawer.dmg
ダウンロードした “Treedrawer.dmg”というファイルをダブルクリックして開けて、出てきたフォルダをさらに開けると、“TreeDrawer.app”というファイルがあるので、それを Application フォルダにドラッグすればインストールできます。(図 1)

TreeDrawer をアンインストールする場合には、Application フォルダにある “TreeDrawer.app”をゴミ箱に移動してください。

1 TreeDrawer は、2009 年に、上山先生の依頼を受けて、当時、九州大学大学院人文科学府言語学専修・修士課程に在学していた劉擇明さんが作成してくださったプログラムです。当初は、どのマシンユーザーでも利用できるように、web 上のプログラムとして開発されましたが、サーバーのメンテナンスに困難が生じたため、2012 年にインストール版が作成されました。2014 年に Mac 版も作っていただきました。

1

図1

2 樹形図の書き方
2.1 起動画面
TreeDrawer を起動すると、図 2 のようなウィンドウが表示されます。
図2

2.2 基本動作
Application フォルダから TreeDrawer を起動すると新しい空白のウィンドウが開きます。現在書いているツリーとは別にツリーを書きたい場合は、メニューバーから File → New(または command+n) で新しいウィンドウを作ってください。この状態からツールバーにあるボタンをクリックしていくことで色々な操作を行って樹形図を書いていきます。

2Node#(2.2.5 節参照。) 樹形図編集のため、節点番号を表示させたいときに使います。
いったん表示させていた節点番号を表示させなくする場合にも、同じボタンです。

Fonts

フォントの種類を変えることができます。ただ、これは、画面の中のすべての文字に適用されてしまいますので、あまり使う機会はないでしょう。

Height

ここの数値を変えることで図の上下のサイズを変えることができます。この数値を大きくするとノッポの樹形図に、小さくすると平べったい樹形図になります。
ただ、私は樹形図のサイズの調整は Word で行なっているため、ここの数値はめったにいじりません。

Edit

選択している節点の名前を書き換えるときにクリックします。

Line Width

選択している節点の上側から出ている線の「太/細」を切り替えます。

Add Node

選択している節点の下側に新たな節点 (娘) を追加します。

Swap

選択している節点の親はそのままにして、親から出ている複数の節点の中でのその左右の位置を変更します。

Change Parent

選択している節点の親を変更します。

Delete Tree

選択している節点以下の部分を全て消去します。TreeDrawer では「やり直し」機
能がありませんので注意して使ってください。

2.2.1 Add Node
空白の状態からツリーを書き始めるには「Add Node」をクリックします。すると最初の節点「New Tree!」が追加されます。この節点をクリックして選択すると節点が灰色になります。(図 3)
図3「NewTree!」を選択した状態で Add Node のボタンを押すと、その下に「New Node!」が作られます。(図 4)3図4

今出来た「New Node!」を選択した状態で Add Node を押すと、さらにその下に「New Node!」が作られます。(図 5)
図5

同じ名前の節点が複数あってわかりづらいので、ツールバーの一番左にある Node#のボタンを押して、各節点に番号を表示させましょう。今度は [0] を選択したまま Add Node を押してみましょう。すると、[1] とは別に [0] の下に節点 [3] ができました (図 6)。このようにして樹形図を書いていきます。
図6

2 つ目以降の daughter は既存の daughter の右側に追加されていきます。この順番は 2.2.6 節で説明する
Swap で変更できます。
2.2.2 Edit
節点を選択したまま Edit ボタンを押すと、その節点の名前を変更することができます。例えば、図 6 で [2]を選択して Edit ボタンを押すと以下のようなウィンドウが表示されます。

4

図7

このウィンドウで名前を John に変更すると、以下の様な表示になります。
図8

このようにして各節点に名前を付けていきます。なお、ボタンをクリックする代わりに節点をダブルクリックしても同様のウィンドウが表示されます。この欄を空欄にして「OK」をクリックすると、ラベルは表示されなくなります。たとえば、次のような樹形図を描くこともできます。
図9

ただし、TreeDrawer では、ほとんどの操作においてラベルの上でクリックすることが必要になりますので、ラベルを表示しない状態にしてしまうと、操作が行いにくくなってしまうので、最終的にはラベルを表示させない図であっても作業途中は何か仮のラベルを設定しておいたほうが便利かもしれません。もしくは、Node#で節点番号を表示しておくとよいです。
TreeDrawer では、ラベルごとにフォントを変えることはできませんが、太字・斜字・上付き・下付きのみ、次の方法で指定することができます。

5

2.2.2.1 太字(1) a. 「Edit Node」での指定：「<b>John</b>」b. TreeDrawer での表示
図 10

ただ、このようにすると John という文字が 2 段に分かれてしまって不格好なので、後ろに半角スペースを追加して「<b>John</b> (ここに半角スペースがあることに注意)」と書くと、図 11 のようにきれいに出力できます (理由はわかりません)。以下、斜字なども 2 段に分かれる時は同様に半角スペースを追加するとよいです。
図 11

2.2.2.2 斜字(2) a. 「Edit Node」での指定：「<i>John</i>」b. TreeDrawer での表示
図 126

2.2.2.3 上付き(3) a. 「Edit Node」での指定：「hit<sup>John</sup>」b. TreeDrawer での表示
図 132.2.2.4 下付き(4) a. 「Edit Node」での指定：「hit<sup>John</sup><sub>Mary</sub>」b. TreeDrawer での表示
図 14<b></b>、<i></i>、<sup></sup>、<sub></sub> というタグは HTML 等で使われているのと同じですが、TreeDrawer では、半角小文字でないと受け付けられません。大文字や全角だと、普通の文字列として表示されてしまいます。

7

2.2.3 Delete Tree
ツールバーの Delete Tree を押すと現在選択している節点がなくなりますが、同時にその節点から下につながっている部分も消えますので注意してください
図 15

たとえば、この状態で D を選択して Delete Tree をすると以下のようになります。
図 16

途中の節点だけを削除したい場合などは、2.2.5 節の Change Parent と組み合わせるなどして工夫してください。

2.2.4 Line Width
節点を選択した状態でツールバーの「LineWidth」を押すと、その節点から上に伸びる枝を太線にすることができます。細線のところでこの機能を用いると太線になり、太線のところで用いると細線になります。たとえば、上の図 15 の節点 E を選択してこの操作を行うと、図 17 のようになります。
図 17

節点 C のラベルを消すと線分がつながりますが、太線の指定についてはそのままです。(図 18)

8

図 18

元の節点 C の位置でも「LineWidth」を行えば、図 19 のようになります。
図 19

2.2.5 Change Parent「Change Parent」は、この TreeDrawer の機能の中でもっとも派手な変化が起こるコマンドです。まず、実例から見てください。図 17 で、節点 D の上で「Change Parent」を選択すると、図 20 のように、入力ボックスが示されます。このボックスに、Node#を押して表示される節点番号のどれか一つを入力して OK を押すと、現在選択している節点がその下へ移動します。
図 20

現在、節点 D の「親」は 2 番の節点ですが、仮に、このボックスの中に節点 A の番号である「0」と入力し9たとしましょう2 。すると図 21 のようになります。
図 21

なお、MacOSX 版では「一番上の節点をどこか別の節点へ付け替える」「使われていない節点を指定して樹形図の一部分を独立させる」という操作は出来ませんので、気をつけてください。
この「Change Parent」は、慣れないうちは結果に驚かされる場合もあるでしょうが、この機能のおかげで、樹形図に対していろいろな加工を行なうことが可能になります。2.2.3 節で、「Remove Node」機能では樹形図の途中の節点だけを削除することはできないと言いましたが、たとえば図 22 で、節点 C と節点 G の間にある節点 D を削除したければ、節点 G を節点 A の daughter にした上で、12 番の節点に対して「Remove Node」すればいいわけです。
図 22

2.2.6 Swap
「Swap」を選択すると、その節点の上下関係はそのままで、位置が１つ右に行きます。たとえば、(9) の「E」
に対してこの操作を行うと、図 23 のようになります。
図 23

2 この入力は、かならず半角でなければなりません102.3 Save と Load
TreeDrawer には、何か操作を行なったとき、その「取り消し」のコマンドがありません。「Change Parent」の適用を間違って、図をめちゃくちゃにしてしまう場合もあるかもしれません。また、うっかり、時間をかけて描いたものが一瞬で消えてしまう恐れもあります。
そのようなときのために、図はこまめに「Save」することをお勧めします。メニューバーから File → Save(または command+s) をクリックすると、保存するファイル名の入力を求められます。作業途中ならば、ごく一時的なファイル名で十分ですし、次々に上書きしてもいいでしょう。特に、「Change Parent」の前には、いったん「Save」しておくといいでしょう。もし、図が壊れてしまった場合には、保存してあるファイルを呼び出すだけで、「Change Parent」前の状態に戻ることができます。

保存してあったファイルを呼び出すには、メニュー

バーから File → Open をクリックします (または command+o)。すると、ディレクトリ選択画面が呼び出されますので、以前 Save した csv ファイルを呼び出しましょう。

2.4 Word などワープロへの貼り付け「Save」ボタンで保存されるのは樹形図情報であって、樹形図そのものではありません。TreeDrawer で描いた樹形図を Word 等の他のソフトウェアで利用するには、スクリーンショットを撮るのが良いでしょう。キーボードで「command+shift+4」を同時に押すと、カーソルがポインターのような形に変わってスクリーンショットを撮るモードになります。樹形図の上でクリック&ドラッグを行って範囲を指定すると、指定した部分のスクリーンショットが png ファイルとしてデスクトップに出力されます。その png ファイルを Word 等、他のワープロソフトへ「貼り付け」たのちに、Word の描画機能などで適当にトリミングしたりサイズの調整を行なったりします。
もしくは、メニューバーから File → Export(もしくは command+e) と選択してスクリーンショットを撮ることができます。この場合、出力された画像は jpeg ファイルとして/Users/(各 PC のユーザ名)/(画像のタイトル).jpg というディレクトリに保管されます。ただこの方法の場合、このディレクトリにアクセスするのが面倒なのと、同一フォルダ内にある既存のスクリーンショットが全て置き換えられてしまうという難点があります
ので、私としては「shift+command+4」で直接スクリーンショットを撮るのがおすすめです。Word 等ワープロ
ソフトへの貼付けはどちらでも同じ手順で行えます。
樹形図に番号が表示されている状態で行なうと、番号も一緒に「写り込み」ます。その場合には、「Node#」をクリックして節点番号を表示させないようにした上であらためてスクリーンショットを「撮影」します。
樹形図が大きくて、そのウィンドウに収まらない場合には、スクリーンショットを撮っても意味がありません。「Height」の数値を小さくしたり、「Font」でフォントサイズを小さくしたりして、なんとかそのウィンドウに表示されるように工夫してからスクリーンショットを撮るしかありません。もちろん、ディスプレイの大きなマシンで作業すれば、その心配はほとんどありません。

2.5 TreeDrawer の樹形図情報と樹形図の関係
スクリーンショットで撮った画像はただの png ファイルですから、そこから TreeDrawer に戻すことはできません。再度手をいれる可能性のある図は、「Save」で樹形図情報として保存しておけば、いつでも TreeDrawer上に呼び出すことができます。最後に、その樹形図情報がどのようになっているかを説明しておきましょう。
図 19 の図の樹形図情報は csv ファイルをテキストエディット.app などで読み込んでみると、次の７行だけです。TreeDrawer は、これを読み込んで 19 のような図を表示させるソフトウェアなのです。

112,5 4 ,1,7,,0,G8,,0,F
4,,1,E0,1 2 ,R,A
5,8 7 ,0,D
1,,0,B2,5 4 ,1,
これはカンマで区切ってありますが、Excel のような表形式で情報内容を表すと次のようになります。少しまぎらわしいですが、左から A,B,C,D 列と呼ぶことにします。

A列

B列

C列

D列

70G80F

41E0

1 2RA

58 70D0B

125 41

まず、A 列に示されているのは、TreeDrawer で「Node#」をクリックしたときに表示されるの節点番号で、D 列に示されているのが、その節点の位置の表示されるラベル内容です。
図 24

B 列が何を表しているか、24 とよく見比べるとわかると思います。B 列には、その節点の daughter となる節点番号が左からスペース区切りで列挙されているのです。C 列に表示されているのは、その節点から上にのびる枝のタイプです。「R」はその節点が一番上の節点で上に伸びる枝がないことを表し、「0」ならば細線で、「1」ならば太線であることを表しています。
このように、樹形図というものが節点ごとの情報に分解できるのだということは、あまり意識したことがないかもしれませんが、非常に重要なポイントです。図というものは、全体像の把握に便利なものでありますが、つきつめていくと、１つ１つの節点が、daughter として何を持ち（B 列）、mother との関係がどうで（C 列）、それ自身がどのようなラベルを持つか（D 列）というきわめて局所的な情報を総合したに過ぎないものなのです。

12