「javacsriptコードの圧縮」 関連エントリイ in this Blog

• packerを使ってjQuery My UIを圧縮
• 複数のjsファイルを合体してPacker2で圧縮してアップロード・利活用

コードの圧縮は複数のjsファイルをインクルードすることから必須となった

このブログを開設してほぼ丸３年が経過しようとしてますが、つい一ヶ月前迄はインクルードしているjsファイルは自作のファイル１つだけでした。ところがjQuery.js を利用するようになってからは、２つ以上のjsファイルをインクルードするようになり、次第にこのブログの動作が重くなってきました。

jQuery自体は圧縮されているものを利用していますが、この際自作のコードも圧縮することにしました。

と言ってもpackerによる圧縮は、可読性が極端に悪くなるしメンテナンスが面倒なので、Compress javascript and css.による圧縮に留めました。それでも57％程度のファイルサイズにまで圧縮できましたので、まあ良しとすべきでしょう。

• jQuery関連エントリイ一覧 in this Blog

それは簡単にできることでした

jQueryを使ってコンテンツの移動を試してみました。それは或るコンテンツをクリックしたら当該コンテンツを移動するというものです。

以下がそのサンプルです。

画像をクリックするとまずその画像が横に広がり、そして元のサイズに戻ります。

次にゆっくりと２回スライドし、その後ゆっくりと画像が消えた後には、その位置で画像が表示された後に、ゆっくりと元の位置に戻ります。

なお、この animation は初期位置と初期表示状態に戻るように作成されており、繰り返しクリックすれば、何度でもアニメーションを繰り返し再現することが出来ます。

※　 この連続Animationにおいて、jQuery固有の「メソッドチェーン」を活用していることは言うまでもありません。いかようにもアニメーションを連続して指定出来ることは魅力的なことです。また、ここでは画像の伸縮が終了するのを待って、その後に移動を開始するようにするために、タイマーを設置して移動コマンドの発動を遅延させています。

次のscriptによって以上のエフェクトを実現しました

$(function(){
  //画像を伸縮するコード
  $("#slide").click(function(){
      $("#slide > img").animate({width:"95%"},1000)
      .animate({width:"150px"},1000);
      //2秒後にslideDiv関数を起動
      setTimeout("slideDiv()",2000);
  ;
  });
});
function slideDiv(){  //スライディングの為のコード
  $("#slide").animate( {left: '+200px',top:'+50px'}, "slow" )
      .animate( {left: '+400px',top:'0px'}, "slow" )
      .animate( {opacity: '0'}, 2000 )
      .animate( {left:'0px',top:'0px',opacity: '100'}, 1000 )
    ;
};

1. 「Paint.NET」 Google検索一覧
2. Paint.NETが正式リリース（マイコミジャーナル）
3. 窓の杜 - Paint.NET3.10

3.0バージョンは今年1月にリリース

上記サイトリスト2によれば、現行のver3.xxは今年になってリリースされたそうですが、ペイントに変わる無料ソフトとしてマイクロソフトが梃子入れしてしているこのソフトは、ペイントとは比較にならないほど高機能で、PhotoShop、PaintShopには及ばないが、Gimp、PictBear 2nd Edition等に匹敵する機能を満載している素晴らしいソフトのようです。

Paint.netは、レイヤーやヒストグラム補正、プラグインによる機能拡張など市販ソフト並の高度な機能を備えた画像編集ソフト。Windows付属の画像編集ソフト(MS Paint)の代替を目指し、オープンソースソフトウェアとして開発がスタートした。（上記2サイトからの引用）

最新版の3.10は上記３の窓の杜からダウンロード可能です。

無料画像加工ソフトの中でも秀逸です

これまでの数年間私は画像編集にPictBearを使ってきました。2nd Editionも愛用してきました。

しかしPaint.NETが登場してからは、それに乗り換えてしまいました。独特の操作方法を強いるPictBearよりも、Paint.NETの方が操作が一般的だったことや機能的にPictBearに見劣りしないからです。

まさかそんなところに原因があるとは・・・

jQuery UI のresizableとdraggableを利用し始めて、約一週間程が経過しました。

この間IEではリサイザブルなのに、FirefoxやOperaではアンリサイザブルな状況が続いており、その原因をずっと探求してきました。

実行用コードのミスだろうか？、css設定ミスだろうか？、マイJavascriptコードと干渉しあっているのだろうか？───等々、この一週間様々な原因を探求して来ました。しかし、上記のいずれにも原因があるとは思えず、もしやと思ってresizable用のcssをHTML内に置いてみたら、IE以外でもリサイザブル出来ることが分かりました。

そこで外部cssファイルのインクルード方法に問題があるのではないか、と思い至りました。そんなことは全く考えてもいなかったことなので、正直戸惑ってしまいました。

外部cssファイルをコピペしたのが間違いの出発だった

そもそも、外部cssファイルはこのブログを開設した3年前から、ずっと触ることなくそのままにしてきました。cssファイルの追加等必要なかったからです。

今回初めて、jQuery UIのリサイザブル要素を利用するために、外部cssファイルを追加しました。その時には、当然のことのように jQuery UI ホームページから借用してコピペで追加しました。

ところが、IE以外のブラウザでリサイズできない原因は、まさにこのコピペにありました。

元コードのlinkタグ内にtitle属性があることなd気にもとめずに、コピペして利用したのです。

そしてIEでは何の問題もなくリサイズが出来てしまいました。

今から思えば、このIEのバグが問題の究明を遅らせたと言えるかも知れません。

▲ToTop

外部cssファイル指定時の属性指定について

IE以外のブラウザでリサイズできなかった原因は、必要となるcssファイルが全く読み込まれていないことでした。

そしてそうなったのは、linkタグ内にtitle属性が存在していたためであることが、本日やっと判明したのです。

title属性をつけてスタイルシートを読み込む場合の注意点 - Web標準普及プロジェクトを読んで初めて、title属性の振る舞いを知ったのですが、異なるtitleを持つ複数のlinkタグが存在する場合には、２番目以降のtitle属性を持つlinkタグで指定されたcssファイルは読み込まれない、と言うのです。

Fc2ブログの場合title属性を有するlinkタグが既に存在していますから、その後に異なるtitle属性を有するlinkタグを設けた場合には、当該cssファイルは読み込まれない訳です。

上記サイトからlinkタグのtitle属性に関する注意点を抜粋します。

<link rel="stylesheet" href="foo.css" type="text/css">
<link rel="stylesheet" href="bar.css" type="text/css" title="グループ1">
<link rel="stylesheet" href="hge.css" type="text/css" title="グループ2">
　この例ではまず、最初の例と同様に固定スタイルシートのfoo.cssと、 二番目の優先スタイルシートのbar.cssが読み込まれます。
　しかし、この時点で初期に読み込まれる優先スタイルシートのグループはそのtitle属性値であるグループ1に決定されます。 次に出現するlink要素は優先スタイルシートではありますが、別の名前(グループ2)を付けられていますので、グループが異なります。 そのため、この例では三番目のhge.cssは読み込まれません。

• jQueryUI関連エントリイ一覧 in this Blog
• Packer/download/

それは行末にセミコロンが欠如してる箇所が複数あることから失敗していた

複数のjsファイルを合体してPacker2で圧縮してアップロード・利活用で書いた通り、packerによる圧縮は成功しませんでした。その原因を探求していく中で圧縮前のコードで行末にセミコロンがない箇所があることが、packerによる圧縮を不成功にさせている原因である、と解釈出来たので、根気よくそのような箇所を探して行末セミコロンを追加して、ついにpacker圧縮に成功しました。

packerにる圧縮率について

まずjQuery MyUIとして組み込んだファイルは次の5本で、これらのファイルサイズ合計値は40KBです。

• jquery.dimensions.js
• ui.mouse.js
• ui.resizable.js
• ui.draggable.js
• ui.draggable.ext.js

これらを一つのファイルに統合してCompress javascript and cssで圧縮して出来上がったファイルは30KBで、これを更にpackerにて圧縮して出来上がった最終的な圧縮jsファイルは17KB、圧縮率は42.5％でした。

これまでの圧縮前ファイルのインクルードを取りやめ、出来上がった圧縮ファイルをインクルードして利用していることは言うまでもありません。

▲ToTop

──────

• 「jQuery解読によるJavascript学習」関連エントリイ一覧 in this Blog

jQuery解読作業を進めるにつれ、Javascriptの基礎が如何に分かっていないか、ほぼ毎日のように痛感させられます。その意味ではjQuery解読は無謀なチャレンジであった訳ですが、それでも誤謬を犯すマイナスを埋め合わせて遙かに余りあるプラスがあることも毎日自覚されるので、恥を忍んで引き続きjQuery解読を進めるつもりでいます。

しかし、基礎の基礎が余りに分かってない自分に嫌気が指してきてしまい、匙を投げ出すような醜態は演じたくありません。そこで、自戒を込めて敢えて誤解していたこと、理解していなかったこと、不十分な理解に留まっていたことなどについて、つらつらと記述していきたい、と思います。

this の何たるかが一応分かったことを踏まえて・・・

早速jQuery()インスタンスメソッド内で、縦横無尽に活用されている this について、複雑なものを取り上げて学習を深めたい、と思います。

ここでは get()、pushStack()、 setArray()、index() を順に取り上げてみようと思います。this の登場回数が多いですし、何となく面白そうですから・・。

なお、以下において共通して InsObj とはインスタンスオブジェクトの意味です。

また、以下のコードリストではjQuery UI の resizable を利用していますので、サイズは縦横自由に変更できます。W3Cの仕様を守らないIE以外では、このブログに設定されているコンテナ幅を飛び出すリサイズは出来ないので、pre タグの overflowスタイルを ａｕｔo に設定し、W3C仕様の場合でも全文が見えるようにしました。

get() における this

95: get: function( num ) {　// 目的とする num 番目の n を引数とし
93: 　return num == undefined ?　//numが未定義ならば
94:
95: 　　// Return a 'clean' array
96: 　　jQuery.makeArray( this ) :　//InsObj の中の対象要素ノードの全体を配列
97: 　　　　　　　　　　　　　　　 //に変換して返値とし
98: 　　// Return just the object
99: 　　this[num];　//num が与えられていれば InsObj 配列から num 番目を
　　　　　　　　　　//抽出して返値とする。
100: },

pushStack() における this

102: pushStack: function(a) {　//所与の第一引数を受け取り、
103: 　var ret = jQuery(a); //それを第一引数とするjQuery(a)を起動して
    　　　　　　//別のInsObjを作成して、それを ret 変数に代入する。
104: 　ret.prevObject = this;　//pushStack()を起動した InsObj を
　　　　　　　　//retのプロパティに代入し、旧 InsObj をプロパティ
105: 　return ret;　//として持つ新規 InsObj を呼出し元に返す。
106: },

setArray() における this

108: setArray: function( a ) {
109: 　this.length = 0;　//InsObjに代入されているプロパティを全て削除して空にする。
110: 　Array.prototype.push.apply( this, a );　//空のInsObjに a 配列の要素を挿入
111: 　return this;　// a の各要素が代入された InsObj 配列を呼出し元にreturnする。
112: },

index() における this

118: index: function( obj ) {　//目的のオブジェクトを引数とする
119: 　var pos = -1;　//pos変数を初期化する。
120: 　this.each(function(i){　//InsObj からeach()メソッドを起動
121: 　　if ( this == obj ) pos = i;　//定義からthis＝InsObjであり、その各要素をobjと比較
122: 　});　　//して、objと一致すればその順番である i を pos 変数に代入する。
123: 　return pos;　//合致した位置が代入された pos の値を呼出し元に return する。
124: },

• packerを使ってjQueryMyUIを圧縮 in this Blog
• jQuery UI 関連エントリイ一覧 in this Blog
• Packer2 Download WebSite
• Compress javascript and css.

jQuery UIは重たすぎるので圧縮した

昨日早速利用し始めた jQuery UI は複数のjsファイルとcssを組み合わせて、様々な視覚効果を生み出すユーティリティですが、多数のファイルをincludeして利用するため、どうしても動作が鈍くなります。重たいのです。

そこでjQuery自体も利用しているJavascriptコード圧縮ツールを使って、以下のjQueryUIファイルを圧縮して一本化しようとしましたが、これには成功せず、変わりに圧縮率は低いのですが単純にスペースやタブを削除するだけの圧縮ツール（http://compressor.ebiene.de/）を使って一本化し、これをアップロードして利用するように変更しました。

※　その後packerによる圧縮に成功しました。→packerを使ってjQueryMyUIを圧縮

圧縮したjsファイル一覧（5 js files 元サイズ合計値40KB）

• jquery.dimensions.js……4KB
• ui.mouse.js……10KB
• ui.resizable.js……10KB
• ui.draggable.js……6KB
• ui.draggable.ext.js……10KB

以上の5本のJavascriptファイルをCompress javascript and css. Amazing code compression. Quick, easy and free!を利用して圧縮するとファイルサイズは30KBとなり、75％の容量となりました。本来ならば、packerを使ってもっと圧縮し半分くらいまでに縮めたいのですが、何度やってもpackerで圧縮するとうまく作動しませんでした。

※　その後packerによる圧縮に成功しました。→packerを使ってjQueryMyUIを圧縮

17日初稿、21日加筆修正

• jQuery 関連エントリイ一覧 in this Blog
• jQuery:blog↑本家によるjQuery UI 紹介ブログサイト
• UI - jQuery JavaScript Library↑本家によるjQuery UI 解説サイト

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

米国時間の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の仕様通りに作成した例

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

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

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

• 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を利用した箇所
   //２番目の引数である関数は特に必要としないので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データをどうしてうまく読み込めないのか全く原因が分からないので困惑しています。

• 秀丸 関連エントリイ一覧 in this Blog

それは数ヶ月のチェックを経て改訂された

約５ヶ月に及ぶベータテストを経て9月5日に秀丸ver７が登場しました。（改訂内容の概要はこちらに詳しい → 窓の杜 - 【NEWS】順調な進化を見せる定番テキストエディター「秀丸エディタ」v7正式版）

窓の杜社の上記ページで述べられているように最も注目されるのは単語補完機能です。インクリメンタルサーチのテキストエディタ版というか、通常入力時にインクリメンタルに候補サーチを行ってくれるので、重宝しそうです。五月蠅い場合にはその機能をオフにすればよいし、しかもファイルタイプ別にその補完機能のオンオフや候補の表示の仕方などを細かく指定出来ることも素晴らしい。

現在作成中のファイル内から自動的に候補を拾い上げる機能も素晴らしいし、辞書を指定することも出来るので、この補完機能はかなり強力だと思います。

特に単語補完機能の大きなメリットはJavascriptコードなどプログラムを書く場合に予約語や変数のスペルミスを犯しにくくなることです。

英語を母国語とする人間にとってはまだしも、2バイト圏の人間にとってアルファベットのスペルはどうしても間違いやすいものですから、補完機能によって正しいスペルの語彙を選択入力出来ることは大きな福音です。

その他の改訂点

Grep検索結果に対して置換出来るようになったこと、一定の指定した属性内だけを検索対象とすることが出来ること、等も歓迎されるべき点でしょう。自動起動マクロをファイルオープン時以外にも設定出来るようになったことも便利です。

改めて秀シリーズ礼賛

秀シリーズの諸アプリの大きな特徴は「痒いところに手が届く」行き届いた仕様です。その分オプション設定において何が何処にあるのか分かりにくい欠点がありますが、それでも行き届いた仕様は大歓迎です。だからこそ鶴亀メール登場時には直ぐにメーラーをそれに変えました。その後名称が秀丸メールに変わりましたが、現在まで秀丸メールを愛用し続けているのは、兎に角細部に気配りされている仕様故に他なりません。

有限会社サイトー企画は決して宣伝などは行いません。そこがまた気に入っているのですが、こうした秀逸なアプリケーションが脈々と存在し続けることは大きな意義があるのではないでしょうか。

• jQuery本家サイト
• jQuery Blogサイト
• jQuery関連エントリイ一覧 in this Blog

それは予告通りに実行された

9月10日（米国時間）にそれは公開されました。何度かサイトを覗いていたのですがこの一週間はチェックしなかったので、気づくのは今日になってしまいました。（RSS情報は取得していない）

あれこれのサイトで1.2の紹介がされ始めていますが、jQuery 1.2登場!! - マイコミジャーナル にあるように新UIは期待を持たせます。

上記サイト（ブログ頁の翻訳による紹介）に拠れば、新UIとは次のような豊富なエフェクト効果を実現するようです。

また、2007年9月16日(米国時間)には新しいjQueryのUIを公開するとしている。同UIはドラッグ可能でドロップ可能、リサイズ可能、シャドウデコレーションあり、スライダーあり、ソート可能、タブUIあり、アコーディオン対応、セレクト対応、ツリーUIあり、モーダルありとされており、しかもすでにドキュメントが用意されていて、テーマもあるとされている。発表前にUIのサンプル図を公開するなど、自信が伺える。16日の発表にも注目だ。（出典：マイコミジャーナル）

つまり、日本では17日になれば新UIを見ることが出来ることになります。

この新UIによって、つい最近このブログに取り入れたばかりの、任意の要素をドラグ＆ドロップ＋リサイズ可能にするプラグインも、もしかしたら不要になってしまうかも知れませんが、それはそれ。より簡単にドラグアンドドロップが可能となれば結果良しです。

• jQuery 関連エントリイ一覧 in this Blog

自作しようと思ったけれど、これは素晴らしい

自作しようと思いながら、必ずやプラグインがあるだろうと思って探したところ、それはやはりありました。しかもそれは単にある要素をドラグ可能にするだけではなくそのサイズも自由に操作できるものでした。更にそのコードは極めて短く、その点でも驚嘆してしまいました。

コードの解読を是非やってみたいと思いますが、まずはドラッグアンドリサイズを可能とするコードの有り様をここに例示しておきたいと思います。

サンプルを原典から複写して掲載

説明は全く不要なほど扱いは簡単です。リサイズ可能エレメントには右下に赤い■のボックスが表示されています。ここを「掴んで」dragすればそのエレメントのサイズを自由に変えることが出来ます。

またドラグ可能なエレメントはまさに掴んで移動することが出来ます。不透明化が設定されている要素をドラグ可能にしていますが、これを実現するコードはjQuery 独特のメソッドチェーンが活用されています。

それぞれの要素に必要なclassとidを設定し、後はスクリプトでそのidに対してメソッドを定義し、$(function(){･･･})で必要な関数を起動しておくだけで、リサイズ可能、あるいはドラグ可能にすることが出来るため、どの様な要素であれ簡単に設定することが出来ます。

これはリサイズ可能なエレメント

これはドラッグ可能エレメント

これは不透明化が設定されているドラッグ可能エレメント

そのプラグインはこちらで提供されている

それはjqDnR :: Minimalistic Drag'n'Resize for jQueryでゲットしました。

早速時計をドラグ可能としました

jqDnRによるドラグ可能とするコードを使って、以前からずっとやりたかった、このブログの右上に常に表示されるアナログ時計をドラグ可能としてみました。

補足：FirefoxとIEではrelative要素の挙動は異なる

今回のjqDnRプラグインを利用する過程において結果として知ったのですが、relative要素をリサイズやドラグアンドドロップの対象とした場合において、IEの場合には当該要素の親要素を越えてリサイズしたり移動したりすることが出来ます。一方Firefoxの場合には、あくまでも親要素の中でしか動かせません。

Firefoxの仕様の方がW3C勧告に則る「正しい」仕様なのでしょうが、実用上はIEのようにrelative要素が親要素を飛び出してリサイズ出来たり移動出来る方が、実用的であって使い勝手は良いと感じました。

• Firebug Lite 関連エントリイ一覧 in this Blog

Fc2ブログのMyファイルサーバーに置くことはやめたのです

何故ならばそのようにしてこのブログ以外からアクセスして利用することになった場合、Fc2の規約に違反する虞があるためです。

そこであれこれと無料サイトでファイル置き場として使えるものはないだろうか、と探したのですが、適当なものが見つからないため、Firebug Liteのブックマークレット作成は諦めていたのです。

ところが、あるサイトでそれが得られることが分かりましたので、早速使ってみようかと思います。

そのサイトとはFirebug Lite をブックマークレット化しました - WebOS Goodiesです。

こちらのサイトを開くとブックマークレットが掲載されていますので、それを利用者のブラウザのリンクバーに置けば、簡単にFirebug LiteをどのサイトでもIEや、Operaで使えるようになる訳ですから、大変便利です。

感謝！WebOS Goodiesさん！

結局既成品を使うことにしました

自分でアクセスランキングを作ろう、と思って色々画策してきたのですが、それは無理でした。

何故ならばreferre情報を累積していくためには、訪問者がこのブログを閲覧してくれた時に自動的にそのreferrer情報をこのブログのファイルサーバーに送ることが出来なければならないからです。しかしそれは無理なことです。（それが出来ないことを今更ながらに気がつくとは余りに情けない話です。）

昨日まではreferrer情報がアップロードされることを前提にして、それを如何にして取得するかばかりを考えていたため、必至になって動的なscriptタグ設置方法を検討していたのです。

Ajaxテクニックを利用してファイルのアップロードが出来るのではないか、と錯覚したのは、DojoやjQueryのプラグインでファイルアップロードが出来る、という記述をある書籍で読んだためだったのですが、それはあくまでもサイト管理者がそれを行えるに過ぎないということに、もっと早く気がつくべきでした。

誰でも簡単に他人のサイトにファイルアップロードができてしまうとすれば、それはセキュリティ上由々しき事態を招くことになり、そんな仕様はAjaxと雖も許容するはずがないことを、何故思い至らなかったのか、と今更ながらに思います。

かくして、仕方なく既成品を利用することとしました。

Fc2ランキングとi2iのリンク元自動ランキングの２つを設置したのです。それらはトラックバック情報の下に一覧表として仮に設置しました。

既成品の欠点

設置した２つのランキングとも、このブログサイトへのアクセスランキングであって、各エントリイに対するアクセスランキングではないのです。本来得たかったのは各エントリイに対するアクセス状況であり、それこそが私にとってもまた閲覧者にとっても有益なreferrer情報となり得ると思うのです。

このブログ全体へのアクセスランキングではどのテーマ、あるいはどのカテゴリイに対してアクセスが多いのかを即座に判断できない訳で、その意味では既成品には満足がいかないのです。

しかし、無料サービスを利用してる訳ですから贅沢は言えないのでしょう。

改めてjQuery本家サイトのDocumentを読んでみました。するとver1.2以降では異なるドメインからもスクリプトを取得できると書いてあります。現在のバージョンは1.1.4ですから現行バージョンでは、クロスドメイン対応してない、と言うことになります。

実際に試してみましたが、矢張り駄目でした。

test.jsをサーバーにアップロードして、そのURIをgetScripptの引数としてみました。ここに簡単にするためにtest.jsの中身は単純にfunction(){alert('HogeHoge')}としました。

その上で当エントリイ内にスクリプトタグを挿入し次のコードを書いてXMLHttpequestオブジェクトを利用してみました。

$(function(){
	$.getScript("http://blog1.fc2.com/x/Username/file/test.js", function(){
		alert("Script loaded and executed.");
	});
});

確かに何も変化しません。firebugで追跡してみたらエラーはドメインが見つからないことを示唆していました。

Dojoフレームワークでは既に異なるドメイン間のデータ受け渡しが可能となっているようですが、残念ながらjQueryの場合、9月に登場する予定の1.2を待たなければ駄目なようです。

と思っていたら・・・pluginがありました

上の記事を書いてから何気なく「クロスドメイン jQuery」でグーグったら何とクロスドメイン対応のプラグインがありました！！

その名もずばり　jQuery JSONP plugin (iandeth.) ですから昨日から探していたものに、やっと到達した事になります。

今晩中にFc2ブログへのFc2ファイルサーバーからのAjaxな読み込みが可能となれば嬉しいのですが・・・

──────

そのままでは使えない！

何故ならばブログのドメイン名とファイル保存先ドメイン名が微妙に異なるからです。つまりブログ本体は http://username.blogN.fc2.com/ にあるのに、画像等々の保存ファイルは http://blogN.fc2.com/X/Useraname/file/ にあります。

つまり、XMLHttpRequestを使う際に、ファイルを呼び出したい場合、当該ファイルを指定するURIは、ブログ本体のドメインと異なるドメインを指定することになってしまいます。

同一ドメイン内でない限り、XMLHTTPRequestオブジェクトによるリクエストは送れないから（ウノウラボ Unoh Labs: Dojoで簡単にクロスドメインAjaxを実現）、左のサイトで述べられているような方法をマスターしなければならないようです。

Fc2ブログユーザーフォーラム内にある GreyBoxが利用できません！ という質問もこのドメインの違いによって発生している現象なのかも知れない、と勝手に解釈しています。

ということでJSONP（JSON with padding)を学習しなければなりません。ふぅ〜。

MyFc2Blogファイルサーバーに送信済みのテキストファイル（callback関数の引数としてJSON形式データを格納）から、データを取得してみる

ここをクリックしてみてください。

すると、この下の行の文字列がサーバーから送られてくる文字列に入れ替わります。

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

一体何をしたのか？

Fc2ブログのデータファイルサーバーに様々なデータを置いておいて、その中から随時データを呼び出してみたいのです。それが可能となれば、各エントリイの参照元一覧を随時更新していくコードを書くことが出来るのではないか、と推測しているためです。

そこでこのエントリイでは、初めて作成してみたJSON形式のデータをファイルサーバに置いて、そこからデータを取り出す実験を行ってみました。

ここでの実験は、IE7、FireFox2及びOpera9で作動を確認しましたが、Sleipnir2で閲覧する場合には、「ActiveXのダウンロードを許可」をOnにしたり、キャッシュや履歴を削除しないとうまく作動しないようです。自動的に当該エントリイのキャッシュを削除するコードを組みたいのですが、その方法が分かりませんので手の打ちようがありません。

▲ToTop

動的にファイルサーバーから取得するJSONデータの形式

取得する形式は或る目的をもって
　　"a":{"a-1":"何やらかんやら"},・・・,"b":{"b-n":"hogehoge"}
としました。

aはMyFc2ブログのエントリイナンバーを、a-1等は参照元エントリイの重複数を、"何やらかんやら"は参照元URIを想定して、こうしたJSON構造にしてみました。

この形式のJSONデータを取得できない限り、当該ブログへの参照元一覧を作ることは出来ないので、こうした構造のJSONデータの取得を試してみたのです。

Javascriptコードについてはこのエントリイの末尾に記しておいて、後ですぐ見られるようにしたいと思います。

ここでの作業の性格

Ajaxなコードを利用した訳ではなく、単にスクリプトタグを動的に挿入しただけです。JavaScriptの外部ファイル読込みを利用してクロスドメインプログラミングを可能にする方法の１つを試してみたかったのです。

ここでは、一方で、動的にインクルードする外部スクリプト内で関数の実行を定義し、他方、呼び出し元HTML内に記述したコード（最終的にこのコードを利用する時には、headタグ内でインクルードするjsファイルの中に書くことになりますが、実験なので当該documentタグ内にスクリプトを記述）内で呼び出す関数を定義し解読させる、という逆転した方法を───この方法はコールバック関数においてはよく使われるようですが、良くは分かっていません。───初めて使ってみました。

JSONP（JavaScript Object Notation with Padding）なるものに一歩でも近づくことが出来るように、学習に方向性を持たせたつもりです。

JSONPなるもの

これについては、様々なサイトを閲覧させていただき、その一端を知ったつもりです。

───JSONP関連サイト───

1. throw Life - 超シンプルなJSONP入門
2. JSON | mg.to
3. snippets from shinichitomita’s journal - ブラウザからJSONで呼び出せるサービス一覧

そもそもJSON形式のデータを提供しているサイトから、データを取得するためのコードはWebサイト上に沢山見つかるのですが、Fc2ブログ内の自分のファイルサーバー（ドメインは異なる）からデータを取得することを試みたいので、JSON形式データを提供するサーバーからのデータ取得は、当面関心外のことであって、JSONに言及した多くのサイトは直接そのままでは参考にならないのでした。

上記関連サイトリスト３を見て、沢山のJSONデータ提供サイトがあることを初めて知った程、これまでJSONとは無縁な世界でコードを書いていましたから、無理もないことなのですが、Ajaxの登場以来、否活用以来、Javascriptの世界は急速に拡大進展していることを改めて知らされました。

▲ToTop

JSONデータを取得するJavascriptコード

上記の1にリストアップしたサイトを大いに参考にさせていただき、また jQuery のextend()メソッドを参考にしてコードを作りました。

JSONデータファイル（ファイル名：jsonTest.js）

callback({
  "1":{
    "text1-1" : "これはサーバーから取得した文字列です。" ,
    "text1-2" : "これもサーバーから取得した文字列です。" ,
    "text1-3" : "更にこれもサーバーから取得した文字列です。" ,
    "text1-4" : "更に更にこれもサーバーから取得した文字列です。"
  },
  "2":{
    "text2-1" : "まだパイプの煙" ,
    "text2-2" : "まだまだパイプの煙" ,
    "text2-3" : "まだまだまだパイプの煙" ,
    "text2-4" : "まだまだまだまだパイプの煙"
  }
});

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

このエントリイ内で記述したJavascriptコード

  //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>";
    }
  }
  document.getElementById("result").innerHTML = txt;
    //上の行でHTML内にcallback()関数の実行結果を挿入した直後に、
    //動的に挿入したscriptタグを削除する。
  var removeElem = document.getElementById("appendedScript");
  if (removeElem) document.body.removeChild(removeElem);
}

  //scriptタグを挿入する
function insertTest(url){
  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.src = url;
  s.id = "appendedScript";
  document.body.appendChild(s);
}

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