読者です 読者をやめる 読者になる 読者になる

コンパクトでない空間

a good experience become even better when it is shared

ブラウザでSQLを描く

今回は、ER図を編集し、コードを自動生成してくれるウェブサービス

WWW SQL Designer  のレビューのようなものを書こうと思う。

 

ウェブアプリケーションを作ってみたら、

ER図、サイトマップワイヤーフレームなど、

コードを描きはじめる設計の段階で図を描きたいという状況に遭遇した。

今回の記事では扱うのはER図の方だ。

サイトマップワイヤーフレームについては、

現在Cacoo(カクー)というサービスを試しているところなので、

そちらがある程度まとまってきたら記事にしてもいいかもしれない。

 

このブログはIT系でない読者も想定しているので、一応ER図を簡単に説明しておく。

住所録などのデータベースを、複数の表(テーブルと呼ぶ)の組み合わせで表現することがある。(これを、リレーションデータベースと呼ぶ)

アメリカのなんちゃら(調べたら「米国標準技術研究所」らしい)が

リレーションデータベースを図として表現する記法を規格化した。

ER図と言った場合、大体の場合この規格に沿った図のことを指す……と思う。

私も初心者もいいとこなので、こんな適当なことを言っていたら詳しい人に怒られてしまうかもしれない。

怒られたくない読者さんは、私の言うことを鵜呑みにせずきちんと調べてほしい。


話を戻そう。サテでは紙とペンやお絵描きソフトでそれを描くかというと、

やっぱり直線がきれいにひけないのも文字をへっぽこな手書きで書くのも気分が悪いし、

なによりあとから修正を加えたいと思ったときに、あまり融通が効かない。

ここの枠、もうちょっと中に文字を描きたかったから大きくしたい、だとか、

いろんなところに矢印のつながっているこのオブジェクトを移動させたい、だとか、

想像しただけでめんどくさそうだ。


やっぱり私もエンジニアのはしくれ、できればデジタル化したいし、

欲を言えば軽量でどんな環境でも使えて図の製作に特化したいろんな機能のついているエディタを使いたい。

Libre OfficeやMicrosoft Officeの各種製品でもできるのだろうけれども、

ER図を描くのに特化したよいソフトがあると教えてくれた人がいたので、

特化したよいソフトがあればそれにこしたことはないと、飛びついて調べてみた。


しかし、なんせ32bitのUbuntuという時代遅r特殊な環境を入れてしまったせいで、

対応しているソフトがなかなか見つからない。

「ブラウザで動くのとかないの?」

と冗談混じりに調べて見たところ、「WWW SQL Designer 」というのが見つかった。

f:id:saho-london:20160301131644p:plain

操作にクセはあるものの、動作も快適だし、フォーリンキーの設定もでき、

リレーションを表す線もテーブルの移動に合わせてぬるぬるついてきてくれる。

残念ながら多重度を表現する機能は見受けられないので、本格的な開発には向かないのかもしれないが、

私が作ろうとしていた小規模なアプリケーションであれば十分だった。

テーブルやフィールドの追加、消去は右端のメニューから行う。

「Add table」/「Add field」ボタンをクリックすると新規テーブル/フィールド編集のボックスが開き、

情報を入力したらEnterまたはなにもないところをクリックで確定できる。

編集は、テーブル/フィールドを選択して「Edit table」/「Edit field」ボタンか、

もしくはこちらは少しグラフィカルに、編集したいテーブル/フィールドをダブルクリックでもできる。

フォーリンキーの追加の操作はややヤヤコシイ。

f:id:saho-london:20160301131648p:plain

参照したいテーブルのプライマリーキーを選択し、メニューから「Create foreign key」をクリック

f:id:saho-london:20160301131653p:plain

ボタンの表示が「[click target table]」になったら、フォーリンキーを追加したいテーブルをクリック

f:id:saho-london:20160301131657p:plain

フォーリンキーが追加できた。

先にフィールドを作り、それをあとからフォーリンキーに設定する場合でも、

同様に参照したいプライマリーキーを選択した状態で「Connect foreign key」ボタンを使う。

f:id:saho-london:20160301131706p:plain

MySQLであればコードも自動生成してくれる。

「Save XML」を選択して表示されたコードを保存しておけば、

それをロードすることで絶対位置まで含め完全に復元することができる。

注意したいのが、なぜか各フィールドは新規作成した際にデフォルトの値がNULLに設定されている。

NOT NULLにしたい場合や、デフォルトの値を別の値に設定したい場合は忘れずに編集しないといけない。

 

やはり、機能が最小限で、操作も位置が固定されたボタンで行うため、動作が安定するのが一番よいところだと思う。

マウスの位置がすこしずれただかなんだかよくわからない理由で、

勝手に新規テーブルの作成、極端な拡大など意図しない動作をしてしまう、という

高度でグラフィカルなエディタにありがちなストレスはまったくない。

しかし、多重度が表現できない点もあるし、

アカウントで管理もできないので、他のユーザーとのシェアなどには不便さがある。

私のような、個人の開発者向けにはいいという印象だ。

 

GitHubの使い方のテストもかねて今回作ったxmlファイルを公開してみた。

もともと自分用のメモだったのもあり、

使いたかったのはSQLiteで自動生成されたMySQLをそのまま使うつもりもなかったので、

かなり雑な作りになっていて、データベースとしては参考にならないと思うけど、

www SQL Designser の Save/Load 機能を理解する助けには使ってもらえるかもしれない。

github.com