Flashの埋め込み

 WordPress, プログラム
 公開日:2011年5月4日 / 更新日:2014年1月20日

ここここここなどを見ると、
objectタグとembedタグを使って埋め込むのが一般的なようですが、
ちょっと問題があるそうなのでSWFObjectを使う方が良いようです。
現時点のSWFObjectのバージョンは2.2となっています。
では、
SWFObjectを使って実際に埋め込んでみます。
あらかじめ、
ダウンロードしたSWFObjectのzipファイルを展開して得られる、
swfobject.js と expressInstall.swf の2つのファイルを
自分のサイトの適当な場所にアップロードしておきます。
expressInstall.swf は、ここによると、
FlashPlayer が古かった場合にアップデートを促すようにするためだそうです。
次に、埋め込むスクリプトを書きます。
例えば、拙作の「ロト6選択機」をブログパーツとして
埋め込む場合は以下のようになります。

scriptタグ部分をあらかじめhtmlのheadタグの所に書いておけば、
bodyタグ内に書くのはdivタグだけで済むのですが、
ブログパーツとして埋め込む場合は、
すべてbodyタグ内に書くことになるし、
URLは絶対アドレス表記にならざるをえないので、
どうしても記述が長めになってしまいます。
そこでもっと短くて済むように考えてみました。

以下のようになります。
URL短縮サービスとか利用すればもっと短くなりそうですが(^_^;))

やってることは、
先の長い記述を embedswf.js というスクリプトで展開するようにしたものです。

embedswf.js の使い方は以下の通りです。

URL : embedswf.js を配置した場所(絶対アドレスあるいは相対アドレス表記で)
クエリ部の各パラメータは、
f=AAA : AAA=拡張子を除いたswfのファイル名
w=BBB : BBB=横の大きさ(ピクセル)
h=CCC : CCC=縦の大きさ(ピクセル)
i=DDD : DDD=divタグのid属性に付ける名前
パラメータを指定しなかった場合はFlashの埋め込みは行われません。
ただし、 i=DDD は省略可能です。
i=DDD を省略時は、divタグのid属性に付ける名前には AAA が使われます。

embedswf.js の内容は以下の通りです。

embedswf.js が記述されているscriptタグ自体にアクセスし、
そのクエリ部分を展開して、
SWFObjectを使った長い記述を書き出すという処理を行っています。

ただ、謎なことに、
wordpressの自動整形?によって内容の一部が勝手に削除されてしまうので、
こちらのファイルを直接参照してもらった方がよいかと思います。
ここのブログで実際に使っているものです。

embedswf.js を他のサイトで使う場合は、
引数 base が示している基準となるURLを書き替えてください。
相対アドレス表記でも行けるはずです。
また必要に応じて、
引数 ver が示しているFlashPlayerのバージョン値も替えてください。
swfobject.embedSWF() に渡す param については、
ここここを参照してみてください。

なお、
base を基準URLとした場合の、
各ファイルの配置が以下のようになることを前提としていますので、
これについても必要に応じて調整してください。
base/js/swfobject.js
base/swf/expressInstall.swf
base/swf/対象となる.swf


※7月21日追記

多少動作が遅くなることがあるらしいので、
使わないようにしていましたが、
一部のプラグイン、例えばThickBoxとか使用時に
重なり問題が起きるようです。
param に wmode:”transparent” を指定するようにしました。
この方が無難なようです。

タグ:

コメント投稿