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

第6回コメントを利用する

前回には、MTの出力したXMLを使用してFlashにコンテンツを表示しました。

XMLを自動生成しているので、ブログ感覚で写真を追加すれば、Flashコンテンツが読み込む写真も増えて便利です。しかし、FlashにMTを組み合わせる本当の目的は、別にあります。

従来、Flashからサーバにデータを保存するには、CGIを利用するなどしてサーバーサイドのアプリケーション開発も必要でした。そこで、この部分にサーバーサイドの開発が不要なMTを利用します。

MTと組み合わせれば、MTのエントリーごとのコメント機能を利用して、Flashからの出力をデータベースに挿入できます。

また、コメントはプレーンテキストなので、Flashからはフリーフォーマットでデータを記述できます。

今回は、コメントへのデータの書き込みを実践してみましょう。例として、フォトギャラリーを作っていますので、写真の5段階評価を送信します。

コメント利用のための準備

MT(今回はMTOS4.24を使用しています)のデフォルトの設定では、⁠サインイン」しないとコメントできません。

しかし、Flashでデータを送信するときは、サインインのような認証は不要なので、ブログの設定で「認証なしコメントを受け付け」に設定します。

メールアドレスは、固定のアドレスを送信するので「必須」にしておきます。

また、コメントをすぐに公開するか、公開しないかは、Flashで生成するデータがどのような性質によるのかにかかってきます。たとえば、アンケートなどではFlashからの送信結果を公開する必要はありませんが、写真の評価などの場合、他のユーザーに見て貰いたいので「すべて自動的に公開」します。

まとめると、今回の設定は次のようになります。

[設定][コメント]
コメントを受け付ける:ON
即時公開する条件:すべて自動的に公開する
 MTでのコメントに関する設定
図 MTでのコメントに関する設定
[設定][登録/認証]
認証なしコメント:ON
メールアドレスを要求:ON(どちらでも良い)
 MTでの登録/認証に関する設定
図 MTでの登録/認証に関する設定

コメント送信のhtmlソースを調べる

ブログを再設定して、再構築すると、個別のブログ記事ページには、下図のようなコメント欄が現れます。

 コメント設定変更後のブログ記事
図 コメント設定変更後のブログ記事

MTのコメント送信ページにあるフォーム内容を調べて、それをFlashのCGI送信スクリプトで置き換えます。

では、コメント送信ページのソースhtmlから<form>タグ部分を取り出してみましょう。

実際のコメント送信ページのソースは以下のようになっています。

ソース:
<form method="post" action="http://www.3oclock.com/apps/mtos424/mt-comments.cgi" name="comments_form" id="comments-form" onsubmit="return mtCommentOnSubmit(this)">
<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="9" />
<input type="hidden" name="__lang" value="ja" />
<input type="hidden" name="parent_id" value="" id="comment-parent-id" />
<input type="hidden" name="armor" value="1" />
<input type="hidden" name="preview" value="" />
<input type="hidden" name="sid" value="" />
<div id="comments-open-data">
<div id="comment-form-name">
<label for="comment-author">名前</label>
<input id="comment-author" name="author" size="30" value="" onfocus="mtCommentFormOnFocus()" />
</div>
<div id="comment-form-email">
<label for="comment-email">電子メール</label>
<input id="comment-email" name="email" size="30" value="" onfocus="mtCommentFormOnFocus()" />
</div>
<div id="comment-form-url">
<label for="comment-url">URL</label>
<input id="comment-url" name="url" size="30" value="" onfocus="mtCommentFormOnFocus()" />
</div>
<div id="comment-form-remember-me">
<input type="checkbox" id="comment-bake-cookie" name="bakecookie" onclick="mtRememberMeOnClick(this)" value="1" accesskey="r" />
<label for="comment-bake-cookie">ログイン情報を記憶</label>
</div>
</div>
<div id="comment-form-reply" style="display:none">
<input type="checkbox" id="comment-reply" name="comment_reply" value="" onclick="mtSetCommentParentID()" />
<label for="comment-reply" id="comment-reply-label"></label>
</div>
<div id="comments-open-text">
<label for="comment-text">コメント
   (スタイル用のHTMLタグを使えます)</label>
<textarea id="comment-text" name="text" rows="15" cols="50" onfocus="mtCommentFormOnFocus()"></textarea>
</div>
<div id="comments-open-captcha"></div>
<div id="comments-open-footer">
<input type="submit" accesskey="v" name="preview_button" id="comment-preview" value="確認" onclick="this.form.preview.value='1';" />
<input type="submit" accesskey="s" name="post" id="comment-submit" value="投稿" />
</div>
</form>

htmlソースの<form>タグ(太字部分)から次の情報がわかります。

  • 呼び出すCGI…<MT管理画面のURL>/mt-comments.cgi
  • 方式…POST

また、送信データのnameとvalueより、次の変数を特定しました。

変数名(name)値(value)
static"1"
entry_id"エントリーID"
__langja
parent_id""
armor"1"
preview""
sid""
author"名前"
email"電子メール"
url"url(空白可)"
text"コメント本文"

注意すべき変数armor

実はarmorという値がHTMLのフォームでは「1」になっているだけですが、投稿直前に実行されるmt.jsの中の関数mtCommentOnSubmit()によってある値に書き換えられています。 その値は、サーバーのパスから生成されており、このarmorの値が、CGIの送信側と受信側で正しくない場合は、コメントが処理されません(つまり正しい送信元から送信された情報とは認識されません⁠⁠。

そこで、この値を正しく設定する必要があります。

armorの値は、mt.jsを開いて確認するか、インデックステンプレートに「armor=<$mt:BlogSitePath encode="sha1 16"$>」の1行を記述した上で再構築して調べることができます。

mt.jsの236行目付近にある f.armor.value = '096836289bc9200b35d9f21fd8bb1ffe48f4bfd5'; から筆者のサイトではarmorの値が、投稿直前に "096836289bc9200b35d9f21fd8bb1ffe48f4bfd5"に変わっているのがわかります。

ただし、この値は、サーバやインストールしてあるMTのディレクトリごとに異なり、さらに、sha1エンコードができるPerlモジュールがなければ動作しません。

すべてを考慮すると、使用するMTの種類やバージョン、インストールしてある環境によって、この変数が不要な場合も存在します。

ここに記述してある方法でコメント送信が出来るとは限らないので、必ずフォームのソースを確認してください。

CGIにデータを送信するAS3

では、データを送信するためのASを記述してみましょう。

データのセットは、次のようにURLVariablesクラスを利用します。

var variables:URLVariables = new URLVariables()
variables.static = "1"

URLRequestでCGIのあるパスをURLとして認識させます。URL自体はそれぞれの環境によって異なりますので、注意してください。

var url:String="http://www.3oclock.com/apps/mtos424/mt-comments.cgi";
var request:URLRequest = new URLRequest(url)

送信データは、dataプロパティでURLRequestオブジェクトに関連づけます。

request.data = variables;

また、送信メソッドのPOSTは、URLRequestのmethodプロパティにURLRequestMethod.POST定数で指定します。

request.method = URLRequestMethod.POST;

最後にsendToURL()メソッドでCGIをコールします。

sendToURL(request);

上記を次のように関数postComment()にまとめました。

var armor_value:String="096836289bc9200b35d9f21fd8bb1ffe48f4bfd5";
var authorname:String="NORI";
var emailaddress:String="nori@togoru.net";
var url:String="http://www.3oclock.com/apps/mtos424/mt-comments.cgi";
   
function postComment(entryID:String,bodytext:String):void {
   var variables:URLVariables = new URLVariables();
   variables.static="1";
   variables.__lang="ja";
   variables.parent_id="";
   variables.armor=armor_value;
   variables.preview="";
   variables.sid="";
   variables.author=authorname;
   variables.email=emailaddress;
   variables.url="";
   variables.bakecookie="1";
   variables.comment_reply="";
   variables.text=bodytext;
   variables.entry_id=entryID;

   var request:URLRequest=new URLRequest(url);
   request.data=variables;
   request.method=URLRequestMethod.POST;
   trace("sendToURL: " + request.url + "?" + request.data);
   sendToURL(request);
}

動作テスト

postCommnet()を実行するために、showPicture()を次のように太字部分を追加して一時的に変更します。

function showPicture(num:uint):void {
   var loader:Loader = new Loader();
   addChild(loader);
   var fileurl:URLRequest=new URLRequest(image_array[num].src);
   loader.addEventListener(MouseEvent.CLICK,nextPicture);
   loader.contentLoaderInfo.addEventListener(Event.INIT,onImageLoaded);
   loader.load(fileurl);
   var entryID:String=image_array[num].id;
   postComment(entryID,"test");
}

ムービープレビューすると、trace結果が次のようになり、MTの管理画面のコメント一覧でも、投稿された内容が確認できます。

 trace結果
図 trace結果
 MT管理画面のコメント一覧画面
図 MT管理画面のコメント一覧画面

まとめ

今回は、コメント欄を利用してFlashからMTへデータを送信し蓄積しました。

これは、従来Flashが苦手だったデータをサーバへ保存するという行為を容易に実現する方法です。

データの保存形式はテキストであれば、なんでも良いので、どのようにでも活用できるでしょう。

また、今回、記事中では触れていませんが、写真を当初のデザインに近づけて表示するために次のことを追加しています。

  • ステージサイズを拡大し、デザインを調整
  • 写真を中央に表示し白い縁を追加
  • ★が5つ並ぶムービークリップを写真の左下に配置
  • ★をクリックすると、クリックされた★の位置を評価値としてコメントを送信する
 ★をクリックすると評価を送信するサンプル
図 ★をクリックすると評価を送信するサンプル

前回までのソースにバグがありました。XMLで、エントリーのidやtitleは、属性であるにもかからず、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.title=entrydata.@title;
      image_array.push(t_object);
   }
   showPicture(0);
}

また、今回のFlaソースは新しいデザインになったサンプル(showPicture2.zip)としてダウンロードできます。

次回は、送信したコメントを、さらにFlash側が読み込めるようにXMLを拡張します。

おすすめ記事

記事・ニュース一覧