NP_SimpleFPE スライドショーとブログパーツ化

NP_SimpleFPE スライドショーとブログパーツ化

概要

指定した画像をフラッシュスライドショーとしてアイテム中に表示させるNucleus用プラグインです。
ELZで配布されているFlash Presentation Engine(FPE)をNucleusアイテム内に組み込むことで動作します。

変更内容 version 0.4

2009.02.15 ブログパーツとして他のサイトへ貼り付ける場合、掲載URLによってリンク機能の有効・無効が切り替わる現象を修正しました。ブログパーツ貼り付け用タグで利用されるJavaScriptソースコード中のAllowScriptAccessをsameDomainからalwaysへ変更しています。

主な機能 version 0.3

FPEを利用したフラッシュスライドショーをアイテム中に設定できます。
Flash表示サイズ(枠)は任意で指定可能です。
FPEの各種プラグイン(マスク、フィルタ、フレーム)を利用可能です。
FPEのカスタムエフェクト、カスタムプラグイン等の機能に対応しています。
JavaScript無効、FlashPlayer無しの環境下で代替画像表示できます。
ver 0.2 第三者のページにブログパーツとして貼り付ける機能が追加されました。
サーバの負荷や転送量等を考慮の上ご利用下さい。
ver 0.3 スキン中に組込みできるようになりました。
ver 0.3 キャッシュ機能(FPE定義ファイル)を追加しました。ver 0.2以前の動的生成に比べてサーバへの負荷が減ります。

ver 0.2以前からのアップデート方法

すいません。お手数ですが一旦Ver0.2をアンインストール後、ver0.3をインストールして下さい。

動作環境及び注意点

Nucleus 3.24の環境で動作確認をしています。
Flash Player 7もしくは8以降が必要です。
FPE本体(misfpe.swf)が必要です。フリー版、有料版どちらでも構いません。事前に入手して下さい。
キャッシュ機能を利用するにはmedia/simplefpeディレクトリが必要です。phpセーフモードの場合、パーミッションを777等にする必要があるかもしれません。
単純なフェードイン効果でのスライドショー用途ならFPEを使ったことが無い方でも簡単に利用できます。
カスタムエフェクト、マスク、フィルタ、フレーム等の機能を利用する場合はFPEの知識が必要です。FPEのパラメータ等についてはFPEマニュアルを参照して下さい。
当サイトではFPEのカスタムエフェクトサンプルを掲載しています。是非参考にしてください。もちろん公開しているサンプル定義は流用していただいて構いません。

ダウンロード

NP_SimpleFPE (EUC) ver 0.4
※UTF-8環境の方は変換してご利用下さい。
JavaScriptファイル郡
plugins/misfe/js/ディレクトリへコピーして下さい。
後述する『JavaScript自動組込み』でご利用の場合、当ファイルは必要ありません。
FPE本体はELZからダウンロードして下さい。

Nucleusをお使いでない方にも利用できる別記事です。

利用方法(JavaScript自動組込みの場合)

とりあえずNP_SimpleFPEを使ってみたい方向けです。
『JavaScript手動組込み』との大きな違いは『Flash Player無しの環境下で代替画像を表示できない』点です。

展開したファイルをnucleus/pluginsディレクトリにアップします。
plugins/misfeディレクトリにmisfpe.swfをアップします。
プラグイン管理画面でNP_SimpleFPEをインストールします。
スライドショーを表示させたいアイテム(記事)に<%SimpleFPE(0)%>と記述します。
該当アイテム(記事)の『追加プラグインオプション』欄に画像ファイル、Flash表示サイズ等を指定します。

利用方法(JavaScript手動組込みの場合)

展開したファイルをnucleus/pluginsディレクトリにアップします。
plugins/misfe/jsディレクトリに*.jsをアップします。
plugins/misfeディレクトリにmisfpe.swfをアップします。
プラグイン管理画面でNP_SimpleFPEをインストールします。
プラグイン管理画面で『JavaScript組込み方法』を『手動組込み』にします。
スキンの適所(<head>から</head>の間)に<%SimpleFPE(flash8)%>を記述します。
※NP_Misfzeを既に利用している方はこの作業は不要です。
スライドショーを表示させたいアイテム(記事)に<%SimpleFPE(0)%>と記述します。
該当アイテム(記事)の『追加プラグインオプション』欄に画像ファイル、Flash表示サイズ等を指定します。

ファイル構成



    plugins/NP_SimpleFPE.php
    plugins/misfe/misfpe.swf
    plugins/misfe/js/flash7_check.js
    plugins/misfe/js/flash8_check.js
    plugins/misfe/js/misfe.js

手動組込み記述の例(<head>から</head>の間に記述)


<!-- tooltips & stylesheet (activated by title="" on links) -->
<link rel="stylesheet" type="text/css" href="<%skinfile(nicetitle.css)%>" />
<script type="text/javascript" src="<%skinfile(nicetitle.js)%>"></script>

<%SimpleFPE(flash8)%>

・・・省略

私の場合はデフォルトのhead.incを編集しました
flash player7以上の環境を対象とする場合は<%SimpleFPE(flash7)%>として下さい。
NP_Misfzeを既に利用している方は手動組込み記述不要です。

画像パス指定方法

画像名、代替画像名、背景画像名、フレームプラグイン名、プラグイン名は以下の規則でパス変換されます。

『001.jpg』と指定。
ファイル名に『/』スラッシュが含まれない場合はPrivate Collection(media/1/001.jpg)の画像を利用します。
『gallery/001.jpg』と指定。
ファイル名に『/』スラッシュが含まれる場合はmediaディレクトリからの相対指定です。この例では『media/gallery/001.jpg』となります。
『http://???/001.jpg』と指定。
ファイル名先頭に『http://』が含まれる場合、そのままの値が利用されます。

プラグイン管理画面での設定項目

Flash(FPE)表示用JavaScript組込み方法: 『自動組込み』は外部JavaScriptファイルが不要です。簡単に利用できますがFlash Playerの有無チェック機能は無効になります。

『手動組込み』は外部JavaScriptファイルを利用します。事前に<head>から</head>の間に組込み記述を追加する必要があります。

NP_SimpleFPEを初めて利用する方は『自動組込み』でお試し下さい。継続利用する場合は『手動組込み』の方が便利です。
Flash表示枠(幅): ピクセル単位で指定します。

アイテムの『追加プラグインオプション』欄で、当パラメータが省略された場合は『プラグイン管理画面』の値が有効(継承)となります。
Flash表示枠(高さ): ピクセル単位で指定します。

アイテムの『追加プラグインオプション』欄で、当パラメータが省略された場合は『プラグイン管理画面』の値が有効(継承)となります。
背景色: ffffff等の形式で背景色を指定します。後述の『背景画像』の大きさによっては背景色は不可視状態になります。

アイテムの『追加プラグインオプション』欄で、当パラメータが省略された場合は『プラグイン管理画面』の値が有効(継承)となります。
代替テキスト(省略可): JavaScript無効環境、FlashPlayer無しの環境では代替画像が表示されます。
その代替画像に指定するalt属性値を指定します。

アイテムの『追加プラグインオプション』欄で、当パラメータが省略された場合は『プラグイン管理画面』の値が有効(継承)となります。
代替画像(省略可): JavaScript無効環境、FlashPlayer無しの環境で表示する代替画像ファイル名を指定します。

アイテムの『追加プラグインオプション』欄で、当パラメータが省略された場合は『プラグイン管理画面』の値が有効(継承)となります。
画像クリック時のリンク先(省略可): スライドショーをクリックした場合のリンク先を指定します。
省略した場合リンク機能は無効になります。

アイテムの『追加プラグインオプション』欄で、当パラメータが省略された場合は『プラグイン管理画面』の値が有効(継承)となります。
背景画像名(省略可): 背景画像ファイル名を指定します。

アイテムの『追加プラグインオプション』欄で、当パラメータが省略された場合は『プラグイン管理画面』の値が有効(継承)となります。
フレームプラグイン名(省略可): FPEのフレームプラグインファイル名を指定します。

アイテムの『追加プラグインオプション』欄で、当パラメータが省略された場合は『プラグイン管理画面』の値が有効(継承)となります。
プラグイン名(省略可): FPEのプラグインファイル名(マスク、フィルタ、アルファマスク、カスタムプラグイン等)を指定します。

アイテムの『追加プラグインオプション』欄で、当パラメータが省略された場合は『プラグイン管理画面』の値が有効(継承)となります。
カスタムエフェクト定義: FPEのカスタムエフェクト定義、又はエフェクト種別を指定します。

カスタムエフェクト設定例

<in alpha="1,100,0" /> <out alpha="1,0" />

カスタムエフェクト名『in,out』の2つを定義する必要があります。
『in』は登場エフェクト、『out』は退場エフェクトになります。inとoutの名称は変更できません。
上記定義はalpha属性を操作したクロスフェード効果となります。

通常エフェクト設定例

31

31はフェードイン効果です。
1から50までの数値(通常エフェクト)、1100から2699までの『カメラ移動/ズーム機能』エフェクトが指定できます。

アイテムの『追加プラグインオプション』欄で、当パラメータが省略された場合は『プラグイン管理画面』の値が有効(継承)となります。
エフェクト時間: エフェクト時間を指定します。10と指定すると1秒になります。
1(0.1秒)以上の値でなければいけません。

アイテムの『追加プラグインオプション』欄で、当パラメータが省略された場合は『プラグイン管理画面』の値が有効(継承)となります。
停止時間: 停止時間を指定します。10と指定すると1秒になります。
0(0秒)指定も可能です。

アイテムの『追加プラグインオプション』欄で、当パラメータが省略された場合は『プラグイン管理画面』の値が有効(継承)となります。
FPE共通セクション設定: FPEのcommon(共通)セクションのパラメータを記述します。

設定例

<banner_align>3</banner_align>

FPE宣伝バナーの表示位置を右下にする例です。
1ページ中に表示可能なFPE数: FPEの最大利用数を指定します。
表示対象スキン種別: 初期値は『item』です。個別アイテムページでのみスライドショーが表示されます。
『item|index』等とすることで『メインの目次ページ、個別アイテムページ』両方に表示させることも可能です。
アンインストール時にアイテム個別設定を削除しますか: yesの場合、NP_SimpleFPEアンインストール時にアイテム個別の『追加プラグインオプション情報』を削除します。

アイテム個別の『追加プラグインオプション』

NP_SimpleFPEはスライドショー共通設定を『プラグイン管理画面』で行います。

スライドショーで表示する画像情報はアイテム(記事)の『追加プラグインオプション』で登録する必要があります。
オプションは複数ありますが、必須入力項目は『画像ファイル名指定』だけです。画像ファイル名以外のオプションは、省略されると『プラグイン管理画面』で指定した値を引き継いで利用します。

1行に1つの画像ファイル名を指定: スライドショーで表示させる画像を以下の様に指定します。

設定例

001.jpg 002.jpg 003.jpg
FPE共通セクション(追加パラメータ): FPEのcommonセクションへの追加パラメータを記述します。

設定例

<zoom_mode>0</zoom_mode> <debug_mode>1</debug_mode>

上の例ではzoom_mode=0(オリジナルサイズモード)かつデバッグモードでFPEが動作します。

『プラグイン管理画面』での値と、当オプションで指定する情報を結合してcommonセクションが生成されます。
その他のオプション: FPE共通セクション以外のオプションは、値を指定することで『プラグイン管理画面』での設定情報を上書きします。

結合ではなく上書きとなる点に注意して下さい。

ブログパーツとしての利用方法

第三者のページにブログパーツとしてスライドショーを公開することができます。
action.phpへ適切なQueryStringを引き渡すことで、ブログパーツ用のJavaScriptコードが動的に生成されます。
引き渡すパラメータは最後尾のitemid(記事NO)以外そのまま記述して下さい。
以下は組み込み記述サンプルです。

静的方式(キャッシュ版)
※動的方式より高速です。


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

動的方式(action.php経由)


<script type="text/javascript" src="http://nucleus.yaibeen.com/action.php?action=plugin&amp;name=SimpleFPE&amp;type=parts&amp;itemid=235"></script>

上のコードは当記事(NO:235)をブログパーツとして利用するための貼り付け用コードです。
2つのうちどちらかをあなたのBolg等に挿入することでスライドショーが表示されると思います。
転送量の問題がある為、動作イメージの確認後はタグを削除していただければ幸いです。

1ページ中に複数のスライドショーを設置する

単純な利用であれば、プラグイン変数の指定は<%SimpleFPE(0)%>です。
実はカッコ中の数値には意味があります。

0を指定。
『そのアイテム(記事)自身に登録された画像情報でスライドショー組込み』
1以上を指定。
『指定された数値をitemid(記事NO)としてとらえ、そのアイテムに登録されている画像情報でスライドショー組込み』

例えばアイテム(記事)100と200に登録された画像情報をスライドショー表示させたい場合は以下のように記述します。


<%SimpleFPE(100)%>
<%SimpleFPE(200)%>

参考

当サイトではFPEのカスタムエフェクトを使ったサンプルを公開しています。公開しているサンプル定義は流用していただいて構いません。是非参考にしてください。
FPEのマスク、フィルタ、アルファマスク、フレーム等のプラグインは専用のディレクトリを作成してアップすることをお勧めします。
『media/plugin』ディレクトリにFPEプラグインがアップされているとします。NP_SimpleFPEでの指定は『plugin/mask_line1a.swf』等となります。
NP_SimpleFPEで作成するスライドショーは、全ての画像に同一エフェクトが適用されます。FPE自体は画像別にエフェクトを変えることもできるのですが、操作が複雑になりそうなので対応してません。との理由により『NP_SimpleFPE』としました。

Yaibeen Flash / PHP / Nucleus