Tercel::Diary: 魔法使いの弟子（その8-4）～PHP×jQuery～

【ミッション：動きをつけて写真を魅せたい Ver.2】

今日は、ぼくがちょっと前に書いた記事の中で（名前だけ）触れられている Smooth Div Scroll を使って楽しい事をしよう。

ありもののサンプルをそのまま使うのも面白くないので、覚えたての PHP を組み合わせて TwitPic の新着画像を動的に表示する仕組みを作ってみる。

ほんものはマウスを動かすと左右にスクロールするよ。

ここで、非実在ご愛用者の声をご紹介しよう。大好評である（嘘）。

【ご愛用者の声】

ライソさん（20歳） - 茨城県つくば市

私は、ハンドボールサークルの Web サイトを運営しています。今まで、サイトの更新が面倒でどうしようもありませんでしたが、このシステムを使えば TwitPic に画像を投稿するだけで自動的に Web サイトの方にも新しい写真のサムネイルが載るので、大変重宝しています。たーせるさん本当にありがとうございました。

※あくまで利用者の感想であり、製品の効能を保証するものではありません。

実際、サークル専用の Twitter アカウントを作ればそういう使い方も可能だし、更新しやすい仕組みを整備しておけば、後任の管理者に業務を引き継ぐ事も容易になる。

さっそく製作開始。

まずは Download から SmoothDivScroll-1.1.zip を落として解凍し、中に入っている js、css、images フォルダを、以前作った作業用フォルダ（x:\xampp\htdocs\test\）に配置する。

アーカイバによっては、「.」がいっぱい入っているファイルの解凍に失敗する事がある。念のため、js フォルダの中に

jquery.js
jquery.scrollTo.js
jquery.scrollTo-min.js
jquery.smoothDivScroll-1.1.js
jquery.smoothDivScroll-1.1-min.js
jquery.ui.widget.js

が揃っている事を確認しておこう。

さらに、作業用フォルダにからっぽの HTML ファイルを作る。この時点で、作業フォルダの中身はこうなっているはずだ。

ここで HTML を参考にするため、Smooth Div Scroll の Basic Demo のソースコードをちょっと見てみる事にした。

<body>

 <div id="makeMeScrollable">
  <div class="scrollingHotSpotLeft"></div>
  <div class="scrollingHotSpotRight"></div>
  <div class="scrollWrapper">
   <div class="scrollableArea">

    <img src="images/demo/field.jpg" alt="Demo image" width="497" height="330" />
    <img src="images/demo/gnome.jpg" alt="Demo image" width="496" height="330" />
    <img src="images/demo/pencils.jpg" alt="Demo image" width="496" height="330" />
    <img src="images/demo/golf.jpg" alt="Demo image" width="366" height="330" />
    <img src="images/demo/river.jpg" alt="Demo image" width="496" height="330" />
    <img src="images/demo/train.jpg" alt="Demo image" width="440" height="330" />
    <img src="images/demo/leaf.jpg" alt="Demo image" width="496" height="330" />
    <img src="images/demo/dog.jpg" alt="Demo image" width="497" height="330"/>
   </div>

  </div>
 </div>

</body>

ふむふむ。どうやら <img> の画像のソース諸々を、TwitPic の新着画像に書き換えればよさそうだ。

TwitPic の新着 RSS の URL は、http://twitpic.com/photos/user_name/feed.rss である。 user_name のところには、自分のユーザ名（ぼくだったら tercel_s）を入れる。

実際の RSS のソースはこんな感じである。

<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
  <atom:link href="http://twitpic.com/photos/tercel_s/feed.rss" rel="self" type="application/rss+xml" />
    <title>tercel_s's Photo Stream</title>
    <link>http://twitpic.com/photos/tercel_s</link>
    <description>tercel_s's updates</description>
    <language>en-us</language>
    <ttl>40</ttl>

    <item>
      <title><![CDATA[tercel_s: http://twitpic.com/40pgb4 万代口から出る(´ー｀*)]]></title>
      <description><![CDATA[tercel_s: 万代口から出る(´ー｀*)<br><a href="http://twitpic.com/40pgb4"><img src="http://twitpic.com/show/thumb/40pgb4.jpg"></a>]]></description>
      <pubDate>Thu, 17 Feb 2011 12:09:27 +0000</pubDate>
      <guid>http://twitpic.com/40pgb4</guid>
      <link>http://twitpic.com/40pgb4</link>
    </item>

    <item>
      <title><![CDATA[tercel_s: http://twitpic.com/3wd83j そんなことよりラーメンだ∩( ・ω・)∩]]></title>
      <description><![CDATA[tercel_s: そんなことよりラーメンだ∩( ・ω・)∩<br><a href="http://twitpic.com/3wd83j"><img src="http://twitpic.com/show/thumb/3wd83j.jpg"></a>]]></description>
      <pubDate>Fri, 04 Feb 2011 11:35:39 +0000</pubDate>
      <guid>http://twitpic.com/3wd83j</guid>
      <link>http://twitpic.com/3wd83j</link>
    </item>

    <item>
      <title><![CDATA[tercel_s: http://twitpic.com/3voy70 消えるボールペンを てにいれた！]]></title>
      <description><![CDATA[tercel_s: 消えるボールペンを てにいれた！<br><a href="http://twitpic.com/3voy70"><img src="http://twitpic.com/show/thumb/3voy70.jpg"></a>]]></description>
      <pubDate>Wed, 02 Feb 2011 07:24:15 +0000</pubDate>
      <guid>http://twitpic.com/3voy70</guid>
      <link>http://twitpic.com/3voy70</link>
    </item>

    （中略）

   </channel>
</rss>

ご覧のとおり、RSS はちゃんと構造化された文書なので、機械的に制御しやすい。この場合は、 <item> ～ </item> の中に 1 件の投稿情報が格納されている事が判る。しかもありがたい事に、<description> の中にはサムネイルを表示するための <img> タグが丸ごと入っている。

したがって今回は本格的な XML パーサを使用せず、正規表現を使って RSS からめあての画像の URL だけを抽出すれば良さそうだ。

ちょいと冗長だが、こんなコードになると思う。

<?php
    # RSS の URL を指定
    $rssUrl = 'http://twitpic.com/photos/tercel_s/feed.rss';

    # RSS を開くよ！
    $fp = fopen($rssUrl, 'r');

    # ファイルから一気に読み込み、$rss に格納
    $rss = '';
    while(!feof($fp)) $rss .= fgets($fp);

    # 正規表現を使って画像の URL を取り出す
    preg_match_all('/\<img\s+.*?src=[\"|\'](.*?)[\"|\'].*?\>/is', $rss, $found);
     
    # <img>タグを生成
    foreach($found[1] as $img) echo '<img src='.$img.' width=150 height=150 />';
?>

これを埋め込んだ HTML ファイルは以下の通り。ほとんど Basic Demo のソースそのままである。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Basic demo - jQuery Smooth Div Scroll</title>
 
 <!-- the CSS for Smooth Div Scroll -->
 <link rel="Stylesheet" type="text/css" href="css/smoothDivScroll.css" />
 
 <!-- jQuery library - I get it from Google API's -->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
 <!-- jQuery UI widget factory -->

 <!-- You can download it as a part of jQuery UI Core
   http://jqueryui.com/download -->
 <script src="js/jquery.ui.widget.js" type="text/javascript"></script>
 
 <!-- Smooth Div Scroll 1.1 - minified for faster loading-->
 <script src="js/jquery.smoothDivScroll-1.1-min.js" type="text/javascript"></script>

 <script type="text/javascript">
  // Initialize the plugin with no custom options
  $(function() {
   $("div#makeMeScrollable").smoothDivScroll({});
  });
 </script>

 <!-- Styles for my specific scrolling content -->

 <style type="text/css">
  #makeMeScrollable
  {
   width:100%;
   height: 150px; <!-- 変更！ -->
   position: relative;
  }
  
  #makeMeScrollable div.scrollableArea *
  {
   position: relative;
   float: left;
   margin: 0;
   padding: 0;
  }
 </style>
 
</head>

<body>

 <div id="makeMeScrollable">
  <div class="scrollingHotSpotLeft"></div>
  <div class="scrollingHotSpotRight"></div>
  <div class="scrollWrapper">
   <div class="scrollableArea">
    <?php
     # RSS の URL を指定
     $rssUrl = 'http://twitpic.com/photos/tercel_s/feed.rss';
     
     # RSS を開くよ！
     $fp = fopen($rssUrl, 'r');
     
     # ファイルから一気に読み込み、$rss に格納
     $rss = '';
     while(!feof($fp)) $rss .= fgets($fp);
     
     # 正規表現を使って画像の URL を取り出す
     preg_match_all('/\<img\s+.*?src=[\"|\'](.*?)[\"|\'].*?\>/is', $rss, $found);
     
     # <img>タグを生成
     foreach($found[1] as $img) echo '<img src='.$img.' width=150 height=150 />';
    ?>
   </div>

  </div>
 </div>

</body>
</html>

これでよし。

Safari を起動してみる。

おー！うごくうごく。

本来は、実際に動作するサンプルを載せたいところだが、ぼくが借りているサーバは CGI が使えない（お金が掛かるので契約時に「要らない」と言った）ので、残念ながらお見せする事ができない。

しかし、割と簡単に作れるので、環境がととのっている人は試すとよいだろう。

2011/02/20

魔法使いの弟子（その8-4） ～PHP×jQuery～

魔法使いの弟子（その8-4）～PHP×jQuery～