クライアントサイドデータベース

　SafariはHTML5のクライアントサイドデータベース機能を先取りしています。Safariの実装ではSQLiteを使っています。Cookieのようにサーバとのやりとりを行わず、また比較的大容量のデータをSQLで処理できるため、特にWebアプリケーションには有用でしょう。

　iPhone上では5MBまでのデータベースを作成でき、「ホーム→設定→Safari→Databases」で確認や削除ができます。

　データベースは「var db=window.openDatabase("<データベース名>","<バージョン>","<表示名>",<容量(bytes)>);」で開くことができ、「db.transaction(処理コールバック,失敗時コールバック,成功時コールバック)」によってトランザクションを制御します。引数として与えるコールバック関数function(tx){..}の中で、「tx.executeSql("",[<パラメータリスト>],処理コールバック,失敗時コールバック,成功時コールバック);」として実際にSQLを処理します。

　executeSqlのには「?」でパラメータ位置を指定でき、それぞれの位置に<パラメータリスト>の値が代入されて実行されます。プリペアドステートメントと同じです。コールバック関数には、トランザクションtxと結果セットrsが渡されます。結果セットの内容は、「rs.rows.item(<行番号>)['<カラム名>']」で参照できます。

　最も汎用的なSQL実行コードは図2-1の通りです。ここで使っているobjdump()はオブジェクトのプロパティ名と内容をダンプする関数、disp()は内容を表示する関数です。サンプルをダウンロード（http://www.thinkit.co.jp/images/article/146/5/14651.zip）できますので、参照ください。（14651.zip/1.90 KB）。

　クライアントサイドデータベースの説明はSafari JavaScript Database Programming Guide（http://developer.apple.com/webapps/docs/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Introduction/chapter_1_section_1.html）にあります。

　また、データベースとは関係ありませんが、iPhoneのSafariにはHTML5のアプリケーションキャッシュも実装されているという話もあります。アプリケーションキャッシュとは、Webアプリケーションをオフラインで使えるようにする仕組みで、クライアントサイドデータベースと組み合わせれば、オフラインでも動くWebアプリケーションが作れる日も近いことでしょう。

CSS3の装飾

　SafariはCSS3の機能を先取りして実装しています。

　テキストに影をつける、BOXからテキストがはみ出したときに「...」を使う、ボックスに影をつける、1枚の画像でボーダーをつける、背景サイズの指定、複数の背景画像を使う、マルチカラムの指定についてのサンプルをダウンロード（http://www.thinkit.co.jp/images/article/146/5/14652.zip）できますので、参照ください（14652.zip/6.72 KB）。このサンプルはiPhoneで図2-2のように表示されます。

　これらの指定はiPhoneだけでなくPCのSafari3.1でも有効です。また、FireFoxでも「-webkit-」を「-moz-」に変えることで、Operaの場合も「-o-」に変えることで対応しているものもあります。

　このようなCSS3を見据えた拡張の対応状況はCSS3.Info（http://www.css3.info/preview/）で見ることができます。

変形とアニメーション