<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>creator note &#187; HTML</title>
	<atom:link href="http://creator.cotapon.org/articles/category/html/feed" rel="self" type="application/rss+xml" />
	<link>http://creator.cotapon.org</link>
	<description>こたぽんがWebクリエイターに限らず動画や写真、書道までマルチクリエイターになれるまで終わりなく書き続けます</description>
	<lastBuildDate>Mon, 30 Jan 2012 06:27:52 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>swfobject2.xの使い方</title>
		<link>http://creator.cotapon.org/articles/flash/swfobject2-x%e3%81%ae%e4%bd%bf%e3%81%84%e6%96%b9</link>
		<comments>http://creator.cotapon.org/articles/flash/swfobject2-x%e3%81%ae%e4%bd%bf%e3%81%84%e6%96%b9#comments</comments>
		<pubDate>Sun, 13 Dec 2009 09:17:11 +0000</pubDate>
		<dc:creator>cotapon</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[FlashPlayer]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Flash Player]]></category>

		<guid isPermaLink="false">http://creator.cotapon.org/?p=584</guid>
		<description><![CDATA[FlashをHTMLに貼り付ける方法の中でswfobjectsというJavaScriptでswfを表示させる方法が便利です。今更な感じもしますが、ボクが使ってて気になったところ、例えば表示した時、一瞬Flashの場所が抜 &#8230; <a href="http://creator.cotapon.org/articles/flash/swfobject2-x%e3%81%ae%e4%bd%bf%e3%81%84%e6%96%b9">続きを読む <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>FlashをHTMLに貼り付ける方法の中でswfobjectsというJavaScriptでswfを表示させる方法が便利です。今更な感じもしますが、ボクが使ってて気になったところ、例えば表示した時、一瞬Flashの場所が抜けて、あとから表示することによってガクガク表示したり、swfのキャッシュをクリアにするなど、個人的に問題と思ったところを補う形で紹介したいと思います。</p>
<h3>まずはさっそくソースコードのコピペ場所を！</h3>
<p><pre class="brush: jscript; title: ; notranslate">//swfobject.jsを呼び出す
&lt;script type=&quot;text/javascript&quot; src=&quot;swfobject.js&quot;&gt;&lt;/script&gt;
//表示させるswfコンテンツの設定
&lt;script type=&quot;text/javascript&quot;&gt;&lt;!--
var flashvars = {hensu: value};
var params = {allowscriptaccess: &quot;always&quot;};
var attributes = {id: &quot;myFlashContent&quot;,name: &quot;myFlashContent&quot;};
swfobject.embedSWF(&quot;content.swf?u=20091210&quot;, &quot;flashContent&quot;, &quot;400&quot;, &quot;200&quot;, &quot;9.0.0&quot;, &quot;expressInstall.swf&quot;, flashvars, params,attributes);
//--&gt;&lt;/script&gt;
//FirefoxでFlashコンテンツに触ったときに出る、
//点線（フォーカスのアウトライン）を消す。
&lt;style type=&quot;text/css&quot;&gt;&lt;!--
object {outline: none;}
--&gt;&lt;/style&gt;
//実際に表示させる場所に書くHTMLと代替コンテンツ
&lt;div style=&quot;height:200&quot;&gt;
	&lt;div id=&quot;flashContent&quot;&gt;
	&lt;h1&gt;代替コンテンツ&lt;/h1&gt;
	&lt;/div&gt;
&lt;/div&gt;
</pre>
</p>
<h3>swfobject.jsを呼び出す記述</h3>
<p>swfobject.jsはgoogle codeからダウンロードできます。<br />
配布元：<a href="http://code.google.com/p/swfobject/">swfobject &#8211; Project Hosting on Google Code</a><br />
<a href="http://code.google.com/p/swfobject/">http://code.google.com/p/swfobject/</a>
</p>
<p>ページ右側に「Featured downloads」というところから、swfobjectのzipファイルをダウンロードします。zipを解凍すると「swfobject.js」がありますので、それを任意の場所にアップしてソースコード2行目の記述を、必要であればパスを換えてHTMLに書きます。<br />
<pre class="brush: jscript; highlight: [2]; title: ; notranslate">
//swfobject.jsを呼び出す
&lt;script type=&quot;text/javascript&quot; src=&quot;swfobject.js&quot;&gt;&lt;/script&gt;
</pre>
</p>
<h3>flashvarsの使い方</h3>
<p>swfobject.embedSWFが実際にFlashを表示させる関数です。その関数の引数にいろいろパラメータを渡すことによっていろんなことができます。flashvarsは変数の値をswfに送るための記述です。もちろん、変数を渡す必要がなければ省略できます。</p>
<p><pre class="brush: jscript; title: ; notranslate">var flashvars = {hensu1: value1, hensu1: &quot;変数２&quot;};</pre><br />
この「flashvars」のなかに入れる値は、変数をActionScriptへ渡すために記述です。phpやJavaScriptなどのプログラムからFlashへ何か値を渡したいときに、</p>
<p><pre class="brush: jscript; title: ; notranslate">var value1 = &quot;値だよ&quot;;
var flashvars = {hensu1: value1, hensu2: &quot;変数２&quot;};</pre></p>
<p>このように書けば「hensu1」というグローバル変数のなかに「&#8221;値だよ&#8221;」という文字列StringがFlashにわたることになります。ActionScript内の記述では、この「hensu1」と「hensu2」に対して「var hensu1 = new Sting();」や「var hensu1 = &#8220;&#8221;;」などを書く必要はありません。というのも、変数「hensu1」に格納された値「&#8221;値だよ&#8221;」がswfにわたってからFlashが再生されるので、せっかく渡った値がリセットされてしまうことになります。Flash内で動作確認する際は「flashvars」が渡す値を仮でActionScript内の変数として書いてデバッグをし、実際にHTMLをブラウザでFlashの動作確認する際にはコメントアウトをしておきましょう。
</p>
<h3>paramsの設定方法</h3>
<p>objectタグの中に設定するparamsが必要であれば追加して書くことが可能ですが省略もできます。FlashPlayerを投下させる意味のある「wmode」の設定が、たとえばJavaScriptで作られたドロップダウン式のメニューとFlashがかぶっている場合に、この「wmode」が良く使われると思います。しかし、wmodeを<b>transparent</b>にすると日本語入力などのコンテンツに使用すると、文字が入力できないというバグがあるみたいなので使う時には注意してください。<br />
参考サイト：wmode を transparent に設定した際の注意点<br />

http://www.adobe.com/jp/support/kb/ts/228/ts_228635_ja-jp.html</p>

<p>▼pramsのソースコードサンプル<br />
<pre class="brush: jscript; title: ; notranslate">var params = {
	play: &quot;true&quot;,
	loop: &quot;false&quot;,
	menu: &quot;false&quot;,
	quality: &quot;best&quot;,
	wmode: &quot;transparent&quot;,
	allowscriptaccess: &quot;always&quot;
};</pre>
</p>
<h3>attributesの使い方</h3>
<p>objectタグにidとnameを設定する時にこのattributesを使います。いろいろ調べても情報がなく、どういった使い方をするのかよくわかりませんが、、、おそらくIE4やN3などの古いブラウザで表示するのに必要そうな雰囲気がします＾－＾；<br />
<pre class="brush: jscript; title: ; notranslate">
var attributes = {id: &quot;myFlashContent&quot;,name: &quot;myFlashContent&quot;};
</pre></p>
<h3>swfobjectができること</h3>
<p>１．Internet Explorer（IE）においてのActiveX コントロールのアクティブ化<br />
　いわゆる、IEでみたときにFlashを一回クリックしないと動作しないし触れないのを回避できます。<br />
　ActiveX コントロールのアクティブ化(Microsoft)<br />
　http://msdn.microsoft.com/ja-jp/library/ms537508(VS.85).aspx<br />
　アクティブコンテンツのFAQ(Adobe)</p>
<p>２．FlashPlayer未インストールのユーザーに対しての代替コンテンツの表示</p>
<p>３．再生に必要なFlashPlayerのバージョンが満たされてなかった時に、代替コンテンツを表示させるか、Express Installを用いて最新版のFlashPlayerをインストールしてもらうのを促す。<br />
参考サイト：<a href="http://www.adobe.com/jp/devnet/flashplayer/articles/expressinstall.html">Express Install 適用ガイド(Adobe)</a><br />
<a href="http://www.adobe.com/jp/devnet/flashplayer/articles/expressinstall.html">http://www.adobe.com/jp/devnet/flashplayer/articles/expressinstall.html</a></p>
<p>４．Flashコンテンツが重要なコンテンツの場合、h1タグを用いて見出しを設置できるSEO対策。</p>
<p>５．パラメータを変数としてswfに渡すことができる。
</p>
<h3>swfobjectの注意点</h3>
<p><b>・違うドメインへページ遷移するとき</b><br />
getURLするときは、paramsにallowscriptaccess: &#8220;always&#8221;を追加する必要がある。<br />
<b>・wmodeの注意点</b><br />
文字を入力するコンテンツの場合、FlashPlayerの透過を設定するwmode: &#8220;transparent&#8221;にすると文字が入力できない。<br />
<b>・swfobject.embedSWFの引数に入れる順番は決まっています。</b><br />
例えば、flashvarsは使わないがparamsを使いたい時には、flashvarsの場所をnullにする必要があります。<br />
▼引数なしの場合のサンプル<br />
<pre class="brush: jscript; title: ; notranslate">
var flashvars = null;
var params = {allowscriptaccess: &quot;always&quot;};
swfobject.embedSWF(&quot;content.swf?u=20091210&quot;, &quot;flashContent&quot;, &quot;400&quot;, &quot;200&quot;, &quot;9.0.0&quot;, &quot;expressInstall.swf&quot;, flashvars, params);
</pre></p>
<p>▼同じようにexpressInstallを使わない場合<br />
<pre class="brush: jscript; title: ; notranslate">
swfobject.embedSWF(&quot;content.swf?u=20091210&quot;, &quot;flashContent&quot;, &quot;400&quot;, &quot;200&quot;, &quot;9.0.0&quot;, &quot;&quot;, flashvars, params);
</pre>
</p>
<h3>おまけ設定</h3>
<p><b>・outline:noneのCSSでFlashの回りに点線を消してしまう。</b><br />
CSSでobjectのoutlineをnoneにしています。これはFirefoxでFlashを表示させた時、そのコンテンツに対してクリックすると周りに出る点線を消す設定です。キーボードのTabを押すと、ページ内でクリックできる箇所にフォーカスをあてているこの点線を、swfobjectが表示させるobjectタグに対して設定しています。</p>
<p><b>・Flashに指し換わるdivの上に高さを設定したdivを挟む。</b><br />
フルFlashコンテンツであれば問題ありませんが、パーツで使用するFlashがswfobjectで展開される前の状態では、一瞬、上下にガクガク表示する現象があります。これはネットの環境やパソコンの性能に左右されるかもしれませんが、ここで予め高さを設定し、backgroundで色や背景画像を設定しておけば見た目に変なことが起きることがありません。</p>
]]></content:encoded>
			<wfw:commentRss>http://creator.cotapon.org/articles/flash/swfobject2-x%e3%81%ae%e4%bd%bf%e3%81%84%e6%96%b9/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

