«
»

wwwsqldesignerの日本語化と(ちょっと)カスタマイズ

2009 年 4 月 9 日 by 山平

前回（ブラウザでER図が書ける！wwwsqldesigner）、ブラウザで動作するwwwslwdesignerを紹介しました。
本家サイト:http://code.google.com/p/wwwsqldesigner/

今回はクライアント側に軽く手を入れて使い勝手を良くしてみたいと思います。

1.ディレクトリ構成

wwwsqldesignerは用途に応じてjavascript、html、css、php、perl、xml、xsltを利用していますが、下記のとおり読みやすい作りになっているので、興味のある部分や勉強したい言語の部分だけという読み方も簡単です。

/直下の構成

index.html
js/
設定、基盤、本体それぞれのjs
backend/
[言語-媒体]ごとにバックエンド用のプログラムおよびデータ
locale/
各言語用xml
db/
[DB名]ごとにデザイン用定義xmlとCREATE文出力スタイルxslt
styles/
メイン、ブラウザ差異用、印刷用それぞれのcss
images/
/index.html内で利用する画像

ざっと眺めただけでも、

  • ディレクトリ構成が読みやすい
  • ソースコードが読みやすい
  • 適材適所の技術選択で無駄がない

ということがすぐに分かるので、分かりそうな部分から触ってみようかな、という気になりますね。

2.カスタマイズ

2-1.デフォルト設定の変更(1)

デザインするDBや言語、バックエンドなどは一度設定すればクッキーに保存されるので気にならない、という人もいると思いますが、webサーバに配置して場所を選ばずに編集できるwwwslwdesignerだからこそマイ・デフォルトにはこだわりたい、と思うのは私だけ？
ということで設定ファイルを触ってみます。

/js/config.js
var CONFIG = {
AVAILABLE_DBS:["mysql","sqlite","web2py","mssql","postgresql"],
DEFAULT_DB:"mysql",

AVAILABLE_LOCALES:["en","fr","de","cs","pl","pt_BR","es", "ru"],
DEFAULT_LOCALE:"en",

AVAILABLE_BACKENDS:["php-mysql","php-blank","php-file","php-sqlite"],
DEFAULT_BACKEND:["php-mysql"],

RELATION_THICKNESS:2,
RELATION_SPACING:15
}

見たままズバリ、選択肢とデフォルト選択が定義されています。これを自分好みに変更すればOKです。
選択肢に出したくなければ項目を削除すれば良いですし、自分で拡張する際にも本体に手を加える部分がここだけで良いです。

2-2.デフォルト設定の変更(2)

config.jsを変更することで簡単に設定が変更できた…のですが、いくつか項目が残っています。[Table snap distance]、[Pattern for foreign names]、[Hide connectors on table drag]、[Draw smooth connectors]の4項目です。
実はこれらの項目、ハードコーディングされていて設定から読み込むようになっていません。
個人的に[Pattern for foreign names]のデフォルトを変えたいので本体に手を入れます。

/js/wwwsqldesigner.js:line2093-2106
SQL.Designer.prototype.getOption = function(name) {
var c = this.getCookie();
if (name in c) { return c[name]; }
/* defaults */
switch (name) {
case "locale": return CONFIG.DEFAULT_LOCALE;
case "db": return CONFIG.DEFAULT_DB;
case "snap": return CONFIG.DEFAULT_SNAP; //return 0;
case "pattern": return CONFIG.DEFAULT_PATTERN; //return "%R_%T";
case "hide": return CONFIG.DEFAULT_HIDE; //return false;
case "vector": return CONFIG.DEFAULT_VECTOR; //return true;
default: return null;
}
}
/js/config.js
var CONFIG = {
AVAILABLE_DBS:["mysql","sqlite","web2py","mssql","postgresql"],
DEFAULT_DB:"mysql",

AVAILABLE_LOCALES:["ja","en","fr","de","cs","pl","pt_BR","es", "ru"],
DEFAULT_LOCALE:"ja",

AVAILABLE_BACKENDS:["php-mysql","php-blank","php-file","php-sqlite"],
DEFAULT_BACKEND:["php-mysql"],

RELATION_THICKNESS:2,
RELATION_SPACING:15,

//add
DEFAULT_SNAP:0,
DEFAULT_PATTERN:"%R_%T",
DEFAULT_HIDE:false,
DEFAULT_VECTOR:true
}

3.日本語化

ここまで来ると、日本語化するためには、

  • 日本語ファイルを作成する
  • config.jsに設定を追加する

これだけで実現できそうなのでさっそく下記手順で進めてみます。

  • /js/config.jsのAVAILABLE_LOCALESに”ja”を追加
  • /localeディレクトリ内の適当な言語ファイルをコピーしてja.xmlにリネーム
  • ja.xmlを元の言語を参考に翻訳

始めるとすぐに気づくのですが、string要素を空にして実行すると致命的なエラーが出てしまいますので、空にしないように気をつけながら進めます。
するとまた問題が発生します。

wsd00_bar00_lang

ボタンの幅がcssで決められているので、長い文字は切れてしまいます。
これをcssで解決するのではなく、翻訳で乗り切ってみます。
漢字と略語を駆使して翻訳した結果は後で示します。

4.ボタンのレイアウト

日本語化を進めて行くと、ボタンのレイアウトが気になってきました。
元々右側のツールバー（？）が縦に長いと感じていたので、少し短く、よく使うものを中心に直してみます。
htmlはすべて/index.htmlの中に書かれていますので、この中のdiv#barの中身を少し手を入れます。
wsd01_bar01_layout

5.今回の成果

今回はwwwslwdesignerのうち、簡単にカスタマイズできる部分を触ってみました。
ディープなコアjs部分を触らなくても、簡単に使い勝手を良くできる部分がたくさんあるのも綺麗なソースのお陰。
今回手を入れたソースを添付しますので、興味のある方はどうぞ。

wwwsqldesigner-232fsc

以上です。

タグ: , ,

TrackBack