Flash(FPE)でのブログパーツ作成方法

2009.02.15 掲載URLによって、リンク機能の有効・無効が切り替わる現象を修正。 AllowScriptAccessをsameDomainからalwaysへ変更しました。

2009.02.14 一部の環境(Internet Explorer 6系)で動作しない現象への対応を行った修正バージョンを配布しています。適切にブログパーツ用タグを記述したにもかかわらずスライドショーが表示されなくて困っていた方は是非お試し下さい。JavaScriptソースコード中の日本語コメントが原因で不動作となることがある様です。修正バージョンでは日本語コメントを排除しています。

FPEで作成したスライドショーやバナーをブログパーツとして利用する方法(JavaScript)を紹介します。

第三者のブログ記事内、もしくはHTMLファイル中に簡単なタグを記述してもらうことで、自サイトのスライドショーやバナーを掲載してもらうことができます。
FPEフリー版ではFPE自身の宣伝用のバナーがでてしまいますが、ちょっとブログパーツを作ってみたいと思ってる方にはお手軽でいいと思います。

動作サンプル

ブログパーツ設置用のタグ(テスト用)

以下のタグを、あなたのブログ記事やHTMLに記述して頂くと当サイト作成(Yaibeen)の小さめなスライドショー(上のサンプル)が組み込まれます。
一度あなたのブログに貼り付けてみて下さい。転送量の問題がある為、動作イメージの確認後はタグを削除していただければ幸いです。


<script type="text/javascript" src="http://nucleus.yaibeen.com/media/blogparts/yaibeen_blogparts.js"></script>

『利用条件』: 特に制限はありません。個人利用、商用利用、改変、再配布は自由です。; 利用した事によるいかなる損害も、作者は一切の責任を負いません。

ダウンロード: Yaibeenブログパーツ作成用JavaScript2009/02/15版

説明

ELZのFPEで作成したコンテンツをブログパーツにする為のJavaScriptファイルです。
FPE本体(misfpe.swf)が必要です。フリー版、有料版どちらでも構いません。
FPEで簡単なスライドショーを作成できる方が対象です。そんなに難しくはありません。

動作環境及び注意点

ブラウザ側でJavaScriptが有効になっている環境のみ動作対象としています。
Flash Player 7もしくは8以上がインストールされたブラウザで動作します。
現時点ではFlash Playerインストールの有無は確認していません。よってFlash Playerがインストールされていない環境ではブログパーツが表示されません。
PHPやNucleusは必要ありません。
ブログパーツとして第三者に利用してもらう為、アクセス数や転送量には十分注意して設置して下さい。

必要なファイル及び構成

    misfpe.swf (FPE本体 ELZのFPE配布ファイルからコピーしてください)

    yaibeen_blogparts.js (FPEをブログパーツとして利用するためのJavaScriptファイル)

    config.xml (スライドショーの動作を決める設定を記述)

    001.jpg (スライドショーに表示する画像)
    002.jpg (スライドショーに表示する画像)
    003.jpg (スライドショーに表示する画像)

    test.html (ブログパーツ組込みテスト用)


※適当なディレクトリを作成して上記ファイルを設置します。
※画像枚数、画像サイズは任意です。お好みでどうぞ。
※test.htmlはブログパーツ動作確認用です。オリジナルブログパーツ設置後は削除して下さい。

ブログパーツ作成方法

下準備

ダウンロードしたファイルを適当なディレクトリに展開後、misfpe.swf(FPE本体)と同一ディレクトリにコピーします。

config.xmlとyaibeen_blogparts.jsを編集します。
編集のポイントは定義ファイル、yaibeen_blogpats.js中に記述されているパス指定を絶対パスにするということです。

config.xmlの編集


config.xml一部抜粋

パス指定箇所は全て絶対パス(http://から)で記述します。


配布しているサンプルでは3箇所の編集が必要です。


    <prefix>http://あなたのサイト/アップしたディレクトリ名/</prefix>

    <background>http://あなたのサイト/アップしたディレクトリ名/bg.jpg</background>

    <link_url>リンクが必要であればお好みで</link_url>




ちなみに当サイトで実際に動作している定義ファイルは以下の様になっています。

<?xml version="1.0" encoding="UTF-8" ?>
<pagedata>
<common>

    <copyright>elz.jp</copyright>

    <image_max>3</image_max>

    <effect_type>in,out</effect_type>
    <effect_time>15</effect_time>
    <stop_time>0</stop_time>

    <zoom_mode>0</zoom_mode>
    <base_mode>5</base_mode>
    <align_mode>5</align_mode>


    <prefix>http://nucleus.yaibeen.com/media/blogparts/</prefix>

    <background>http://nucleus.yaibeen.com/media/blogparts/bg.jpg</background>

    <link_url>http://nucleus.yaibeen.com</link_url>

</common>

<effect>
    <in   layer="0" x="0,100" y="11,125,0" xs="1,50,0" ys="1,50,0" />
    <out                      y="21,-65"    xs="1,100"  ys="1,100" />
</effect>


</pagedata>

yaibeen_blogparts.jsの編集


yaibeen_blogparts.js一部抜粋

以下の5種類のパラメータを編集します。


//misfpe.swf(FPE本体)の場所をフルパス(http://から)で指定
var sMisfpe = "http://あなたのサイト/アップしたディレクトリ名/misfpe.swf";

//定義ファイル(config.xml等)の場所をフルパス(http://から)で指定
var sConfig = "http://あなたのサイト/アップしたディレクトリ名/config.xml";

//横幅を指定
var nWidth  = 200;

//高さを指定
var nHeight  = 125;

//背景色を指定
var sBgcolor = "#ffffff";





ちなみに当サイトで実際に動作しているyaibeen_blogparts.jsは以下の様になっています。


//misfpe.swf(FPE本体)の場所をフルパス(http://から)で指定
var sMisfpe = "http://nucleus.yaibeen.com/media/blogparts/misfpe.swf";

//定義ファイル(config.xml等)の場所をフルパス(http://から)で指定
var sConfig = "http://nucleus.yaibeen.com/media/blogparts/config.xml";

//横幅を指定
var nWidth  = 200;

//高さを指定
var nHeight  = 125;

//背景色を指定
var sBgcolor = "#ffffff";

サーバへのアップ

yaibeen_blogparts.jsとconfig.xml(FPE定義ファイル)の編集が終わったらサーバへアップします。
ディレクトリごとサーバにアップして下さい。
※test.htmlはブログパーツ動作確認目的でのみアップして下さい。正常動作確認後は削除した方が良いでしょう。

記事への組込み

以下のタグをブログ記事等に組み込むことでブログパーツとして動作します。


<script language="JavaScript" type="text/javascript" src="http://あなたのサイト/ブログパーツ設置ディレクトリ名/yaibeen_blogparts.js"></script>

カスタマイズ

もちろんスライドショーのエフェクトや画像は差し替えていただいて構いません。
YaibeenではFPEのカスタムエフェクトを使ったスライドショーサンプルを紹介しています。エフェクト定義時の参考にして下さい。

Yaibeen Flash / PHP / Nucleus