tumblr.の写真をブログにサムネイルで表示でｷﾀ━━━━━━(ﾟ∀ﾟ)━━━━━━ !!!!
過去エントリー（tumblr.はじめました。iPhone風デザインで…
）で、tumblr.（タンブラー）を始めたことをお話ししましたが、結構はまっています。
ヘッダー下の右側に、tumblr.のアイコンを設置したのもお話ししたのですが、ちょっとこれだけでは満足できずに、ブログにtumblr.にアップした写真のサムネイルを表示させたくなっちゃいました。
で、Googleで「tumblr ブログ 表示」で検索したみたら、ずばりのWEBサイトがありました。それは、
うっちーさん（面識はないのですが、とても勉強になるブログです（●＾o＾●））が運営されている「BananaBlog」です。
Tumblr の写真をブログに表示してみる｜BnananaBlog
→http://www.banana21.com/blog/archives/0807302005.html
このなかでは、ブログツール（パーツかな？）で探していらっしゃって、ブログパーツなら、JavaScriptをコピペするだけですので、簡単だなと思いました。そこで、紹介されていたのは、次の2つです。
TumblrCube
→http://www.blog-parts.com/link/3170.htm
Tumblrss
→http://blog.creamu.com/mt/2008/01/tumblrrsstumblrss.html
うっちーさんとほとんど同じ意見なのですが、TumblrCubeは、クライアント側のPCスペックが高くないとカクカクになってしまいます。また、わたしのブログには、デザイン的に浮いてしまいそうでした。
Tumblrssは、重くはないのですが、写真限定ではなく、tumblr.にアップした全てのエントリーを拾って表示したり、例えば、写真の場合、サイズをブログでの表示に合わせて変更（サムネイルに）できないという欠点がありました。
で、これも二番煎じになるのですが、うっちーさんが探していただいていた、tumblr.が公開しているTumblrAPIを使った、PHPがあったので、これを使わせていただくことにしました（プログラム（スクリプト）をいじるのは、久しぶりだったので、不安でしたが･･･。なんとかかんとか。）。
Display photos from Tumblr (using JSON method) | drupal.org
→http://drupal.org/node/277619
PHP5用のスクリプトなので、PHP4しか使えない環境では、変更が必要だそうです。
で、実際に導入するにあたって、PHPが動くサーバが必要になりました。
これまでは、無料のNINJA、FC2を使っていたのですが、残念ながらこのサービスではPHPは利用不可でした。
で、無料でPHPが使えるサービスを探したのですが、なかなか見つからず、PHPが使えても、上記のスクリプトでつかっているコマンドを実行できるモジュール（cHTML、JSON）が入っていなかったりで、無料では断念しました。
で、もうせっかくなので（iBLOGのアーカイブやお勧めブログを掲載した「iBLOG iNDEX 」もあるので）、有料でも格安のレンタルサーバを探すことにして、さくらレンタルサーバとロリポップ！（LOLIPOP）に行き着きました。最終的には、価格（さくらレンタルサーバ：500円/月、ロリポップ！：263円/月（ともに税込））から、ロリポップ！にしました。両サービスとも、試用できるので、もし、導入をお考えの方は、お試しください。
このことで、わたしの重い重いブログも少し、表示が速くなったような気が…します。
さくらレンタルサーバ
→http://www.sakura.ne.jp/
【お勧め】ロリポップ！
→http://lolipop.jp/?mode=home
Display photos from Tumblr (using JSON method)は、通常はそのまま、HTMLの<body>タグ内にコピペ（ただし、tumblr.のURLのサブドメイン部分は、ご自身のものに変更が必要です。）するだけで問題ないのですが、ただ、写真エントリーのdiscription（概要や説明）で<a>タグを使っているのでPHPのecho文を少し変えないと、変てこなHTMLが書きだされてしまします。
変更箇所です。ご参考までに。
変更前
（Display photos from Tumblr (using JSON method) | drupal.org、URL：http://drupal.org/node/277619より引用）
変更後
問題点は、$content[$i]['photo-caption']で、tumblr.のdiscription内にある<a>タグも拾ってくること。これを使っている、属性altとtitleをさくっと消しちゃったわけです。
表示させる画像も<img>タグ内の属性widthで60pxにしました。
説明がかなり長くなりましたが、こんな感じになりました。
ここで、サムネイル写真をクリックすると、tumblr.の該当写真のページにリンクさせています。ぜひ、クリックして遊びにきてください。
同様に、
でも、tumblr.のトップページにリンクします。
その左隣に、スライドショーへのリンクバナー
も設置していますが、こちらは、現在工事中なので、完成したら、またエントリーでお知らせしますね。
同じことをしたい場合、アメブロの場合、ヒントとして<iframe>や属性position（HTML、CSSいずれでも可能です。）を併用することで、こんな感じで、自由に配置できます。
初心者の方には、少々難しいと思いますが、お気に召した方がいらっしゃいましたら、がんばって、やってみてください。
最後に、ちょっと用語解説。
PHPとは 【PHP : Hypertext Preprocessor】 - 意味・解説 ： IT用語辞典
→http://e-words.jp/w/PHP.html
スクリプトとは 【script】 - 意味・解説 ： IT用語辞典
→http://e-words.jp/w/E382B9E382AFE383AAE38397E38388.html
ヘッダー下の右側に、tumblr.のアイコンを設置したのもお話ししたのですが、ちょっとこれだけでは満足できずに、ブログにtumblr.にアップした写真のサムネイルを表示させたくなっちゃいました。
で、Googleで「tumblr ブログ 表示」で検索したみたら、ずばりのWEBサイトがありました。それは、
うっちーさん（面識はないのですが、とても勉強になるブログです（●＾o＾●））が運営されている「BananaBlog」です。
Tumblr の写真をブログに表示してみる｜BnananaBlog
→http://www.banana21.com/blog/archives/0807302005.html
このなかでは、ブログツール（パーツかな？）で探していらっしゃって、ブログパーツなら、JavaScriptをコピペするだけですので、簡単だなと思いました。そこで、紹介されていたのは、次の2つです。
TumblrCube
→http://www.blog-parts.com/link/3170.htm
Tumblrss
→http://blog.creamu.com/mt/2008/01/tumblrrsstumblrss.html
うっちーさんとほとんど同じ意見なのですが、TumblrCubeは、クライアント側のPCスペックが高くないとカクカクになってしまいます。また、わたしのブログには、デザイン的に浮いてしまいそうでした。
Tumblrssは、重くはないのですが、写真限定ではなく、tumblr.にアップした全てのエントリーを拾って表示したり、例えば、写真の場合、サイズをブログでの表示に合わせて変更（サムネイルに）できないという欠点がありました。
で、これも二番煎じになるのですが、うっちーさんが探していただいていた、tumblr.が公開しているTumblrAPIを使った、PHPがあったので、これを使わせていただくことにしました（プログラム（スクリプト）をいじるのは、久しぶりだったので、不安でしたが･･･。なんとかかんとか。）。
Display photos from Tumblr (using JSON method) | drupal.org
→http://drupal.org/node/277619
PHP5用のスクリプトなので、PHP4しか使えない環境では、変更が必要だそうです。
で、実際に導入するにあたって、PHPが動くサーバが必要になりました。
これまでは、無料のNINJA、FC2を使っていたのですが、残念ながらこのサービスではPHPは利用不可でした。
で、無料でPHPが使えるサービスを探したのですが、なかなか見つからず、PHPが使えても、上記のスクリプトでつかっているコマンドを実行できるモジュール（cHTML、JSON）が入っていなかったりで、無料では断念しました。
で、もうせっかくなので（iBLOGのアーカイブやお勧めブログを掲載した「iBLOG iNDEX 」もあるので）、有料でも格安のレンタルサーバを探すことにして、さくらレンタルサーバとロリポップ！（LOLIPOP）に行き着きました。最終的には、価格（さくらレンタルサーバ：500円/月、ロリポップ！：263円/月（ともに税込））から、ロリポップ！にしました。両サービスとも、試用できるので、もし、導入をお考えの方は、お試しください。
このことで、わたしの重い重いブログも少し、表示が速くなったような気が…します。
さくらレンタルサーバ
→http://www.sakura.ne.jp/
【お勧め】ロリポップ！
→http://lolipop.jp/?mode=home
Display photos from Tumblr (using JSON method)は、通常はそのまま、HTMLの<body>タグ内にコピペ（ただし、tumblr.のURLのサブドメイン部分は、ご自身のものに変更が必要です。）するだけで問題ないのですが、ただ、写真エントリーのdiscription（概要や説明）で<a>タグを使っているのでPHPのecho文を少し変えないと、変てこなHTMLが書きだされてしまします。
変更箇所です。ご参考までに。
変更前
| for ($i=0;$i<=$item;$i++) { if ($content[$i]['type'] == 'photo') { echo '<a href="' . $content[$i]['url'] . '"><img src="' . $content[$i][$type] . '" width="75" hspace="3" alt="' . $content[$i]['photo-caption'] . '" title="' . $content[$i]['photo-caption'] . '" /></a>'; } } |
変更後
| for ($i=0;$i<=$item;$i++) { if ($content[$i]['type'] == 'photo') { echo '<a href="' . $content[$i]['url'] . '"><img src="' . $content[$i][$type] . '" width="75" hspace="3" /></a>'; } } |
問題点は、$content[$i]['photo-caption']で、tumblr.のdiscription内にある<a>タグも拾ってくること。これを使っている、属性altとtitleをさくっと消しちゃったわけです。
表示させる画像も<img>タグ内の属性widthで60pxにしました。
説明がかなり長くなりましたが、こんな感じになりました。
ここで、サムネイル写真をクリックすると、tumblr.の該当写真のページにリンクさせています。ぜひ、クリックして遊びにきてください。
同様に、
でも、tumblr.のトップページにリンクします。
その左隣に、スライドショーへのリンクバナー
も設置していますが、こちらは、現在工事中なので、完成したら、またエントリーでお知らせしますね。
同じことをしたい場合、アメブロの場合、ヒントとして<iframe>や属性position（HTML、CSSいずれでも可能です。）を併用することで、こんな感じで、自由に配置できます。
初心者の方には、少々難しいと思いますが、お気に召した方がいらっしゃいましたら、がんばって、やってみてください。
最後に、ちょっと用語解説。
PHPとは 【PHP : Hypertext Preprocessor】 - 意味・解説 ： IT用語辞典
→http://e-words.jp/w/PHP.html
スクリプトとは 【script】 - 意味・解説 ： IT用語辞典
→http://e-words.jp/w/E382B9E382AFE383AAE38397E38388.html