ppBlogでのgetElementsByClassName

category-icon

こんばんは、martinです。ソーシャルブックマークへのリンクアイコンを各記事に付けるようにしました。近々配布予定の最新版に採用してます。またJavaScript関連の話をば。

 愛用しているタブブラウザFirefoxの現行バージョンは2ですが、バージョン3からはネイティブでdocument.getElementsByClassNameサポートされるLink ようです。現時点でこのメソッドをサポートしている主要なブラウザは存在しないので、document.getElementsByClassNameGでググれば分かるように、皆さん、色んなgetElementsByClassNameを書いています。ppBlogのJavaScriptのライブラリlib.jsでも、この関数(getByClass)は多用しているのですが、この関数は、ページ内のオブジェクトを逐一調べていくループ作業を伴うので、一般的に言って動作に時間がかかります。

 JavaScript使いの間では、常識かと思いますが、この手の操作で一番スピードが速いのは、XPathGを利用するやり方です。jQueryGで有名なJohn Resig氏のブログに、この手の関数のスピード比較記事があります。
 →http://ejohn.org/blog/getelementsbyclassname-speed-comparison/Link

 ネイティブサポートのFirefox3が無茶苦茶速いのは当然として、XPathもDOMを解析していく手法よりはずっと高速なのが分かります。IE6,7を除くモダンなブラウザは、このXPathをサポートしているので、ppBlogでもXPathを使うようにしました。以下のような感じです。

document.getElementsByClassName(className, pElement, tagName){
 var d = document, nodes = [], item;
 try { // XPathをサポートしているならこれを使う
  var xp = d.evaluate(
   './/'+(tagName || '*')+'[contains(concat(" ", @class, " "), " '+className+' ")]',
   (pElement || d), null, XPathResult.ANY_TYPE, null
  );
  for (item = xp.iterateNext(); item; item = xp.iterateNext()){
   nodes.push(item);
  }
 } catch(e){ // そうでなければ地道にDOM解析
  var cls, items = (pElement || d).getElementsByTagName((tagName || '*'));
  for(var i = 0, l = items.length; i < l; i++){
   item = items[i];
   if(item.className){
    cls = item.className.split(/¥s+/);
    for(var j = 0, k = cls.length; j < k; j++){
     if(cls[j]==className){
      nodes[nodes.length] = item; break;
     }
    }
   }
  }
 }
 return nodes.length > 0 ? nodes : null;
}

 John Resig氏のブログにあるのと同じ実験Link をしてみましたが(パクっただけ)、彼のサイトにある、Prototype.jsのXPathを使ったもの(xpath.htmlLink )と同等か少し速いくらいですね。

 当然ながら、XPathをサポートしていないIE6,7は、通常通りDOM解析をするアプローチしかないです。こちらの計測では、XPathを利用するより5倍ほど遅いです。

 ちなみに、1つ前のエントリで紹介したphotoeffect.jsも、この関数を使用しているので更新しました。ついでに添付しておきますね。このphotoeffect.jsは、単体で動くので、ppBlog以外の各種ブログでも外部ファイルとして呼び込むだけで簡単に使えます。要望があれば、詳しいクラス指定などの解説書きますんで、その時はたずねて下さい。

添付ファイル: photoeffect.jsattachedIcon 

 

— posted by martin at 01:22 am   commentComment [19]  pingTrackBack [0]

この記事に対するコメント・トラックバック [19件]

scrollUp1. ぷらむ — 2007/09/18@21:18:03

ブックマークの登録が便利になりますね。私もdel.icio.usと、はてなを使っています。しかし自分のブログになると、ブックマーク登録する人など皆無です。ということでアイコンを付ける必要はないと考えます。できましたら、この機能を付けるか、付けないか、簡単に選択できるようにしていただけるとありがたいです。よろしくお願いします。

Owner Comment martin  2007/09/18@22:50:04

こんばんは。外からケータイで。この機能はテーマファイルでの記述がなければ発動しないので大丈夫だと思います。パフォーマンスにそう変わらないです。

3. ぷらむ — 2007/09/18@23:47:08

martin先生、わかりました。今試しにこのエントリーをdel.icio.usに登録しました。登録数1が出ませんね。たぶん時間差があるんですね。

Owner Comment martin Website  2007/09/19@01:23:32

こんばんは。今帰宅。del.icio.usに関しては、現時点で、登録人数を表示するAPIがないようなので、表示されませんf(--;それ以外の3つや、あとYahoo!Bookmarkなどはあるのですが。。多分サーバーサイドでごにょごにょすれば大丈夫なんでしょうけど。。

5. Xize — 2007/09/20@01:24:47

こんばんは、初めまして
1.6.4のEUC版の再ダウンロードが出来るようになるのはいつ頃でしょうか?

scrollUp6. weep Website — 2007/09/21@00:09:08

はじめまして。
記事とは全く関係の無い糞コメントで
申し訳ありません。。。

動画貼り付けにmooom.jpも追加して欲しいこの頃ですが、
この手の追加ってどうやるんでしょう?

・・・普通にHTMLコピペでいいですか。そうですか。。。

Owner Comment martin Website  2007/10/15@10:16:59

こんにちは。mooom.jpのタグも使えるようにしました。

8. BENIT — 2007/10/17@01:20:12

お疲れ様です。

最新エントリなのでこちらに。
ええと、1.6.5ベータを試してみました。
気づいた点が何点か

●エディタ画面で、アマゾンアソシエイトボタンを押したときの挙動が若干変?
・・・絶対配置になったりプレビューが下に行ったりしたせいか、文字が若干ツールバーの下に隠れてしまいますね。
どうもツールバー辺りが結構今回改修されてるように見受けたのですが、これはどういったあたりの対応だったのでしょうか?
XSS関連でなければ元に戻そうかなー、と思ったりしたのですが(レイアウトがどうこうというより、個人的にツールバーの画面上部fixed配置などの改造しており、それを対応させるのが面倒なだけです?;w)

●記事閲覧(ボックス)画面でTrackbackボタンを押したとき、広がるが畳まれない。
・・・JSでエラーが起きていますね。

それと、今回の改修でphotoeffectを使ったときの拡大縮小やギャラリーへの登録って対応していますか?
weblogを拝見したところそういう挙動をしているように見えたのですが、こちらで試した限りはならないようです。
対応しているのであれば、恐らくこっちの更新ミスなのですが……。


最後に、不具合報告というわけではないのですが……。
http://welkin.s60.xrea.com/diary/index.php?UID=1191859383Link
こちらの記事でphotoeffectを使った画像を何枚か上げていますが、IE7では表示されず、Firefoxは表示はされますが反映までにかなりのラグが発生します。
ローカルではなんら問題ないのでまたしてもまたしてもXREAの広告挿入が原因かな、とは思うのですが、こういった場合もあるようです、というご報告まで……。

Owner Comment martin Website  2007/10/19@10:12:22

BENITさん、ご無沙汰してます。ご報告ありがとうございます。
ツールバーあたりなんですが、アマゾンのこと忘れてましたねぇ。これに関しては、単にドラッグさせたかっただけです。久しぶりにドラッグ&ドロップのスクリプトを書きたくなっただけでf(--; ま、文が長くなってくるとツールバーが見えなくなるのでイヤだなと思ったのが先ですが。確かにfixedさせてもいいですね。そちらが簡単そう。。
 トラックバックは、古いモジュールのままでした。自分のサイトも古いやつだったんで先ほど入れ替えました。
 あと、photoeffectの件ですが、これは実は、タグの中でクラス指定する場所がポイントでして、最終的には、アップする段階で自動的に入れ込むようにしようとは思っているのですが、クラス指定する場所は、タグの最後です。具体的には、

<img src="PIX/foo.jpg" alt="26:350:263:0:0:bar:center:0:0:photoeffect.jsを反映させたやつ-写真風:" class="photo-effect photo-angle-3" />

みたいな感じです。クラスの指定名も最初のバージョンとちょいと違ってます。

 余談ですが、最初、このコメントがなぜか反映されなくて、あれっと思い調べてみたら、「ass」という単語をNGワードにしていました。これにclassが引っ掛かり。。少なくとも、管理者の投稿ではスルーするようにしました。

10. 将門 Website — 2007/10/19@19:47:03

martin先生~こんばんわです。
1.6.5bata版を使って見ました、気になる所があったので報告します。
ただ、パリーグのクライマックスセカンドステージを
TV観戦していたので、報告が少し遅れました、すいません(TT)

まず1つ目は、install.phpにアクセスすると、エラーでてしまします。
エラー内容は「 syntax error install.php on line 421」
(エラー内容を抜粋しています。)て出ます。
相当箇所の記載は「# putenv("TZ=JST-9"); // oversea ISP」
なので、旧バージョンの相当箇所記載が
「# putenv('TZ=JST-9'); // oversea ISP」
になっていたので、書き直してインストールすると
インストールが出来ました、これで良いのか聞きたかったので・・・・

それと2つ目は、RSSとAtomのアイコンが表示しないので、
見てみると、アイコンじたいは「basicフォルダーのImagesフォルダーの中に入っているのですが、template.phpでは
インストールフォルダー直下のImagesフォルダーにリンクが張られているので、インストールフォルダー直下のImagesフォルダーに
アイコン「feed-icon16x16.png」を入れました。
もし、basicフォルダーのImagesフォルダーのアイコンのリンクを
貼るように先生が考えているのでしたら、アイコンへのリンク
変更しようかなって思っています。

scrollUpOwner Comment martin Website  2007/10/19@21:42:30

将門さん、こんにちは。検証ありがとうございます。自分は、ホークスが負けちゃってからCSは見てないです。。
で、インストールですが、これは明らかに記述ミスですねぇ。何でこんなところ書き換えたんだろf(--;
 フィードアイコンに関しては、各テーマディレクトリに入れていただきたいと思います。なので、template.phpの記述を修正しました。あと、細かいところでいえば、トラックバックエントリーで表示されるマック向けのコマンドキーアイコンを指定する画像の名前を、cmd-key.pngに変更、これも各テーマディレクトリに入れるようにしています。10/19付けのバーター版では、そのあたりの修正をしています。

12. BENIT — 2007/10/20@11:16:18

改修お疲れ様です8-)

ええと、TBの部分、直ってますか?f(--;
見たところこのサイトでもダウンロードしたものも、特に以前と変わっていないようなのですが……。
なんというか、なんとなくエラーの理由はわかったんですが、わかっただけでした(++!)
テンプレートの方でonclickを指定しなければ問題ないんでしょうけど、気になったのでご報告させていただきます。

>エディタ
あ、なるほど。D&D出来るようになってたんですね。
手前味噌的ではありますが、長文を結構書く身としては、fixedも結構便利ですよ。
もしfixedを実装するのであれば、個人的には(長文記事を再編集する際の)textareaの自動拡張はないほうがいいかな、と思います。(文章が長いと2重スクロールバーになるので……これは好みかもしれませんが)

Owner Comment martin Website  2007/10/20@21:44:16

ご報告ありがとうございます。TrackBack、こちらで別のエラーが出ていて、そっちだけに目が行ってました。今度は大丈夫ではと思います。たぶん…。ついでなんで、TBやコメントのフォームをAjaxで呼び込む際にも、呼び込み中のバルーンチップを付けるようにしました。
 あと、fixedにするのが一番楽なのですが、どうもデザイン的にしっくりこなくて…。まぁ、この辺は好みの問題なので何ともですが。D&Dにしてもイマイチ洗練されてないのですが、まぁとりあえず。

14. BENIT — 2007/10/20@12:04:47

すいません、上のコメントの下の文(もし~で始まる段落)は無視してください。
そのためにfixedにするのに、なくしたら意味ないですよね?;w)

15. BENIT — 2007/10/21@19:24:15

不具合報告です。
テーマの順番を入れ替えようとするとリストが初期化されてしまうようです。
プレーンなインストールでも確認したので、私的な改造が原因ではない……と思います。

scrollUpOwner Comment martin Website  2007/10/21@21:28:26

ご報告ありがとうございます。フィルター制御が抜けていました。たぶん、ページの入れ替えでも同じことが起きるのでは思います。10/21版で修正しました。

17. 将門 Website — 2007/10/29@21:30:18

martin先生~こんばんわです。
不具合報告で、新規記事と記事の編集で
スマイルアイコンが機能しません、アイコンのタグが記事に
出ませんでした。
それから、このBLOGでもそうですが、写真の飾り付けや
切手風の飾り付けが、最後の画像しか効かなくなっています。
よろしくお願いします。

18. 将門 Website — 2007/10/29@21:44:02

あぁ~バージョンは最新版のppBlog170です。(++!)

19. BENIT — 2007/10/29@22:51:04

まだ1.7は試していないんですが、このページで確認できる不具合です。

Firefoxにおいて、ページ読み込み時にundefinedと書かれたalertポップアップが出てきます。IE7では確認できませんでした。
エラーコンソールを見るとphotoeffect.jsで結構エラーが発生しているみたいですね。
ご承知かとは思いますが、一応ご報告させていただきました。

この記事に対する TrackBack URL:

設定によりTB元のページに、こちらの記事への言及(この記事へのリンク)がなければ、TB受付不可となりますのであらかじめご了承下さい。

コメントをどうぞ。 名前(ペンネーム)と画像認証のひらがな4文字は必須で、ウェブサイトURLはオプションです。

ウェブサイト (U):

タグは使えません。http://・・・ は自動的にリンク表示となります

:) :D 8-) ;-) :P :E :o :( (TT) ):T (--) (++!) ?;w) (-o-) (**!) ;v) f(--; :B l_P~

     
Created in 0.0073 sec.
prev
2024.7
next
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31