やまものブログ

メモ書きブログです (^_^;A

Flash コンテンツを Apache Webサーバに置く

Ubuntu への Apache Webサーバのインストール で立ち上げた Apache サーバにて Flash ファイル (.swf) を再生できるように置いてみました♪

こちら↓がブラウザで表示した様子です。
# スクリーンショットなので、これ自体はクリックしても動きません m(_ _)m
イメージ 1

フリー素材を持ってきて配置しただけなので、Flash の作り方とかは理解していません。サーバへの設定手順もサンプルに従っただけですが、JavaScript のバージョンアップにともなう記述方法の変更があったので、少し悩みました。


上記の Flash 表示のために設定したファイル・ディレクトリは下記の通り。

/var/www/html/flash0
├── index.html
├── js
│   └── swfobject.js
├── s2.swf
└── s2img
    ├── 01.jpg
    ├── s2.txt
    └── s2.xml



このうち、自分で編集したのは index.html のみで、それ以外は下記2つのダウンロードから持ってきました。
    swfobject_2_2.zip
    sample02.zip

swfobject_2_2.zip からは swfobject.js を持ってきました。
sample02.zip からはそれ以外を全部です。


● swfobject_2_2.zip のダウンロード元 (github)
swfobject/swfobject
「Releases」から「Version 2.2 release」を Zip 形式でダウンロードしました。

● sample02.zip のダウンロード元
Flashのフリーサンプル素材 外部画像をXMLを介して読み込み
「無料フリーダウンロード(Sample02)できます。」から、規約への同意などのページを経て
イメージ 2
上記「Sample02」のリンクをクリックして、ポップアップしたウィンドウにて最初のサイトに [ Password : XXXXXX ] で掲載されていたパスワードを入れるとダウンロードできました。


あと、参考情報として、Flash を表示するために SWFObject という JavaScript を使っていますが、その解説が上記と同じサイトにあります。
Flashの埋め込にSEO対策に有用なSWFObjectを使う方法


index.html は以下の通りです。サンプルからコピペがほとんどですが。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<html lang="ja">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>s2-SWFObject</title>
        <script type="text/javascript" src="js/swfobject.js"></script>
        <script type="text/javascript">
        swfobject.embedSWF("s2.swf", "flash_contents", "450", "350", "6", "#F5F8F7");
        </script>
</head>
<body bgcolor="#333333"><div align="center">
<div id="flash_contents">
        <img src="s2img/01.jpg" alt="SEO対応コピーを入れてください" width="300" height="200" /><br />
        <h1>Alternative content</h1>
        FlashをSWFObjectで読み込んでいます。<br />
        JavaScriptを有効にされるとFlashが表示されます。
</div>
</body>
</html>


おまけで、ブラウザで思ったように表示されない場合のデバッグには、Firefox の場合
F12
で「開発者ツール」を使うとヒントが得られるかもしれません。
コンソール」を選ぶと、エラーとか警告のメッセージを確認できます。


最後に、無料コンテンツや解説を掲載してくれた SSPlanning.NET さんに感謝です