05 | 2005/06 |  07

  1. 無料サーバー

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

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


indexページの次なる課題

 それは階層メニューの新たな変形である。
 今は階層メニューのメインアイテムは左カラム内に縦に並んでいる。そしてサブメニューはその縦に並んだ第1階層の右横に浮上するようになっている。
 これを変形してメインアイテムを横一列に並べ、そのサブメニューをそれぞれの下にプルダウン的に浮上させ、次にサブ・サブメニューをその右横に展開するように配置し直してみたい。それはこちらで触れたような配列の階層メニューである。
 さて、これを実現するには、今までの階層メニューに若干手を加えねばならない。メインアイテムの横幅と展開する階層メニューの横幅は一致しないことが一般的であり、そのことの処理を行わなければならないのだ。
 そこで活用するのはイベント発生要素の位置とサイズを取得して、それを踏まえて絶対配置するpopup表示である。これまで利用してきた階層メニューは、その子メニューが親メニューの内包要素として位置づけていた。今度作成する階層メニューは一般的なものであり、それは子要素を独立した絶対配置要素として位置づけ、それをイベント発生要素=親要素の位置とサイズ情報を頼りに配置するものである。
 これにより第1階層メニューは縦でも横でもその配置に無関係に子要素を配置することが可能となるので、階層メニューのレイアウト自由度は一気に高まることになる訳だ。

イベント発生位置情報を生かしてpopupする。(3)

popup窓のpaddingとborderサイズを考慮に入れた表示に成功したことを受けて、早速それを実用的に利用してみた。

それは階層メニューの主階層の各アイテム(左カラムトップにある Browsing Menu のArchives、Categories等)にmouseがoverになったその時に、そのアイテムの説明をpopupすることである。これまでそのpopup表示位置は、onoverになったマウス位置から求めていたが、mouseoverによって表示されたHTMLエレメントの位置から、popup表示位置を取得することに変えたのである。これによりマウス位置によって左右に浮動していたpopupが固定的に表示されるようになり、すっきりした訳だ。

今回の成果

今回の実用化を通して、外部ファイル化しているJavascript文の全面的な見直しも行った。引数の受け渡し方、サブルーチンの活用等を整理したのだ。併せて次の3つのpopup窓を設定した。(1)マウス位置に応じて表示位置を決めるballoon1、(2)イベント発生要素位置に応じて位置を決めるballoon2、(3)同じくイベント発生要素位置に応じて位置を決めるballoon3(但しballoon2と異なるデザインとする)。

(3)は未だ利用してないがいつでも利用できるよう準備は整えてあり、第2階層のメニューアイテム説明用popupに利用する予定である。

それにしても、突き詰めるほどにJavascript森の更なる奥へと進んでいくことを実感し、改めてその奥深さに呆れかえるほどに驚嘆している昨今である。

MyTemplate抜本改造計画(3)───第1弾

 template大改造計画の第一歩として、indexページに最近のエントリイタイトルに加えてカテゴリイ一覧を掲載してみた。
 エントリイタイトルだけでは余りに寂しいからであるが(苦笑)、カテゴリイ一覧があっても邪魔にはならないだろうし、カテゴリイ名を頼りに興味を抱いてくれる方もいるかもしれない、との思いも籠めたつもりだ。

イベント発生位置情報を生かしてpopupする。(2)


 イベント発生要素の位置情報等を取得して、それを頼りにpopupすることには成功した。正確に言えば成功したと思っていた。
 ところがそれには問題があった。popup窓のpaddingとborderの大きさを考慮に入れてなかったことだ。
 IEの場合には、互換モードではwidthもheightも、規定されている値にpadding値とborder-width値を加えたものになっているから逆に問題はないのだが、画面右端や下端を越えてpopup窓が配置されようとする場合に、それを修正して丁度右端に、あるいは丁度下端に揃うようにpopup窓を配置しようとすれば、Firefoxを始めとしたその他のブラウザではwidthだけではなく、paddingもborderも考慮しなければならない訳である。───そのことをすっかり忘れていた。
 そして、これを解決しようとしてまた新しい問題に遭遇してしまったのである。
 それは、インラインではなく外部ファイルで設定されているCSS属性値を、Javascriptでどのようにしてゲットするか、という問題である。
 object.style.width も object.style.heightも共に設定だけでなく「取得も出来る」とJavascript関連書籍には書いてある。しかし、それはインラインCSSで明示的に宣言されている場合に於いては、という条件付きの「取得可」であることに気づくまでに、一体どれだけの時間を費やしてしまっただろう。あれこれのサイトをサーフィンしてやっと解決したのではあるが、マニュアル本の不完全な説明故に費やしてしまった無駄な時を恨みに思う。
 インラインで設定されてないCSS値の取得について、IEにおいては例えば、parseInt(object.currentStyle.paddingTop) で値をゲットすることが出来るのだが、手持ちのどの本にもそのことは書いてないし、ましてやfirefoxにおける例えば、
 parseInt(document.defaultView.getComputedStyle(object, '').getPropertyValue("padding-top"))に至っては、余りに長い式に閉口してしまったのだが、同様に何も触れていないのだから困ったものだ。
PS:
それでもなお、firefoxにおいては画面右端にジャストフィットする配置が出来ないでいる。僅かに20数pixelだけ画面右に飛び出してしまうのだ。その原因が解明できないが故に、更なるストレスに苛まれているわけである。

特選Javascriptリンク集をつくりたい。

 Javascriptを本格的に利用するようになってまだ半年くらいしか経過していないが、何冊かの書籍を購入し、関連サイトをサーフィンしても、なかなか全容を把握するに至らないことに、忸怩たる思いを抱いている。
 本家本元のEnglishヴァージョンを読めばよいのだろうが、そこには英語力という大きな障害が立ちはだかっている。
 そこで「これならば力になる」と思われる関連リンク集があれば大いに重宝することは間違いない。そしてそう思うのは私一人ではないだろう。
 ということで特選Javascriptリンク集を作ろうか、と思う。

  
 

イベント発生位置情報を生かしてpopupする。

エントリイ内JavascriptExercise

1-3 任意の要素位置等の情報からpopup窓の位置を決める

例えば、任意の要素上でmouseoverすると、その要素の右、上、下等にぴったりより沿った位置に表示されるpopupを作ってみる。この表示方法は言うまでもなく階層メニューに応用できる。

なお、このスクリプトは汎用するつもりのため、インラインではなく、外部ファイルに取り込んでしまった。

試験

この文章の上にマウスを置くと、この要素(p要素)の真に左端を揃えてpopup窓が表示される。また、mouseoutになればそのpopupは消失する。

この文章の上にマウスを置くと、この要素(p要素)の真に左端を揃えてpopup窓が表示される。また、mouseoutになればそのpopupは消失する。

この文章の上にマウスを置くと、この要素(p要素)の側に上端を揃えてpopup窓が表示される。また、mouseoutになればそのpopupは消失する。

この文章の上にマウスを置くと、この要素(p要素)の側に上端を揃えてpopup窓が表示される。また、mouseoutになればそのpopupは消失する。

【注】右表示popupの場合には、スクリーン右端に収まるよう、Javascriptによって位置を調整している。

この続きを読む

エレメント位置情報取得関数

検索語「offsetParent」で検索を掛けてみたところ、そのものずばり、目的とする関数をゲットすることが出来た。

昨晩から試行錯誤してなかなか完成しなかっただけに、これを見つけたときには、その余りのスマートさに驚愕し、感心してしまった。

その関数は以下のとおりで、これはhttp://www.phoenix-c.or.jp/~zspc/cgi-bin/wwwlng.cgi?print+2000-10/00100100.txt に掲載されていたものである。

  function getPos( elm ){ 
    var target = elm; 
    var pos = new function(){ this.x = 0; this.y = 0; } 
      while( target ){ 
       pos.x += target.offsetLeft; 
       pos.y += target.offsetTop; 
       target = target.offsetParent; 
     } 
    return pos;
  }

2007/07/12追記

しかしながら、この方法では正確な位置は取得できない。Opera以外はそれぞれ毎の補正が必要である。

その補正方法についてはこちら、offsetLeft,offsetTop,offsetWidthそしてoffsetHeight──静的配置要素の絶対位置を確実に取得する方法について で解明したので、ご覧いただければ幸いです。

取得した任意のHTML要素の位置情報を使う

 先の方法で取得した任意要素の位置等の情報の活用を考えている。
 既に昨日、任意の要素の位置、サイズ等を取得するスクリプトは完成した。次に行うべきことは取得した位置等の情報を元にして、例えば、popup窓を任意要素のきっちり右側に表示する、あるいはサブメニューを上位メニュー要素のきっちり下部に配置する、等々に活用する関数を作ることである。
 その関数・popup窓表示・階層メニュー作成を次の課題とする。


flashファイルをゲットする

flashは今や企業のどのホームページにも必ず掲載されているcoolな素材と言えるだろう。素材集も沢山あるようだ。

ところで好みのflashを見るだけではつまらない。自分のサイトで活用しようと思えば、当然ダウンロードしたくなる。

HugFlash

そのためのソフトとしてまずHugFlashがお勧めだ。窓の杜によれば「ローカルPC内のFlashファイルに含まれる画像・音声・動画を抽出できるツール」とのこと。flashデータの部分切り出しさえ可能なのかも知れない。自分のパソコンのCacheから以前見たflashデータを保存できるのも魅力だろう。窓の杜によるHugFlash紹介はこちらから。窓の杜 - 【NEWS】Flashファイルに含まれる画像・音声・動画を抽出できるツール「HugFlash」

FlashPlayerEx

こちらのソフトもお勧めだ。zan9/soft

実はMyBlogの右上にある時計はflashデータなのであるが、開く度にサーバーにアクセスしていては遅くてたまらないので、FlashPlayerExを使ってダウンロードし、それをfc2サーバーにuploadして表示している。この時計のダウンロード先はこちら

(^^)//゛゛゛パチパチ 絵文字入力

 パーツではないが・・・。
 絵文字が入力表示できるようになったことは素晴らしい。
 これでブログの表情はマスマス豊かになるだろう。
-------------------------------------------------------

HTML要素のサイズや位置を取得する

エントリイ内JavascriptExercise

1-2 任意の要素の画面上の位置、幅、高さ等の諸属性を取得する

何らかのイベント発生に対応して、或る位置に文字や画像を表示したいことは沢山ある。その場合には当然乍ら、その表示位置を指定する必要がある。そしてその表示位置はイベント発生要素が持つ諸属性値の関数として、つまりイベント発生要素の位置・幅・高さの関数として設定することが出来るはずである。

そこでまずイベント発生要素の位置、サイズ等を取得してみる。

イベント発生要素の位置と大きさを取得できれば、position absolute属性を持つ要素にも、また通常のストリーム内にある要素にも、あるいはposition relative属性を持つ要素にも、全ての表示に利用することが出来るし、言わずもがなであるがpopup表示にも活用できる。

試験内容

次の文字列(p要素)にmouseoverすると、p要素の位置属性等を各テキストフィールド内に表示する。


sizes & positions of this element


offsetプロパティによって位置やサイズを取得してみた。ここでもまた、IEとGekkoではoffsetParentが全く異なる概念であることに悩まされなければならなかった。 _(・・;φウッ・・・

マウス座標 x :

マウス座標 y :

tagName :

この要素幅 offsetWidth :

この要素高 offsetHeight :

第1offsetParentの tagName :

第1offsetParentの ID:

この要素の左上偶部の、第1OP からの横方向位置 offsetLeft :

この要素の左上偶部の、第1OP からの縦方向位置 offsetTop :

第2の、そして最上位の offsetParentの tagName :

第2の、そして最上位の offsetParentの ID:

この要素の左上偶部の、第2OP からの横方向位置 offsetLeft:

この要素の左上偶部の、第2OP からの縦方向位置 offsetTop:


コメント

  1. mouse位置については、Javascript外部ファイル内で取得関数を設定している。

  2. IEでは第1offsetParent、第2offsetParent、・・・と階層構造を為すが、Firefox の場合にはoffsetParentは唯1つ(body要素)しかないことが試行錯誤の結果やっと解明できた。(^。^;)フウ~。

    同じプロパティ名でこれ程に概念が異なるとは全く厄介なことである。そのことを試行錯誤して解明するのに丸々1日掛かってしまった!

    世に出回っているJavascript解説本で、offsetParentについて正確に記述したものはあるのだろうか? 少なくとも手持ちの数冊の書籍では記述があっても誤っているか、あるいは全く記述がなかった。

  3. IEにおけるoffsetParentは極めて扱いにくい。それは上位要素parentElementとイコールではなく、一定の条件下にある上位要素がoffsetParentになるらしい。その一定の条件については、「offsetParentとparentElement」に詳述されている。

  4. 結論として、IE以外では任意要素の位置はoffsetLeftとoffsetTopで容易に取得できる。(2007/06/27追記:←この記述は間違いだった。Opera9は簡単にoffsetLeft,同Topによって要素の位置を取得出来るが、FF2.0.0.4でもoffsetLeft等だけでは正確な絶対位置や取得できない。詳細は offsetLeft,offsetTop,offsetWidthそしてoffsetHeight──静的配置要素の絶対位置を確実に取得する方法についてに記述した。) しかし、IEにおいてはHTML文上でoffsetParentの階層構造を解析し、しかもparentElementの内、どれがoffsetParentなのかも特定し、しかる後にbody要素からのoffsetLeft値とoffsetTop値を取得しなければならないことになる。非常に煩雑であり面倒で堪らない。もっと簡便な方法はないのだろうか?!IE7という果報を寝て待つか?(苦笑)

    しかし、果たしてそれは果報たり得るのだろうか?

Javascript呼び出しHTML文

<p style="text-align:center" onmouseover="dispSizePos(this)">sizes & positions of this element</p>

Javascript コードの解説

//エレメント属性取得
function calcSizePos(which){
 var values = new Array(
  absX, //頁上の絶対横位置。外部スクリプトでGlobal変数として定義し値を取得。
  absY,  //頁上の絶対縦位置。同上
  which.tagName,
  which.offsetWidth,
  which.offsetHeight,

  which.offsetParent.tagName,
  which.offsetParent.id, // ← container
  which.offsetLeft,
  which.offsetTop,

  which.offsetParent.offsetParent.tagName, // ← body
  which.offsetParent.offsetParent.id,
  which.offsetLeft + which.offsetParent.offsetLeft,
  which.offsetTop + which.offsetParent.offsetTop
 );
 return values;
}

 //サイズ等の表示
function dispSizePos(it) {
 var i=0, pos = calcSizePos(it);
 for (; i< pos.length ; i++) document.forms[0].elements[i].value = pos[i] || "";
}

DOMに拘って・・・。

 indexページ=topページのpopupスクリプトをDOMに拘ってinnerHTMLから変更してみた。結果は何も変わらないので、どうってこともないし、しかもinnerHTMLを使った方が遙かに書きやすいのだが、DOMで書いたことに意味があると納得させている自分がいる。(苦笑)
 ところで、改行コードはHTML内で無視されてしまうので、一旦スクリプトで置換関数を噛ませて、それを<br />に置換してから出力するようにすれば、popupがもっと見やすくなる。近いうちにそうしようかと思っているが、当面はDOM版でもやってみた、という全くの自己満足に過ぎない・・・。

この続きを読む

アクセスカウンターが初めて100/dayを越えた!

ということで初めての出来事が起きたのである。

率直に嬉しい~

さて、アクセス解析を見てみると、色々なことが分かるが、今日はその中からまず、ブラウザについて。

閲覧者のブラウザ種別は次のようであった。圧倒的にIE6が多いことが分かる。しかしよく言われている90%前後ではなく既に8割を切り、変わってMozillaの勢いが凄まじいと言えるかも知れない。

次にサーチワードを見てみると面白い。

数週間ほど前までは圧倒的にGoogle Desktop Searchをキーワードに含むアクセスが多かった。それは社内LAN上でのGDS利用について、以前に少しく細かく書いたからであろう。

その傾向がずっと続いていたのであるが、最近になってJavascriptに関する件が一気に増えてきている。これは階層メニューについて書き連ねていることによるものだと考えられる。

いずれにしても、書いていることへの反応がある───といってもコメントやトラックバックはほとんどないのだが───のは嬉しいことだ。

願わくば、批判も含めて書き込みがあることを希望したい。

MyTemplate抜本改造計画(2)

 文字ばかりでは十分な説明にならないので、イメージを絵にしてみた。

myblogReconstruction.jpg


myblogReconstruction2.jpg


Javascriptのバグ取りに2時間!!っん!もうっ~!

 多段階層メニューは問題なく動いているのであるが、firefoxでテスト閲覧中に、ふとJavascriptコンソールを見ると、いくつかのエラー警告が出ていた。利用上支障がないので放っておいたが、やはり気にならないと言えば嘘になる。
 ってわけで帰宅後「ちょ、ちょいのちょいっ」と直そうと思ったら、これが全くの地獄の世界!
 あれを直せばこちらがおかしくなり、こちらを直せばそちらもおかしくなり・・・、挙げ句の果てにはスペルミス(特に小文字と大文字の使い分け。例えばchildNode、hasChildNodesが正しいのだが、cは前者では小文字、後者では大文字となっており間違いやすい)を繰返したり、行末を示すセミコロンを入れ忘れたり、・・・たり、・・・たりのケアレスミスを繰り返すばかりで、冷酷に時は流れ去り、とっくにお風呂は沸いているのに既に2時間が経過した。
 やっとの思いでバグ取りは完了したものの、後味の悪いてん末ではあった。

MyTemplate抜本改造計画

 新設されたブロック変数を活用してindex頁を特設してみた。その成功に意を強くした今、更に他の新設ブロック変数を利用して、このブログテンプレートの抜本的な改造に取りかかろう、と思う。
 インデックス頁設置の他に用意された変数は、カテゴリイ別、月別、個別エントリイ別、検索時等で表示を変更できるものであるが、これらを意味のある範囲内で活かして、それぞれのタイプ毎に頁の表情を変化させてみたい。といっても、その場合の基本的考え方は、例えばそれぞれ毎に全く別な表情(デザイン、色、画像等々を全く異にする別々のサイトのようなもの)にするような方向性ではない。(※ それはそれで面白いかも知れないので副次的には行うことになろう。)

この続きを読む

エントリ内に記述したJavascriptの走行テスト

エントリイ内JavascriptExercise

エントリイ内にJavascriptを記述して成功するかどうか試してみる。

あれこれのスクリプトをテストするのに、ブログのテンプレートをいじって試験するよりも、任意のエントリイ内でテストする方が、失敗した場合の痛手が遙かに少ない。その点からエントリイ内でのスクリプト走行テストは、メリットが多いと思う。

しかも、CSSテンプレートに設定したclass指定がエントリイ内で利用できるから、自在にあれこれ装飾することも出来、嬉しさ・楽しさ倍増である!

1-1 HTML文内の文字を置換する

試験内容

リンク要素上でのmouseoverにより文字を置換する。なお、mouseoverを繰り返すと文字も交互に変化するようにし、何度でも試せるよう工夫した。

※ 別にonmouseoverでなくても良いのだが、onclikよりもこの方がユーザーの消費エネルギー負担が少ないと考えた。

結論

firefoxでは成功。IE6(互換モード)では何の変化もない。

───というのは真っ赤な嘘だった。インラインJavascriptを久しぶりに書いたため、最後に重大なミスを犯していたのだった。今更乍ら慌て者で、とちり屋の自分に呆れかえるばかりである。

さて、その重大なミスとはこうだ。

//--></script>と書くべき所を、何を思ったのか疲れていたのか、完全なる勘違いで-->//</script> と記述していたのだ。

それを正しく直したところ、後方互換モードのIE6でも何の問題もなくスクリプトは狙い通りに動いたのだった。お騒がせしてしまいました。゜~(^O^゜~)))))ヒェェエ

Javascript呼び出しHTML文

<ul> <li><p>パターン1  これは<a href="javascript:void(0)" onmouseover="replaceTxt(this,'before','after')">before</a>です。</p></li> ・・・ </ul>

このエントリイ内に記述したインラインJavascript文

二つのタイプを作成し、どちらでも同じように動くことを確認した。現在はDOM版を生かしている。

logPadEX.macに対して初めて嬉しい「反応」が・・・

 インラインフレーム表示でエントリイを掲載している秀丸マクロ「lodPadEx.mac」に関して、初めて閲覧してくれた方からの反応がありました。しかし、プライベートコメントで、かつURLもメルアドも記されていないため、お答えすることが出来ません。
 コメントを寄せてくれた方にお願いです。連絡方法をお知らせください。
 「複合タグ設定ファイル」については、エントリイ内で説明もせず、例示もせず、ご迷惑をお掛けしました。「text文を秀丸macroでxhtmlに変換」に詳細な説明文を追加しましたのでご覧いただければ幸いです。

エントリイの最初の200文字をタイトルmouseoverでpopupする(2)

 それは出来上がってみれば、どうってことのないスクリプトであった。innerHTMLの利用を思いつくまでの煩悶はまるで嘘のようだ。
 しかし今回のチャレンジの中で、改行コードの扱いについて悩んだことは貴重な経験となった。また、ネットサーフィンで答えが直接得られることに期待を掛けすぎたことも反省点である。
 筋道を立てて具体的に考えれば、自ずから解決策が見えてくる場合もある、ということだろう。

エントリイの最初の200文字をタイトルmouseoverでpopupする

 <!--index_area-->ブロック変数による独自の表紙頁を作り、まずは最近のエントリイのタイトルリストを掲載した。ここにおいて、悩ましかったのはタイトルを見てちょっと興味を持った場合に、タイトルをクリックしてエントリイを実際に開くまでもなく、エントリイの一部を閲覧させることは出来ないか、という点であった。

-------完成図---------
EntryTitlePopup.jpg
タイトルonmouseover状態で白いpopup窓が表示されている。
-----------------------


 最も簡単な方法は、title属性を使うことであることは言を待たない。しかも、最初の200文字を抜粋する<%topentry_discription>という便利な単変数も用意されている。
 実際、title属性を利用したpopupは、リンクタグの属性値として、title="<%topentry_discription>"と記述するだけで、mouseover時にpopup表示が出来るので、fc2Blogの様々なテンプレートでふんだんに活用されている。
 しかし、title属性によるpopupは、(1)Gekkoエンジンブラウザの場合には一行しか表示されない、(2)全てのブラウザにおいて一定の時間が経過すると消えてしまう、という短所、限界がある。popupされた文字をじっくり読もうと思っても、ユーザーを待つことなく冷酷に勝手に消えてしまうpopupは余りに不親切であり、また煩わしい。読み切ることが出来ないpopupならば、いっそない方がすっきりするというものだ。
 そこで、この不親切なtitle属性は使わず、mouseoutしない限り消えることがなく、popup幅も位置もコントロール出来るエントリイ部分きりだしpopupをJavascriptで作ろうと考えた。
 -----------------------------
 さて、昨晩そう思ったときには、数時間もあれば直ぐに完成するだろうと踏んでいた。
 ところが、ところがである。このスクリプト作成は私にとっては初めての難題を孕んでいたのだった。
 それは、HTMLから取得したい文字列内に改行コードがある場合の、当該文字列の取得方法を知らなかったこと、これである。 関数の引数として<%topentry_discription>を与えて、popup用の関数で表示すればよいと簡単に考えていた。だから直ぐに出来上がると思いこんでいた。しかし、<%topentry_discription>内には、一般に改行コードが入っている場合が多々あり、その場合にはスクリプトエラーとなってしまうのだ。当然目的としたpopupはうんとも寸とも言わない。
 所期の関数が一切機能しないのである。
 -----------------------------
 改行コード(改行タグではない)が入っている文字列のJavascriptへの引き渡し───この問題にはこれまで遭遇することがなかった。かくしてジャバスクリプト関連サイトのサーフィンを開始したのだ。半日以上掛けて・・・。
 しかし、結局目的とするサイトは発見できず(Google による検索方法が不適切だったのだろう)、夕食を前に疲れ切り、諦念が湧き上がってきた。
 そんな状況の中でふと閃いたのだ。innerHTMLがあるではないか!どうして思いつかなかったのだ。これを活用して何とか出来ないか。!!

この続きを読む

top頁のエントリイタイトル一覧作成について

 <!--index_area-->ブロック変数を使ってトップページを表紙的に扱いたいと思い、最近のエントリイのタイトルだけを一覧にしてみた。ここではそのHTMLとCSSについてまとめておきたい。
 まさしく一覧であるからHTMLタグはコンテンツにふさわしいようにul-liを使い、その中のaタグをdisplay:blockに指定し、かつそのwidthを100%にして、当該行内・文字外のmouseoverでもハイライトするようにした。
 ところが、IEではLIタグ又はその中の任意のタグにおいてwidth値が宣言されていると、リストマークが当該行の最下部に来てしまうという奇妙なバグがある。(Internet Explorer (Windows) CSSバグリスト
 そこでバグ対策を施す羽目に陥った。
 対策としては、画像も含めてリストマークはバグによって落ちてしまうから、リストマークそのものを使用しない何らかの手法を使うしか手はない。そこでリストマークとすべき画像をLIタグの背景画像として指定し、その位置をtop&leftとすることによって、その背景画像をリストマークのように扱い、その位置も当該行の左上端部に配置することが出来た。

この続きを読む

早速新設されたブロック変数を使ってみた。

 試しに、<!--index_area-->と<!--not_index_area-->をこのブログに適用してみた。
 index頁なのだから、素直に「最新のエントリイのタイトルリスト」を掲載してみた。同一サイズの文字ばかりが羅列されるので、見ようによっては煩雑な感じになるかも知れない。
 画面半分ほどをエントリイタイトルリストにして、残り半分ほどの領域には画像や特集的エントリイを掲載すれば、全体の雰囲気としてもっと和らぐかもしれない。
 いずれにしても、新設されたブログ変数は使いようで、更に多様な表現が可能となることは間違いなさそうだ。

レイアウト崩れ───それはCSSのたった1文字のミスから引き起こされていた。

 或る時から、firefoxやNNでMyblogの左カラムレイアウトが崩れていることに気がついた。Javascriptでコントロールする部分やJavascriptによるpopupが巧く表示されないし、表示されても意図したとおりにコントロールされていないのだ。
 何が原因なのかまるで分からないまま時が推移しているが、矢張りこれはまずいだろう、と思い始めた。
 特にJavascriptによるコントロールがまるで意図したとおりにならないのは「許し難き」ことだ。折角の労作がIEでしか反映されないとは嘆かわしい限りである。
 ───ってことでこの土日に改めてスクリプト全体を見直す必要がありそうだ。
       -----------------------------------

この続きを読む

イベントを子孫要素上では無効にする方法の見通し立つ!


 Javascript文において、或るタグ要素に対して設定したイベントは、その要素内にある別の要素に対しても同様に効果を発揮する。例えば、或るブロックの親要素に設定したonmouseoutは、それに内包される子・孫要素においても効果を発揮してしまう。親要素からmouseoutするその時だけ発生して欲しいイベントが、任意の子孫要素からmouseoutした場合にもまた発生してしまうのだ。
 これは支障を生じる場合が多い。mouseoutで隠蔽し、mouseoverで表示するような組み合わせのイベントを設定した場合には、子孫要素間をマウスが移動する度に、mouseoutとmouseoverが繰返し発生してしまうので、親要素共々画面が「ちらついて」しまうのだ。孫亀がこければ子亀が、そして親亀が、と言うわけだ(;¬_¬)。
 そこで、入れ子になった複数要素からなるブロックにおいて、それらの一部の特定の要素(主に親要素)だけで適用させ、その他の要素上では機能しないイベント設定方法について、この一週間ほど模索してきた。そして、その過程において、setTimeout()とclearTimeout()メソッドを併用して「遅延効果」を発生させ、ちらつきを解消することには成功した。
 --------------------------------------------------------
 しかし、どうもすっきりしないのだ。
 timerを利用してちらつきを解消する方法を採用するということは、そもそもイベントは随時随所で発生しているから、随所でイベント処理の必要に迫られた場合、いくつものtimerを用意しなければならなくなる。従って、timer利用は最善の方法とは思えない。また一瞬といえども消え残るのもちょっと気に掛かる。(それもまた楽し、とも言えるが)
 そこで、更にあれこれ考え、e-learningも重ねてきた。しかしどうしても結論に到達し得ないので、ついに「教えてGoo」で質問し、そして数日後に適切な回答を戴いた。
 かくして手法は判明した。後は実践アルのみ。───ってことで、到達した手法について、詳細に解明し解説し、このブログ上で利用したいと思う。成功すれば、汎用可能な1つのonmouseover&onmouseout利用方法となるかもしれないことを期待しつつ・・・。

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