08 | 2007/09 |  10

  1. 無料サーバー

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

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


オリジナルのjavascriptコードも圧縮した

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

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

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

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

jQueryを使ったコンテンツ移動テスト

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

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

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

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

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

なお、この 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 )
    ;
};

Paint.NETはなかなか秀逸だ!

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

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

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

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

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

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

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

外部スタイルシートのtitle属性について

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

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タグが存在する場合には、2番目以降の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は読み込まれません。

packerを使ってjQueryMyUIを圧縮

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

複数の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


jQueryUI :resizable、draggable の仕様について

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

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

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

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

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

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

また、以下のコードリストではjQuery UI の resizable を利用していますので、サイズは縦横自由に変更できます。W3Cの仕様を守らないIE以外では、このブログに設定されているコンテナ幅を飛び出すリサイズは出来ないので、pre タグの overflowスタイルを auto に設定し、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: },

複数のjsファイルを合体してPacker2で圧縮してアップロード・利活用

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を圧縮

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データをどうしてうまく読み込めないのか全く原因が分からないので困惑しています。

秀丸がVer6.xxからVer7にバージョンアップ 単語補完機能は秀逸

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

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

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

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

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

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

その他の改訂点

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

改めて秀シリーズ礼賛

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

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

jQuery1.2登場を歓迎して

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

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

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

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

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

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

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

jQueryプラグインでドラグ可能エレメントを操作する

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

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

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

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

説明は全く不要なほど扱いは簡単です。リサイズ可能エレメントには右下に赤い■のボックスが表示されています。ここを「掴んで」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をサーバーに置いて提供しているサイトがあった

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

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

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

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

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

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

感謝!WebOS Goodiesさん!

アクセスランキングを2つ設置

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

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

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

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

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

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

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

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

既成品の欠点

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

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

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

現行最新版のjQuery でもクロスドメイン対応ではない

改めて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な読み込みが可能となれば嬉しいのですが・・・

Fc2ブログ内でXMLHttpRequestは使えるか?

そのままでは使えない!

何故ならばブログのドメイン名とファイル保存先ドメイン名が微妙に異なるからです。つまりブログ本体は 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)を学習しなければなりません。ふぅ~。

JSON形式データ取得テスト

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の外部ファイル読込みを利用してクロスドメインプログラミングを可能にする方法の1つを試してみたかったのです。

ここでは、一方で、動的にインクルードする外部スクリプト内で関数の実行を定義し、他方、呼び出し元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に言及した多くのサイトは直接そのままでは参考にならないのでした。

上記関連サイトリスト3を見て、沢山の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);
}

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

参照元WebURI取得・表示テスト

テストは成功したがIEでは意図したとおりに表示されない・・・

エントリイ下部、コメントブロックの直上、つまりGoogleとAmazonの広告の下に、「参照元Web頁一覧表」なるタイトルを設置して、当該エントリイにどのサイトのどの頁から来てくれたのかを記録するようにしてみました。当面は直前の訪問者の記録しか取れませんが、Ajaxを利用して累積一覧を取得・表示出来るのではないか、と期待しています。

現在の直前履歴のみを表示するバージョン=Ajaxを利用しないバージョンは、日曜日一日を掛けてあれこれと試して、やっと完成したのは翌日の午前1時を回っていたのですが、何とか目的を達成することが出来ました。

これから何日も掛けて過去の訪問者の参照元も一覧できるバージョンへと、発展させていくことを楽しみにしています。

しかしながら、IEによる表示が崩れてしまう事態を解決できずに困っています。Firefoxでは意図したとおりに表示されるのですが、IEでは意図に反して参照元のカウンターが行の上に配置されてしまいます。

CSSでこんなレイアウトを行ったつもりはないのですが、IEは意図通りに表示しません。そして問題はその原因が分からない事にあります。単純なCSSの設定なのに何故かIEは裏切り続けます。

どのようにしてこの参照元一覧を実現したのか

自己の今後のためにも、その詳細をHTML、CSS及びJavascriptの全てについて展開しておこうと思います。別のエントリイになってしまいますが、全文解説編を作ろうと思っています。

勿論、それはAjax版完成の後に行うことであり、意図したとおりに参照元一覧表が表示されることを確認してから、その仕組みを明らかにすべきです。まだいわばテストラン中ですから、とても完結編としての説明を記述する段階ではないでしょう。巧く作動することを祈りつつ床に就きます。

参照元URIリストを各エントリイに設置してみる。(1)

エントリイ毎に表示する参照元サイト一覧の設置方法

  • Javascriptのdocument.referrerを使って、当該エントリイの参照元URIを取得する。
  • 当該エントリイ内にURIリストがなければ、当該URI文字列を記載した当該URIリストを作成し、HTML内の該当箇所に追加する。(Javascript:DOM使用)
  • 一方、当該エントリイ内にURIリストがあれば、当該URI文字列が当該URIリストファイル内にあるかどうかチェックし、なければ追加する。あった場合には当該リスト行のカウンターを追加する。(Javascript:正規表現による重複チェックとカウンター加算)

以上のような手順で、各エントリイに対する参照元一覧を作成できるのではないか、と考えます。

この場合、参照元一覧に記載されることを嫌がる訪問者もいるので、そういう人の意志を尊重するかどうかを検討しなければなりません。方法としては参照元を記録して良いかどうかを、閲覧の最初に問うコードを書き、事前に確認すればよいのでしょう。しかしこの方法は、閲覧者に一手順だけ余分な動作を強いることになります。別に参照元を記録されても支障はない、と思う方からすれば、こうした手順の増加はウザイだけでしょう。

他方で、次のように考えることも出来ます。

他の訪問者がどのサイトから当該エントリイにたどり着いたのかについて、任意の訪問者が知り得ることが、恰もプライバシーが侵害されたかのように主張する方もいるようですが、参照元のURIは決してプライバシーではありません。個人が特定できないからです。勿論個人情報でもありません。だから、参照元記録行為は個人情報保護法上も、またプライバシー侵害の観点からも支障はありません。

以上を踏まえて実際に参照元一覧を設置してみたい。

参照元一覧は全てのエントリイに適用するのですから、当然テンプレート上の作業となります。テンプレートの個別エントリイ表示ブロック内のエントリイ部分に、適切なdiv要素を設けてid名を付け、そこに参照元リストを掲載することになるでしょう。

  

歓迎──jQuery1.1.4公開! 待ち遠しい1.2

8月24日に1.1.4が公開されました

早速1.1.3から乗り換えましたが、 jQuery 1.1.4登場 - 実行速度向上、テストスイート改善 | エンタープライズ | マイコミジャーナル にあるように、実効速度の更なる向上とAPIの変更があり、コードも全体が無名関数として定義し直されました。

また1.2で実装される予定の新しい関数(あるHTML要素集合(例:div)から任意の順番の要素を切り出すslice()、ある子要素をもつ親要素の配列を取得するhas()など)も追加されました。更にマイコミジャーナルにも書かれていましたが、本家サイトを見ると次のように書かれていますから更なる発展が期待されます。
「jQuery 1.1.4は"1.1系最後のリリース"であり、「jQuery 1.2」が9月中にリリースする予定」

jQuery Docs-1.1.4API文書を入手する

1.1.4の詳細を知るには、当然ですが日本の関連サイトで調べるよりも何よりも本家を見るべきです。英語が苦手なんて言っていても始まらないから、翻訳サイト等も活用しながら悪戦苦闘してみました(^_^);

さて、本家サイトにある Documentations を見れば全てのAPIも分かるので、jsファイルだけではなく jQuery Docs-1.1.4API.xml もダウンロードして手元において随時見ることにしました。(jQueryBlog

jQuery Docs-1.1.4API.xmlで全機能を学習する

日本語のjQueryリファレンスとしては、古籏一浩氏のjQuery リファレンスが有名なのでしょうが、これは1.0.3を基本としている(最終更新は2006/12/6 )ため、jQuery最新版とはAPIがかなり異なっているなどの難点があります。

やはり本家の情報をダイレクトに見るべきで、その点で容易にダウンロードできるjQuery Docs-1.1.4API.xmlは素晴らしいと思います。それはまさに1.1.4の完全リファランスですから。

 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が開きます。