Extensions GreyBoxが動かない(2) : GreyBox Show Plugin
前記事で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が動かない: GreyBox Show plugin
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イベントは消失してしまうので注意しなければなりません。
では、どのように対策すれば良いのか。
ちゃんと投稿できないとあったので、さらに修正しました。正規表現が甘すぎました。・・・まだ甘いかもしれない。
こちらにおいています。
File Name: movabletype-d6a11f99bde78e4bf136996da99e5f20.zip
File Size: 9362
今回テストしていてはじめて知ったのですが、Google DocsにはドキュメントのHTMLとCSSを編集する機能まであるんですね。すごいです。Google Docsを使えば、一般のドキュメントとブログ投稿用のドキュメントをひとつのインターフェイスで管理できることになります。さらにHTMLやCSSを変更できるので自由自在です。今回もうひとつ気づいたのは、イメージをアップロードしてもリンクはGoogle Docsのリンクになっています。これなら、サーバー消えちゃってもGoogle Docsですべての記事を管理していれば、資産は残るってことになりますか。
再変更しました。
こちらを使ってください。
File Attachment:
File Name: movabletype-e68592d77184a7ba851fd40a476c002f.zip
File Size: 9360
Google Docsからの投稿について(2): MovableType XML-RPC
前の記事にて仮対応ファイルを作成してみたのですが、修正したものを作成しました。
Goolge Docsをお使いの方は、是非テストしてみてください。
良さそうなら整理してから正式公開しようと思っています。
修正後のファイルは、こちらから。 (英語版のみ。解凍後、上書きして使ってください。)
今回の変更点(前回のファイルからの)
下の画像をご覧ください。
- タイトルの指定方法を変更
最初の改行でタイトル指定をGoogle Docsメニューの[Insert][Header]でheaderを挿入することにより、header内の部分をタイトルとするように変更しました。 - introtextとfulltextの指定方法の変更
{more}で分けていましたが、これも同様に[Insert][Page break(for printing)]で分けます。
これで視覚的にもドキュメントらしくなり、そのまま投稿できるのでもっと使いやすくなったと思うのですが、どうでしょうか?
カテゴリーの変更は、動的にできるようにはしていません。カテゴリーの変更を指定となると、ドキュメントにはふさわしくないタグを挿入することにより実現できるでしょうが、どうでしょうか?
Google Docsからの投稿について: MovableType XML-RPC
ForumにてGoogle Docsからの投稿関連の投稿があったので少し試してみました。
試したことはあってもGoogle Docsからブログに投稿できるとは今まで知りませんでした。
DocumentをPublishすることでブログに投稿するのか公開するのかを選択でき、ブログの設定も同じ画面からのリンクで可能です。
送信内容や、仕様がどのようなものなのか全くわからないので、Google Docsからの送信内容をキャッチしてみました。内容としては、Blogger APIだけを使っているようでした。
- 新規投稿の場合 : Blogger.getUserBlogs と Blogger.newPostを使っています。
- 編集の場合は : Blogger.editPostを使っています。
Bloggerの場合、Title, introtext, fulltextがすべて同じcontent内に指定されたタグで送信されます。ところが、Google Docsの場合何もなさそうです。ということは、Plugin側でcontent内から抽出しなければなりません。ですがそれは、条件さえ設定すれば対応できそうな内容です。
うちのMovableType XML-RPCでは、Blogger APIをフルサポートしているわけでは無いので現在は、対応できません。(対応していたとしてもGoogle Docsの場合できませんが。)また、送信されてくる内容を見た限り、Joomla!1.5のBlogger APIでもHackしない限り無理そうです。
Google Docsを使って記事を管理する、Google Docsを普段使っているからそこから投稿したいものだけをBlogに投稿するということは、当然必要なのでしょう。私自身使ってみたいとは思っています。
そこで、MovableType XML-RPCとしては、今後様子を見ながら対応を考慮していこうと考えています。
と、書いているうちにそんなに手間はかからなさそうだから作ってみました。
とりあえず、Joomla!1.0.x用の英語版MovableType XML-RPC用です。Google Docsをお使いの方はお試しください。暫定版なのでカテゴリーの変更は、できないですが次で対応するつもりです。
使用方法は、movabletype.phpを上書きするだけです。
Google Docsの設定例は以下
Google Docsでの記事の書き方は、以下をご覧ください。
http://demo10.joomler.net/content/view/43/9/





























