FC2ブログ

08 | 2007/09 |  10

  1. 無料サーバー

User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載!


jQueryUIを早速体験

17日初稿、21日加筆修正

それは予定通り公開された

米国時間の16日、つまり日本では17日になって、jQuery UI (以下jqUI)が公開されました。

jqUI は 17 本のプラグインjsファイルの集合体で構成されており、必要に応じて随時複数のjsファイルと関連するcssファイルをインクルードして利用する仕組みになっています。

現時点で提供されているInterfaceは、Draggables、Droppables、Sortables、Selectables、Resizables、Accordion、Calendar、Dialog、Slider、sortable Table、tabbed Content Pane、Shadow、Magnifier──の13種類ですが、Menu, Form Controls, Tree, Splitter, Rich Text Editor, 及び Uploaderはまだ未完成のようです。(UI - jQuery JavaScript Library

素敵な機能が満載なので色々と楽しめるでしょうが、それらの全てを利用するつもりは今のところありません。必要に応じて数種類を活用しようかと思っています。

手始めに Resizables & Draggable 要素を作成してみました

設定が面倒でかなり時間が掛かりました。何故ならばサンプルにおける設定とダウンロードしたコードによる設定が、どうも異なっているからです。resizable要素やdraggable要素は複数の親・子要素から構成されますが、その設定仕様が分かりにくいためです。

そのため、リサイズ対象となる箇所とid設定に非常に手間取りました。サンプルソースを見るとリサイズ対象を包むrelative要素にidを設定し、そのidを対象としてリサイズ可能とするコードを書くようになっているのですが、当初は実際にはそれでは思ったように作動しませんでした。しかも、いくつものファイルをFc2ブログサーバーにアップロードして、かつ適切にcssを設定しないと駄目なので、二重に手間が掛かりました。更にブログの文字色と背景色とことなるカラーを使って要素を作成しようとすると、ここでも混乱が生じます。

あれこれと試行錯誤の末にやっと実現したものの、その面妖さには参りました。

しかもかなり重いのです。利用可能になるまで結構待たされてしまいます。結局の所、このResizables & Draggableは現在の仕様のままでは決して実用的とは言えません。

必要なファイルを一本にまとめ圧縮してインクルードしない限り、実用的とは言えないかも知れません。

以下がやっとの思いで実現したリサイザブル&ドラガブル要素の例です。但しIE系は大丈夫ですが、FireFoxではエラーが出てしまいドラグ&ドロップは出来ますがリサイズは作動しません。

上記のIE以外でun resizableだった理由については、苦節丸二日を要してやっと解明できました。IE以外でリサイザブル出来なかった理由については、別エントリイ(外部スタイルシートのtitle属性について)にて述べます。

jqUIの仕様とは異なる最初の作成例

このボックスは大きさを変えられます。文字の配置も自動的に調整されます。またドラグ&ドロップで移動することも出来ます。

このボックスはリサイズ用のハンドラーが自動的に出現し大きさを変えられます。文字配置も自動的に調整されます。またドラグ&ドロップで移動することも出来ます。

jqUIの仕様通りに作成した例

このボックスは大きさを変えられます。文字の配置も自動的に調整されます。またドラグ&ドロップで移動することも出来ます。

このボックスはリサイズ用のハンドラーが自動的に出現し大きさを変えられます。文字配置も自動的に調整されます。またドラグ&ドロップで移動することも出来ます。

スポンサーサイト



JSON形式データ取得テスト (2)──jQuery1.2を使ってJSONデータをクロスドメイン取得

関連エントリイリスト in this Blog

クロスドメイン対応となったjQuery1.2にて、Fc2ブログデータサーバーからJSONデータを取得した

jQuery1.1.xはクロスドメイン対応となっていなかったので、ブログと異なるドメインにあるJSONデータはマイブログからjQueryを使っては取得出来ませんでした。しかし1.2になってクロスドメイン対応となったので、既に書いたコード(JSON形式データ取得テスト)をより簡単にすることが出来ます。

そこで早速それを試してみました。以下の文章は「JSON形式データ取得テスト」で使用したものと全く同様のもので、ここでFc2ブログのマイファイルサーバーからJSON形式データを取得します。

ここをクリックすると下の文字が変わります。

ここがサーバーからの文字列に入れ替わります。

スクリプト

jQuery1.2適用により、一層簡単になったコードは以下の通りです。ここに打ち消し線部分は、クロスドメイン非対応のjQueryを使わずに、以前に独自に書いたコード部分を示します。jQueryを使うことによってコードはかなり短くなりました。

  //JSONデータを取り出すcallback関数定義
function callback(){
  var x =0, txt ="", obj, obj2;
    //jQueryのObject取得方法を参考に上記のJSON形式の
    //オブジェクトからプロパティを取得した。
  while ( (obj=arguments[x++]) !=null ) {
    for (var key in obj){
      for (var key2 in obj[key])
      txt +="<div>"+key+" : "+key2+" = "+obj[key][key2] + "</div>";
    }
  }
  //以上は全く変わらないが、以下は不要となる。
  $("#result").html(txt);  //折角なのでこの部分もjQueryを利用した
  document.getElementById("result").innerHTML = txt;
  var removeElem = document.getElementById("appendedScript");
  if (removeElem) document.body.removeChild(removeElem);
}

  //jQuery1.2利用
function insertTest(){
  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.src = url;
  s.id = "appendedScript";
  document.body.appendChild(s);
   //↓がクロスドメイン対応jQuery1.2を利用した箇所
   //2番目の引数である関数は特に必要としないのでnull値とした
  $.getScript(fileServerURL,null); 
}

赤いボックスをドラグ&ドロップするとリサイズ出来ます。

続きを読む

jQueryはどのようにしてクロスドメイン対応を行っているのか?

それを知るには $.getScript() の挙動を知らなければなりません。

そこでFirebugを利用して挙動を追跡し、流れを理解しました。それはおよそ次のようになっていました。全てはjQuery独特のextend関数によって様々な関数が利用されていました。

  1. $.getScript()を実行すると、直ぐにget()関数が呼び出される。
  2. get()実行の結果、$.ajax()がたった1つの引数を伴って返される。
  3. ajax()関数によってどのようなリクエストが行われたのかチェックする。
  4. 対象URIが異なるドメインで、かつ目的がスクリプト取得だった場合、ヘッダーにスクリプトタグが追加され、それを使用後には削除する。

以上のように結局の所スクリプトタグをHTMLヘッダー部に挿入し、使用した後にそれを削除している訳で、こうした挙動は以前作成したコード(JSON形式データ取得テスト)におけるクロスドメイン対応方法と全く変わりません。

Sleipnirではajaxを使って取得したデータをうまく挿入出来ない

理由が全く分からないのですが、Sleipnir2ではクリックしてもファイルダーバーからのJSONデータを所定の場所に挿入することが出来ません。一方、Firefox、Opera、IE7では問題なくファイルサーバーからのJSONデータが所定の場所に挿入されます。

Sleipnir2でJSONデータをどうしてうまく読み込めないのか全く原因が分からないので困惑しています。

 90%近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。

 多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。

 StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。

 クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。

 起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。

 ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。

 無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。

 画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか? 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。

 複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
(以下当該サイトから抜粋)初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。

 Animation Gifファイルを作れる無料ソフト。

 キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。

 画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。(Vectorの当該ソフト紹介頁より抜粋引用)

 名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。

 ランチャーソフトは沢山あるが、中でもこれが一押しだ。2年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。

 AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。

 IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood! sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。

 利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。

 WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い! 数多あるMedia Playerの王様と言えるだろう。

 自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。

 DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト=「DVDなToolたち」なるHomepageが開きます。