WebSurfer's Home

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

tagcloud.swf のパラメータ設定

by WebSurfer 2010年6月25日 12:19

タグが 3D 空間で回転するタグクラウドを表示するため、WordPress のプラグイン WP-Cumulus の作者のサイト Help me test WP-Cumulus unicode support から Unicode Support 版の tagcloud.swf を入手して利用させていただいています。

これの flashvars のパラメータ設定で、ちょっとハマったことがありましたので、備忘録として書いておきます(distr 以外は最新のリリース版 V1.23 と同じかもしれませんが未確認です)。

distr 回転する球面にタグを一様に配置するか否かを指定するパラメータです。 V1.23 とは逆になっており、 false に設定もしくはこのパラメータ指定を全削除すると一様になります。
mode タグ、カテゴリー、もしくはその両方のどれを表示するか指定するものだそうです。 自分には意味不明ですが、検証の結果、以下のようになりました。

表示するタグの文字、その大きさ、リンク先のデータを渡す方法は、 (1) tagcloud パラメータに文字列としてリンクデータを埋め込む、 (2) 外部 xml ファイルを作ってそれを読み込ませる、の二通りがあります。

前者の場合は、このパラメータ指定(例: so.addVariable("mode", "tags");)が必須です。 この指定がないと、外部 xml ファイルを探しに行き、あればそれを使用し、なければ空白が表示されます (tagcloud パラメータに設定したリンクデータは無視されます・・・ここがハマったところです)。

後者の場合はパラメータ指定(上記の例参照)を全削除します。何故かそうしないと動きません。
tcolor デフォルトのタグの色だそうです。 でも検証した限りではそうならなくて、 そのタグが使用される頻度が多いとこの色に近づいていきます。
tcolor2 このパラメータを指定すると、使用される頻度が少ないタグはこの色になるそうです。 指定しなくても、tcolor の設定に応じて、何らかの色が自動的に設定される感じです。 うまく設定できないので(個人的には)、tcolor と同じにしておくのがいいと思います。
tagcloud 外部 xml ファイルを使わず、 tagcloud パラメータに文字列としてリンクデータを埋め込む場合に使用します。 なかなか微妙で、xml データの文字列に改行などが入っていると Flash Player の起動さえできないです。 なお、urlencoding optional と書いてありますが、日本語でもエンコードなしで問題なかったです。

その他の詳しい情報は WP-Cumulus の作者のサイト How to repurpose my tag cloud Flash movie を参照してください。

なお、Unicode Support 版は WP-Cumulus 2.0 開発のための試験用のようで、正式にリリースされたわけではなく、作者は使用を推奨していないので注意してください。

サイズが約 5 KB と小さいにもかかわらず、日本語を含む多言語に対応しているところが Unicode Support 版の魅力なのですが(V1.23 は 34 KB もあります)・・・

Tags: ,

BlogEngine.NET

WP-Cumulus(4)

by WebSurfer 2010年6月24日 23:00

WP-Clumulus(3D タグクラウドを表示する Flash)を実装した後、ブラウザが IE(特に IE6)の場合、それ以前には出ていなかったスクリプトエラーが出るのに気がつきました。

スクリプトエラーは、外部スクリプトファイル recaptcha_ajax.js, blog.js, widget.js に定義されているメソッド等を参照できないというもので、そのため (1) Recaptcha の表示、(2) コメントの書き込み、(3) AMPL フィルターの起動、(4) Widget の移動、編集、削除ができませんでした。

いろいろと調べた結果、上記の外部スクリプトファイルを定義する script タグには defer="defer" 属性が追加されており、これと Flash Player 起動との関連で不具合が起きていることが分かりました。

defer="defer" 属性が追加されていると、当該スクリプトファイルの取得・解析を待たずに後続の HTML コードの解析・レンダリングが進められるそうです。その後 Flash Player が起動されると何かの不具合が起こり、IE のスクリプトエンジンが当該スクリプトファイルを取り込めなくなり(または解析できなくなり?)、それに定義されているメソッドを参照できなくなるようです。

対応策は、(a) Flash Player を起動しない、(b) defer="defer" 属性を削除する、(c) Flash Player を起動した後で defer="defer" 属性付の script タグを読むようスクリプトの順序を変更する・・・のいずれかになります。

検討の結果、(a) 案は 3D タグクラウドの実装を諦めるということなので問題外、(b) 案の defer="defer" 属性の削除は IE でレンダリングの遅れが目立つようになるので NG ということで、結局 (c) 案の対応を取りました。

recaptcha_ajax.js に対しては、RecaptchaControl.cs の RenderContents メソッドを書き換えました。問題のスクリプトのみ RegisterStartupScript メソッドを使用してページの最後に書き込むようにしました。コードは以下のとおりです。なお、この変更は reCaptcha を実装しなければ不要です。

protected override void RenderContents(HtmlTextWriter output)
{
  output.AddAttribute(HtmlTextWriterAttribute.Id, "spnCaptchaIncorrect");
  output.AddAttribute(HtmlTextWriterAttribute.Style, "color:Red;display:none;");
  output.RenderBeginTag("span");
  output.WriteLine("The captcha text was not valid. Please try again.");
  output.RenderEndTag();

  output.AddAttribute(HtmlTextWriterAttribute.Id, "recaptcha_placeholder");
  output.RenderBeginTag(HtmlTextWriterTag.Div);
  output.RenderEndTag();

  string csname = "ReCaptchaEnablingScript";
  Type cstype = this.GetType();
  ClientScriptManager cs = Page.ClientScript;

  if (!cs.IsStartupScriptRegistered(cstype, csname))
  {
    StringBuilder sb = new StringBuilder();
    sb.AppendLine("<script type=\"text/javascript\"" + 
        "src=\"http://api.recaptcha.net/js/recaptcha_ajax.js\" defer=\"defer\"></script>");
    sb.AppendLine("<script type=\"text/javascript\">");
    sb.AppendLine("//<![CDATA[");
    sb.AppendLine("  function showRecaptcha() {");
    sb.AppendLine("    Recaptcha.create('" + publicKey + "', 'recaptcha_placeholder', {");
    sb.AppendLine("      theme: '" + Theme + "',");
    sb.AppendLine("      tabindex: " + TabIndex.ToString());
    sb.AppendLine("      })");
    sb.AppendLine("  }");
    sb.AppendLine("  var rc_oldonload = window.onload;");
    sb.AppendLine("  if (typeof window.onload != 'function') {");
    sb.AppendLine("    window.onload = showRecaptcha;");
    sb.AppendLine("  }");
    sb.AppendLine("  else {");
    sb.AppendLine("    window.onload = function() {");
    sb.AppendLine("      rc_oldonload();");
    sb.AppendLine("      showRecaptcha();");
    sb.AppendLine("    }");
    sb.AppendLine("  }");
    sb.AppendLine("//]]>");
    sb.AppendLine("</script>");
    cs.RegisterStartupScript(cstype, csname, sb.ToString(), false);
  }
}

blog.js, widget.js に対しては、widget.ascx, widget.ascx.cs を書き換えました。Flash 起動スクリプトを、タグクラウドをレンダリングする HTML コードの中に埋め込むように変更しました。コードは以下のとおりです。なお、これは 3D タグクラウドを実装するには必須です。

widget.ascx

<%@ Control Language="C#" 
    AutoEventWireup="true" 
    CodeFile="widget.ascx.cs" 
    Inherits="widgets_Tag_cloud_widget" %>
<div id="wpcumulusflashcontent">
    If you see this Flash Player (Ver. 10 or better) 
    and/or JavaScript are/is not available in your PC.
</div>
<asp:Literal id="Literal1" runat="server"></asp:Literal>
<ul runat="server" id="ulTags" />

widget.ascx.cs

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("<a href='{0}' style='{1}'>{2}</a>", root + path, size, key));
  }
  sb.Append("</tags>");

  StringBuilder cs = new StringBuilder();
  cs.AppendLine("<script type=\"text/javascript\">");
  cs.AppendLine("//<![CDATA[");
  cs.AppendLine("var so = new SWFObject(\"/BlogEngine/tagcloudUnicode.swf\", \"tagcloud\", \"180\", \"170\", \"10\", \"#ffffff\");");
  cs.AppendLine("so.addParam(\"wmode\", \"transparent\");");
  cs.AppendLine("so.addVariable(\"mode\", \"tags\");");
  cs.AppendLine("so.addVariable(\"tcolor\", \"0x333333\");");
  cs.AppendLine("so.addVariable(\"tcolor2\", \"0x333333\");");
  cs.AppendLine("so.addVariable(\"hicolor\", \"0xff0000\");");
  cs.AppendLine("so.addVariable(\"tspeed\", \"100\");");
  cs.AppendLine("so.addVariable(\"tagcloud\", \"" + sb.ToString() + "\");");
  cs.AppendLine("so.write(\"wpcumulusflashcontent\");");
  cs.AppendLine("//]]>");
  cs.AppendLine("</script>");
  Literal1.Text = cs.ToString();
}

これで問題はすべて片付いたので、パラメータ設定の為のコントロールパネルを追加するまでは、上記コードが最終版・・・と思いたいです。(笑)


------------------ 2010/8/5 追記 ------------------

RecaptchaControl.cs の RenderContents メソッドですが、以下のように空白を追加してください。

protected override void RenderContents(HtmlTextWriter output)
{
  ・・・中略・・・
    // /javascript\"" → /javascript\" " としてください。
    sb.AppendLine("<script type=\"text/javascript\" " + 
        "/ src=\"http://api.recaptcha.net/js/recaptcha_ajax.js\" defer=\"defer\"></script>");

  ・・・後略・・・

空白なしでも動きますが、W3C Markup Validation Service でエラーがでます。

Tags: , ,

BlogEngine.NET

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

About this blog

2010年5月にこのブログを立ち上げました。主に ASP.NET Web アプリ関係の記事です。

Calendar

<<  2024年3月  >>
252627282912
3456789
10111213141516
17181920212223
24252627282930
31123456

View posts in large calendar