ブログパーツと呼ばれるものをご存知ですか？
ブログペットや地図日記など、ブログ上にスクリプトタグを埋め込むことで別サーバーのコンテンツを表示するモノです。
このようなブログパーツでは、下のようなスクリプトタグを埋め込むことでコンテンツを表示させることが多いです。
<script type="text/javascript" src="http://www.example.com/script.js"></script>
今回はこういったブログパーツの基礎部分をつくってみましょう。サンプルでは単純に「Hello World!」を表示させます。ブログに貼り付けた上記の<script>タグ部分が「Hello World!」に置き換わるサンプルです。
まずは、貼り付けるブログに表示したいHTMLタグを書き起こします。
<div>
<p>Hello World!</p>
</div>
これをブログに貼り付ける場合、JavaScriptファイルでなければならないので、すべてのHTMLをdocument.write();で囲みます。
■script.js
document.write('<div>');
document.write(' <p>Hello World!</p>');
document.write('</div>');
基本的にこれだけでスクリプトは完成なのですが、このHTMLが長く続くと、毎回「document.write();」を記述するが大変になってきます。
そこで今回はちょっとした小技を使います。
このJavaScriptファイルをPHPのテンプレートとして記述し、Smartyのブロック関数を使用して、document.write();を自動的に生成するようにします。
■block.document_write.php（独自Smarty用プラグイン）
<?php
/**
* {document_write}～{/document_write}内の全ての行をdocument.write();で囲む
*/
function smarty_block_document_write($params, $content, &$smarty, &$repeat)
{
if (isset($content) && $content) {
$result = "";
$content_list = explode("\n", $content);
foreach ($content_list as $value) {
$value = str_replace("\r", "", $value);
$value = str_replace("\n", "", $value);
$value = str_replace("\t", " ", $value);
$value = str_replace("'", "\'", $value);
if ($value == "") {
continue;
}
$result .= "document.write('" . $value . "'); \n";
}
return $result;
}
}
?>
■script.js.php（<script>タグから最初に読み込まれるPHPファイル）
<?php
include_once('Smarty.class.php');
$smarty = new Smarty();
$smarty->display('script.js.tpl');
?>
■script.js.tpl（Smarty用テンプレート script.js.phpから読み込まれ、JavaScript形式のファイルに生成される）
{document_write}
<div>
<p>Hello World!</p>
</div>
{/document_write}
これで表示するHTMLの修正がだいぶ楽になりました。
使用されるファイル名が変わったため、埋め込む<script>タグは、
<script type="text/javascript" src="http://www.example.com/script.js.php"></script>
になります。
また、<script>タグで不特定多数のブログにスクリプトが貼り付けられることを想定した場合、
HTMLタグのID名が重複しないように気をつける必要があります。
もし同じIDが使用されてしまうと、CSSに影響を与えたり、スクリプトエラーを起こす原因となってしまうからです。
解決方法としてもっとも簡単なのは、タグに使用するIDをスクリプトでランダムに生成することです。
ここでは例として、Smartyを使用して作成してみます。
■script.js.tpl
{assign var="random_id" value=$smarty.now|uniqid}
var random_id = '{$random_id|escape}';
{document_write}
<div id="{$random_id|escape}">
<p>Hello World!</p>
</div>
{/document_write}
これでブログパーツの基礎部分は終了です。
これだけではちょっとつまらないので、scriptaculous（http://script.aculo.us/）を使用して、この「Hello World!」をドラッグ＆ドロップで移動させられるようにしてみます。 （詳しい説明は割愛します。）
■script.js.tpl
{assign var="random_id" value=$smarty.now|uniqid}
var random_id = '{$random_id|escape}';
{document_write}
<div id="{$random_id|escape}">
<p>Hello World!</p>
</div>
<script type="text/javascript" src="http://www.example.com/prototype.js"></script>
<script type="text/javascript" src="http://www.example.com/scriptaculous.js"></script>
<script type="text/javascript">
var element = document.getElementById'{$random_id|escape:javascript}');
element.style.backgroundColor = "#EEEEEE";
element.style.width = "100px";
element.style.height = "20px";
new Draggable(element);
</script>
{/document_write}
<script type="text/javascript" src="http://www.example.com/script.js.php"></script>
これで、上のスクリプトをあなたのWebサイトに貼り付けれると「Hello World!」が表示されるはずです。
ここから先はあなたのアイディアを生かして、面白いコンテンツをどんどん作成しましょう！
この記事は、アシアルが運営するＰＨＰ開発者のためのポータル＆コミュニティサイト「ＰＨＰプロ！」で毎週配信しているＰＨＰ・ＴＩＰＳメーリングリストを再録したものです。
同サイトでは、他にもＰＨＰ最新ニュースや、困ったときのＱ＆Ａ掲示板、初心者向けのＰＨＰ講座など、ＰＨＰ開発者をサポートする情報を掲載しています。
