2010年6月5日土曜日

1. SafariのJavaScript

AppleがSafariに（実験的に？）搭載しているHTML 5の仕様にはデータベースなど興味深いものがたくさんあります。そのデータベース機能などを利用したサンプルがWebKitのサイトに公開されています。

http://webkit.org/demos/

サンプルはこの下の各ディレクトリにまとめてありますので、Safariでソースコードをもとにファイルを一つずつ手元に保存すると、ローカルでも実行できます。wgetなどのツールをご存じの方はまとめてダウンロードすると良いでしょう。ちなみにこの項目を書いている2010/06/01の時点では以下の四つのデモが入っています。
  • calendar
  • editingToolbar
  • sticky-notes
  • transitions-and-transforms
また、デモの一つeditingToolbarは、Mac OS Xに標準で付属しているDeveloper向けキットにもあります。深いディレクトリにあるので、"FancyEditingToolbar"で検索するとよいでしょう。

このサンプルの中で一番古いsticky-notesは2007年10月19日公開されています。このsticky-notesのHTMLファイルを読み込むと、画面に黄色い四角が表示されています。この四角には文字を書く事ができます。HTMLで画面に四角を書くとなると、とりあえず<table>タグを使う事を考えてしまう私には驚きです（苦笑）

しかも、この四角をクリック ドラッグするとウィンドウ内の好きなところに移動します。その移動は昔のMacintoshの用に枠をアニメーション表示して、ボタンを放したところに表れるというものではなく、パワフルなリアルタイム描画です・・・と書けば年寄り扱いされますね（笑）

さらに、「New Note」ボタンを押すと黄色い四角が追加表示されます。黄色い四角の上にマウス カーソルをおくと左上にDashboardと同じボタンが表示され、クリックすると四角がアニメーションで閉じます。アニメーションの動きが良くわからない方はシフト キーを押してクリックしてみてください。Dashboardと同じゆっくりとしたアニメーションを楽しめます。このコード自体はDashboardのStickiesの簡易版と考えれば良さそうですが、これを発展させればWebブラウザ内にウィンドウ システムが出来ます。

このコードのデータベース部分に関しては英語や日本語で紹介しているサイトがありますが、他の部分もなかなか難しい事をしています。他の部分に関してインターネットを調べてみたのですが、解説している資料が見つかりませんでした。やむなく、コードを書いて調べた結果が以下の項目です。きっと何処かに仕様書や解説があると思うのですが、枯れ木も山の賑わい と思い紹介します。
データベース部分は、関してはSafariとSQLiteをキーワードにしてインターネットを検索すれば、さまざまな解説が日本語と英語で出てきますので、そちらを参照ください。これはこれで面倒で色々とある事は確かなのですが、今回は話しが長くなるのでパス！だれも年寄りの長話は聞きたくない、いや読みたくないでしょう（笑）

なお、実験した環境はMac OS X 10.5.8、Safari 4.0.4 (5531.22.7)とBBEdit 9.5(2740)のPreviewですが、Firefoxでも動く事があります。
<next>
投稿者 時刻:
ラベル:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)