NORIのFlashユーザのためのMovable Type講座 gihyo.jp版

第7回 コメントをXMLでフィードバック

この記事を読むのに必要な時間:およそ 5.5 分

MTタグで平均値を求める

平均値は,ここまでで求めた以下の変数を利用することで,求められます。

  • コメントの合計値…result
  • コメントの総数…count
  • 平均値=result÷count

これを,MTタグで表現すると,次のようになります。valueの値は,変数countを指定したいので,$countとしています。

次の行では,resultに演算結果が代入されます。

<$mt:SetVar name="result" op="/" value="$count"$>

MTタグで四捨五入する

四捨五入は,opモディファイアには用意されていません。そこで,次のように考えます。

「resultに0.5をプラスして,整数部分だけを取り出す」

 四捨五入のアイデアは,yoshiさんのブログ【Under the Bridge】⁠MT4.2:テンプレートタグのみで切り捨て,切り上げ,四捨五入の演算」を参考にしました。

整数部分だけを取り出すために,sprintfというモディファイアを使用します。これは,C言語のprintf関数と同じフォーマット指定子を出力結果に指定できます。たとえば,sprintf="%d" とすると「整数部分だけを出力せよ」という意味になります。

sprintfモディファイアは,出力するMTタグにしか使用できないため,<$mt:SetVar$>などでは無効です。そこで一度,<$mt:GetVar$>で出力した結果を再び<mt:SetVarBlock>でresultに戻します。

<$mt:SetVar name="result" op="+" value="0.5"$>
<$mt:SetVarBlock name="result"><$mt:GetVar name="result" sprintf="%d"$></mt:SetVarBlock>

MTタグをまとめる

さて,以上のMTタグをまとめて,photo.xmlを出力するインデックステンプレートとして作成しましょう(エントリーの区切り用目印につけていた<$mt:EntryTitle$>は,削除しました)⁠

<?xml version="1.0" encoding="utf-8"?>
<entries>
<mt:Entries>
<mt:Ignore>***********エントリー開始***********</mt:Ignore>
<$mt:SetVar name="result" value="0" $>
<mt:SetVarBlock name="count"><$mt:EntryCommentCount$></mt:SetVarBlock>
<mt:Comments>
<mt:SetVarBlock op="+" name="result"><$mt:CommentBody remove_html="1"$></mt:SetVarBlock>
</mt:Comments>
<$mt:SetVar name="result" op="/" value="$count"$>
<$mt:SetVar name="result" op="+" value="0.5"$>
<$mt:SetVarBlock name="result"><$mt:GetVar name="result" sprintf="%d"$></mt:SetVarBlock>
<mt:Ignore>***********以前作成したphoto.xmlのインデックステンプレート***********</mt:Ignore>
<entry id="<$mt:EntryID$>" title="<$mt:EntryTitle$>" rating="<$mt:GetVar name="result"$>">
<mt:EntryAssets type="image">
<img src="<$mt:AssetURL$>" />
</mt:EntryAssets>
</entry>
<mt:Ignore>***********エントリー終了***********</mt:Ignore>
</mt:Entries>
</entries>

 新しいphoto.xml出力用テンプレート

図 新しいphoto.xml出力用テンプレート

出力ファイル名をphoto.xmlとして,現在Flashが読み込むXMLを上書きしておきます。

Flashでrating属性に対応する

Flashのソースでは,次の3カ所を修正しました。

(1)で,属性を読みこみ(2)で表示処理を行います。⁠3)は,直接関係ないですが,何度かテストしてブラウザキャッシュを読まずに,正しい結果が表示されるようにXMLのロードで,毎回異なる変数をつけて呼び出しています。

(1)新しいrating属性をE4Xで読みます。

function onLoaded(e:Event):void {
      //XMLデータとして読み込んだテキストデータをパース
      var myXML:XML=new XML(e.target.data);
      //E4XでmyXMLを解析
      for each (var entrydata:XML in myXML.*) {
            //Objectの配列としてデータを格納
            var t_object:Object = new Object();
            t_object.src=entrydata.img.@src;
            t_object.id=entrydata.@id;
           t_object.rating=entrydata.@rating;
            t_object.title=entrydata.@title;
            image_array.push(t_object);
      }
      showPicture(0);
}

(2)読み込んだデータをさらに,★の表示に反映させるためにstarsのフレームを指定しました。

starsは5フレームまであるムービークリップです。★の数が,フレームごとに増えるように作ってあり,raitng値=フレーム番号なので,gotoAndStop()で表示する★の数を調整できます。

stars.gotoAndStop(image_array[current_image_num].rating)

 ムービークリップstars

図 ムービークリップstars

(3)Flash側で,ブラウザキャッシュを拾わないで毎回XMLを取得するようにURLRequestの内容に毎回値が変化する変数(rnd)を付けます。

var myURLRequest:URLRequest=new URLRequest("http://www.3oclock.com/my_first_blog-gihyojp/photo.xml?rnd="+Math.random()*10);

まとめ

今回は,コメントとして投稿された★の数の平均値を求め,XMLのrating属性として出力しました。

MTテンプレートはMT4.1以降,非常に強力になったので,工夫次第で簡単な数式であれば組み上げることも可能です。

コメントの内容を,とりあえずFlashに読み込み,その後で計算することも考えられますが,次回,Flashをhtmlに埋め込むときに使用したいので,Flash以前の計算にこだわりました。ぜひ,MTでの変数操作と計算に挑戦してみてください。

また,Flash側では,新たにXMLから読み込んだrating属性を★の数に反映させました。写真が切り替わると,★の数も変化するのがわかると思います。

今回作成したFlashは,サンプル(showPicture3.zip)としてダウンロードできます。

次回は,最終回です。Flashをhtmlの中に表示してWEBコンテンツとして完成させます。

著者プロフィール

NORI(伊藤のりゆき)

Twitter:@nori_togoru

有限会社トゴル・カンパニー代表。Flashアクセシビリティをきっかにアクセシビリティ全般に興味を持つ。UIデベロッパとして企業用WebアプリケーションのUIデザインを行う。写真集「Snap or Nothing写真集」(iTunes AppStoreにて)をリリースするなど写真家としても活動している。