Flash コンテンツを Apache Webサーバに置く
Ubuntu への Apache Webサーバのインストール で立ち上げた Apache サーバにて Flash ファイル (.swf) を再生できるように置いてみました♪
こちら↓がブラウザで表示した様子です。
# スクリーンショットなので、これ自体はクリックしても動きません m(_ _)m
フリー素材を持ってきて配置しただけなので、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)できます。」から、規約への同意などのページを経て
上記「Sample02」のリンクをクリックして、ポップアップしたウィンドウにて最初のサイトに [ Password : XXXXXX ] で掲載されていたパスワードを入れるとダウンロードできました。
あと、参考情報として、Flash を表示するために SWFObject という JavaScript を使っていますが、その解説が上記と同じサイトにあります。
Flashの埋め込にSEO対策に有用なSWFObjectを使う方法
index.html は以下の通りです。サンプルからコピペがほとんどですが。
おまけで、ブラウザで思ったように表示されない場合のデバッグには、Firefox の場合
「コンソール」を選ぶと、エラーとか警告のメッセージを確認できます。
最後に、無料コンテンツや解説を掲載してくれた SSPlanning.NET さんに感謝です
こちら↓がブラウザで表示した様子です。
# スクリーンショットなので、これ自体はクリックしても動きません m(_ _)m
フリー素材を持ってきて配置しただけなので、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)できます。」から、規約への同意などのページを経て
上記「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 さんに感謝です