• BPnet
  • ビジネス
  • IT
  • テクノロジー
  • 医療
  • 建設・不動産
  • TRENDY
  • WOMAN
  • ショッピング
  • 転職
  • ナショジオ
  • 日経電子版
  • PR

  • PR

  • PR

  • PR

  • PR

PHP TIPS

81. ブログパーツを作ってみよう

2008/05/01 ITpro

ブログパーツと呼ばれるものをご存知ですか?

ブログペットや地図日記など、ブログ上にスクリプトタグを埋め込むことで別サーバーのコンテンツを表示するモノです。

このようなブログパーツでは、下のようなスクリプトタグを埋め込むことでコンテンツを表示させることが多いです。

<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!」が表示されるはずです。

ここから先はあなたのアイディアを生かして、面白いコンテンツをどんどん作成しましょう!



(アシアル 松田惇)


この記事は、アシアルが運営するPHP開発者のためのポータル&コミュニティサイト「PHPプロ!」で毎週配信しているPHP・TIPSメーリングリストを再録したものです。
同サイトでは、他にもPHP最新ニュースや、困ったときのQ&A掲示板、初心者向けのPHP講座など、PHP開発者をサポートする情報を掲載しています。

あなたにお薦め

連載新着

連載目次を見る

今のおすすめ記事

ITpro SPECIALPR

What’s New!

経営

アプリケーション/DB/ミドルウエア

設計/開発

サーバー/ストレージ

ネットワーク/通信サービス

セキュリティ

もっと見る