私は、ブログエディタ(ほぼ今は、Windows Live Writerのみ)を使って記事を投稿しているのでJoomla!1.0.xからある{ほにゃらら}適当な何か{/ほにゃらら}といったタグを書くプラグインというのは作成してこなかった。何せブログエディタでは、ほぼやりたいことをブログエディタ側でやってくれるからです。
公開はしていないが、Joomla!1.0.xの時タグを置き換えるものを作成したことがある。それはタグを登録しておけば、保存したHTMLなりに置き換えてくれるというものでした。その残骸が、一部の記事に残っていたりしますが、今は使っていませんというか、Joomla!1.5用のものは作成していません。でも、これもWindows Live Writerには、テキストテンプレートというプラグインがあって、登録しておくだけでその登録したテキストを挿入してくれます。それを使えば、わざわざプラグインなどを使わなくても良いし、作らなくても良い。
前記事でGreyBoxが使っているJavascrptライブラリであるAJSライブラリでのwindow.onloadを書きました。
続いて他のJavascriptライブラリでのwindow.onloadの書き方を・・・。
AJSライブラリではこう書きました。
AJS.AEV(window, 'load', function() { alert('after AJS'); alert('body'); GB_show("Hello world", "http://google.com"); alert('before call AJS'); });
これをJQueryで書くと
jQuery(function(){ alert('after AJS'); alert('body'); GB_show("Hello world", "http://google.com"); alert('before call AJS'); });
Prototype
Event.Observe( window, "load", function(){ alert('after AJS'); alert('body'); GB_show("Hello world", "http://google.com"); alert('before call AJS'); });
mootools
window.addEvent('domready', function(){ alert('after AJS'); alert('body'); GB_show("Hello world", "http://google.com"); alert('before call AJS'); });
となります。
特定のライブラリに依存している(特定のJavascriptライブラリを必ずページ毎に読み込んでいる)場合ならそのライブラリの書き方で書いた方がスマートですね。
テンプレートや、エクステンションを追加・変更したとき、今まで動いていたJavascriptが動かなくなったらまず、onloadをソースから探してみると意外にそこに原因があったりするので解決の近道になるかもしれません。
Joomla!で作られたサイトを見ているとエクステンションにより、使っているJavascriptライブラリが異なっているのでしょうが、3つ以上のライブラリを読み込んでいるサイトもあります。ですが、通信速度のことを考えないならばそれで動作していればそれで良いと思っています。書き直すってのも無理があるし、特定のライブラリに依存したものだけを探すのも難しいですしね。
今回、これを書いていてエクステンションを作るとき、Javascriptライブラリを利用するなら複数のライブラリに対応させるようにした方が良いかもしれないと思いました。(するかどうかは別ですけど・・・。)パラメータで切り替えできれば、複数のライブラリを利用せずにすみますね。今までもそうですが、そのライブラリを出力するかしないかのパラメータは、なるべくつけるようにしています。
GreyBoxが動かないことでの説明は、簡単ですが以前にもしていますが、あらためておさらいします。
動かない原因のほとんどが、window.onloadイベントを上書きしてしまっていることが原因です。それは、GreyBoxに限らず、multiboxでもlightboxでも上書きしてしまったら結果は同じです。
まず、winodow.onloadについてとてもわかりやすくどう書いていると動かなくなるのかを説明されているサイトがありましたのでご覧ください。
後で追加されるwindow.onloadイベントの追加方法が、すでに追加されているイベントを上書きするような追加方法で記述されていると、GreyBoxのwindow.onloadイベントが実行されません。GreyBoxでは、AJSというJavascriptライブラリを使っておりAJSライブラリで用意されているonloadイベント追加メソッドは、
AJS.AEV(window, 'load', .....);
です。
例えば、GreyBoxのライブラリを読み込んだ上で下記のようなコードを書いてみます。
例:1
<script type="text/javascript"> window.onload = function(){ alert('before AJS'); } AJS.AEV(window, 'load', function() { GB_show("Hello world", "http://google.com"); }); </script> </head> <body onload="alert('body');"> <script type="text/javascript"> window.onload = function(){ alert('after AJS'); } </script>
実行結果は、"after AJS"のみ表示されるだけです。では、少し変更してみます。
例:2
<script type="text/javascript"> window.onload = function(){ alert('before AJS'); } AJS.AEV(window, 'load', function() { GB_show("Hello world", "http://google.com"); }); </script> </head> <body onload="alert('body');"> <script type="text/javascript"> //window.onload = function(){ // alert('after AJS'); //} </script>
最後のwindow.onloadをコメントアウトして実行すると、"body"と表示されるだけです。また、少し変更してみます。
例:3
<script type="text/javascript"> window.onload = function(){ alert('before AJS'); } AJS.AEV(window, 'load', function() { GB_show("Hello world", "http://google.com"); }); </script> </head> <body> <script type="text/javascript"> //window.onload = function(){ // alert('after AJS'); //} </script>
さらにbody部のonloadを消して実行すると、"before AJS"と表示され、GoogleのページがGreyBoxによって表示されます。
Joomla!でヘッドタグにGreyBoxライブラリのScriptタグが書き込まれるタイミングは、テンプレートに依存しており、また大抵headタグ開始直後に書き込まれるようになっていると思います。とすれば、後から書かれるJavascriptの影響を受けるのは当然です。その後から書かれているonloadイベントがイベント追加タイプでなかったらたとえGreyBoxで無くてもonloadイベントは消失してしまうので注意しなければなりません。
では、どのように対策すれば良いのか。
GreyBox Show 1.0.1 for 1.0.x
Joomla!のデフォルトサイトキャッシュがONの時は、自動で記事内にスクリプトコードを出力するようにしました。
キャッシュパラメータを付加しましたのでYesにすることにより、常時記事内にスクリプトコードを出力することができるようにしました。
rel="lightbox"タグがあれば削除するオプションを追加しました。
Support Joomla! Cache
Add : Support Cache parameter
Install
これは、Joomla! 1.0.x 用のみです。1.5用は、後日のアップデートになります。
About GreyBox
このプラグインは、GreyBox Javascriptを使用しています。
GreyBox is the greatest javascript library.
GreyBox v5.53
GreyBox is copyrighted work by Amir Salihefendic.
GreyBox official site:http://orangoo.com/labs/GreyBox/
license:LGPL