ブログパーツを作る〜基本編〜 - ソース味のテラケン

仕事でブログパーツを作ることになったのだけれど、ブログパーツについて何も知らなかったので色々調べた結果をメモ。

作ろうとしていたブログパーツの前提条件。

Flashベース
サーバとsocket通信
ユーザ情報を表示

こんな感じ。
通信部分はXMLSocket通信でもいいのですが、バイナリ通信ができると既存のサーバプログラムをそのまま流用できるので、ActionScript3.0を採用してsocketを使います。

どうやってブログに配置するの？

ブログパーツはよく見るけれど、どうやって配置しているのか不明だったのでFC2のアカウントを取得して貼り付けてみたりして調査。
ふーん、普通にHTMLソースを張り付けてるだけなのね。
Flashのブログパーツは外部JavaScriptを読み込んでいるものが大半だったけれど、メンテナンスの為に切り離しているだけだと思っていた。
でも違った。(次回に言及)

Flashを表示させる

まぁ、とにかくFlashを表示させるHTMLタグをユーザに貼り付けてもらえばいいみたいだ。
HTMLタグはこんな感じ。

<object
  classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
  width="100"
  height="100"
  codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
>
  <param name="movie" value="movie.swf">
  <param name="play" value="true">
  <param name="loop" value="true">
  <param name="quality" value="high">
  <embed
    src="movie.swf"
    width="100"
    height="100"
    play="true” 
    loop="true"
    quality="high" 
    pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
> 
</embed>
</object>

Adobeのヘルプに書いてあったので、深く考えずそのまま転用。
objectタグとembedタグに重複する部分があるので、間違わないようにする。

Flashにパラメータを渡す

ユーザ情報を表示させたいので、ユーザIDを埋め込んだHTMLタグを自動生成しなければいけない。
さて埋め込もうかと思った時に、ふとどこに埋め込めばいいのか分らないことに気がついた。

調べてみると、どうもタグに埋め込むとFlashロード時に読み込んでくれるらしい。
タグのパラメータ名はFlashVarsというらしい。
GETパラメータのように、名前=値という形で入れていく。
複数ある場合は&でつなぐ所もGETパラメータと同じ。

name TeraKen
sex man
job programmer

というパラメータを渡したい時は以下のようにする。
追加する箇所がやはり重複しているので、注意が必要。

<object
  classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
  width="100"
  height="100"
  codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
>
  <param name="movie" value="movie.swf">
  <param name="play" value="true">
  <param name="loop" value="true">
  <param name="quality" value="high">
  <param name="FlashVars" value="name=TeraKen&sex=man&job=programmer">
  <embed
    src="movie.swf"
    width="100"
    height="100"
    play="true” 
    loop="true"
    quality="high" 
    FlashVars="name=TeraKen&sex=man&job=programmer" 
    pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
> 
</embed>
</object>

パラメータを受け取る側はActionScriptで、loaderInfoを使用する。
root.loaderInfo.parametersは、メインSWFファイルのルートクラスのプロパティにあります。

package
{
    import flash.display.Sprite;

    public class MyMovie extends Sprite
    {
        public function MyMovie():void
        {
           var params:Object = LoaderInfo(this.root.loaderInfo).parameters;
           trace("name : " + params["name"]);
           trace("sex  : " + params["sex"]);
           trace("job  : " + params["job"]);
        }
    }
}

受け渡したパラメータが出力されます。

name : TeraKen
sex  : man
job  : programmer

今回はユーザIDを埋め込むだけなので、このように。

<object
  classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
  width="100"
  height="100"
  codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
>
  <param name="movie" value="movie.swf">
  <param name="play" value="true">
  <param name="loop" value="true">
  <param name="quality" value="high">
  <param name="FlashVars" value="UserID=9999">
  <embed
    src="movie.swf"
    width="100"
    height="100"
    play="true” 
    loop="true"
    quality="high" 
    FlashVars="UserID=9999" 
    pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
> 
</embed>
</object>

さて、これで大体できたので、blogに貼り付けて動作確認をしてみましょう。
長いので次回へ。