このブログの更新は終了しています。
よろしければ新しいブログの方もご覧ください。
Flashでブログのヘッダーを作る (4)
前回出来上がったFlash製のブログヘッダーをHTMLに埋め込みましょう。
その前に、パブリッシュする必要があります。Flash CS3のファイルメニューからパブリッシュを選ぶと、flaファイルが保存してあるのと同じフォルダに３つのファイルが作成されます。１つはswfファイルで、これがFlashの本体です。後の２つはhtmlファイルとAC_RunActiveContent.jsというJavaScriptファイルです。
まずはスタンダードなやり方を試してみます。パブリッシュされたswfファイルとjsファイルを自分のブログを設置しているサーバーにアップロードします。WordPressなら使用しているテーマのフォルダでいいでしょう。htmlファイルはアップロードする必要はありません。テーマでヘッダー部分が記述されているファイル（通常はheader.php）をローカルにダウンロードして編集します。htmlファイルをテキストエディタで開き、<head>内でAC_RunActiveContent.jpを読み込んで初期化している部分：
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>をコピーし、head.phpの同じく<head>内にペーストします。さらに、<body>内の以下の部分：
<script language="javascript">
if (AC_FL_RunContent == 0) {
alert("このページでは \"AC_RunActiveContent.js\" が必要です。");
} else {
AC_FL_RunContent(
【省略】
); //end AC code
}
</script>
<noscript>
【省略】
</noscript>をコピーし、header.phpのFlashを表示させたい場所にペーストします。
編集したheader.phpをサーバーに上書きアップロードすれば完成・・・というのが解説書とかに書かれていいる通りの手順ですが、これではおそらく表示されないでしょう。jsファイルとswfファイルのパスが正しくないからです。ファイル名を指定している部分をテーマのフォルダまでのフルパスで記述してやれば動くようになります。書き換える場所はjsファイルについて１か所（<head>内）、swfファイルについて４か所あります。WordPressで使うにはこのフルパスというのはテンプレートタグを使って <?php bloginfo('template_url'); ?>{swfファイル名}と表すことができます。なお、Flash CS3が書き出すhtmlはXHTML 1.0ではValidではありませんので、必要に応じて書き換えないといけません。
この方法を使う時は、既存のヘッダー部分は消してしまうかCSSで見えなくしてしまう必要があります。
私は別の方法を使ってこのブログのヘッダーをFlash化しています。それはSWFObjectというJavaScriptを使う方法で、これもよく使われています。設置方法はリンク先のdocumentationページに（英語で）詳しく解説されていますし、日本語訳へのリンクもあります。
SWFObject 2.0には２通りの設置方法があり、ひとつはJavSscriptがオフでもFlashが表示される、<object>タグを直接書く方法と、javascriptでダイナミックに表示する（つまりjavascriptがオフだと表示されない）方法があります。私は、JavaScriptをあえてオフにしている人は少数派であろうと仮定し、後者のダイナミックな方法を用いています。ソースが複雑になるのを避け、既存のヘッダー部分はそのまま残したかったということもあります。既存のヘッダーをそのまま残してSWFObjectを用いてFlashを埋め込むには、例えば以下のようなソースにすればよいです（swfobject.jsとswfファイルはテーマフォルダにアップロードされているとします）。
<div id="header"> <h1>ブログのタイトル</h1> <p>ブログの説明</p> </div> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>swfobject.js"></script> <script type="text/javascript">//<![CDATA[ swfobject.embedSWF("<?php bloginfo('template_url'); ?>{swfファイル名}", "header", "{横幅}", "{高さ}", "9.0.0"); //]]></script>
これでjavascriptがオフならこれまでのヘッダーが、オンならFlashのヘッダーが表示されるようになります。
４回にわたるFlashによるブログのヘッダーの作成過程の紹介はこれで終わりです。次は何を作るかまだ考え中ですが、公開できるようなものが出来たら、また作成過程も含めて紹介してみたいと思います。