iPhone特有の技術いろいろ
クライアントサイドデータベース
SafariはHTML5のクライアントサイドデータベース機能を先取りしています。Safariの実装ではSQLiteを使っています。Cookieのようにサーバとのやりとりを行わず、また比較的大容量のデータをSQLで処理できるため、特にWebアプリケーションには有用でしょう。
iPhone上では5MBまでのデータベースを作成でき、「ホーム→設定→Safari→Databases」で確認や削除ができます。
データベースは「var db=window.openDatabase("","","",);」で開くことができ、「db.transaction(処理コールバック,失敗時コールバック,成功時コールバック)」によってトランザクションを制御します。引数として与えるコールバック関数function(tx){..}の中で、「tx.executeSql("
executeSqlの
最も汎用的な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/)で見ることができます。