ホーム >> 左脳Script >> Movable Type >> Plugin開発 >> swfobject.js を"使わない"フラッシュ貼り付けの方法

swfobject.js を"使わない"フラッシュ貼り付けの方法


さて、巷で人気のフラッシュ貼り付けライブラリ swfobject.js ですが、これは基本 Java Script が有効な状態で ないとフラッシュの貼り付けをしてくれません。

しかし、ブラウザそのものは、Java Script が有効でなくとも タグを書けばフラッシュを再生できるのです。一部、明示的にクリックをして、アクティブ化しないと再生が始まらないブラウザがありますが。
動画再生やゲームなど、自然に"ユーザーにクリックを促せる"場合、Java Script に頼らないフラッシュの貼り付けが出来る事になります。


実は、未だカナリのシェアがある InternetExplorer で、上記のアクティブ化の仕様があるバージョンがあるようです。(InternetExplorer の他にも、あるようです。各自ターゲットにしているブラウザを調査する事をお勧めします。)
具体的には、「2006年4月以降にアップデートされた InternetExplorer」が該当するようですが、 これは、「2008年4月以降にアップデートされた InternetExplorer 7以降」で改善されたようです。

現時点での最新バージョンは8ですので、 サイトのポリシー等に InternetExplorer のバージョンを7以上にするよう促す記述をしておけば良いのではないでしょうか。


Java Script に頼らずにフラッシュを再生させる環境が整ってきている今こそ、フラッシュが独立を果たすべきなのです!!1


貼り付けの実際

貼り付けの基本は、以下のように <object>タグを使う事です。


<object data="demo20090421.swf" width="400" height="400" type="application/x-shockwave-flash">
<param name="movie" value="demo20090421.swf" />
<param name="wmode" value="opaque" />
<b>代替テキストの記述</b>。そのままココに書ける。<br>
</object>

上記の記述だけでも、InternetExplorer8、FireFox3、safari4、Chrome1 では、正しく再生できました。
Opera9.6 では、再生そのものはされるものの、ステータスバーに「このコントロールは・・・」の一文が出て、マウスイベントなど、外部からの操作を受け付けない仕様になっているようです。
InternetExplorer 6 では・・・、警告ダイアログ、警告バーが出て、許可をしないと再生されませんでした。仕様通りですが。

古くからある<embed>を使う方法は、XHTML的に云々とかで、推奨されていないようです。今時のブラウザは、一部問題もありますが、上記の記述で概ね再生できるので、問題は無いと思われます。


また、「クロスブラウザの観点から、推奨されている記述」というものがあるようです。

<object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="400" height="400">
 <param name="movie" value="demo20090421.swf" />
 <!--[if !IE]>-->
  <object type="application/x-shockwave-flash" data="demo20090421.swf" width="400" height="400">
 <!--<![endif]-->
 <b>代替テキストの記述</b>。そのままココに書ける。<br>
 <!--[if !IE]>-->
  </object>
 <!--<![endif]-->
</object>
ブラウザ判別タグを利用し、<object>タグをネストする。

この記述で問題点は、フラッシュと Java Script を連携させようとしたときに、フラッシュの判別が面倒な事でしょう。
フラッシュのあるエレメントを判別する際に、InternetExplorer 以外でのネストに対応しなければいけません。

var obj = document.getElementById("myId");
var nestedObj = obj.getElementsByTagName("object")[0];
var ref = false;
if (obj) {
  if (!nestedObj || (nestedObj && typeof obj.SetVariable != "undefined")) {
    ref = obj;
  }
  else if (typeof nestedObj.SetVariable != "undefined") {
    ref = nestedObj;
  }
}
if (ref) {
  ref.doSomething(); // e.g. an external interface call
}


と、ここまで記事を書いたところで、ふと思う。

<!--[if !IE]>-->」こんな判別が出来るのだから、ネストさせる必要なくね?

と、こんな記述にしてみたら・・・

<!--[if IE]>-->
 <object id="hogegege" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="400" height="400">
 <param name="movie" value="demo20090421.swf" />
<!--<![endif]-->
<!--[if !IE]>-->
 <object id="hogegege" type="application/x-shockwave-flash" data="demo20090421.swf" width="400" height="400">
<!--<![endif]-->
 <b>代替テキストの記述</b>。そのままココに書ける。<br>
</object>
動きません。なんでやねーんorz
アレコレ調べても結局判らず。素直にネストさせるのが確実に動作するようです。


これで、swfobject.js を使わなくとも、フラッシュが貼り付けられる事がわかりました。
では、swfobject.js は無用の長物なのか?

チョッと考えれば判る事ですが、フラッシュのバージョンチェックなどは、<object>タグでは出来ません。(例外アリ)
また、swfobject.js の expressInstall は、swfobject.js ならではの機能でもあります。

「適材適所」と言った所でしょうか。


結局プラグイン

早速、この「Java Script に依存しない FLash 貼り付け手法」をプラグインに追加しました。
plugin.PNG
名称を「easyTag for "Flash SWF object"」から「easySwf」に変更しました。長いので。
Download→Swf20090713.zip


<mt:SwfObj>ブロックタグ使用法
ブロックタグ中身が、代替テキストになります。

  • swf必須パラメータ
    フラッシュのパスを指定。

  • w必須パラメータ
    フラッシュの幅を指定。

  • h必須パラメータ
    フラッシュの高さを指定。

  • id省略可能
    <object>タグに設定される id の文字列。

  • par省略可能
    再生時に渡すパラメータ。
    フォーマットは「名前:値,名前2:値2,・・・
    値に文字列を指定する場合、引用符の扱いに注意が必要です。

    省略すると、<mt:SwfObjects>指定値、プラグイン設定のデフォルトが与えられます。

また、ブロックタグ内部で、以下のファンクションタグを使用可能です。
  • <$mt:SwfName$>
    swf で指定された、フラッシュのパス。

  • <$mt:SwfWidth$>
    w で指定された、フラッシュの幅。

  • <$mt:SwfHeight$>
    h で指定された、フラッシュの高さ。

  • <$mt:SwfParams$>
    再生時に渡されるパラメータ列挙。指定したものではなく、実際に渡されるパラメータを列挙したもの。


以下のように記述すると、

<mtswfobj id="demoSwf" swf="http://n-yagi.0r2.net/script/2009/04/21/demo20090421.swf" w=400 h=400 par='wmode:"opaque"'>Abode Flash Player 入れてくだちい。</mtswfobj>

このように展開されます。実際は改行やインデントはありません。1行に展開されます。

<object id="demoSwf" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="400" height="400">
 <param name="movie" value="http://n-yagi.0r2.net/script/2009/04/21/demo20090421.swf" />
 <!--[if !IE]>-->
  <object type="application/x-shockwave-flash" data="http://n-yagi.0r2.net/script/2009/04/21/demo20090421.swf" width="400" height="400">
 <!--<![endif]-->
 <param name="wmode" value="opaque" />
Abode Flash Player 入れてくだちい。
 <!--[if !IE]>-->
  </object>
 <!--<![endif]-->
</object> 


参考

今回記事を書くにあたり、このサイトの説明が大変わかり易く非常に参考になりました。



トラックバック(0)

トラックバックURL: http://n-yagi.0r2.net/sanoupulurun/mt-tb.cgi/216

コメントする

ホーム >> 左脳Script >> Movable Type >> Plugin開発 >> swfobject.js を"使わない"フラッシュ貼り付けの方法

アーカイブ

このブログ記事について

このページは、n-yagiが2009年7月13日 21:30に書いたブログ記事です。

ひとつ前のブログ記事は「Google Chrome で ブックマークレットを使う」です。

次のブログ記事は「mtプラグインにおける Perl モジュール の配置 について」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

Creative Commons License
このブログはクリエイティブ・コモンズでライセンスされています。