04 | 2017/05 |  06

  1. 無料サーバー

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

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

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 

jQuery()活用(1) Slide Toggle Button──jQuery解読(15)

$.find() メソッドの解読に時間を要している・・・

$.find() メソッド解読を始めてから数週間が経過したような気がします。それだけ長い時間を掛けてもまだその全容解読に至っていません。それは言うまでもなく私の非力故なのですが 、$.find() メソッドが jQuery において Selector と呼称されている、 css や DOM を縦横に利用したドキュメント内検索のための根幹のメソッドであって、 $.find() メソッドを解明するためには、検索条件に関連する部分のjQueryコードの全てを解読する作業を同時に行わなければならないからに他なりません。

CSS style属性の全て、id属性やclass属性の他、HTML要素の諸々の属性名称と属性値、DOM の子孫要素、兄弟要素等々、様々な条件によってHTMLドキュメント内を横断的に検索する、その検索ツールが $.find()メソッドなのですから、そう易々と全貌は見えないのかも知れません。

それでも、一人悶々と思案する過程を通じて、jQueryへの理解は格段に深まり、またJavascriptに関する基礎的な知識も、日に日に深化していることを実感しています。やはり思い切ってjQuery解読に踏み込んで良かった、と痛感するこの頃です。

それにしても jQuery を使ってこそ!

解読作業ではひたすらコード進行を追いかけるのですから、jQueryをあれこれと使ってHTML文書を自由に操作することは余りありません。しかし、それでは何かおかしい、使ってこそのjQueryであり、使いつつ解読することが相互作用的に学習効果を高めるのではないか、と思い始めました。

そんな訳で、手始めに Slide Toggle Button を関連する各エントリイに設置してみました。

紙幅を要する抜粋されたコード部分について、エントリイ表示時には初期設定として隠蔽しておき、ボタン操作でコード掲載部分を表示したり、隠したりするようにしたのです。これまでならばDOMを使って直接コードを書いていたのですが、ここでは jQuery APIを意識的に使用してコードを書いてみました。

▲ToTop

Slide Toggle Button 説明

HTML文 
<!--表示/隠蔽用のボタンとその操作対象となる PRE タグを包含する div タグ
 を設け、その class 名を "togglePRE" として、ボタンと PRE タグのセットを
 全て取得する。
-->
 <div class="togglePRE">
  <button style="dicplay:block;">ボタン説明文字列</button>
  <pre style="display:none;">表示/隠蔽内容</pre>
 </div>
スクリプトコード 
(function(){
 1: var togglePRE = $(".togglePRE");
 //当該クラス要素がない場合には何もしない。
 2: if (togglePRE.length == 0) return;
    //個々のクラス対象毎にイテレート
 3: togglePRE.each(function(n){
    //子要素の pre タグを抽出し、変数 pre に代入
 4:  var pre = $(this).children("pre");
    //それを非表示にする。
 5:  pre.css("display","none")
    //ボタンタグを選び、その disabled 属性を「有効」に変更し、
 6:   .end().children("button").attr("disabled","")
     //ボタンがクリックされたら pre タグを slideToggle 操作する。
    //同時にクリック時に背景色を変更/初期化するように設定
11:   .click( function(){ pre.slideToggle(); } )
12:   .mousedown(function(){this.style.backgroundColor='lightgreen'})
13:   .mouseup(function(){this.style.backgroundColor=''});
14:  });
15:})();

以上のコードによりトグルボタンと表示/隠蔽要素の挙動を設定しました。言うまでもなく、上記コードの表示/隠蔽にもこのコードが適用されています。

さて、ここでは jQuery の特徴を踏まえないと間違いやすいコード作成上のポイントを自戒のために記しておきたいと思います。

  • 要素の存在チェックに関して

    或るクラス名の要素があるかどうかを調べる方法として、それが存在しない場合には $(".togglePRE") == false になると思っていました。ところが togglePRE クラスが存在しなくても、$(".togglePRE") == true となってしまいます。何故ならば $(".togglePRE") は該当要素が存在しない場合には $(document) を返すため、togglePRE クラスがなくても、$(".togglePRE") == true となってしまうのでした。

    ですから、或る条件に合致する要素の存在有無をチェックするには該当要素の数をカウントさせる必要があります。つまり、$("条件").size() > 0 になるならば条件に合致した要素があったことになります。

    試行錯誤の末にこのことを理解しました。

    なお敢えてメソッドを使わなくても配列の length プロパティでも同様のチェックが可能であり、むしろこの方がすっきりしているかも知れません。

  • 効率的なコード進行のために

    複数回使用するjQueryインスタンスは変数に代入して、繰り返し検索・作成しないようにしました。

  • Google Addsence 対策

    エントリイ表示モードではない時、例えば検索結果を一覧で表示する場合や月別表示などの場合において、Google Addsence は3つ以上のエントリイにおいては表示されない仕様となっているようです。仕様というよりも複数のアドセンスが1つのページに表示されることを前提としたコードになっていないのでしょう。そこで3つ以上のエントリイを一覧表示すると、アドセンスのコード内でスクリプトエラーが発生してしまい、slideToggle ボタンも無効となってしまいます。

    そこで非エントリイモードの時にはスライドトグルボタンを無効にしてしまって、表示対象を非表示から表示に変更して最初から表示してしまうようにしました。

    むしろ、Google Addsenceを エントリイモードの時だけしか表示しないようブロック変数で制限するのが賢明というものでしょう。ですからそのように変更して、非エントリイモード時のエラー発生を排除し、それにより非エントリイモード時の特殊な対応(トグルボタンの無効化と表示対象の最初からの表示)をやめることとしました。

  • Toggle対象要素について

    toggle対象要素となる pre タグには、初期値としてdisplay:none;を設定しました。そうしないとエントリイ表示モードではこの要素が一旦表示されてから、隠蔽されるからです。

  • .end()メソッドの活用

    pre.end().children("button") で end メソッドを使ってみました。変数 pre は var pre = $(this).children("pre") と定義したので、$(this)をゲットするために end() メソッドを使って children("pre") を解除しました。こうして $(this) を改めて取得せず、取得済みのそれを利用して $(this).children("button") を実行させています。

 

■ コメントの投稿 ■

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

●トラックバック●

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

●参照元一覧●

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

----------
200711241553
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。