WebSurfer's Home

トップ > Blog 1   |   ログイン
APMLフィルター

reCaptcha が動かなくなりました

by WebSurfer 2010年6月20日 13:22

先のエントリ WP-Cumulus(3) で書きましたように、Widget の Tagcloud に WP-Cumulus を導入しましたが、その後 reCaptcha が表示されなくなっているのに気がつきました。

調べてみると、reCaptcha を表示するための JavaScript で、「'Recaptcha' は宣言されていません。」というエラーが出ています。

Widget の Tagcloud の WP-Cumulus を動かすため、Flash Player を起動する JavaScript を追加しましたが(詳しくは WP-Cumulus(3) を参照)、原因はどうやらこれと reCaptcha を起動するするスクリプトとの相性のようです。

WP-Cumulus の Flash Player 用の JavaScript を、reCaptcha 用の JavaScript より先に起動すれば問題はないのですが、逆だとダメでした(Widget の Tagcloud に WP-Cumulus を表示しようとすると、どうしても逆になってしまいます)。

タイミングの問題かと思って、setTimeout を使って reCaptcha 用の JavaScript の起動を遅らせてみたんですが、同じ結果でした。

BlogEngine の App_Code\Extensions\Recaptcha\RecaptchaControl.cs の中で、reCaptcha 本家のサイトからスクリプトをダウンロードしてくる設定になっています(下記参照)。"宣言されていません" というエラーになる Recaptcha はその中に定義されています。

<script type="text/javascript" src="http://api.recaptcha.net/js/recaptcha_ajax.js" defer="defer">

理由は全く不明ですが、recaptcha_ajax.js をダウンロードしてローカルに置いて、ローカルのファイルを参照するように変更したら、エラーは出なくなりました。

具体的には、RecaptchaControl.cs の中の RenderContents メソッドで、以下のように変更しました。

//output.AddAttribute("src", "http://api.recaptcha.net/js/recaptcha_ajax.js");
output.AddAttribute("src", "/BlogEngine/recaptcha_ajax.js");

本当にこれだけで問題解決になっているかイマイチ疑問ですが(汗)、とりあえずこのまま様子を見るつもりです。

***************** 2010/6/23 追記 *****************

やっぱり上記の処置では問題解決になっていませんでした。(涙)

reCaptcha を管理している google のサイトによると、recaptcha_ajax.js をダウンロードして自サーバーに置くのは、"Caching the reCAPTCHA javascript increases the risk that we might accidentally break your site in an upgrade." という理由で好ましくないとのことです。やむを得ず元に戻して、reCaptcha のサーバーからダウンロードするようにしました。

でもそうすると、IE ではスクリプトエラーが出て reCaptcha が動かなくなってしまいます。script タグから defer 属性を削除するとエラーを回避できるので、そうしてみましたが、今度は表示の遅れが目立つようになってしまいました。その問題を解決するため(defer 属性をつけたままでもスクリプトエラーが出ないようにするため)、問題のスクリプトの位置を HTML コードの最後の方になるように変更しました。そのため、2010/6/23 現在、コードは上記とは異なりますのでご注意ください。詳しい話は後日別途ポストします。

Tags: ,

BlogEngine.NET

WP-Cumulus(3)

by WebSurfer 2010年6月19日 15:35

Widget の Tagcloud の中にタグが 3D 空間で回転する WordPress のプラグイン WP-Cumulus を実装しました。

結局、日本語に対応していない Ver. 1.23 の tagcloud.swf を使うのはやめて、WP-Cumulus 作者が試験のために作った Unicode Support 版(詳しくは先のエントリ WP-Cumulus(2) を参照)を使いました。

サイズ、色その他のパラメーター設定は \widgets\Tag cloud\widget.ascx.cs の中にハードコーディングしました。本当はコントロールパネルのようなものを作るといいのですが、とっても面倒だったのでとりあえず今回はやめました。(笑)

その内容は以下の通りで、private const string LINK2 を追加して LoadWidge メソッドの中を書き換えています。これに加えて、widget.ascx に div タグの追加が必要です(id="wpcumulusflashcontent" としています)。

private const string LINK2 = "<a href='{0}' style='{1}'>{2}</a> ";

public override void LoadWidget()
{
  string root = BlogEngine.Core.Utils.AbsoluteWebRoot.ToString();
  StringBuilder sb = new StringBuilder();
  sb.Append("<tags>");

  foreach (string key in WeightedList.Keys)
  {
    string path = "?tag=/" + Utils.RemoveIllegalCharacters(key);
    HtmlGenericControl li = new HtmlGenericControl("li");
    li.InnerHtml = string.Format(LINK, Utils.RelativeWebRoot + path, WeightedList[key], "Tag: " + key, key);
    ulTags.Controls.Add(li);

    string size = "10";
    switch (WeightedList[key])
    {
      case "biggest":
        size = "13";
        break;
      case "big":
        size = "12";
        break;
      case "medium":
        size = "11";
        break;
      case "small":
        size = "10";
        break;
      case "smallest":
        size = "9";
        break;
      default:
        size = "10";
        break;
    }
    sb.Append(String.Format(LINK2, root + path, size, key));
  }

  sb.Append("</tags>");
  string tagcloud = sb.ToString();
  String csname = "WpCumulusScript";
  Type cstype = this.GetType();
  ClientScriptManager cs = Page.ClientScript;

  if (!cs.IsClientScriptBlockRegistered(cstype, csname))
  {
    StringBuilder cstext = new StringBuilder();
    cstext.AppendLine("var flashobject = new SWFObject(\"/BlogEngine/tagcloudUnicode.swf\", \"tagcloud\", \"180\", \"170\", \"10\", \"#ffffff\");");
    cstext.AppendLine("flashobject.addParam(\"wmode\", \"transparent\");");
    cstext.AppendLine("flashobject.addVariable(\"tcolor\", \"0x333333\");");
    cstext.AppendLine("flashobject.addVariable(\"tcolor2\", \"0x333333\");");
    cstext.AppendLine("flashobject.addVariable(\"hicolor\", \"0xff0000\");");
    cstext.AppendLine("flashobject.addVariable(\"tspeed\", \"100\");");
    cstext.AppendLine("flashobject.addVariable(\"tagcloud\", \"" + tagcloud + "\");");
    cstext.AppendLine("flashobject.write(\"wpcumulusflashcontent\");");
    cs.RegisterStartupScript(cstype, csname, cstext.ToString(), true);
  }
}

一応動いていますが、使っている tagcloud.swf(上記コードではオリジナル版を区別するために名前を tagcloudUnicode.swf に変えています)は作者によると "highly experimental swf version" だそうですので予期せぬ問題が出るかもしれません。しばらく様子を見ていきたいと思っています。

***************** 2010/6/23 追記 *****************

3D タグクラウド追加後、スクリプトエラーのため (1) コメントが書き込めない、(2) AMPL フィルターが起動できないという問題が IE で発生しました(この後のエントリ reCaptcha が動かなくなりました で書いたのとは別のスクリプトエラーです)。

そのスクリプトエラーを避けるため、Tag cloud 起動用のスクリプトをページの終わりに埋め込むのはやめて(上記のコードがそうなっています)、Tag cloud をレンダリングする HTML コードの中に埋め込むように変更しました。2010/6/23 現在、コードは上記とは異なりますのでご注意ください。詳しい話は後日別途ポストします。

Tags: , ,

BlogEngine.NET

WP-Cumulus(2)

by WebSurfer 2010年6月19日 00:03

先のエントリを書いた後、WP-Cumulus 作者の ブログ で、Unicode Support 版と称して、Flash 10 を使用すれば、デバイスフォント使用(らしい)でも埋め込みと同様に動きがスムースで、かすみ効果もあるというデモを見つけました。

その tagcloud.swf をダウンロードして自分でも試してみたところ、確かにそのとおりでした。

Flash Player(Ver. 10 以上)がインストールされてないか JavaScript が無効になっています。

先のエントリでは Ver. 1.23 の tagcloud.swf を使って作業を進めるようなことを書きましたが、考えが変わりました。

作者によると、"highly experimental swf version" とか "I wouldn't recommend using this version in a production website, other than as a test (similar to this post). " とのことで、Ver. 2.0 開発のための試験バージョンのようです。

でも、日本語が使えて、しかもサイズが数 kB と小さく(Ver. 1.23 で 34kB)、動きや表現が埋め込み版と同様というのは大きな魅力です。それを知ってしまった以上、ラテン文字のみの Ver. 1.23 にはもう戻れません。(笑)

作者のブログの記事によると "There is no new version of WP-Cumulus yet, this will be part of version 2.0 if it works reliably." とのことです。それまで待てないし、一応自分なりに問題なさそうなのは確認したので、Unicode Support 版で実装してみることにしました。

もし何か問題があっても、自分のブログの中だけなので大丈夫でしょう、たぶん。(汗)

Tags: , ,

BlogEngine.NET

About this blog

2010年5月にこのブログを立ち上げました。その後 ブログ2 を追加し、ここは ASP.NET 関係のトピックス、ブログ2はそれ以外のトピックスに分けました。

Calendar

<<  2017年7月  >>
2526272829301
2345678
9101112131415
16171819202122
23242526272829
303112345

View posts in large calendar