PlantUMLをAtomで使ってみよう!泣きながらシーケンス図!

PlantUMLを使ってシーケンス図を書こう!!

PlantUMLって?

テキストベースでUMLが書ける便利なかんじのやつです。

これいいな!って思ったのは

  • なんか書くのが簡単そう。個人的にはExcelでちょっとずつ四角を動かしていく作業がなくなるだけで天と地の差。
  • テキストベースなのでGitで管理できる!
  • いろいろな画像形式で出力できる。

Eclipseでやろうとして挫折した過去があるので、これからはこれを使っていこうよ!という話し。

あと、うちの部署の新人さんたちはUMLなんかまったく使っていないので、そろそろクラス図とかシーケンス図とかかけてもいいかなと思った。教育用。

なぜPlantUML使おうと思ったか

はぁ(ため息x10000

突然お客様から「シーケンス図」を提供してほしいと言われた。

前々から思ってたんだけど、Excel(私の場合はLibreOfficeCalcだけど)で四角を書いていく作業にうんざいりしてました!たまにはなんかツール使ってやろうかなって。基本的にテキストエディタ大好きな人としては、良さそうなのないかな。そういえばQiitaでそんな記事みかけたな。

というところから今日のテーマのスタートです!

Qiitaで見かけた記事

AtomとPlantUMLで爆速UMLモデリング
http://qiita.com/nakahashi/items/3d88655f055ca6a2617c

調べてみましょう!

けっこうみんな使ってるんだなーと思いながら公式サイト見る。
http://plantuml.com/

広告バナーとDonateが主張しすぎなような気がしますが、有用な情報には対価が必要。私が見ることでさらに業界が発展することを切に願って広告は無視。

Online Demo Serverがありました。
http://plantuml.com/plantuml/

ちょっと試してみましょう。

こういう時に私はまず説明書読まない派なので、サンプルに書いてあったことを鵜呑みにしてみます。

@startuml
Bob -> Alice : hello
@enduml

demo1

こうなっているところを

@startuml
Bob -> Alice : hello
Alice -> Bob : Oh My God!
@enduml

こう変えて、下の「送信」ボタンを押すと

demo2

変わりました!

AliceBobっていう要素を「->」でつなでいく感じみたいですね!

そして、上から順番みたい。

複雑なことはできませんが、もしかしたらこれだけで今回の仕事は終わるんじゃないかなと思いました。

インストール

現在の私のMacBook AirにはAtomが入っているので、Qiitaの人と同じようにAtomを使いましょうね。Atomはかなり便利なので重宝しています。

ちなみにこの記事はnvALTを使用して書いていますが、肝心のWordPressMarkdownに対応させていないので毎回見出しとかリストとかは手動変換していますよ!

Macで試されている方もいらっしゃいました。

PlantUMLを自動変換してLiveプレビューしてくれるAtom拡張 PlantUML-Viewer がイイ!

http://pierre3.hatenablog.com/entry/2015/08/23/220217

先人は偉大なのですが、個人的にはこの方が、20158月にはもうこれを試されていて、もしかしたら職場でもばりばりみんなに布教活動をして、社内のUMLAtomで統一し、Gitと連携してReadmeと一緒にUMLのいくつかは管理されているのかと思うとくやしいです!!

いつか追い越してやる!

とまぁひがむのはこれくらいにして、インストールを。

pierre3さんが書いているとおりやってみましょー

Atomは入っているので、Javaから

Java入ってる?

https://www.java.com/ja/download/help/version_manual.xml#cmdline

$ /Library/Internet\ Plug-Ins/JavaAppletPlugin.plugin/Contents/Home/bin/java -version
java version "1.8.0_73"
Java(TM) SE Runtime Environment (build 1.8.0_73-b02)
Java HotSpot(TM) 64-Bit Server VM (build 25.73-b02, mixed mode)

Javaは入っているみたいですね。

今回はシーケンス図だけしか使わないのでGraphvizは省略。

きっと省略したことを忘れそうなのできちんとここでメモっておきます。

Atomプラグインのインストール

Atomは入っているので、Atomプラグインのインストールへ

Atomを起動したら、[File]メニューのSettings を開き、左側で[Install]を選ぶと、以下の画面になります。 ここで、”plantuml” と入力して表示される一覧からplantuml-viewer を探して[Install]ボタンをクリックします。

[File]メニューからSettings….

settings-not-found

ない!

さがしたらこっちでした

preferenses

[Atom]メニューからPreferencesでおk。

メニュー部分の[install]をクリックして、“plantuml”を入力してEnter

atom-settings

出てきました。

  • plantuml-viewer
  • language-plantuml

この2つを入れます。

次にPackagesを開き、plantuml-viewrの設定をしましょー。

私の場合はCharsetutf8にするくらいでした

ということで早速使おう!

finish

できた!!!!!

これでまたAtomが便利になってしまった!!!

かなりいいぞ!

PlantUMLのサイトが日本語に対応しているのがいいよね

UMLのツールのサイトは、日本語対応していないことが多いのですが、ここはマニュアルまでもが日本語になっていてすばらしい!!

これらの図はシンプルかつ直感的な言語によって定義されています。 (see PlantUML Language Reference Guide).

引用元:公式サイトトップページ

ということで、マニュアルはこちらPDFとなっております。たぶんやりたかったことがみんな書いてあるはずです!!

設計書・仕様書を書くのはめんどくさいよね。

有名なジョエルテストを作成なさったJoel氏曰く、

なぜ人々は仕様書を書きたがらないんだろう? 人々は仕様書作成フェーズを飛ばせば時間を節約できると主張している。彼らは仕様書作成がNASAのスペースシャトルのエンジニアか巨大な保険会社で働いているような人たちのための贅沢品であるかのように振舞っている。戯言だ。何よりも仕様書を書かないというのは、あなたがソフトウェアプロジェクトに持ち込む、最大かつ不必要なリスクである。それは着替えだけリュックに詰めて、その場になれば何とかなることを期待してモハーベ砂漠の横断に出発するのと同じくらい愚かなことだ。仕様を書かずにコードに飛びつくプログラマやソフトウェアエンジニアは、彼らがかっこいい早撃ちガンマンででもあるかのように思う傾向がある。彼らはそうじゃない。彼らはとても非生産的だ。彼らはまずいコードを書き、粗悪なソフトウェアを生産し、まったく必要のない大きなリスクを負うことでプロジェクトを危険にさらしている。

引用元:やさしい機能仕様 – パート 1: なぜわざわざ書く必要があるのか?

仕様書をちゃんと書かないエンジニアは、最大かつ不必要なリスクを持ち込んでいるそうだ!プロジェクトが巨大化すればするほど、ほんの些細なリスクでも、排除しなければならない。

もし、みんなが「仕様書を書くために言語を学ばないといけないなんて!」と、UMLを批判するのであれば、仕様書を書くためにExcelの使い方を覚えることも批判しないといけなくなってしまう。プログラミング同様、UMLは言語だ。UMLを英語で記載すれば、少なくとも、あなたがやりたいことは海外のプログラマーもわかる。それが言語のいいところです。

UMLは一度学ぶと、その仕様書が無い現場に入ったときに、「UMLをみんなが知っていれば…」となり、自分の部分だけUMLによって共通化しておくことで、普及の1歩目を踏み出すことができると思います。

個人的には、ジョエルさんが言っている機能仕様書と、シーケンス図、クラス図、ER図、これくらいがそろっていれば文句ない!あと画面仕様書は必ず作りましょう!!

さいごに

Atomのいいところは、無料で拡張性に富んだ作りになっていることですね!
今回のPlantUMLのように、Git管理しやすかったりするなど、分散開発していく現場に優しいものが増えてきて嬉しい限りです!

次はJenkinsのスタイルシートでもいじろうかな笑

コレ見て対抗意識を燃やしている私です!
エヴァンゲリオンとCOWBOY BEBOPどっちにしようか迷うけど、ベースは黒がいいなー。
爺さんが強キャラなアニメといえば…なんだろ

スポンサーリンク
hige1
hige1

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
hige1