2011/02/20

魔法使いの弟子（その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 のソースコードをちょっと見てみる事にした。
view plainprint?
  1. <body>  
  2.   
  3.  <div id="makeMeScrollable">  
  4.   <div class="scrollingHotSpotLeft"></div>  
  5.   <div class="scrollingHotSpotRight"></div>  
  6.   <div class="scrollWrapper">  
  7.    <div class="scrollableArea">  
  8.   
  9.     <img src="images/demo/field.jpg" alt="Demo image" width="497" height="330" />  
  10.     <img src="images/demo/gnome.jpg" alt="Demo image" width="496" height="330" />  
  11.     <img src="images/demo/pencils.jpg" alt="Demo image" width="496" height="330" />  
  12.     <img src="images/demo/golf.jpg" alt="Demo image" width="366" height="330" />  
  13.     <img src="images/demo/river.jpg" alt="Demo image" width="496" height="330" />  
  14.     <img src="images/demo/train.jpg" alt="Demo image" width="440" height="330" />  
  15.     <img src="images/demo/leaf.jpg" alt="Demo image" width="496" height="330" />  
  16.     <img src="images/demo/dog.jpg" alt="Demo image" width="497" height="330"/>  
  17.    </div>  
  18.   
  19.   </div>  
  20.  </div>  
  21.   
  22. </body>  
ふむふむ。どうやら <img> の画像のソース諸々を、TwitPic の新着画像に書き換えればよさそうだ。


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

実際の RSS のソースはこんな感じである。
view plainprint?
  1. <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">  
  2.   <channel>  
  3.   <atom:link href="http://twitpic.com/photos/tercel_s/feed.rss" rel="self" type="application/rss+xml" />  
  4.     <title>tercel_s's Photo Stream</title>  
  5.     <link>http://twitpic.com/photos/tercel_s</link>  
  6.     <description>tercel_s's updates</description>  
  7.     <language>en-us</language>  
  8.     <ttl>40</ttl>  
  9.   
  10.     <item>  
  11.       <title><![CDATA[tercel_s: http://twitpic.com/40pgb4 万代口から出る(´ー｀*)]]></title>  
  12.       <description><![CDATA[tercel_s: 万代口から出る(´ー｀*) 
  13. <a href="http://twitpic.com/40pgb4"><img src="http://twitpic.com/show/thumb/40pgb4.jpg"></a>]]></description>  
  14.       <pubDate>Thu, 17 Feb 2011 12:09:27 +0000</pubDate>  
  15.       <guid>http://twitpic.com/40pgb4</guid>  
  16.       <link>http://twitpic.com/40pgb4</link>  
  17.     </item>  
  18.   
  19.     <item>  
  20.       <title><![CDATA[tercel_s: http://twitpic.com/3wd83j そんなことよりラーメンだ∩( ・ω・)∩]]></title>  
  21.       <description><![CDATA[tercel_s: そんなことよりラーメンだ∩( ・ω・)∩ 
  22. <a href="http://twitpic.com/3wd83j"><img src="http://twitpic.com/show/thumb/3wd83j.jpg"></a>]]></description>  
  23.       <pubDate>Fri, 04 Feb 2011 11:35:39 +0000</pubDate>  
  24.       <guid>http://twitpic.com/3wd83j</guid>  
  25.       <link>http://twitpic.com/3wd83j</link>  
  26.     </item>  
  27.   
  28.     <item>  
  29.       <title><![CDATA[tercel_s: http://twitpic.com/3voy70 消えるボールペンを てにいれた！]]></title>  
  30.       <description><![CDATA[tercel_s: 消えるボールペンを てにいれた！ 
  31. <a href="http://twitpic.com/3voy70"><img src="http://twitpic.com/show/thumb/3voy70.jpg"></a>]]></description>  
  32.       <pubDate>Wed, 02 Feb 2011 07:24:15 +0000</pubDate>  
  33.       <guid>http://twitpic.com/3voy70</guid>  
  34.       <link>http://twitpic.com/3voy70</link>  
  35.     </item>  
  36.   
  37.     （中略）  
  38.   
  39.    </channel>  
  40. </rss>  
ご覧のとおり、RSS はちゃんと構造化された文書なので、機械的に制御しやすい。この場合は、 <item> ～ </item> の中に 1 件の投稿情報が格納されている事が判る。しかもありがたい事に、<description> の中にはサムネイルを表示するための <img> タグが丸ごと入っている。

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

ちょいと冗長だが、こんなコードになると思う。
view plainprint?
  1. <?php  
  2.     # RSS の URL を指定  
  3.     $rssUrl = 'http://twitpic.com/photos/tercel_s/feed.rss';  
  4.   
  5.     # RSS を開くよ！  
  6.     $fp = fopen($rssUrl, 'r');  
  7.   
  8.     # ファイルから一気に読み込み、$rss に格納  
  9.     $rss = '';  
  10.     while(!feof($fp)) $rss .= fgets($fp);  
  11.   
  12.     # 正規表現を使って画像の URL を取り出す  
  13.     preg_match_all('/\<img\s+.*?src=[\"|\'](.*?)[\"|\'].*?\>/is', $rss, $found);  
  14.        
  15.     # <img>タグを生成  
  16.     foreach($found[1] as $img) echo '<img src='.$img.' width=150 height=150 />';  
  17. ?>  

これを埋め込んだ HTML ファイルは以下の通り。ほとんど Basic Demo のソースそのままである。
view plainprint?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.  <title>Basic demo - jQuery Smooth Div Scroll</title>  
  5.    
  6.  <!-- the CSS for Smooth Div Scroll -->  
  7.  <link rel="Stylesheet" type="text/css" href="css/smoothDivScroll.css" />  
  8.    
  9.  <!-- jQuery library - I get it from Google API's -->  
  10.  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>  
  11.  <!-- jQuery UI widget factory -->  
  12.   
  13.  <!-- You can download it as a part of jQuery UI Core  
  14.    http://jqueryui.com/download -->  
  15.  <script src="js/jquery.ui.widget.js" type="text/javascript"></script>  
  16.    
  17.  <!-- Smooth Div Scroll 1.1 - minified for faster loading-->  
  18.  <script src="js/jquery.smoothDivScroll-1.1-min.js" type="text/javascript"></script>  
  19.   
  20.  <script type="text/javascript">  
  21.   // Initialize the plugin with no custom options  
  22.   $(function() {  
  23.    $("div#makeMeScrollable").smoothDivScroll({});  
  24.   });  
  25.  </script>  
  26.   
  27.  <!-- Styles for my specific scrolling content -->  
  28.   
  29.  <style type="text/css">  
  30.   #makeMeScrollable  
  31.   {  
  32.    width:100%;  
  33.    height: 150px; <!-- 変更！ -->  
  34.    position: relative;  
  35.   }  
  36.     
  37.   #makeMeScrollable div.scrollableArea *  
  38.   {  
  39.    position: relative;  
  40.    float: left;  
  41.    margin: 0;  
  42.    padding: 0;  
  43.   }  
  44.  </style>  
  45.    
  46. </head>  
  47.   
  48. <body>  
  49.   
  50.  <div id="makeMeScrollable">  
  51.   <div class="scrollingHotSpotLeft"></div>  
  52.   <div class="scrollingHotSpotRight"></div>  
  53.   <div class="scrollWrapper">  
  54.    <div class="scrollableArea">  
  55.     <?php  
  56.      # RSS の URL を指定  
  57.      $rssUrl = 'http://twitpic.com/photos/tercel_s/feed.rss';  
  58.        
  59.      # RSS を開くよ！  
  60.      $fp = fopen($rssUrl, 'r');  
  61.        
  62.      # ファイルから一気に読み込み、$rss に格納  
  63.      $rss = '';  
  64.      while(!feof($fp)) $rss .= fgets($fp);  
  65.        
  66.      # 正規表現を使って画像の URL を取り出す  
  67.      preg_match_all('/\<img\s+.*?src=[\"|\'](.*?)[\"|\'].*?\>/is', $rss, $found);  
  68.        
  69.      # <img>タグを生成  
  70.      foreach($found[1] as $img) echo '<img src='.$img.' width=150 height=150 />';  
  71.     ?>  
  72.    </div>  
  73.   
  74.   </div>  
  75.  </div>  
  76.   
  77. </body>  
  78. </html>  

これでよし。


Safari を起動してみる。


おー！ うごくうごく。

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

しかし、割と簡単に作れるので、環境がととのっている人は試すとよいだろう。
時刻: 15:31
ラベル: , ,