swfobject.js を使った Flash 貼り付けプラグイン

以前作成した、Movable Type 用のswf 貼り付けプラグイン。実は、ページ内に沢山のフラッシュを貼り付けると、 swf 読み込みでロードがツッかえてページのレンダリングが止まってしまいます。

4つも5つも貼り付けると、全てのファイルがキャッシュにあっても、ページの全容が出る（スクロールバー等で操作が可能になる）までに、何故か3秒以上かかってしまう事が判りました（ＩＥ系は、何故か遅い）。

ページのロードに、しかも操作不能の時間が3秒以上というのは、非常にまずいです。

そこで、flash の貼り付けに大変便利な swfobject.js というライブラリがあるようなので、これを使用するようプラグインを変更してみました。
というか、殆ど作り直しました。

実は、前回作ったプラグインの「SwfObject」という名称は、swfobject.js の存在を意識せずに付けてしまったのですが、どうも .js の方の情報を目当てに来られる方をガッカリさせてしまったような気がしています。

今回は、「とりあえず動く」レベルではなく、それなりに「プラグインとして使える」レベルにする事を目標に、製作しました。

easyTag for "Flash SWF object" 0.02

2009年7月13日：<object>タグによる貼り付け方法を追加しました。swfobject.js を"使わない"フラッシュ貼り付けの方法
2009年6月25日：幾つかの機能の追加を行いました。swfobject.js を使った Flash 貼り付けプラグイン改
2009年6月12日：バグが修正出来ていませんでした。申し訳ありません。Download →Swf20090612.zip
2009年6月5日：jsonパラメータ周りにバグが在り修正しました。Download →~~Swf20090605.zip~~
2009年6月4日：公開。Download →~~Swf20090604.zip~~

仕様

展開すると「Swfディレクトリ」が出来ます。ディレクトリごと plugins ディレクトリに設置して下さい。また、swfobject.js については、各自で入手してください。
基本的な用法は、前回のバージョンを踏襲したつもりだったのですが、もぅ全くの別物です。

また、基本的に「記事の内部」で mtタグの使用を要求する事が前提なので、EvalTemplate のような、記事の内部で mtタグが使用できるようになるプラグインとの併用が条件となります。

インストールすると、以下のタグが使用出来る様になります。

<mt:SwfObjects>
swf を簡単に貼り付けられるようにする為の"ブロックタグ"です。

この内部に、後述の<mt:Swf>タグを設置します。
<mt:Swf>
Swf の指定と設置をする"ブロックタグ"です。指定するパラメータの内容は、swfobject.js に準じます。また、このブロックタグ内の記述がそのまま代替の内容になります。
<mt:SwfObjects>の外側に<mt:Swf>タグを置くと、swf の実行はされません。

パラメータの指定方法は以下。
- swf：swfファイルのパス。必須。
- w：フラッシュの幅。必須。
- h：フラッシュの高さ。必須。
- ver：ターゲットバージョン。必須。swfobject.embedSWFにそのまま渡されます。
  必須パラメータですが、プラグインの設定でデフォルトの値を設定してある場合は、省略可能です。
- exp：バージョン条件を満たさなかった時に実行される代替swfの指定。省略可能。swfobject.embedSWFにそのまま渡されます。
- val：フラッシュ変数。省略可能。swfobject.embedSWFにそのまま渡されます。｛｝へ中身をそのまま文字列として渡すので、中身をそのまま書いて下さい。
- par：再生パラメータ。省略可能。swfobject.embedSWFにそのまま渡されます。｛｝へ中身をそのまま文字列として渡すので、中身をそのまま書いて下さい。
- atr：アトリビュート。省略可能。swfobject.embedSWFにそのまま渡されます。｛｝へ中身をそのまま文字列として渡すので、中身をそのまま書いて下さい。
このタグの記述は、以下のような展開がなされます。
```
<div class="swf_object"><div id="IDはプラグイン内部で管理しています">
代替テキスト
</div></div>
```
swfobject.js による、swf 実行部分。実際には「try～catch」で括ってエラーを殺してあります。
```
swfobject.embedSWF( "swf",
                    "IDはプラグイン内部で管理しています",
                    "w",
                    "h",
                    "ver",
                    "exp",
                    {val},
                    {par},
                    {atr})
```
<$mt:SwfName$>
swfパラメータ。<mt:Swf>内部でのみ、指定パラメータがそのまま展開されます。
<$mt:SwfWidth$>
wパラメータ。<mt:Swf>内部でのみ、指定パラメータがそのまま展開されます。
<$mt:SwfHeight$>
hパラメータ。<mt:Swf>内部でのみ、指定パラメータがそのまま展開されます。
<$mt:SwfTarget$>
verパラメータ。<mt:Swf>内部でのみ、指定パラメータがそのまま展開されます。
<$mt:SwfExpress$>
expパラメータ。<mt:Swf>内部でのみ、指定パラメータがそのまま展開されます。
<$mt:SwfValues$>
valパラメータ。<mt:Swf>内部でのみ、指定パラメータがそのまま展開されます。
<$mt:SwfParams$>
parパラメータ。<mt:Swf>内部でのみ、指定パラメータがそのまま展開されます。
<$mt:SwfAttribute$>
atrパラメータ。<mt:Swf>内部でのみ、指定パラメータがそのまま展開されます。

用法

テンプレートの「ブログ記事」や「ウェブページ」にて、<mt:SwfObjects>で<body>を内包するようにします。


<mt:SwfObjects>
    <body>
     ～
    </body>
</mt:SwfObjects>

「HTMLヘッダー」等で、<head>内に swfobject.js を読み込む指定をしている場合は、これだけで <mt:Swf>が使用可能になります。

展開の実際

以下のような記述があったとします。


<mt:SwfObjects>
  ～
    <mt:Swf swf="/script/2009/04/21/demo20090421.swf" w=200 h=200 ver="9" par='wmode:"opaque"' >
        "This is Demo Flash."
    </mt:Swf>
  ～～
</mt:SwfObjects>

この場合は、以下のように展開される事になります。


  ～
    <div class="swf_object"><div id="SWF604OBJ_ID1"> 
        "This is Demo Flash."
    </div></div>
  ～～
<script type="text/javascript">try{swfobject.embedSWF("/script/2009/04/21/demo20090421.swf","SWF604OBJ_ID1","200","200","9","",{},{wmode:"opaque"},{});}catch(e){}
</script>

<mt:Swf>による記述が、<div>要素に展開されます。その際、元の代替記述が<div>の中身になります。swfobject.embedSWF が実行されない場合、ユーザーは代替テキストを見ることになります。

実際に、swfobject.embedSWFを実行する記述が展開されるのは</mt:SwfObjects>の位置です。

<mt:SwfObjects> 内に、複数の <mt:Swf> 記述があった場合でも、 swfobject.embedSWF の記述は纏めて </mt:SwfObjects> の位置に展開されます。
逆に、<mt:Swf> 記述が一つも無かった場合、ヌル文字が展開？される事になります。

また、プラグインの設定により、このswfobject.embedSWFの前後に、記述を指定できます。

プラグイン設定

<mt:Swf> Adobe Flash Player Traget-Version:ターゲットバージョン
Adobe Flash Player バージョンのターゲットを指定します。
例えば、現時点（2009年6月4日時点）での最新バージョンは「10,0,22,87」です。ここに「10.0.22.87」と指定すると、クライアントのFlash Player バージョンがこれに満たない場合に、代替テキストを表示するようになります。

通常は、「9」とか「8」にしておいて、代替テキストに、Adobe Flash Player ダウンロードページへのリンクを張っておくなどすると、良いかもしれません。

ここに値を指定して置くと、<mt:Swf>でのバージョン指定を省略する事が出来る様になります。
<mt:Swf> Adobe Flash Player "expressInstall.swf"
ここには、ターゲットバージョンに満たなかった場合に実行される swf ファイルの指定をします。
swfobject.js に同梱されている、expressInstall.swf を指定し自動インストールをさせる事が出来るようです。

申し訳ありませんが、この機能の検証をしていないので、詳細は swfobject.js のドキュメントを参照して下さい。
<mt:Swf> flash values:フラッシュ変数
フラッシュ再生時に、フラッシュに渡す変数の指定が出来ます。同じような指定をするフラッシュを多量に貼り付ける場合に設定すると、便利かもしれません。
<mt:Swf> play parameter:再生パラメータ
フラッシュ再生時に、Flash Player に渡す設定値です。「menu:"false"」「wmode:"opaque"」「bgcolor:"#FFFFFF"」等、Flash Player のバージョンに合った設定を各自で指定してください。
<mt:Swf> attribute:アトリビュート
swfobject.embedSWF に渡す値です。

~~申し訳ありませんが、この機能の検証をしていないので、詳細は swfobject.js のドキュメントを参照して下さい。~~
2009年7月7日追記：Java Script との連携で、swf のあるエレメントのIDを指定する為に、使用するようです。回遊文字列デモで実際にフラッシュとの連携し、動作に問題ない事を確認しました。
<mt:SwfObjects> Html text BEFORE Swf execution:実行前テキスト
Java Script による、swf 実行前（<script type="text/javascript">の前）に、展開するテキストを指定できます。
実行するべき swf が存在しない場合は、展開されません。
~~また、ここでは mtタグは使えません。~~改良しました
<mt:SwfObjects> Html text AFTER Swf execution:実行後テキスト
Java Script による、swf 実行後（</script>の後）に、展開するテキストを指定できます。
実行するべき swf が存在しない場合は、展開されません。
~~また、ここでは mtタグは使えません。~~改良しました

ターゲットバージョンと、再生パラメータの設定はしておきましょう。 <mt:Swf>の記述が減って設置が非常に楽になります。

内部で管理されるＩＤの命名規約

<mt:SwfObjects>内部で管理される、<div>に付けられる ID の名前付けの法則は、
「"SWF604OBJ_ID"+１からの番号」となります。
<mt:Swf>が出現する度に番号がインクリメントされる仕組みです。

2009年6月25日追記：改良しました。リンク先の新しいバージョンで、任意のＩＤを指定できるようになりました。

応用？！

トラフィック負荷の微妙ながらの軽減
swfobject.js の読み込み指定を、<head>内等ではなく、実行前テキストに以下の例ように設定をしておくと、「<mt:Swf>記述が在る場合のみ、swfobject.js を読み込ませる」と言った使い方が出来ます。
```
<script type="text/javascript" src="swfobject.js"></script>
```
フラッシュのないページは、swfobject.js を読み込まなくなる為、ホンのチョっと軽くなります。

代替記述でパラメータタグの使用
代替テキストにパラメータを渡せるので、本来設置するべきフラッシュと同じ大きさの領域を確保したり、要求バージョンの表示が出来ます。


<mt:Swf swf="dummy.swf" w=300 h=50 ver="127.0.0.1">
<div  style="
    border:#000000 solid 1px;background:#00c0f0;color:black;
    width:<$mt:SwfWidth$>px;
    height:<$mt:SwfHeight$>px;">
Target Version is  <$mt:SwfTarget$><br>
<strong>Pleaze UpD@TE!!</strong>
</div>
</mt:Swf>

以下のように展開されます。


<div class="swf_object"><div id="SWF604OBJ_ID1"> 
<div  style=" 
    border:#000000 solid 1px;background:#00c0f0;color:black;
    width:300px;
    height:50px;"> 
Target Version is  127.0.0.1<br> 
<strong>Pleaze UpD@TE!!</strong> 
</div> 
</div></div>

Target Version is 127.0.0.1
Pleaze UpD@TE!!

実際の表示。上記の記述をそのまま表示してみました。

最後に

なるべく漏れの無い様に書いた為か、逆にゴチャゴチャして判りにくく成ってしまったかもしれません。

実は、swfobject.embedSWF のアトリビュートとかいう物が、そもそもナンなのか良くわかっていません。指定なしでも動かせるし、「これを使ったらコンなことできたよ！」という記事を見かけません。むむむ。

~~IDの命名なども、接頭部分をプラグインの設定にした方が良かったかもしれないですね。~~改良しました

設定画面などを作り、プラグインとしての体裁を整えたツモリでしたが、どこか抜けているような気がしなくもありません。問題がありましたら、是非ご指摘下さい。

swfobject.js を使った Flash 貼り付けプラグイン

easyTag for "Flash SWF object" 0.02

仕様

用法

展開の実際

プラグイン設定

内部で管理されるＩＤの命名規約

応用？！

最後に

カテゴリ:

タグ:

関連記事:

トラックバック(2)

コメントする

検索

カテゴリ

このブログ記事について

swfobject.js を使った Flash 貼り付けプラグイン

easyTag for "Flash SWF object" 0.02

仕様

用法

展開の実際

プラグイン設定

内部で管理されるＩＤの命名規約

応用？！

最後に

カテゴリ:

タグ:

関連記事:

トラックバック(2)

コメントする

検索

カテゴリ

アーカイブ

タグクラウド

このブログ記事について