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

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を埋め込む方法” への10件のフィードバック

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

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

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

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

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

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

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

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

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

コメントは受け付けていません。