フラッシュ・ムービーを埋め込む方法

投稿日: 2008年6月24日 | カテゴリ:『ワードプレス』>プラグイン

ページを開いたときに同時にムービーを開始させたい場合、htmlファイルに埋め込むためのタグとしてembededがあります。しかしWordpressではこのタグは使用できません.そこでプラグインを使用してこの問題を解決する方法を紹介いたします。

ページを開いたときに同時にムービーを開始させるには次のプラグインを使用します。
Kimili-flash-embed
次に、このサイトの説明(英語)を参考にしてその使用法を説明します。以下の説明は、バージョン1.4.1をベースにしていますが、以降のバージョンにも適用可能です。最新バージョンの2.0.1に関する情報については、末尾の「追記」を参照してください。

1. インストールの方法

上記のサイトからzipファイルをダウンロードし、解凍して、Kimili-flash-embedディレクトリをWordpress/wp-content/plugin/にアップロードします。
Wordpressにadminでログインして、「プラグイン」を選択し、「Kimili-flash-embed」の「使用する」をクリックしてこのプラグインを有効にします。

2. 使用法

基本的使用法
投稿のムービーを埋め込む場所に以下のタグを記入します。

[kml_flashembed movie="/path/to/your/movie.swf" height="300" width="300" /]

最低限必要なスクリプトは以下の3つです。
(1) movieのパス
(2) ムービーの高さ(height)
(3) ムービーの幅(width)
エディターの「ビジュアル」で編集を行う場合には、Kimili-flash-embed用の新しいボタンが追加されているはずです。このボタンをクリックすれば対話形式でスクリプトを入力できます。

Flash Player自動インストールの設定
訪問者がFlash Playerをインストールしていない場合や、ムービーに必要なバージョンよりも古いものを使用している場合に、訪問者にニューバージョンのインストールを促す設定は、次のように行います。
上演に必要なバージョンを指定

fversion="9"

インストールを促すためのスクリプトを追加

useexpressinstall="true"

訪問者のインストールが成功したときの移動ページを指定(オプション)

xiredirecturl="http://www.yoursite.com/bleeding/edge/flash/"

最終的には以下のようなタグになります。
(閲覧の便宜上途中で改行してあります。実際のスクリプトでは、[kml_flashembed /]の内部は改行しないでください。以下同じ)

[kml_flashembed movie="filename.swf" height="300" width="300" fversion="9" useexpressinstall="true" /]

FPがインストールされていないときの代替表示

alttext=" " 

Flash Playerがインストールされていない場合に、ムービーの埋め込まれている場所に代わりに表示する内容を指定します。テキストあるいはHTML形式で記述できます。
これは、訪問者にFPのインストールを強制したくない場合に便利なオプションです。
ムービーの代わりにイメージを表示するオプションとインストールを推奨する方法を紹介しておきます。

注意

alttext=" " にHTMLタグを使用する場合には、「" "」(ダブルクオート)の部分を「' '」(シングルクオート)に変換して代用してください。
3. 具体的使用例

イメージを代わりに表示する場合のスクリプト

<div style="padding:0px 0px 0px 0px;border-bottom:2px solid gray;margin-top:-20px;">
<table border="0">
<tbody>
<tr>
<td width="130" height="120">
<img src="http://hsuzuki.ddo.jp/weblog/wp-content/mydata/umitensi.gif" alt="" width="120" /></td>
<td width="460" height="120">
[kml_flashembed movie="http://hsuzuki.ddo.jp/weblog/wp-content/mydata/graphic/home4.swf" height="140" width="460" fversion="7" useexpressinstall="true"  ALTTEXT="<span style='padding:10px 0 20px 10px;'><img src='http://hsuzuki.ddo.jp/weblog/wp-content/mydata/title9.png' width='450'></span>"/]
</td>
</tr>
</tbody></table>
</div>

表示例

フラッシュムービーのインストールを勧誘する表示

<div style="padding:0px 0 0px 0px;border:2px solid #ffcc33;margin-top:0px;background-color:#ffff66">
<table cellpadding="5">
<tbody>
<tr>
<td width="130" height="120" ><span style="padding:0px 0 0px 10px;">
<img src="http://hsuzuki.ddo.jp/weblog/wp-content/mydata/umitensi.gif" width="120" /></span></td>
<td width="420" height="120">
[kml_flashembed movie="http://127.0.0.1/wordpress/wp-content/mydata/graphic/home4.swf" height="120" width="420" fversion="9" useexpressinstall="true" bgcolor="#ffff66" alttext="この部分を表示するにはFlash Playerのインストール(無料)が必要です。<BR>よかったら、次のサイトにアクセスしてインストールしてください。<BR><a target='_blank' href='http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash'>Adobe Flash Player</a>" /]
</td>
</tr>
</table>
</tbody>
</div>

表示例

問題点
Flash Movieを自動的にインストールする設定が有効に働かないようです。とはいえ、上述したようにムービーの代替としてイメージを埋め込んだり、インストールの推奨メッセージを表示した方が無難なように思えます。インストール手順を詳しく説明したい場合には、他のページに誘導して説明することもできます。

(追記:2009年3月10日)

新バージョン(2.0.1)への対応

この記事が対象にしているバージョンは、1.4.x(最終バージョンは1.4.3)です。
現在、最新バージョンである2.0.1がリリースされています。作者によれば、このバージョンでは抜本的な改良がなされているそうです。
この最新バージョンを使っても上記のスクリプト例は問題なく動きます。フラッシュ・プレーヤーがインストールされている場合、またインストールされていない場合の代替表示もうまく表示されます(両方とも実際に確認しています。Wordpress 2.7.1において)。

次に新バージョンでムービーを埋め込む方法を簡単に説明しておきます。更に詳しい方法については、編集ウィンドウの内部でもチェックできますし、本家のサイトにも掲載されているのでこれを参考にしてください。
新バージョンを新しくインストールすると編集エディターのメニューに「Kimili Flash Embed」タグが表示されます。

tag_menu

タグをクリックすると次のような画面が現れますので、「Flash version」にムービーの上演に必要なFPの最新バージョンを記入、「Flash(.swf)」の部分にswf ムービーのパスを記入、「Dimentions」の部分にムービーを表示するサイズを記入します。そのほかのオプションはデフォルトで結構です。次に、最下部にある「Generate」ボタンをクリックし変更を反映させます。

generator1

ポスト編集画面に以下のようなスクリプトが挿入されますので、必要に応じて編集し(さし当たっては特に編集する必要はありませんが)保存した後、プレビューでチェックしてみます。

[kml_flashembed fversion="8.0.0" movie="http://hsuzuki.ddo.jp/weblog/wp-content/mydata/graphic/home4.swf" targetclass="flashmovie" publishmethod="static" width="400" height="300"]
<p><a href="http://adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
[/kml_flashembed]

フラッシュ・プレーヤーが導入されていればムービーが上演されるはずです。FPがインストールされていなければ以下のようなAdobeのロゴ・イメージが表示され、これをクリックすればインストール画面にジャンプするようになっています。

generator_nofm

次に編集タグの非表示方法について説明いたします。
一旦、ムービーの挿入を経験してしまえば後の挿入は、自筆または コピーで簡単に行うことができます。したがって、編集タグは必要なくなり、その表示が邪魔になってくることがあります。この場合には、このプラグインの主ファイルであるkml_flashembed.phpの58行目当りを次のようにコメントアウトします。こうすれば、他の機能に影響を与えずに編集タグの表示はなくなります。

   // Add Quicktag
/* Removed by User - start
   if (current_user_can('edit_posts') || current_user_can('edit_pages') ) {
    add_action( 'edit_form_advanced', array(&$this, 'add_quicktags') );
    add_action( 'edit_page_form', array(&$this, 'add_quicktags') );
   }
Removed by User - end */


フラッシュ・ムービーを埋め込む方法” への2件のコメント

  1. 丁寧な説明ありがとうございます!
    何度やってもswfファイルがプレイされず、
    途方にくれてましたが、おかげ様でなんとかできました!
    今すごくハッピーです☆

  2. ピンバック: Wordpress でSWFを表示する方法

コメントを残す




空欄に計算式を満たす数値を記入してください(必須)