人気ランキング (TOP 20)
注目のタグサイト内検索カスタム検索インターネット、コンピュータ 向きの検索 
カスタム検索
最近の更新連絡先
|
demoDrag & Drop - HTML5 版
Firefox 3.5 以外に、Chrome 4 でも動くように JavaScript を修正しました。 Chrome 3, Safari 4 では視覚的に問題がありますが動きます。 修正内容は更新履歴を参照してください。 2009-11-18 HTML5 の Drag and Drop API を使用して作成した、ドラッグ＆ドロップのサンプルです。 作り方は、 HTML5 Drag and drop demonstration を参考にしました。 実際に動いているものを目にすると励まされますね。 どうも有難う、Laurent Jouanneau. 他の資料としては、 ドラッグの操作 - MDC あたりにも目を通しておくと良いかも知れません（より良い実装方法が見つかるかも？）。 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) にまとめてあります。 Hello, world! - Adobe Flex 版
「Hello, world!」には 2通りのグラデーションをかけます。 これを「TabNavigator（タブナビゲータ）」コンポーネントを使用して切り替え表示できるようにします。 当初、グラデーションには水平方向と垂直方向のものを考えていましたが、 垂直方向のグラデーションは実現できなかったので、 水平方向のみでバリエーションを作ります（左→右、右→左 の2通り）。 Flash Player 9 をインストールしている方は、実際に動かしてみることができます。 以下に、インストールしていない方のために実行イメージを掲載しておきます。 Hello, world! - XUL 版
「Hello, world!」には 2通りのグラデーションをかけます。 これを「tabbox（タブボックス）」コンポーネントを使用して切り替え表示できるようにします。 Firefox のユーザは実際に動かしてみることができます。 以下に、他のブラウザのユーザのために実行イメージを掲載しておきます。 Hello, world! - Silverlight 版
「Hello, world!」にはグラデーションをかけますが、当初考えていた 2通りではなく 1通りだけにします。 これは、Silverlight 1.0 の XAML では、タブのようなリッチコンポーネントがサポートされていないため、 手軽に切り替え表示を実現できないからです（タブなどは Silverlight 2.0 でサポートされる見込みです）。 Silverlight をインストール している方は、実際に動かしてみることができます。 以下に、インストールしていない方のために実行イメージを掲載しておきます。 Drag & Drop - Adobe Flex 版
ルック＆フィールは、これまでに作成してきた Ajax/JavaScript Framework を使用したものとは少しだけ異なります。 このデモは、Flash Player 9 がインストールされているブラウザ上ですぐに動かすことが出来ます。 SVG形式の地図データを Google Maps 風にスクロール
デモは HTML + CSS + JavaScript(jQuery) で作成されており、トータルで100行ほどの簡素なものです。 地図は上下に2つ表示されますが、上側が今回作成したデモで、下側が Google Maps です。 両者は同じ場所（北海道 利尻島 の一部）を表示します。 動作確認は、Firefox 2.0.0.9, Safari 3.0.3, Opera 9.24 で行いました。 IE7, IE6 では SVG がサポートされていないため動作しません。 <canvas>タグを UI の構築に利用<canvas>要素の上に他のHTML要素を重ね合わせることで、これらが協調的に動作するサンプルを作成しました。 サンプルでは、関係があるもの同士を線で結ぶタイプの出題を再現しています。 <canvas>要素には線の描画だけを任せて、その他のユーザインタフェースには <div>, <table>, <img>, <p> といったものを使用して構成しています。 動作確認は、Firefox 2.0.0.4, Safari 3.0.2, Opera 9.22 で行いました。 IE 7, IE 6 では <canvas>要素がサポートされていませんが、 ExplorerCanvas を読み込むことで動作するようにしてあります。 Google Gears の SQLite を試してみるブラウザに Google Gears をインストールすると、ローカルデータベースとして SQLite が使用可能になります。 SQLite へのアクセスには JavaScript を使用することができます。 本稿では、小さなサンプルにより JavaScript から SQLite へのアクセスを確認します。 Firefox または IE に Google Gears がインストールされていれば、 記事中の Demo をすぐに試してみることができます。 残念ながら、Safari と Opera はサポートされていません（2007年7月9日現在）。 動作確認は、Firefox 2.0.0.4, IE 7.0.5730.11 で行いました。 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 サンプルについて、ブラウザごとの動作確認結果は Drag & Drop (Ajax JavaScript) にまとめてあります。 Drag & Drop - mootools 版Ajax JavaScript Framework の mootools 1.11 を使用して作成した、ドラッグ＆ドロップのサンプルです。 サンプルについて、ブラウザごとの動作確認結果は Drag & Drop (Ajax JavaScript) にまとめてあります。 Demo - はてな認証このデモは停止中です。（2006-09-06）
【注意】 これはデモに過ぎません。 このデモでは、「はてな」で認証が成功するとユーザIDの通知を受け取って表示しますが、 それ以上のことはしません。 このサイトに記事やコメントを投稿するための権限は与えられません。 Drag & Drop - HTML4 版記事のタイトルを、「Drag & Drop - フルスクラッチ版」から「Drag & Drop - HTML4 版」に変更しました。 （2008-09-19） Ajax JavaScript Framework を使用せずに、フルスクラッチで作成したドラッグ＆ドロップのサンプルです。 サンプルは、W3C DOM 対応ブラウザ（Firefox, Safari, Opera など） を前提として作成していますが、 DXBL（Diaspar Cross Browser Layer） を読み込むことにより、 IE (Internet Explorer) でも動作するようにしてあります。 サンプルについて、ブラウザごとの動作確認結果は Drag & Drop (Ajax JavaScript) にまとめてあります。 Drag & Drop - Yahoo! UI (YUI) 版Ajax JavaScript Framework の Yahoo! UI (YUI) 2.4.1 を使用して作成した、ドラッグ＆ドロップのサンプルです。 サンプルについて、ブラウザごとの動作確認結果は Drag & Drop (Ajax JavaScript) にまとめてあります。 |
IT Books 刊行スケジュール
（ブログ形式） サイトの統計Powered by
|
|
Flex (MXML) を使用して、ベクタグラフィックスによる「Hello, world!」を作成します。
MXML では、ベクタグラフィックスの定義に SVG を使用することが出来ます。
MXML では、SVG をイメージ (JPEG, PNG, GIF) と同様に扱います。
これは、XUL が SVG をシームレスに扱うのとは対照的です。
XUL を使用して、ベクタグラフィックスによる「Hello, world!」を作成します。
XUL では、ベクタグラフィックスの定義に SVG を使用することが出来ます。
XUL では、SVG をシームレスに扱うことができるので、1本のファイルで作成することにします。
Silverlight (XAML) を使用して、ベクタグラフィックスによる「Hello, world!」を作成します。
XAML では、SVG に良く似た構文を使用してベクタグラフィックスを定義できます。
