こんばんは、martinです。ソーシャルブックマークへのリンクアイコンを各記事に付けるようにしました。近々配布予定の最新版に採用してます。またJavaScript関連の話をば。
愛用しているタブブラウザFirefoxの現行バージョンは2ですが、バージョン3からはネイティブでdocument.getElementsByClassNameがサポートされる ようです。現時点でこのメソッドをサポートしている主要なブラウザは存在しないので、document.getElementsByClassNameGでググれば分かるように、皆さん、色んなgetElementsByClassNameを書いています。ppBlogのJavaScriptのライブラリlib.jsでも、この関数(getByClass)は多用しているのですが、この関数は、ページ内のオブジェクトを逐一調べていくループ作業を伴うので、一般的に言って動作に時間がかかります。
JavaScript使いの間では、常識かと思いますが、この手の操作で一番スピードが速いのは、XPathGを利用するやり方です。jQueryGで有名なJohn Resig氏のブログに、この手の関数のスピード比較記事があります。
→http://ejohn.org/blog/getelementsbyclassname-speed-comparison/
ネイティブサポートの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氏のブログにあるのと同じ実験 をしてみましたが(パクっただけ)、彼のサイトにある、Prototype.jsのXPathを使ったもの(xpath.html
)と同等か少し速いくらいですね。
当然ながら、XPathをサポートしていないIE6,7は、通常通りDOM解析をするアプローチしかないです。こちらの計測では、XPathを利用するより5倍ほど遅いです。
ちなみに、1つ前のエントリで紹介したphotoeffect.jsも、この関数を使用しているので更新しました。ついでに添付しておきますね。このphotoeffect.jsは、単体で動くので、ppBlog以外の各種ブログでも外部ファイルとして呼び込むだけで簡単に使えます。要望があれば、詳しいクラス指定などの解説書きますんで、その時はたずねて下さい。

この記事に対するコメント・トラックバック [19件]
3. ぷらむ — 2007/09/18@23:47:08
5. Xize — 2007/09/20@01:24:47
1.6.4のEUC版の再ダウンロードが出来るようになるのはいつ頃でしょうか?
記事とは全く関係の無い糞コメントで
申し訳ありません。。。
動画貼り付けにmooom.jpも追加して欲しいこの頃ですが、
この手の追加ってどうやるんでしょう?
・・・普通にHTMLコピペでいいですか。そうですか。。。
8. BENIT — 2007/10/17@01:20:12
最新エントリなのでこちらに。
ええと、1.6.5ベータを試してみました。
気づいた点が何点か
●エディタ画面で、アマゾンアソシエイトボタンを押したときの挙動が若干変?
・・・絶対配置になったりプレビューが下に行ったりしたせいか、文字が若干ツールバーの下に隠れてしまいますね。
どうもツールバー辺りが結構今回改修されてるように見受けたのですが、これはどういったあたりの対応だったのでしょうか?
XSS関連でなければ元に戻そうかなー、と思ったりしたのですが(レイアウトがどうこうというより、個人的にツールバーの画面上部fixed配置などの改造しており、それを対応させるのが面倒なだけです
●記事閲覧(ボックス)画面でTrackbackボタンを押したとき、広がるが畳まれない。
・・・JSでエラーが起きていますね。
それと、今回の改修でphotoeffectを使ったときの拡大縮小やギャラリーへの登録って対応していますか?
weblogを拝見したところそういう挙動をしているように見えたのですが、こちらで試した限りはならないようです。
対応しているのであれば、恐らくこっちの更新ミスなのですが……。
最後に、不具合報告というわけではないのですが……。
http://welkin.s60.xrea.com/diary/index.php?UID=1191859383
こちらの記事でphotoeffectを使った画像を何枚か上げていますが、IE7では表示されず、Firefoxは表示はされますが反映までにかなりのラグが発生します。
ローカルではなんら問題ないのでまたしてもまたしてもXREAの広告挿入が原因かな、とは思うのですが、こういった場合もあるようです、というご報告まで……。
ツールバーあたりなんですが、アマゾンのこと忘れてましたねぇ。これに関しては、単にドラッグさせたかっただけです。久しぶりにドラッグ&ドロップのスクリプトを書きたくなっただけで
トラックバックは、古いモジュールのままでした。自分のサイトも古いやつだったんで先ほど入れ替えました。
あと、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. 将門
— 2007/10/19@19:47:03
1.6.5bata版を使って見ました、気になる所があったので報告します。
ただ、パリーグのクライマックスセカンドステージを
TV観戦していたので、報告が少し遅れました、すいません
まず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フォルダーのアイコンのリンクを
貼るように先生が考えているのでしたら、アイコンへのリンク
変更しようかなって思っています。
で、インストールですが、これは明らかに記述ミスですねぇ。何でこんなところ書き換えたんだろ
フィードアイコンに関しては、各テーマディレクトリに入れていただきたいと思います。なので、template.phpの記述を修正しました。あと、細かいところでいえば、トラックバックエントリーで表示されるマック向けのコマンドキーアイコンを指定する画像の名前を、cmd-key.pngに変更、これも各テーマディレクトリに入れるようにしています。10/19付けのバーター版では、そのあたりの修正をしています。
12. BENIT — 2007/10/20@11:16:18
ええと、TBの部分、直ってますか?
見たところこのサイトでもダウンロードしたものも、特に以前と変わっていないようなのですが……。
なんというか、なんとなくエラーの理由はわかったんですが、わかっただけでした
テンプレートの方でonclickを指定しなければ問題ないんでしょうけど、気になったのでご報告させていただきます。
>エディタ
あ、なるほど。D&D出来るようになってたんですね。
手前味噌的ではありますが、長文を結構書く身としては、fixedも結構便利ですよ。
もしfixedを実装するのであれば、個人的には(長文記事を再編集する際の)textareaの自動拡張はないほうがいいかな、と思います。(文章が長いと2重スクロールバーになるので……これは好みかもしれませんが)
あと、fixedにするのが一番楽なのですが、どうもデザイン的にしっくりこなくて…。まぁ、この辺は好みの問題なので何ともですが。D&Dにしてもイマイチ洗練されてないのですが、まぁとりあえず。
14. BENIT — 2007/10/20@12:04:47
そのためにfixedにするのに、なくしたら意味ないですよね
15. BENIT — 2007/10/21@19:24:15
テーマの順番を入れ替えようとするとリストが初期化されてしまうようです。
プレーンなインストールでも確認したので、私的な改造が原因ではない……と思います。
17. 将門
— 2007/10/29@21:30:18
不具合報告で、新規記事と記事の編集で
スマイルアイコンが機能しません、アイコンのタグが記事に
出ませんでした。
それから、このBLOGでもそうですが、写真の飾り付けや
切手風の飾り付けが、最後の画像しか効かなくなっています。
よろしくお願いします。
18. 将門
— 2007/10/29@21:44:02
19. BENIT — 2007/10/29@22:51:04
Firefoxにおいて、ページ読み込み時にundefinedと書かれたalertポップアップが出てきます。IE7では確認できませんでした。
エラーコンソールを見るとphotoeffect.jsで結構エラーが発生しているみたいですね。
ご承知かとは思いますが、一応ご報告させていただきました。