Serene Bach 3.0 β版をようやく公開しました。昨年 7 月に開発始めているので、ここまで 17 ヶ月かかっています。

Serene Bach 2.* は、およそ半年だったので、およそ三倍。途中開発していない期間もありますから、単純比較できませんが。

それはさておき。

Serene Bach 3.0 (主に管理画面)の作り込みで少し苦労した部分をまとめてみました。

• ハイライトをサポートした、テキストエディタ
• リキッドデザインとテーブルのスタイル
• MySQL/SQLite の AUTO_INCREMENT オプションと id 設定

CodePressの導入

Serene Bach 3.0 では標準のエディタとして、CodePress を導入しました。

CodePress は HTML のタグなどのハイライトをサポートする JavaScript ライブラリです。

Movable Type 4.0 のテンプレート編集にも採用されているので、目にした方もいらっしゃるのではないでしょうか。

そのままだと Safari 上では動かないので、いくつか独自の修正を入れています。詳細については、すでに述べているので、ここでは割愛します。

また、Serene Bach 3.0 ではエディタ部分が独立したモジュールになっているので、後からの差し替えが以前のバージョンよりも遥かに容易になっていると思います。

リキッドデザインの適用

Serene Bach 3.0 では、管理画面をリキッドデザインに変更しました。管理画面の幅は、ブラウザのウィンドウサイズに追従して変動します。

最小幅と最大幅を設定して、ウィンドウ幅を極端に変更した場合のレイアウト崩れが起きないようにしています(ただし、一部の対応ブラウザのみ)。

sb/Serene Bach 2.* では、700px の固定幅を使っていましたが、手狭に感じる場面があったので、思い切って変更しました。

リキッドデザインに変更すること自体は、それほど難しくありませんでした。やや苦労したのは、管理画面で多用されているテーブルのスタイル指定です。

Serene Bach の管理画面では、一覧性を重視するような場面においてテーブルを利用しています。

そのため、sb/Srene Bach のデザイン上のポリシーとして、「テーブル内の各項の高さは、できるだけ統一させる」というのがあります。

従来の管理画面ですと、テーブル幅を固定していたので、各項に収められる文字数に対して、大体あたりを付けられます。長い文字列を表示させるような場合は、規定の長さにクリップして出力していました。

ところが、リキッドデザインになると、どの程度の長さを許容できるかは分かりません。ですので、長い文字列もすべて出力しています。

もちろん、そのままだと文字列に応じて、各項の高さがばらばらになってしまい、一覧性が著しく欠けてしまう可能性があります。そこで以下のような CSS を適用します。

table td.elem {
  text-align: left;
/* except MacIE \*/
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
/* end for MacIE */
}

このスタイル指定により、class 属性に "elem" が指定された td 要素は、折り返し表示されなくなります。

Internet Explorer for Mac 向けのハックを使って、Internet Explorer for Mac には適用されないようにしています。したがって Internet Explorer for Mac では、折り返して表示されます。これは Internet Explorer for Mac では overflow: hidden; がうまく効いてくれないための対応です。

text-overflow: ellipsis; は、Safari / Internet Explorer for Windows / CSS3 で利用できるプロパティで、クリップされる場合に「...」という省略記号を表示してくれるようになります。

基本的なスタイルはこれでいいのですが、そのままだと各項の幅が、ブラウザによって、うまく指定できないという問題が生じました。

そこで colgroup 要素と col 要素を追加し、テーブルの各列の幅を指定します。こうすることでレンダリングエンジン間の差異が少なくなる印象です。

例えば、以下のようなテーブルがあったとして、

<table>
<tr><th>ID</th><th>タイトル</th><th>日付</th></tr>
<tr><td>ID1</td><td>これはサンプルです</td><td>2007.12.04</td></tr>
</table>

これを以下のように記述します。

<table>
<colgroup><col class="id" /><col class="title" /><col class="date" /></colgroup>
<tr><th>ID</th><th>タイトル</th><th>日付</th></tr>
<tr><td>ID1</td><td>これはサンプルです</td><td>2007.12.04</td></tr>
</table>

その上で、col 要素に対して幅を指定するスタイルを設定します。

table col.id {
  width: 4em;
}
table col.date {
  width: 9em;
}

MySQL/SQLite の AUTO_INCREMENT オプション

MySQL/SQLite では、フィールドの属性として「AUTO_INCREMENT」を指定することができます。

これは id など、データ毎に独立して重複しない値を設定したいときに有効なオプションです。当然ながら Serene Bach 3.0 でも利用しています。

ところが、これを指定すると、最初の id が 1 になってしまいます。0 から始まらない。

Serene Bach では、いくつか id = 0 のオブジェクトを特定して利用している場面があるので、このままでは大幅なコード変更が必要になってしまいます。

とりあえず、SQLite では直接 id を指定したデータを insert する分には問題ない様子。

MySQL では、以下のオプションがありました。これを接続時に設定することで最初の番号として 0 を利用できるようになります。

SQL_MODE='NO_AUTO_VALUE_ON_ZERO'