ajax

Drag & Drop - Ext JS 版

 

Ajax JavaScript Framework の Ext JS 2.0 を使用して作成した、ドラッグ&ドロップのサンプルです。

Ext JS は、Yahoo! UI, jQuery, Prototype といった、他の Framework と組み合わせて使うことが出来ますが、 今回のサンプルでは、他の Framework とは組み合わせずに、すべて Ext JS でまかなっています。

サンプルについて、ブラウザごとの動作確認結果は Drag & Drop (Ajax JavaScript) にまとめてあります。

BOOOgle = Google Bookmarks + Greasemonkey

 

Google Notebook に統合された Google Bookmarks は、本体とも言える Google Bookmarks よりも検索が高速で、 何よりも「まともな」検索結果を返します。 ページのデザインや操作性についても、概ね納得の行くのもになっています。 これらのことは、限りなく BOOOgle の存在意義を無くしてしまいました。 ここで一旦 BOOOgle の開発を打ち切って、Google の出方に注目することにします。
(追記:2007-11-07)

BOOOgle は、 Google Bookmarks (日本語モード)を拡張する Greasemonkey スクリプトです。 サポート対象のブラウザは Firefox 2.0 です。

BOOOgle v0.9.6 2007-10-11 の更新内容

  • [修正] Google Bookmarks の仕様変更に追従しました。
  • [変更] ページデザインは必ず BOOOgle のオリジナルデザインに変更されます (変更の有無を設定する機能は削除しました)。
  • [変更] ☆(削除)がクリックされた場合は、常に確認メッセージ 「このブックマークはラベルもしくはメモ付きです。 削除しますか?」が表示されます(ラベルとメモが無い場合でも)。
  • [変更] メモ欄は常に表示されます(ラベルとメモが無い場合でも)。

JavaScript Framework 人気があるのはどれ?

 

JavaScript Framework の人気を調べてみました。

Drag & Drop - Dojo 版

 

Ajax JavaScript Framework の Dojo 0.4.1 を使用して作成した、ドラッグ&ドロップのサンプルです。

サンプルについて、ブラウザごとの動作確認結果は Drag & Drop (Ajax JavaScript) にまとめてあります。

Drag & Drop - jQuery 版

 

Ajax JavaScript Framework の jQuery 1.2.1 と jQuery UI (trunk) を使用して作成した、ドラッグ&ドロップのサンプルです。

jQuery UI のバージョンは 1.0 ではなく、trunk を使用しています。 理由は、1.0 では IE 関連のコードがバギーなためです。 実際に 1.0 を使用してドラッグ&ドロップのサンプルを作成したところ、 Firefox, Safari, Opera では動作しましたが、IE では動作しませんでした。 そして trunk を使用した場合は、問題なく動作することを確認しました。

サンプルでは trunk の中から、次の6本のモジュールをダウンロードして使用しています。

(1) Plugins dimensions  jquery.dimensions.js
(2) jQuery UI  ui.mouse.js
(3) jQuery UI  ui.draggable.js
(4) jQuery UI  ui.draggable.ext.js
(5) jQuery UI  ui.droppable.js
(6) jQuery UI  ui.droppable.ext.js

サンプルについて、ブラウザごとの動作確認結果は Drag & Drop (Ajax JavaScript) にまとめてあります。

Drag & Drop - mootools 版

 

Ajax JavaScript Framework の mootools 1.11 を使用して作成した、ドラッグ&ドロップのサンプルです。

サンプルについて、ブラウザごとの動作確認結果は Drag & Drop (Ajax JavaScript) にまとめてあります。

Cross Browser

 

クロスブラウザに関する話題をまとめます。

XMLHttpRequestオブジェクトを取得するには?

 

Ajax で重要な役割を果たす XMLHttpRequest オブジェクトですが、 IE 7 からはネイティブオブジェクトとしてして提供されます。 しかし、当面はネイティブオブジェクトを持たない IE 6 が高いシェアを維持することでしょう。

本稿では、IE 7 のネイティブオブジェクトを使用することを前提にしたクロスブラウザ対策を考えて見ます。

まずは、ブラウザの実装について調べた結果を次の表にまとめました。 この調査には「ブラウザ実装診断ツール」を使用しました。

Drag & Drop - Yahoo! UI (YUI) 版

 

Ajax JavaScript Framework の Yahoo! UI (YUI) 2.4.1 を使用して作成した、ドラッグ&ドロップのサンプルです。

サンプルについて、ブラウザごとの動作確認結果は Drag & Drop (Ajax JavaScript) にまとめてあります。

Drag & Drop - script.aculo.us 版

 

Ajax JavaScript Framework の script.aculo.us 1.8.0 と、 これに同梱されている Prototype 1.6.0 を使用して作成した、ドラッグ&ドロップのサンプルです。

サンプルについて、ブラウザごとの動作確認結果は Drag & Drop (Ajax JavaScript) にまとめてあります。

Drag & Drop - 共通ソース (CSS, HTML)

 

ドラッグ&ドロップのサンプルは、幾つかの異なる Ajax Javascript Framework に対して作成しています。 そして、どのサンプルのソースコードも、CSS, HTML, JavaScript の3つのパートで構成されています。

そのうち CSS と HTML についてはどのサンプルでも共通であるため、ここにまとめて掲載します。 JavaScript のソースコードについては、それぞれの Framework の記事で掲載します。

Ajax

 

Ajax関連の話題をまとめます。

Drag & Drop - Rico 版

 

Ajax JavaScript Framework の Rico 1.1.2 と、 これに同梱されている Prototype 1.4.0 を使用して作成した、ドラッグ&ドロップのサンプルです。

サンプルについて、ブラウザごとの動作確認結果は Drag & Drop (Ajax JavaScript) にまとめてあります。