熱血！MULTI web

diary/20081024

ID: 921 | 作成日: 2008/10/24 [Fri] 15:53:00 | 最終更新: 2012/07/10 [Tue] 13:46:29

FrontPage / diary / 20081024

PHP＋JavaScriptで簡易ブログパーツ

今回は、実は7月に書くつもりだったのですが、その時期にブログの更新ツール変更作業をしていて書き逃していたPHP関連のネタです。

WebサービスAPIから引っ張ってきたデータ(たとえば写真共有サービスに自分がアップした画像とか)を、ブログのサイドメニューに簡単なブログパーツ的に表示させたいなぁと。

それを考えたときに1～2年前に試したテキストや画像をクロスフェード(フェードイン・アウト)させることができるJavaScript“Crossfader”のことを思い出し、「PHP＋Crossfaderでそれっぽいことができるかも」ということで作ってみました。

ということで、そのときの作業を元に簡単な「PHP＋Crossfader」のサンプルや解説をしたいと思います。

まずは簡単に「Crossfader」の説明から・・・ということでサンプル。

<script type="text/javascript" src="./javascript/bsn.Crossfader.js"></script>

<div id="cf1">
その1
</div>
<div id="cf2">
その2
</div>
<div id="cf3">
その3
</div>

<script type="text/javascript">
var cf = new Crossfader(new Array('cf1', 'cf2', 'cf3'), 1000, 5000);
</script>

配布元から「bsn.Crossfader.js」を入手して任意の場所に保存(サンプルでは“javascript”フォルダ)して、HTMLに上記のコードを書き込んで実行してもらうと「その1」・「その2」・「その3」がクロスフェードしながら順繰り順繰り表示されるかと思います。

詳細な説明は省きますが、要するに「new Crossfader」の“Array”で指定されているidの「div」で囲まれた部分がクロスフェード、数字の“1000”の部分がクロスフォードの時間、“5000”がサンプルの場合は「div」の表示時間になります。
時間の数字はミリ秒、当然時間は任意に変更可能です。

以下のページに「Crossfader」の日本語解説があります、僕も今回の作業で参考にさせてもらいました。

続いて、この「Crossfader」とPHPを利用しての解説。
僕の場合、ブログのトップページがPHPファイルなので、PHPの処理をトップページのPHPファイルに追加してHTMLで「bsn.Crossfader.js」を読み込めば簡単なのですが、できればよくあるレンタルのブログパーツみたいに外部からJavaScript呼び出すタグ一行だけで出来るようにしたいと。

そこでPHPに「Crossfader」を取り込んで、PHPスクリプトをJavaScriptとしてHTMLから読み込ませます。
ということで、PHP＋Crossfaderの簡単なサンプルです。

<?php
ini_set('default_charset', 'UTF-8');

$fade_time = 1000;
$display_time = 5000;
$text = array(
	"PHP＋JavaScriptを使った",
	"クロスフェードのサンプルです。",
	"エフェクトには“bsn.Crossfader.js”を利用。"
);

header("Content-type: text/javascript");
readfile("javascript/bsn.Crossfader.js");

$num = count($text);
$cf = "";
echo "\n\n";
for ($i=0; $i<$num; $i++) {
	$code = '<div id="cf' . ($i+1) . '">' . $text[$i] . "</div>";
	echo "document.write('{$code}');\n";
	if ($i>0) {
		$cf .= ", ";
	}
	$cf .= "'cf" . ($i+1) . "'";
}
echo "var cf = new Crossfader(new Array({$cf}), {$fade_time}, {$display_time});";
?>

サンプルでは文字コードを「UTF-8」で製作しています、別の文字コードを利用する場合は“ini_set('default_charset', 'UTF-8');”を実行される文字コードにあわせて変更してください。

配列変数「$text」に代入してある文字列をクロスフェードするJavaScriptのコードをPHPを使って出力しています。
配列に文字列を追加すればクロスフェードさせる「div」の数も追加されます。

「readfile」命令でJavaScriptを取り込んでいます、この辺については以下のページが参考になります。