OPPANIHA: 2010.09

2010年9月10日金曜日

データベースと表形式

データベースではデータを表にして利用する場合が多いと思います。
この場合に、表計算ソフトなどのように入力したデータを枠の長さに合わせてクリップ処理したいと思う人も多いと思います。

表で入出力をするには<table>タグの中に<input>タグを入れる方法もあるのですが、以下の二つに理由でどうも私の好みに合いません（笑）

上下左右に余白ができて場所を取りすぎる
HTML文またはJavaScript命令が長くなって読みにくくなる

<table>タグにJavaScriptのsetAttribute()でcontenteditableのスイッチを付けて直接編集できないかを試してみましたが、以下のようになって改行処理とスクロール処理が思うようにできません。

元の表が以下のような物とします。

一つの英単語が長いと、その長さに合わせて枠が横に長くなります。

枠に入りきらない英文または和文を入力すると、文章が改行されて枠が縦に長くなります。

以下のCSS文を試してみましたが、思うような結果を得られませんでした。

試したCSSの一覧。（命令にwebkitとあるのはwebkit独自の仕様で、この記事を書いた時点ではHTML5に採用されていません）
width: 35px; -webkit-column-width: 35px; text-overflow: clip; white-space: nowrap; word-wrap: break-word word-wrap: normal; overflow: hidden; overflow-x: hidden; overflow-y: hidden; overflow-y: scroll; -webkit-user-modify: read-write-plaintext-only; -webkit-user-modify: read-write;
今のところ、<table>タグの中に<input>タグを入れるか、<div> タグで四角を縦横に並べるしか方法が思い付きません。

Safariのtransaction

「SafariのopenDatabase」の項目に引き続いて、以下のURLにあるSafariのデータベースの解説を見ていきたいと思います。

Safari Client-Side Storage and Offline Applications Programming Guide: Introduction
http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Introduction/Introduction.html

Safariのデータベースで面倒なのが"Listing4-2 CreatingaSQLtable"にあるようなトランザクション処理の関数です。"Listing4-2 CreatingaSQLtable"にある最初のトランザクションは「SafariのopenDatabase」の項目にあるように他の関数に移し、すでにデータがある場合の処理は別にしたとして、データベースに初期データを入れる部分を抜き書きして、さらに初期データを一つだけにすると以下のようになります。

view plain print ?

function createTables()
{
db.transaction(
function (transaction) {
transaction.executeSql('insert into people
(name, shirt) VALUES ("Joe", "Green");',
[], nullDataHandler, errorHandler);
}
);
}

function createTables()
{
 db.transaction(
  function (transaction) {
   transaction.executeSql('insert into people 
    (name, shirt) VALUES ("Joe", "Green");',
    [], nullDataHandler, errorHandler);
  }
 );
}

関数内の最初の二行で、データベースのオブジェクト db のメソッドである transaction に関数を渡しています。渡した関数の引数がオブジェクトになっていて、そのオブジェクトのメソッドである executeSql でSQL命令を発効しています。
これだけでもチョット面倒ですが、さらに面倒なことに executeSql メソッドの引数が四つあって、その内の二つが関数で、その二つの関数がくせ者です（苦笑）

そのくせ者の前に注意しなくてはならないのが transaction です。 db.transaction とその後の transaction は別物です。 function(transaction) と transaction.executeSql の transaction は同じ変数で、その名前は transaction である必要はなく、 myTransaction などの他の変数名でも動作します。ここで同じ名前を使用しなくてはならない理由が私には思い付かず、サンプルコードとしては誤解を招きやすい解説だと思います。私は実際のコードを書く場合でも、後から調べることを考えて別名にしています。

閑話休題、もとの「くせ者」の話に戻しましょう。この二つの関数は一方通行で、行ったまま戻ってきませんし、引数を渡すこともできません。呼び出される関数の引数は二つのオブジェクトと決まっています。マウスなどのイベントを処理するメソッド addEventListener に近い感じです。また、話しを脱線させると・・・個人的な経験を元にした推測にしか過ぎませんが、おそらくトランザクション処理をするために非同期コールを組み込む必要が出てこのような面倒なことをしているのではないか?と思っています。

さて、 executeSql メソッドの第一引数と第二引数はC言語の printf 関数のようなイメージで使用しますが、変数が多くなると高い確率で間違います・・・つまり、私は間違いました（笑）また、初期化に限らず似たような処理を繰り返し実行することは良くあります。そこで私は「SafariのopenDatabase」の項目にあるSQL文の書き方にもう少し手を加えた方法を利用しています。一つの参考としてご紹介します。

view plain print ?

function createTables()
{
var nameShirt = {
"Joe": "Green",
"Mark": "Blue",
"Phil": "Orange",
"jdoe": "Purple"
}
db.transaction(
function (trans) {
for(var index in nameShirt) {
var mySQL = 'insert into people (name, shirt) VALUES ("' +
index +
'", "' +
nameShirt[index] +
'");';
trans.executeSql(mySQL, [], nullDataHandler, errorHandler);
}
}
);
}

function createTables()
{
 var nameShirt = {    
  "Joe": "Green",
  "Mark": "Blue",
  "Phil": "Orange",
  "jdoe": "Purple"
 }
 db.transaction(
  function (trans) {
   for(var index in nameShirt) {
    var mySQL = 'insert into people (name, shirt) VALUES ("' +
     index +
     '", "' +
     nameShirt[index] +
     '");';
    trans.executeSql(mySQL, [], nullDataHandler, errorHandler);
   }
  }
 );
}

上記の方法をさらに手を加えると、複数のテーブルを扱う時に便利になります。私は、object literalとArrayオブジェクトを組み合わせて、データベースの構造を宣言して、SQL文のテーブルの宣言部分を書いています。

以上のように関数の中に関数が多重で入っており書きにくく、読みにくく、間違いやすい構文になっています。このために、"Listing 4-5 SQL insert query example"にあるような書き方は、面白いとは思いますが・・・関わりになるのは避けたいです（苦笑）

SafariのopenDatabase

数年前にSafariにSQLiteのデータベースがついて一時期話題になりましたが、その後も色々と改善が続いているようです。その解説が以下のURLにあります。

ちなみに、この資料の日付は2010/01/20となっていますが、PDF版の作成日にはいくつかのバージョンがあるようです。

この資料では"HTML 5 Offline Application Cache"や"Key-Value Storage"の解説が追加されています。

データベースに関する解説も手が加えられています。"Relational Database Basics"はSQLの初心者を対象にデータベースの解説があり、"Using the JavaScript Database"でJavaScriptからデータベースを利用する方法が解説されています。"APPENDIX A: Database Example: A Simple Text Editor"にはサンプルコードを元に解説があります。

解説中のサンプルコードはわかりやすい書き方になっていますが、まだ完成には時間が必要ではないかという気がします。例えば"Listing 4-1 Creating and opening a database"にあるデータベースを開く時の処理です。

view plain print ?

try {
if (!window.openDatabase) {
alert('not supported');
} else {
var shortName = 'mydatabase';
var version = '1.0';
var displayName = 'My Important Database';
var maxSize = 65536; // in bytes
var db = openDatabase(shortName, version, displayName, maxSize);
// You should have a database instance in db.
}
} catch(e) {
// Error handling code goes here.
if (e == 2) {
// Version number mismatch.
alert("Invalid database version.");
} else {
alert("Unknown error "+e+".");
}
return;
}
alert("Database is: "+db);

try {
 if (!window.openDatabase) {
  alert('not supported');
 } else {
  var shortName = 'mydatabase';
  var version = '1.0';
  var displayName = 'My Important Database';
  var maxSize = 65536; // in bytes
  var db = openDatabase(shortName, version, displayName, maxSize);
  // You should have a database instance in db.
 }
} catch(e) {
 // Error handling code goes here.
 if (e == 2) {
  // Version number mismatch.
  alert("Invalid database version.");
 } else {
  alert("Unknown error "+e+".");
 }
 return;
}
alert("Database is: "+db);

この書き方であれば、データベースの名前やバージョンなど後から調べる時に便利そうです。

ただし、このコードは関数内に入っていません。「最初に実行されるコード」の項目の1stの方法と同じようにすればこのままでも動作します。しかし、最初に一度しか実行しないコードをdeleteせずにメモリ上に置いておくのは無駄です。関数の中に入れて最初に実行させ最後にdeleteするのが妥当だと思います。ただし、この時には変数宣言のvar dbは式の外に置いてグローバル変数としないと他の関数でトランザクション処理ができなくなります。

また、サンプルにある// You should have a database instance in db.というコメントは具体的に何をしようとしているのかが分かりません。データベースと同時にtaransaction()メソッドで'CREATE TABLE'を使ったテーブルの処理も考えているのかもしれませんが、この解説ではテーブルの処理は別の関数で処理しています。

古いサンプルコードと比べるとopenDatabaseでデータベースが開けない時の処理がなくなり、try-catchのcatchでエラー処理ができるようになったようです。エラー処理は"Handling Errors"と言う項目で解説されていますが、この通りには動いていないように思います。例えば上記のデータベースを開く時のcatchでの処理です。試しにversionを1.1や2.0にすると、アラートに"Invalid database version."が表示されずに、以下のようなエラーとなりました。

"Unknown error Error: INVALID_STATE_ERR: DOM Exception 11."

さらに、"APPENDIX A: Database Example: A Simple Text Editor"にあるエラー処理では2の代わりに変数"INVALID_STATE_ERR"を置いていますが未定義のエラーになります。

エラーのメッセージやエラーコードの処理が紹介されています。ただ、後半部分が何を意味するのか分かりません。

view plain print ?

function errorHandler(transaction, error)
{
// error.message is a human-readable string.
// error.code is a numeric error code
alert('Oops. Error was '+error.message+' (Code '+error.code+')');
// Handle errors here
var we_think_this_error_is_fatal = true;
if (we_think_this_error_is_fatal) return true;
return false;
}

function errorHandler(transaction, error)
{
 // error.message is a human-readable string.
 // error.code is a numeric error code
 alert('Oops.  Error was '+error.message+' (Code '+error.code+')');

 // Handle errors here
 var we_think_this_error_is_fatal = true;
 if (we_think_this_error_is_fatal) return true;
 return false;
}

先にも書いた'CREATE TABLE'を使ったテーブルの処理は"Listing 4-2 Creating a SQL table"に書かれています。しかし、'CREATE TABLE'のSQL文は長文になりやすく、読みにくいものです。以下のような書き方の方が後から調べやすいと思います。また、複数のテーブルを扱う場合には、この方法を発展させると便利になります。

view plain print ?

db.transaction(
function (transaction) {
var mySQL = 'CREATE TABLE people(' +
'id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, ' +
'name TEXT NOT NULL DEFAULT "John Doe", ' +
'shirt TEXT NOT NULL DEFAULT "Purple");';
transaction.executeSql(mySQL, [], nullDataHandler, errorHandler);
}
);

db.transaction(
 function (transaction) {
  var mySQL = 'CREATE TABLE people(' +
   'id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, ' +
   'name TEXT NOT NULL DEFAULT "John Doe", ' +
   'shirt TEXT NOT NULL DEFAULT "Purple");';
  transaction.executeSql(mySQL, [], nullDataHandler, errorHandler);
 }
);

以上の内容をまとめると、今のところデータベースを開く関数は以下のような書き方が便利そうです。

view plain print ?

function initDB() {
try {
if (!window.openDatabase) {
alert('not supported');
} else {
var shortName = 'mydatabase';
var version = '1.0';
var displayName = 'My Important Database';
var maxSize = 65536; // in bytes
db = openDatabase(shortName, version, displayName, maxSize);
// You should have a database instance in db.
db.transaction(
function (transaction) {
var mySQL = 'CREATE TABLE people(' +
'id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, ' +
'name TEXT NOT NULL DEFAULT "John Doe", ' +
'shirt TEXT NOT NULL DEFAULT "Purple");';
transaction.executeSql(mySQL, [], nullDataHandler, errorHandler);
}
);
}
} catch(e) {
// Error handling code goes here.
if (e == 2) {
// Version number mismatch.
alert("Invalid database version.");
} else {
alert("Unknown error "+e+".");
}
return;
}
// alert("Database is: "+db);
delete initDB;
}

function initDB() {
 try {
  if (!window.openDatabase) {
   alert('not supported');
  } else {
   var shortName = 'mydatabase';
   var version = '1.0';
   var displayName = 'My Important Database';
   var maxSize = 65536; // in bytes
   db = openDatabase(shortName, version, displayName, maxSize);
   // You should have a database instance in db.
   db.transaction(
    function (transaction) {
     var mySQL = 'CREATE TABLE people(' +
      'id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, ' +
      'name TEXT NOT NULL DEFAULT "John Doe", ' +
      'shirt TEXT NOT NULL DEFAULT "Purple");';
     transaction.executeSql(mySQL, [], nullDataHandler, errorHandler);
    }
   );
  }
 } catch(e) {
  // Error handling code goes here.
  if (e == 2) {
   // Version number mismatch.
   alert("Invalid database version.");
  } else {
   alert("Unknown error "+e+".");
  }
  return;
 }
 // alert("Database is: "+db);
 delete initDB;
}

最初に実行

最初に実行されるコード
AppleのSafari 5.0.1とMac OS X版 Firefox 3.6.8でしか試していないのですが、JavaScriptで最初に実行されるコードを四つの方法で試してみました。

試したコードは以下のような物です。

view plain print ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Untitled</title>
<script type="text/javascript" language="javascript">
<!--
// 1st
alert('without any function');
// 2nd
function init() {
alert('called from body');
}
// 3rd
window.onload = function() {
alert('called from window.onload');
}
// 4th
function loaded() {
alert('called from addEventListener');
}
addEventListener('load', loaded, false);
//-->
</script>
</head>
<body onload='init()'>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title>Untitled</title>
<script type="text/javascript" language="javascript">
<!--
// 1st
alert('without any function');

// 2nd
function init() {
 alert('called from body');
}

// 3rd
window.onload = function() {
 alert('called from window.onload');
}

// 4th
function loaded() {
 alert('called from addEventListener');
}

addEventListener('load', loaded, false);

//-->
</script>
</head>
<body onload='init()'>
</body>
</html>

上記のコードをSafari 5.0.1で実行すると1st、4th、2ndの順で実行され、3rdは実行されません。

また、上記のコードのbodyタグの引数onloadをなくすと、1st、3rd、4thの順で実行され、2ndは実行されません。

Mac OS X版のFirefox 3.6.8で実行すると、1st、2nd、4thの順で実行され、3rdは実行されません。

Safariと同様にbodyタグの引数onloadをなくすと、1st、3rd、4thの順で実行され、2ndは実行されません。

3rdと4thは一般的に良く使用されるコードですが、1stと4thはAppleのエンジニアが書いたサンプルコードで見つけました。1stの方法はSafariに付属しているSQLiteのデータベースをJavaScriptから開く時に利用し、データベースのテーブルを開く時に4thの方法を利用していました。データベースを一番最初に開くという意味では1stの方法は便利かもしれませんが、メモリのフットプリント（占有領域）を小さくすると言う意味では以下の内容を考慮した方が良いと言えるでしょう。

もったいない
Appleの資料"Apple JavaScript Coding Guidelines"に、onload関連してメモリのフットプリント節約方法が書かれていました。

http://developer.apple.com/safari/library/documentation/ScriptingAutomation/Conceptual/JSCodingGuide/Introduction/Introduction.html

初期化コードなど一度しか実行しないコードは実行後にdeleteしてフットプリントを小さくすることを推薦しています。この資料では起動時の初期化コードを例として以下のようなコードを紹介しています。
var foo = function()

view plain print ?

{
// code that makes this function work
delete foo;
}
window.addEventListener('load', foo, false);

{ 
 // code that makes this function work 
 delete foo; 
} 
window.addEventListener('load', foo, false);

おそらくはiPhoneなどメモリを多く積んでいない装置を想定した話しでしょうが、不用意にメモリを浪費するのは問題を引き起こしやすいですし、「もったいない」です（笑）

Safariのデータベース

Mac OS XにはFileMakerなどの便利で高性能なデータベースがありますが、SafariのSQLiteのようにオマケでついてくるデータベースもあります。

SafariのSQLiteにはFileMakerのようなGUIによるわかりやすい開発環境やデバッグ環境はなく、HTMLとJavaScriptをテキストエディタで書かなくてはなりません。おそらくは、開発途上にあるデータベースと言っても良いと思います。

Safariがデータベースとして使用しているSQLiteには以下のような利点があると思います。

１．オープンソースである
２．仕事として利用しても無料である
３．デーモンを走らせる必要がない
４．起動終了が早い

１．のおかげでSQLiteのデータベースファイルを参照し、編集できるツールがいくつか公開されています。２．は個人使用だけでなく、仕事として利用しても無料であると言う意味です。３．はデータベースを利用する度に逐一デーモンを起動や終了しなくてもよいので便利です。デーモンを起動したままにするのも一案ですが、そのためにわずかでもシステム起動時間が遅くなり、メモリなどを無駄にするのは私には納得できません。ただし、トランザクション処理のために呼び出しが非同期コールのようになり、初めての人には分かりにくく使いにくかもしれません。４．はSafariの起動も速いことも相まって、チョットしたメモや参照に便利です。

簡単な動作検証として小遣い帳を作り半年ほど利用してみました。小遣い帳のような小さなデータベースであれば十分に実用できます。ただし、SafariはWebブラウザのため、検索できても置換できません。日記（Blog）などの文章を入力するデータベースではJavaScriptやJavaなどによる検索置換のプログラムが別途に必要です。

登録: 投稿 (Atom)

OPPANIHA

2010年9月10日金曜日

データベースと表形式

Safariのtransaction

SafariのopenDatabase

最初に実行

Safariのデータベース

This site use "Blogger Syntax Highlighter" tools. Thanks

自己紹介