お手軽にSWFObjectでswfを埋め込む方法

  • 2006-09-12 (火) 16:53
  • flash

SWFObjectの記事を翻訳して、おかげさまで結構アクセスがあるのだけれど、さっき自分で読み返してみたら、記事が長過ぎて萎えた。いちげんさんは見てくれない予感。

細かいことは考えず、手っ取り早く使うための方法をまとめておきます。
分かりやすいように文中を色分けしてます。RSSリーダーを使っている方はご注意ください。


1. まずは環境を作っておきます。

deconcept › SWFObjectのサイトから、SWFObject(現在var1.4)をダウンロードする。

解凍してできたフォルダの中に「swfobject.js」があるかを確認しておく。

あなたのWebサーバーのwwwルート(トップページのindex.htmlを置いている階層)に「js」フォルダを作り(既にあればその中に)、その中にswfobject.jsを入れる。
※何をしているかというと、webサーバーのどの階層からでも/js/swfobject.jsで呼び出せるようにしてるのです。

以上で下準備は終了です。Dreamweaver等を使っている方は、ローカルプレビュー用に、ローカル環境も同じフォルダ構成にしておいて下さい。


2. 以後、swfを埋め込むときは以下のようにします。

HTMLドキュメントの中の、swfを埋め込みたい箇所に次のように記述します。赤字部分を適宜修正してください。

<script type="text/javascript" src="/js/swfobject.js"></script>
<div id="flashcontent">
swfが表示されない時に、代わりに表示される内容。
swfサイズの似たような1枚画像でもいいし、
SEOを考えてHTMLとかで作り込んでも良いです。
</div>
<script type="text/javascript">
var so = new SWFObject("hoge.swf", "hogemovie", "200", "100", "7", "#336699");
so.write("flashcontent");
</script>

パラメーターはそれぞれ、

("swfへのパス:blogなら絶対パスにしとくと便利", "ムービーの名前:あんまり気にせず適当に", "swfの幅", "swfの高さ", "必要とするFlashPlayerのバージョン:小数点以下にも対応", "背景色");

となってます。

1ページ中に、複数個のswfを埋め込むときはIDの部分をそれぞれ固有のIDにしておきます。blog等のアーカイブページで複数個表示される場合があるので、swfファイルの名前にしておくといいかも。この例ならhogeにするとか

これで、自分のWebサーバーのどの階層からでもSWFObjectによるswf埋め込みができます。めでたし。

SWFObjectの詳細はこちら

追記:
ID要素すらしてしなくてもよい、もっと手軽な方法をBicRe様がご紹介くださってます。SWFObjectを語る上では必見。
BicRe: SWFObjectの便利なメソッド
それを使って、ブログパーツを提供する際の埋め込みコードをシンプルにすることができます。
BicRe: ジョネレーター最高!
ということで、僕のブログパーツの埋め込みタグを修正してみたのだけど、うまくいかない。。他の方の成功事例記事もあるし、動作の仕組みも理解できたのだけど何故?タイプミスはないはずなんだけどなぁ。

このエントリーをはてなブックマークに追加
はてなブックマーク - お手軽にSWFObjectでswfを埋め込む方法

Comments:7

nai 07-05-14 (月) 11:25

検索からこのページに迷い込み(笑)、細かな情報が多いのにビックリしました。
日々、テクニックは進化しているんだな~と思い、これからも日々精進だ!と気持ちを新たにしています。

追記のおせっかい?
SWFObjectのバージョンが「1.5」に変わっていますよ

tera 07-05-16 (水) 1:49

>nai様
こんにちは。コメントありがとうございます。
このページに迷い込むとは、相当迷われましたね。w
今後ともよろしくお願いします。
バージョンアップの件、了解しました。どうもです。

sarutaros 08-02-15 (金) 16:03

随分前にブックマークしておいたのを
今読みました。
すすすごい!
ありがとうございます。

tera 08-02-22 (金) 10:45

>sarutaros様
どうもこんにちは。
参考になれば何よりです。
今後ともよろしくお願いいたします。

さいきゆみ 08-03-29 (土) 13:14

こんにちは貴重な情報ありがとうございます。
早速使ってみましたが、
http://極真館北摂.com/kyokushin.html
中央の文字の部分を簡単なフラッシュにして埋め込んでみたら、IEでは表示されませんが、ファイヤーフォックスとオペラでは表示されます。
いろいろ調べましたが、どうも古いフラッシュが入っているとダメみたいです。
私のパソコンのせいみたいで何回もフラッシュインストールしても見れないのです。
自動でインストールの画面になる方法が今ひとつわからないです。
ご参考までに。失礼しました。

M-STANDARD 08-06-03 (火) 15:58

参考になりました。ありがとうございます。

mya~ 11-08-12 (金) 4:14

はじめまして、自作でECショップを作成中の初心者です。
SWFobject.jsを使ってflashの埋め込みを試しているのですがなぜか反映されません。

SWFObject is not defined とエラー表示がでていますが、jsが読まれていないということなんでしょうか。
よろしければご教授ください。

指定したデレクトリにはswfとflaファイルをアップしてリンクでは正常に確認できるのですが、、、

Comment Form
Remember personal info

Trackbacks:3

Trackback URL for this entry
http://www.trick7.com/blog/2006/09/12-165342.php/trackback
Listed below are links to weblogs that reference
お手軽にSWFObjectでswfを埋め込む方法 from trick7
pingback from swfをSWFObjectでページに埋め込む - ウェブミルク 09-02-14 (土) 8:53

[…] と、Webで使えるテクニック!Webで困ったときのメモ帳さんで書かれていて、もとはtrick7さんのお手軽にSWFObjectでswfを埋め込む方法で書かれてあったので、これからこれを使っていこうと思い、以下は引用メモ。 […]

pingback from アイキャッチにFLASHを使用する « 海遊旅人 遊行編 10-02-28 (日) 19:12

[…] 「trick7.com」の「お手軽にSWFObjectでswfを埋め込む方法」を参考に […]

pingback from ガードブロッキング的ブログ(失敗) - 動画をアップロードしようとしたんだけど 10-08-13 (金) 21:42

[…] trick7 […]

Return to page top