WebSurfer's Home

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

BE-Cumulus(2)

by WebSurfer 2010年7月5日 12:23

2010 年 6 月の中ごろから、WordPress のプラグイン WP-Cumulus(3D 空間をくるくる回る Flash を使った Tag Cloud)の BlogEngine.NET 1.6.1 への移植を試みていました。

先の ポスト で書きましたパラメータ設定機能の追加で、何とか普通に使えるレベルになったと思います。ここで、備忘録として、移植のために今まで BlogEngine.NET 1.6.1 に手を加えた内容をまとめて書いておきます。

この先、致命的な問題は出ないと期待して、しばらくコードの変更は凍結して、実用に耐えうるか試験したいと思います。もし、このブログを見て、試験するのを手伝ってあげようという奇特な方がおられましたら嬉しいです。その場合はメニューバーの「コンタクト」から連絡ください。

手を加えたのは、widget\Tag cloud フォルダの中にある widget.ascx, widget.ascx.cs, edit.ascx, edit.ascx.cs の 4 つのファイルのみです。以下、それぞれのファイルに手を加えた概要です。

widget.ascx

まず、3D Tag Cloud (Flash) 表示用に HTML の div タグと、ASP.NET サーバーコントロールの Literal を既存のコードに追加します。部分的なコードですが、以下のような感じです。

・・・前略・・・
<asp:Panel ID="panel3dTagCloud" runat="server">
  <div id="wpcumulusflashcontent">
    <p>If you see the icon blow, Flash Player and/or 
       JavaScript are/is not available in your PC.
    ・・・中略・・・
    </p>
  </div>
  <asp:Literal id="Literal1" runat="server"></asp:Literal>
</asp:Panel>
・・・後略・・・

追加した Literal には、Flash 起動用の JavaScript が書き出されるようになっています。その操作はサーバー側で、コードビハインド (widget.ascx.cs) に定義されたプログラムにより行われます。もう少し具体的に書くと、サーバー側で DB に保存されたパラメータ設定値と Tag 情報(名前、リンク先など)を取得し、それを元に SWFObject 1.4 を使った JavaScript を組み立てて、Literal に書き出します。

ブラウザは、サーバーから送信された div タグと JavaScript を含む HTML コードを受け取ります。そうすると、今度はブラウザ側で JavaScript が動き、SWFObject 1.4 が div タグの innerHTML を書き換えて Flash を表示します。

上記に加えて、ASP.NET サーバーコントロールの Panel を用いて、3D + Standard, 3D only, Standard only の 3 種類の表示を切り替えられるようにしています。

widget.ascx.cs

まず、追加した 9 つのパラメータについて、DB から設定値を取得するためのプロパティを widgets_Tag_cloud_widget クラスに追加します。これはオリジナルのコードに含まれていた MinimumPosts プロパティを参考にしました。具体的には以下のような感じです(一例のみ。他に 8 つ必要)。

private string _tagCloudStyle = "0";
private string TagCloudStyle
{
  get
  {
    StringDictionary settings = GetSettings();
    if (settings.ContainsKey("tagcloudstyle"))
    {
      return settings["tagcloudstyle"];
    }
    else
    {
      return _tagCloudStyle;
    }
  }
}

パラメータ設定値は DB のテーブル be_DataStoreSettings に保存されています(SQL Server 使用の場合)。それをプロパティに含まれる GetSettings メソッドで取得するようになっています。DB から取得した設定値は Cache に保存され、Cache にデータがあればそれを返すので、GetSettings が呼ばれるたびに DB にアクセスするという無駄は出ないように考慮されています。

次に、LoadWidget メソッドに以下の追加・変更を加えます。

  • RegisterClientScriptBlock メソッドを使って、外部スクリプトファイル SWFObject.js を参照する script 定義を HTML コードに書き出すためのコードを追加。
  • widget.ascx の Literal に Flash 起動用の JavaScript を書き出すコードを追加。上記で追加したプロパティを使ってパラメータ設定値を取得し、既存の WeightedList プロパティを使って Tag 情報を取得し、それらをベースに SWFObject 1.4 を使った Flash 起動用の JavaScript の文字列を動的に組み立てて、Literal.Text に設定します。
  • 表示方法を切り替えるため、widget.ascx に追加した 2 つの Panel の Visible プロパティの true/false を設定するコードを追加。表示方法は 3D + Standard, 3D only, standard only の 3 種類から選択可です。

LoadWidget メソッド全体のコードは以下のとおりです。

public override void LoadWidget()
{
  string root = Utils.AbsoluteWebRoot.ToString();
  StringBuilder sb, cs;

  if (TagCloudStyle == "0" || TagCloudStyle == "1")
  {
    // 3D + Standard または 3D only の場合

    string csname = "3dTagCloudEnablingScript";
    Type cstype = this.GetType();
    ClientScriptManager csm = Page.ClientScript;
    if (!csm.IsClientScriptBlockRegistered(cstype, csname))
    {
      string script = "<script type=\"text/javascript\" src=\"" +
        Utils.RelativeWebRoot + "swfobject.js\"></script>";
      csm.RegisterClientScriptBlock(cstype, csname, script, false);
    }

    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 = "12";
      switch (WeightedList[key])
      {
        case "biggest":
          size = "18";
          break;
        case "big":
          size = "16";
          break;
        case "medium":
          size = "14";
          break;
        case "small":
          size = "12";
          break;
        case "smallest":
          size = "10";
          break;
        default:
          size = "12";
          break;
      }
      sb.Append(String.Format("<a href='{0}' style='{1}'>{2}</a>", 
        root + path, size, key));
    }
    sb.Append("</tags>");

    cs = new StringBuilder();
    cs.AppendLine("<script type=\"text/javascript\">");
    cs.AppendLine("//<![CDATA[");
    cs.AppendLine("var so = new SWFObject(\"" + 
      Utils.RelativeWebRoot + FlushFileName +
      "\", \"tagcloud\", \"" + TagCloudWidth + "\", \"" +
      TagCloudHeight + "\", \"10\", \"#ffffff\");");
    cs.AppendLine("so.addParam(\"wmode\", \"transparent\");");
    cs.AppendLine("so.addVariable(\"mode\", \"tags\");");
    cs.AppendLine("so.addVariable(\"distr\", \"" +
      ((TagDistribution == "0") ? "true" : "false") + "\");");
    cs.AppendLine("so.addVariable(\"tcolor\", \"" + TagColor1 + "\");");
    cs.AppendLine("so.addVariable(\"tcolor2\", \"" + TagColor2 + "\");");
    cs.AppendLine("so.addVariable(\"hicolor\", \"" + TagMouseoverColor + "\");");
    cs.AppendLine("so.addVariable(\"tspeed\", \"" + TagRotationSpeed + "\");");
    cs.AppendLine("so.addVariable(\"tagcloud\", \"" + sb.ToString() + "\");");
    cs.AppendLine("so.write(\"wpcumulusflashcontent\");");
    cs.AppendLine("//]]>");
    cs.AppendLine("</script>");
    Literal1.Text = cs.ToString();
  }
  else
  {
    // Standard only の場合
    foreach (string key in WeightedList.Keys)
    {
      HtmlGenericControl li = new HtmlGenericControl("li");
      li.InnerHtml = string.Format(LINK,
        Utils.RelativeWebRoot + "?tag=/" + Utils.RemoveIllegalCharacters(key),
        WeightedList[key],
        "Tag: " + key,
        key);
      ulTags.Controls.Add(li);
    }
  }

  if (TagCloudStyle == "0")
  {
    panel3dTagCloud.Visible = true;
    panelStdTagCloud.Visible = true;
  }
  else if (TagCloudStyle == "1")
  {
    panel3dTagCloud.Visible = true;
    panelStdTagCloud.Visible = false;
  }
  else
  {
    panel3dTagCloud.Visible = false;
    panelStdTagCloud.Visible = true;
  }
}

長くなりすぎましたので、edit.ascx, edit.ascx.cs については別のポストに分けます。

Tags: , ,

BlogEngine.NET

BE-Cumulus

by WebSurfer 2010年7月2日 23:58
3D Tag Cloud パラメータ設定画面

3D タグクラウドを表示する tagcloud.swf のパラメータを、コードに埋め込むのではなく、Web からアクセスして変更し、それを保存し、次回の表示に反映できるようにしました。

まず、保存先がどこにあるか探してみましたが、ポストデータのストアを DB に設定していると、パラメータの保存先も DB になり、SQL Server の場合 be_DataStoreSettings という名前のテーブルにあることが分かりました。

そこからコードにどのような変更・追加が必要になるかを調査してみました。

テーブルのスキーマの変更から始まって、それを SELECT, DELETE, UPDATE, INSERT するために、かなりのコードの変更が必要になると思っていましたが、意外と簡単でした。

たぶん、Widget を変更したり、追加したりすることをあらかじめ想定して、パラメータの DB への保存方法や、DB からの取得方法を考えて BlogEngine は作られているのだと思います。

widgets\Tag cloud フォルダにある widget.ascx, edit.ascx およびそのコードビハインドに手を加えるだけで、結構簡単にできました。

詳しくはまた後日報告します。

Tags: , ,

BlogEngine.NET

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

About this blog

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

Calendar

<<  2024年4月  >>
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011

View posts in large calendar