01 | 2017/03 |  03

  1. 無料サーバー

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

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

DOM:setAttributeメソッドを使ってクリック時のフォーカスをはずす

またしてもIEのバグで悩まされた!in setAtttibute()メソッド

全くIEには、つまりMicrosoft社には困ったものである。Javascriptにおいても、安易なあるいは独自の機能拡張が、検討が不十分なまま独断的に行われているとしか考えられない。J-scriptなどと勝手に呼称を変えて、「俺が!俺が!」路線を相変わらず盲進するのはユーザーに迷惑千万なだけである。

今回も、そのバグ故にさんざん悩まされ、そのために消失した時間、悶々とした苦悩、落ち込んだ気分から怒りに震えて言いたい。!「くたばれMicrosoft!」───これ以外に適切な言葉を思いつかないほどである!

・・・と怒ってばかりいても仕方ない、何を怒っているのか、そもそも何をしようとしたのか、そしてどうなったのか、書き記しておきたい。

[起] クリック後にフォーカスを自動的に外したい

document上の任意の場所でクリックした後には、何も設定されておらず、かつ何もしなければフォーカスがそこに残る。それが気になる場合には、別の任意の場所をクリックするなどしてフォーカスを外さ(blur)ねばならない。それを何とか簡単かつ自動的に出来ないか、それが事の出発点であった。

ここに「簡単かつ自動的」とは、個々のonclick発生要素に、いちいちblue()を個別に書くのではなく、ブログオープン時やリロード時に、Javascriptを使って自動的に一括してblurをセットしてしまおう、ということだ。

一方で、スクリプトを使ってそれを設定してみたい、とのチャレンジ精神はあったにせよ、他方、何と言っても個別に設定する手間が大変なことが最大の理由となった。My HTML Templateにおいて、閲覧者にクリックを求めている箇所は 500 箇所に近い。これを個別に設定するなどおよそ不可能といって良いからだ。それは少なくとも知的な作業ではない!(苦笑)

[承] そしてどうしたか?

「ブログ内から全てのAタグを抽出し、その全てに対して、onclick属性を追加し、その値をthis.blur()にする。」───たったこれだけのことである。しかしながら、Javascriptの深い森に迷い込み、方向も分からず食料もないままに彷徨いながらの作業は余りに過酷であった。

まず、手元にある何冊かのJavascriptの本を探ってみたが、setAttributeメソッドに関する記述が殆どないか、あってもせいぜいありきたりの浅い説明だけであり、読んで理解し実際に使えるものが見あたらない。参考になったのはせいぜい、O'REILLY社刊『JavaScript第3版』や『JavaScript & DHTMLクックブック』くらいである。

次に、これらを読んでもうまく動作しないのでネットで検索を掛けたものの、こちらでもなかなか欲しい情報が掲載されたサイトがヒットしない。一般的なことが書いてあるだけのサイトが多く、実際に使うための情報が掲載されていないのだ。理解していることを前提にした記述はあふれているものの、理解するための記述が極めて少ないのである。

しかし、諦めるわけには行かない。この休みの間に解決できなければ恐らく一生解決しないであろう。時間が掛かる作業だけに今の休暇中にこそ成し遂げねばならない。そこで、腰を据えて次から次へとネットサーフィンを試みた。検索語を注意深く設定し、欲しい情報をまさぐった。

そして遂に、貴重な情報が掲載されているサイトをいくつか「発見」したのである。

[転] element.setAttribute(arg1,arg2) は何をするのか?

先ず最も肝心なことは、setAttribute は何をどうするのか、である。「要素に属性を設定する」との説明が一般的であるが、当該属性を新たに作るのか、それとも既存の属性を変更するのか、その点を明確に書いてある書籍やサイトが殆ど見つからない。まずここで躓いてしまった。

属性を新規に作るならば、属性を追加するとか、新規に設定するとか書くべきであり、ただ「設定する」だけでは更新なのか新規なのかが分からない。

更に、殆ど同じような setAttributeNode なる メソッドがあり、これとsetAttribute はどう違うのか、それをきちんと書いてあるサイトもなかなか見つからない。

確かに、これらはDOMについて半可通だからこそ発生する疑問であり、悩みであるため、「出直して来い」と言われればそれまでなのだが、そもそもDOMに関する体系的、総合的な書籍の存在を知らない。

そこで腰を据えて検索するに当たり、出来るだけ原典に近づこうと試みた。川の水は出来るだけ上流のものほど美味しいからである。そして、IE DOM、NN DOMそしてW3C DOMと色々なDOMがあることも改めて再認識したし、いくつかの根源的な記述があるサイトに遭遇することが出来た。まず礼儀として、かつ感謝を込めて参考にさせて貰ったサイトをリストアップしておこう。

さて、以上のサイトを概観してやっと以下のことが分かった。

  1. setAtttribute は、新しい属性を追加するか、あるいはそれが既存属性の場合には、その値を setAttributeで設定した値に変更する。
  2. まず、createAttribute(String name)にて、属性を作成しないと、setAttribute メソッドは実際に機能しない。作成された属性インスタンスが、setAttributeNode メソッドにより Element に設定される。
  3. 或る要素に対してsetAttribute メソッドによって設定した属性及びその値は、appendChild() などで要素に挿入されない限り、ドキュメント内に現われないが、しかし興味深いのは設定した属性はそれでも機能する。
  4. IEにおいてはsetAttribute メソッドにバグがあり、独自の方法で記述しないと意図が反映されない。

[結] before / after

以上の悶々とした学習過程を経て、やっとの思いでmyblogにおいて、クリックした箇所のフォーカスを自動的に外す、当初の目的を果たすことが出来た。

今回の作業結果は、ブログ閲覧上は余りに小さなことなので閲覧者は気がつかないだろう、と思う。そこで以下に、今回作業前後の比較を分かりやすく画像で較べておきたい。

左図の上段が適用前、下段が適用後である。これまではクリックした箇所は上段のように必ずフォーカスが残ってしまっていた。今回のblur()自動一括設定により、myblogのいかなる箇所のリンク設定箇所においても、クリックした後にフォーカスが自動的に外れることになった。

[補] 要素への属性のappendはどうする?

さて、確かにスクリプトはうまく機能しているのだが、実際にaタグ内の属性としてHTML文に挿入されないと、しっくり来ない。現状では狙い通りに機能しているが、下図のようにHTML文にはsetAttribute メソッドで追加した属性は追加されていないのだ。

【説明】

上図の左側はFirefox上で Web Developer を使って Element Infomation を見た図である。1でリンクが設定されているタイトル部分にオンマウスオーバーさせて、その要素のInfomationを2で見ている。確かにonclick="this.blur()"が設定されていることが分かる。一方、上図の右半分は、その時のソースを見たものである。3で示した該当部分のAタグに、onclick="this.blur()"の文字はない。

それでもちゃんと機能しているのだから不思議ではある。メモリ上でブラウザが必死に健闘していると言うことだろう(笑)。

それにしても当該要素内に属性を実際に追加する方法が見つからずに困っている。親や兄弟要素まで一旦遡及してから自分自身に戻って追加するのだろうか? そうだとすると、何と面倒な!簡潔な追加方法はないのだろうか?───この点に関しては上記の各サイトを見ても残念ながら解明できなかった。

当座の目的は果たしたからひとまず良しとするが、やはりHTML文に実際に書き込まれないと落ち着かない、というか中途半端の感は否めない。当該要素への属性のHTML文における追加が課題として残されたわけである。頂上を極められなかった口惜しさが残った。(^。^;)フウ

 

● コメント ●

承認待ちコメント ()

このコメントは管理者の承認待ちです

● コメント ●

承認待ちコメント ()

このコメントは管理者の承認待ちです

● コメント ●

承認待ちコメント ()

このコメントは管理者の承認待ちです

● コメント ●

承認待ちコメント ()

このコメントは管理者の承認待ちです

● コメント ●

承認待ちコメント ()

このコメントは管理者の承認待ちです

● コメント ●

承認待ちコメント ()

このコメントは管理者の承認待ちです

● コメント ●

承認待ちコメント ()

このコメントは管理者の承認待ちです

■ コメントの投稿 ■

管理者にだけ表示を許可する

●トラックバック●

■トラックバックURLはこちら■
http://hkom.blog1.fc2.com/tb.php/443-e5a19144

●参照元一覧●

<provided Fc2>
<provided i2i>

▲ToTop

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

200701030556