うはw 随分悩んだけど、やっとMagpieRSSから画像をGet出来るようになった!!

先日このブログで紹介したアンテナサイトが少しリニューアルされました!!
トップページのアンテナはテキストとファビコンのみのリスト表示なんだけど、画像つきのページも作ったんだ

やっと画像表示ができるようになったのが嬉しかったので、少しだけサイトタイトルも変更しました!!

残念なアンテナ(´・ω・`)⇒⇒⇒⇒『とても残念なアンテナ(´・ω・`)』

サイト上部にナビゲーションリンクがあるので「Image」ってボタンをクリックすれば画像つきのRSSリストが見られます

             (ヽ三/) ))
         __  ( i)))
        /⌒  ⌒\ \
      /( ●)  (●)\ )
    ./:::::: ⌒(__人__)⌒::::\    できたおww
    |    (⌒)|r┬-|     |
    ,┌、-、!.~〈`ー´/    _/
    | | | |  __ヽ、    /
    レレ’、ノ‐´   ̄〉  |
    `ー—‐一’ ̄

もともと画像つきのアンテナサイトを作りたかったんだけど、Magpieから画像をゲットする方法は解ってたんだけど、取得した他サイトさんたちのRSS情報と画像が一致しなくて困ってたんだよね・・・

例えば、同じ画像ばかりが表示されるようになったり、新着の画像が取得できるようになれば今度はリンクのアンカーテキストが全部同じになったりの繰り返しで「新着記事のアンカーテキストに新着の画像を添える」ってのがなかなか実現しなかったんだよね・・・

・・・で、イロイロ苦心した挙句やっと正しく新着リンクと新着画像を表示することができるようになりました!!

ちなみに画像を取得するためのPHPソースは下記の通り

./ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
.| //画像を取得
.|  if(preg_match(‘|src=”(.*?).jpg”|i’, $values[content][encoded], $match)){
.|  $img = ‘<img src=”‘.$match[1].’.jpg” width=”画像サイズ”
.|  align=”right” class=”” />’;
.|  } else {
.|  $img ='<img src=”NoImageの画像URL” width=”画像サイズ”
.|  align=”right” class=”” />’;
.|  }
.\
   ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄∨ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄∨ ̄ ̄
 
             /  ̄ \   良いこのみんな!
            | , ‘⌒ヽ |   やれば出来るんだよ!!
            | |    | |
.               | ヽ_/ .|                        / ̄ \  うむ
.            ト、 ____,.イ                     | __∧_ |
.        ___ ノ  \ / l                       |ヽ  /|
.     /    `ヽr–、ー、,,└-‐―- 、                 ||/\| |
    /        /ニニ\          \                ト、___ ,イ
.    {         ,  `⌒` <\  ,ィ―’⌒ヽ.`ー 、          /\.ノ ゙、 /└-‐―-、
    ’,      /        `Y´     ./⌒ヽ ヘ.     /  ̄  ー 、, -‐/ニヽ    \
     ヽ、                 /    \}   /             /二ミ/      i
.     | {> 、   `ー–        /      ヽ  ./ / ̄7 ̄ ̄ ̄`´         .|
.      | V  `> 、____    , く `ー’   ノ /  ´⌒ヽ’              /  /
.       |  V         `ー ‘  `7ー――’   {      \ヽ       ./   ∧
     |    \             /|      〈      _> 、__/    /.ハ
      |      |              /.|      `ー―<´ { i  }        /  ハ
.    |    /―― ‘  ̄ ̄ ̄`ー/   |        | V ∧ –!–        /\V  ハ
.     |     / ̄ ̄ ̄ ̄ ̄ ̄ ̄`ヽ  |         |V ./  〉 { !   }      〈  \V ハ
.      |   ./             ハ  |          | /  /           ハ   V ハ
.      |  /, -―- 、           }  .|          し’  /           ハ    \リ
.      | ./´      \      /^\.|            /  ヽ             ハ

このソースはMagpieRSSのキャッシュの中から画像のURLをPreg_matchで探して、Jpeg画像URLがヒットしたら「img src=」に置き換えて、ヒットしなければ適当な画像(NoImage)を表示する。

後は表示したい部分に『$img』を挿入して画像を表示って感じ。

Preg_matchで画像の拡張子を指定しなければ、もっと幅広く画像収集できるのかもしれないけど、それだと広告画像まで拾ってしまうので・・・

あと、サイトごとに画像サイズがバラバラなので取得した画像の横幅は統一して、縦幅はCSSでトリミングしました。

もう少し考えてjQueryとかでお洒落に画像トリミングしても良かったんだけど、CSSの方が挙動が軽そうなので一旦これで画像処理の悩みはクローズ!!
良かったら出来上がりを見てください!!
とても残念なアンテナ(´・ω・`)|画像つき2chまとめブログの新着情報
どお?

        /            \    \  \
        /  /     /     ’,   \    ヽ  丶
     /    ‘     ,         l   ヽヽ    V   ヽ
      /    |l    |l      | |    ‘,i|    |    ’,
    ,’    ||    ||       l/     }| /⌒V       !
     |    l ||   ノ 从_,.≧=,≠= ミx. _ ノj/  /     | どうですか?
     | {   ー-=≦∠´     /んィハ`Y V  /ノ     \
    い、  ヽ/んィハ     {o::゚::::r’ }ーレ'”´        ヽ
     \\/ { {o::゚::r’     乂こソぅ/            ’,
       |  ハ cゞニン ,      ‘ ‘ ‘/                 ‘,
      /  : :} ‘ ‘ ‘        /  . : : : . .       . :    l
       /  :_:‘.    r~ヘ  / . : : : : : : : : : : : : : : : : : :/:   |
     〃    `ヽ  _/ ̄\  /. -――- 、: : : : : : : : :/: : : /
    /       くノ ̄ ̄ Y´        丶—-‐’´.: : : :/
    ヽ : :    /´ ̄ ̄ /            \ : : : : :/
      \: : : : 「 ̄`   ,/              ヽ-‐’´
        丶-‐ヘ\ _/|               ‘,
              `i`¨   |                 |
            |     |                 |
              /}  ー=’j    /       /   |

これで、一通りなっとくなのでもう暫く運営してみて「画像表示あり」と「画像表示なし」のどちらをトップページにするのか見当してみましょうかね?



いいよね?

最後まで私の拙いエントリーを読んでいただいてありがとうございます!
もしもこの記事が少しでもあなたのお役に立てたなら、ぜひ「いいね!」していってください。
また何か新しい発見をお届けできるかもしれません。

何か見つかるかもね

関連記事

コメント

※コメントは承認制ですので、表示されるまで時間がかかる場合があります。
  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

*

オススメ鯖


高速かつ高機能で、しかも安定性抜群!!
私も利用させていただいてますわ

My Tumblr

    http://deltablog01.tumblr.com/post/77273138691http://deltablog01.tumblr.com/post/76325997079http://deltablog01.tumblr.com/post/75899137417http://deltablog01.tumblr.com/post/75253777050

BlogParts

あわせて読みたい

Share Me! Please!!!

このエントリーをはてなブックマークに追加
ページ上部へ戻る