Kodougu チュートリアル

Kodougu はブラウザ上で動作するモデリングツールです。Kodougu を使うと、ブラウザ上で UML などのモデリング言語を使ってモデリングを行うことができます。必要に応じて、他の Web アプリ（pukiwiki、trac など）に組み込んで使うこともできます。

このチュートリアルでは、Kodougu を使ってモデリングした図をあなたのウェブサイトに組み込むところまでを説明します。

チュートリアルで触れていない機能については、マニュアルを参照してください。

大まかな流れ

本チュートリアルは以下の流れに沿って Kodougu の機能を説明します。

(1) アカウントを作成する
(2) モデルを作成する
(3) 図を作成する
(4) モデル又は図を公開する
(5) 図を Web アプリに貼り付ける

(1) アカウントを作成する

Kodougu のアカウントは無料です。ただし、ページ上に広告が表示されます。

【手順】
1. バー右上の「アカウントの作成」をクリックする
2. 必要な情報を入力し、ユーザーを作成する
ユーザー名、メールアドレスは他のユーザーと重複することはできません。

ユーザーを作成すると、ログイン状態になります。

(2) モデルを作成する

モデルを作成します。モデルとは、図などモデリングで作成した要素を入れておくための器です。

【手順】
1. バー左上の「モデル」をクリックする
2. 「model の新規作成」をクリックする
3. モデル名、説明文を入力し、メタモデルを選択する
現在、「Tiny UML 2.0」、「社員メタモデル」、「ERModel」は使用することができます。それ以外のメタモデルはテスト中であり、使用はできますが、予期せぬ動作を引き起こす場合がありますので、ご注意ください。また、モデル名は重複することができません。

ここまでで、モデルが作成されます。作成したモデル、図は初期状態では他のログインユーザー、もしくはログインしていないユーザーからはアクセスすることができません。

(3) 図を作成する

図を作成します。モデルの中に複数の図を作成することができます。Kodougu ではモデリングはこの図上で行います。

【手順】
1. 「diagram の新規作成」をクリックする
2. 図名、説明文、作成する図の種類を入力する

ここまでで、図が作成されて、エディタが表示されます。お絵かきができることを図上で確認してください。

Kodougu のモデリング機能はこちらを参照してください。

モデル又は図を公開する

この作業を行うことで、ログインしていないユーザーや他のユーザーに図を公開することができます。

モデルを公開する

1. バー右上の「モデル」をクリックする
2. 「公開」の「いいえ」をクリックする
「はい」に変更されます。モデルを非公開にする場合は、「はい」をクリックしてください。「いいえ」に変更されます。図の公開はすぐに反映されますが、図を非公開にして画面上「公開」が「いいえ」になってもしばらくは他のユーザーが図にアクセスできてしまう場合があります。この変更は遅くとも一日以内には反映されます。ご注意ください。

ここまでの作業で、モデルは公開されました。

図を公開する

基本的な操作はモデルの場合と変わりません。

1. バー右上の「モデル」をクリックする
2. モデルを選択する
3. 公開したい図の「公開」の「いいえ」をクリックする
「はい」に変更されます。

図を Web アプリに貼り付ける（オプション）

1. バー右上の「モデル」をクリックする
2. モデルを選択する
3. 貼り付けたい図名を選択します。
図のエディタが表示されます。

4. 図を組み込むための URL を確認する
図のすぐ上に表示される「ダイアグラム URL」という項目を確認します。以下のような URL を確認することができると思います。
http://www.kodougu.net/p/kodougu/diagram/tool/1

5. HTML を Web アプリに貼り付ける
図を貼り付けたいページに以下のタグを貼り付けてください。タグを貼り付ける際、src に 4 で確認した URL を貼り付けてください。

<iframe src="<<4>> で確認した URL"
width="670" height="590" style="border:solid 1px #000000;">
Kodougu is not available!
</iframe>

ここまでの作業で、Web アプリに図を貼り付けることができたと思います。