クラス図書いてますか？
［2016/09/05］『線に書くラベル』を追記
［2016/08/30］本記事公開
Contents
AtomでUML？
こんにちは。kei（@boot_kt）です。
これまでUMLを書くことはありましたが、・・・と言ってもシーケンス図を書くぐらいでしたが。
私のメインはC言語を使った組み込み系ですので、オブジェクト指向は専門ではありません。
ですので、クラス図を書くことは特にありませんでした。
まぁ、シーケンス図以外のUMLを使う事はありませんが、書くとしたらExcelで書きます。
UML専用ツールがあるのは知っていて昔に幾つか試してみましたが、あまりしっくりこなかったんですよね。
基本的にシーケンス図しか作らないので専用ツールを使うほどじゃないってのが大きいんですけど、使用面でもコメント付けたり・変更したり・見やすく整えたりと、色々とやろうと思うと結局エクセルが使い勝手いいんですよね。
あと、他社さんとやり取りする事が多いので、やっぱりエクセルが一番使い勝手いいかなと。
また、そのプロジェクトが終わってハイサヨナラではなくて、今後も使うので独自のファイル形式は避けておいた方が良かったりと。
で、今回は、仕事ではなく個人的にクラス図を書くことがあった時にAtomでUMLが書けると知って、やってみました。
UMLを書くツール
UMLを書くツールは幾つかあります。
一番有名なのが astah* でしょうか。
私は使ったことないんですけど、昔、JUDE竹 という名前の時に使ったことがあるぐらいです。
後はExcelですかね（笑）
実際の所、Excelで書いてる人が一番多いんじゃないでしょうかね。
前項でも書きましたが、私もExcelです。
まぁ、良い悪いは置いといてExcelは何にでも使えちゃいますからね。
>> 教えてほしい。Excel方眼紙って何がそんなに悪いの？ ホントのちゃんとした理由教えて。納得させてくれよ～
私が仕事で書くのはシーケンス図で、個人的に趣味のプログラミングをするときにクラス図をちょっと書くぐらいです。
AtomでUMLを書こう
で、Atomでは、こんな感じでクラス図やシーケンス図が書けます。
ちなみに、Atomの入門書はこれがオススメです。
インストールと設定
インストールするもの一覧
インストールと設定については次項から説明しますが、まずは一覧を。
インストール手順なんか見なくてもできるぜっ！
とおっしゃる方はこの一覧だけ見れば良いかと思います。
- Atom本体のインストール
- Java ランタイム(JRE or JDK)
- Graphviz
- Atomのパッケージ
- plantuml-viewer
- language-plantuml
Atomのインストール
参考 >> https://gabekore.org/windows-atom-clang
手順１：Atomのインストール をご覧ください。
Atomパッケージ（プラグイン）のインストール
plantuml-viewer
このパッケージをインストールします。
language-plantuml
このパッケージをインストールします。
Atomの設定
- Atomにインストールした「plantuml-viewer」パッケージの設定画面を表示
- Settings
- Charset に UTF-8 と書きます
Atom以外にインストールするもの
Java ランタイム(JRE or JDK)
JREは「Java Runtime Environment」で、Javaの実行環境のみです。
JDKは「Java Development Kit」で、Javaでの開発キット（実行環境含む）です。
PlantUMLというソフトはJavaの実行環境で動きますので、JREもしくはJDKのどちらかをインストールすれば良いです。
Javaプログラミングをしたい方はJDKを、しない方はJREをインストールしてください。
>> JREのダウンロードはこちら
>> JDKのダウンロードはこちら
必要な物をダウンロードして、インストールしてください。
ダブルクリックして、「次へ」ボタンを押しまくればいいはず。
長いことやってないので覚えていないです。
すみません。
MacやLinuxなら既に入っている場合があります。
Javaがインストール済みかどうかの確認方法は↓です。
Windowsならコマンドプロンプト、MacやLinuxならターミナルで
java -version
↑を打って
↓こんな感じでVersion番号が表示されればインストール済みっちゅうことです。
java version "1.8.0_72" Java(TM) SE Runtime Environment (build 1.8.0_72-b15) Java HotSpot(TM) 64-Bit Server VM (build 25.72-b15, mixed mode)
Graphviz
各OSで分かれていますので、必要な物をクリックしてください。
Macなら pkgファイル です。
Windowsなら msiファイル もしくは zipファイル のどちらかです。
私はWindows版では、zipファイル（graphviz-2.38.zip）をダウンロードしました。
Mac版では graphviz-2.36.0.pkg をダウンロードしました。
※いずれも当時の最新
- zipファイル解凍
- 解凍すると release という名前のフォルダができます
フォルダ名が気に入らなければ変更してもいいです - releaseフォルダ → binフォルダ の中に dot.exe があります。
このフルパスを控えておいてください。
私の場合は C:\home\tool\release\bin\dot.exe です。 - Atomにそのフルパスを設定
※msiファイルでインストールした場合はこの設定は不要と思います。- Atomにインストールした「plantuml-viewer」パッケージの設定画面
- Settings
- <Graphiviz Dot Executable に上のフルパスを書きます/li>
pkgをダブルクリックすればインストーラが起動しますので「次へ」ボタンをクリックしていくだけです。
Windowsのように Graphiviz Dot Executable を設定する必要はありません。
Atomでのクラス図の書き方
理屈は後で、まずはコピペでクラス図を表示してみよう！！！
class BookShelfIterator {
initialize(bookshelf)
hasNext?()
next()
}
class BookShelf {
initialize()
getBookAt(index)
appendBook(book)
getLength()
iterator()
}
class Book {
attr_reader :bookname
initialize(bookname)
}
main o--> Book : use >
main o--> BookShelf : use >
main o--> BookShelfIterator : use >
BookShelfIterator o--> BookShelf
BookShelf o--> Book
- 上のコードをコピって拡張子puにして保存
- そのpuファイルをAtomで開く
- Ctrl + Alt + P で右側にクラス図のプレビューが表示されます。
もしもこのショートカットキー（Ctrl + Alt + P）が別のソフトで使用されている場合、
Ctrl + Shift + P と打てばAtomのコマンド入力ウィンドウみたいなものが表示されます。
続けて plantuml と打てば Plantuml Viewer: Toggle が表示されますのでそれを選択して Enter を押してください。
そうすればクラス図が表示されます。
クラス図を書く際に必要なパーツの書き方
ボックス
| 内容 | 書き方 | 図 |
|---|---|---|
| クラスの箱 |
class Hogehoge {
String data
void method1()
void method2(name)
int method3()
}
|
 |
| インターフェースの箱 |
interface Hogehoge {
（※クラスの箱と同じ）
}
|
 |
| 抽象クラスの箱 |
abstract Hogehoge {
（※クラスの箱と同じ）
}
|
 |
プロパティ／メソッドのスコープ
| 内容 | 書き方 | 図 （property） |
図 （method） |
図 （skinparam classAttributeIconSize 0） |
|---|---|---|---|---|
| private | – hoge |  |
 |
– hoge |
| protected | # hoge |  |
 |
# hoge |
| public | + hoge |  |
 |
+ hoge |
| package private | ~ hoge |  |
 |
~ hoge |
線
| 内容 | 書き方 | 図 |
|---|---|---|
| 接続線（実線） | – – ※– は1本でも2本でも3本でも書けば書くほど長くなります。 – right – – left – – up – – down – と書くと位置を指定することもできます。 |
 |
| 接続線（点線） | . . ※. は1個でも2個でも3個でも書けば書くほど長くなります . right . . left . . up . . down . と書くと位置を指定することもできます。 |
 |
線の先端
| 内容 | 書き方 | 図 |
|---|---|---|
| 白矢印△ | <|
hoge <|– fuga |
 |
| 矢印 | <
class hoge {
}
hoge --> fuga
|
 |
| 菱型（白色） | o（小文字のオー）
hoge o– fuga |
 |
| 菱型（黒色塗り潰し） | *
hoge –* fuga
|
 |
線に書くラベル
| 内容 | 書き方 | 図 |
|---|---|---|
| ラベル |
> が ▲ に変換されます。
hoge -right- fuga : use >
hoge2 *.down. fuga2 : have > hoge3 –left–o fuga3 : owns <
※上記の内容は線の書き方や先端の書き方を適当に組み合わせているだけですので、内容はUML的に正しくはないです。
▲ の使い方だけ見てください。 |
|
画像の出力方法
作成したクラス図は画像として出力できます。
- クラス図の上で右クリック
- Save As… を選択
- 保存ダイアログが出ますので、お好きな形式を選択
- 保存(S)ボタンクリック
Atomでクラス図を書くメリット
- 文字で管理できるのが案外便利。更新時の差分が分かり易い（WinMerge等のテキスト比較ツールを使うと便利）。さすがにExcelでの比較は面倒
- 簡易的なプログラムを書くので、プログラミングのイメージがつきやすいし、実装コードに流用し易い
- 接続線が自動で描かれるのが結構便利
- ◇とかを繋げられるので便利
- 図や線を簡単に統一できる
- 色々なツールで使うためのプラグインがある。
Atomでクラス図を書くデメリット
別に大きなデメリットは無いと思いますが、やはり、『直感からワンクッション置く』というぐらいですね。
大量に書くとなるとちょっとしんどいかなと思いますね。
- 文字で書く必要があるので、直感的ではなくちょっとワンクッション必要な感じ。量が増えるとちょっと分かりづらいかも
- 簡易的なプログラムを書くので、量が増えると見通しが悪くなる
- 接続の関係を文字で書くので直感的ではない
- 他社さんとやり取りする際、色々と面倒（現実的には無理っぽい）
- 現実的にはWordやExcelで設計書を作りますが、UMLの図を画像にして変更の度に画像を差し替えというのはちょっと面倒かな。
※とは言うものの、Word用プラグイン等を使えばいいでしょう。
もっと詳しい使い方
全ての書き方を書くとエラい事になりますので、詳しいことは公式ホームページをご覧ください。
公式ホームページは↓コチラ。
その他のUMLの書き方
今後も継続して少しずつアップしていきますが、それまでは公式ホームページをご覧ください。
その他
- 画面を更新してくれなくなったら、Atomを再起動してください。
- @startuml～@endumlはあってもなくてもどっちでもいいです。
まとめ
本業で使うにはちょっと無理ですけど。一社だけで仕事するわけではなく他社さんともやりとりしますので、Atomで作っても他社さんが見られませんし。（pngで出力できますけど、現実問題としてめんどくさいし、画像では使い勝手が悪い）
でも、テキストを打ってUMLの図が出来上がるのは、デメリットもありますが、メリットも大きいと感じています。
接続の線を自動で書いてくれてくれるのはかなりラクチンです。
ちょっとした図を作るのであれば、案外Excelを使うよりは早いかもしれません。
あとは、PlantUMLのWord用プラグインを使うなどすれば、仕事でも使えるかもしれませんね。（Atom関係無いですけど・・・）
参考書籍
