いった要望があがることがあります。そのブログサービスが提供するRSSを取得して表示する、というのが簡単で一般的かと思います。以前、アメーバブログのRSSを取得して情報を載せるところまでは問題なかったのですが、記事の中にある最初の画像をサムネイルとして出したい!といった時に詰まったので、RSSの取得から画像を表示するところまでの工程を共有したいと思います。掲載しているソースコードにある、正規表現の一部がWPでの投稿時消えてしまっている箇所があり、そのままではうまく動かない場合があります。正しいコードは、サンプルコードをご確認下さい。サンプルファイルをダウンロードまずは動作確認からRSS取得サンプルサンプルブログ:http://ameblo.jp/webdesign-dackel/サンプルブログの記事を取得して、最新の記事を画像付きで表示する、といったものとなっています。実装の流れ実装は下記のような流れになります。画像を<img>タグとして表示するというシンプルなものですが、アメーバブログの画像をそのまま<img>タグとして出力すると、何かの制限がかかっているらしく、画像が壊れた様な表示になってしまいます。試していると、同じ画像でもブラウザで直接URLを叩くと画像が表示されることがわかったので、PHPのget_flie_contents()などでリソースを取得すれば...、と思い試した結果表示が出来ました。ブログのRSSを取得まずは実装したメインの関数から。$results;}RSSを取得する時に使用するsimplexml_load_file()ですが、エラーが出てしまい使えませんでしたので、一度file_get_contents()で文字列として取得、XMLへ変換するという方法で実装しました。ほとんどの場合ブログRSSへのパスはhttp://から始まるかと思います。単純にget_file_contents()を使ってしまうと「allow_url_fopen」の設定がOffになっているとエラーが出てしまいます。(セキュリティ的にallow_url_fopenはOffにするのが推奨されます。)なので、cUrlを使った下記の関数を代替として使用しました。file_get_contentsの代替関数。Mach3.laBlog広告は表示させないRSSを取得すると、記事タイトルが「PR:」で始まる広告が入ってきます。これは記事の一覧を表示する時に不要なので取得結果から除外します。continue;}記事中の最初の画像を取得、表示用のPHPへ値を渡す直接<img>タグを出力しても制限がかかっているのか表示されなかったので、レスポンスを返すPHPを用意して、そこへ画像ファイルのパスを値として渡すようにしています。上記で渡ってきた画像ファイルのパスから、画像のレスポンスを返すためのphpを別途用意します。"Error";exit();取得した情報をHTMLへ出力するここまでくれば、最初に書いたget_ameba_rss()を使って情報を取得して、配列を回してHTMLを出力していきます。?></div>ここまでで、サンプルと同じ動作になっています。なんかごちゃごちゃと書いてしまい分かりづらい箇所があるかと思いましたのでサンプルと、サンプルファイル一式をダウンロード出来るようにしました。RSS取得サンプルサンプルファイルをダウンロードところどころ説明を省いた箇所なんかもありますが、分かりづらい箇所はサンプルファイルを追ってみると良いかもです。ファイルを一度取得して、書き出し直すという泥臭いことをやっているため、なんだかスッキリとしませんがとりあえず上記の方法で実現が出来たので今回はよしとしました。冒頭に正規表現部分について、注意書きを追加しました。追記:2014年9月29日Wodpressでの組み込んだ際に表示が出来ないよ、とのコメントを頂きましたので、Wordpressへ組み込む際の変更箇所について追記いたします。get_ameba_rss()get_ameba_rss()の中で指定している、noimage.jpgとresponse.phpへのパスをWP用に変更することで解決できます。$results;}response.phpあともう一点、response.phpの最上部でfunctions.phpを読み込んでいる箇所を下記のようにwp-load.phpを読み込むように変更します。"/../../../wp-load.php");例としてあげていますが、お使いのディレクトリ構成に合わせてパスを調整してください。ちなみに、wp-load.phpはWordPressの一番上の階層、wp-config.phpなどと同じ階層にあります。追記:2015年5月29日コメントよりご指摘いただき、response.php内でwp-load.phpを読み込む必要がありましたので記事を修正しました。追記:2015年10月16日コメントよりご指摘いただいた、記事中の最初の画像を取得する部分を修正しています。2014はじめまして。記事を読ませていただきました。アメブロの画像を表示したかったので、参考になりました。ひとつお聞きしたいのですが、これはwordpressへの組み込みも可能でしょうか。画像が表示されません。不勉強で申し訳ありませんが、ご教授いただけると幸いです。パスが通っていないのかなぁと思いました。こちらはローカル環境でしか確認出来ていませんが、パスを変更することで表示できることを確認しました。変更箇所については記事に追記させていただきました。2015はじめまして。省略~のエラーになってしまいます。){なのですが、phpはほとんどできないので原因がわかりません。私なりにこの構文をいじってみましたがシンタックスエラーはなくなっても画像がnoimageが表示されます。お忙しいところ恐れ入りますが、ご教授頂けたら幸いです。2015たびたび、すみません。該当行が投稿したら変わってしまいました。2015くろひげさんコメントありがとうございます!返信が遅くなってしまって申し訳ありません。シンタックスエラーの件は、解決出来たとのことでよかったです。画像がnoimageになってしまうとのことで、27行目にある$matchesの中身が正しく入っているでしょうか?例えば、var_dump($matches);のようにすることで、正規表現でマッチした中身が正しく入っているか確認することが出来ます。ここに値が入っていないとなるとまた別の箇所が原因になっていることも考えられますので、一度確認してみてまたコメント頂けたらと思います。返信ありがとうございます。var_dump($matches);を27行目の次の行にいれましたが、何も表示されませんでした。ちなみにシンタックスエラーは29行目preg_matchの[‘”]を両方とも消すとエラーはなくなります。お忙しいところすみません。2015くろひげさん何も表示されませんでしたか...。すると、27行目のpreg_match_allでうまく値が取得できていない気がします。聞きそびれてしまっていたのですが、記事のタイトルやリンク自体は表示されるでしょうか?もしそれも表示されていないとなると、RSSの情報自体がとれていない可能性があります。preg_match_all~よりも前でvar_dump($item->description);の様にRSSの内容を確認してみてください。(どんな内容が出力されるでしょうか?)出力された文字列の中に<img>タグがある場合、27行目の正規表現に誤りがあってマッチング出来ていないのかもしれません...。返信ありがとうございます。タイトルやリンクは問題なく取得できております。画像だけnoimage.jpgが表示されます。}よろしくお願い致します。2015くろひげさん大変失礼致しました。);のように変更してもう一度ご確認いただけないでしょうか?もしこれで、該当記事の内容が出力された場合、27行目のpreg_match_all()に指定している$item->descriptionを、(string)$item->descriptionに変えてみて下さい。したら、文字列にキャストしていないためにpreg_match_all()で値がうまく処理出来ていないのかもしれないと考えました。的を得たアドバイスができず申し訳ありませんが、うまく表示出来るように協力したいと思いますのでよろしくお願い致します。);で記事内容が出力されましたが27行目のpreg_match_all()に指定している$item->descriptionを、(string)$item->descriptionに変えてもダメだったので、27行目のpreg_match_allの正規表現の部分を適当にかえたら値が取得できました。phpがわからない当方に対して親切丁寧に数々のアドバイスありがとうございました。2015くろひげさんよかったです、無事に表示できたのですね!正規表現が原因でしたか。見当違いのアドバイス失礼しました。今後とも当ブログをよろしくお願いします。初めまして、みんと申します。記事読ませていただきました。現在アメブロの画像表示方法で、手こずっており大変勉強になりました。おひとつご質問がございまして、コメントに投稿させて頂きました。記事では1アカウントのアメブロ画像表示方法でしたが、こちらを複数のアカウントの記事の画像を表示したい場合はどのようにすればいいのでようか?ご教授お願い致します。さんコメントありがとうございます。時間が無く試せてはいないのですが、下記の方法で複数アカウントの表示が出来るのではないかと思いますので参考にしてみてください。取得した情報をHTMLへ出力するのセクションでHTMLを出力しています。ここで使用しているget_ameba_rss()に、アカウント毎のRSSフィードを指定することで情報を取得できます。これも参考程度でお願いします。ここでアカウント2のHTMLを出力}基本的にこちらの方法で出来るかと思うのですが、問題ありましたらまたコメントください。2015ご返信ありがとうございます。さん記事を並び替える方法ですが、とりあえず簡単に実現するなら下記の方法でできるかなと思います。下記の様な関数を用意しておきます。$rss;}取得したRSSをこの関数を通すことで並び替えをするというものです。ASCの部分をDESCにすることで、古いものが上にきます。2015ありがとうございます。初めまして、ppと申します。さんはじめまして、コメントありがとうございます。記事中の一番最初の画像、ということであっていますか?get_ameba_rss()の中の27行目付近のコードを下記のように変更することで、対応できるかと思います。}すいません、コメントに投稿すると正規表現の一部が消えてしまうみたいなので、変更したファイルをzipにまとめたので参考にしてみてください。サンプルファイルもし動かなかったり、不明点な点などありましたらコメント頂けたらとおもいます。2015ありがとうございます、記事中の一番最初の画像表示されるようになりました。さん動くかなぁと心配でしたが、無事表示されてよかったです!また機会があればよろしくお願いします。2015はじめまして、usと申します。広告削除の方法など、大変助かりました。試してみたのですが、画像がうまく表示されませんでした。43というエラーがでていました。お忙しいところ恐れ入りますが、ご教授頂けたら幸いです。さんはじめまして、コメントありがとうございます。エラーの内容からテンプレートのURLを取得している箇所で、エラーが出ているのではという感じがします。get_bloginfo("template_url")が非推奨になってしまっているみたいなので、もしかしたらそれが原因かも知れません。http_build_query($data));もし上記でも動かなかった場合、差し支えない範囲で構いませんのでテーマ内のファイル構成など教えて頂けますと何か分かるかもしれません。2015dackel様ご返信ありがとうございます。上記2点を変更してみましたが、表示されませんでした。テーマですが、公式テーマのtwentyfourteenを使用しています。間違って更新してしまわないように、フォルダ名とstyles.css内のテーマの説明についての記述の箇所だけを変更しています。function.php内のtwentyfourteenと記述があっても、そのままにしてある状態です。function.phpの43行目あたりには以下が書かれていました。RSS情報を取得するのコードを入れてあります)——-function.php——-response.phpファイル構成、っということですがこんな情報しかわからず、すみません....よろしくお願いいたします。"/../../../wp-load.php");単純にWordPressの関数群が読み込まれておらず、get_template_directory()が無いとのエラーが出ているのかと考えました。上記ではwp-load.phpを読み込み、WordPressの初期化を行って関数やクラスなどが使用できる状態にしています。RSS情報を取得するのコードを入れてあります)——-function.php——-response.php——-noimage.jpg>image——-noimage.jpgと置いてみたのですが、どれもうまく表示されませんでした。何度も申し訳ありません。こちらで試した環境が相当シンプルなものだったので検証不足でした。正しくはimagesで最後にsが付いているのが正しいディレクトリかと思います。上記が単純にコメント欄でのタイプミスでしたら、get_ameba_rss()内で画像へのパスが合っているか確認してみてください。それと、今回の件は記事に追記させていただきました。こちらこそありがとうございます。アメブロの画像表示に、困っており大変勉強になりました。ありがとうございます。当方、勉強不足で、ブログの更新日時も表示したいのですがやり方がわかりません。欲を言えば、ブログの数行も表示したいです。(続きを読むでリンク出来ると最高です。)ご教授いただけると幸いです。2015ブログの更新日時を表示する。?>を追加すればOKですよー。2015とおりすがりの仮面ラ...様ありがとうございます!教えていただいたとおりに作業し、表示することができました。心より感謝いたします。2015wordpressでアメブロのRSSを画像付きで表示したくてここにたどり着きました。拝見させて頂きましたが残念ながらよく分かりませんでした。サンプルファイルを落としましたがそれをどうすればいいのでしょうか?ご教授お願いします。2015初心者さんはじめまして。コメントありがとうございます。WordPressで動作させるために、まずサンプルのファイルを指定の位置へ配置する必要があります。使用しているテーマディレクトリに下記のようにファイルを配置してみてください。response.php記事の中にある下記の関数をfunctions.phpに追記します。お使いのテーマに、functions.phpが無いようであれば新規作成してください。(追記:2014年9月29日のもの)functions.phpと、ファイルの用意ができたら、response.phpの一部を「追記:2014年9月29日」に沿って一部変更して下さい。したら、RSSを表示したい箇所で下記を記載して下さい。?>うまく行けば、これでブログの内容が表示されるようになると思います。ここでエラーが出たりするようであれば、エラーの内容や不明点を添えて、再度ご相談頂ければと思います。2015早速の返信ありがとうございます。上記の方法で試してみたところ無事サンプルサイトの画像が表示されました。image」が表示されました・・・いくつか有名所のブログで試したところ以下の状況となりました。image」画像が表示されました何か間違えているのでしょうか?ご教示お願い致します。2015初心者さん返信遅くなってしまいすみません...。image」の表示になると思います。全文配信していないものは、『著作権保護のため、記事の一部のみ表示されております。』という表示がされています。それと念のため追記となりますが、著作権の関係がありますので、本番環境ではご自分の管理されているブログ以外の記事情報を取得しないように注意してください。2015表示されない原因が良く分かりました。教えて頂いてほんとにありがとうございました。2015はじめまして。アメブロのRSSを画像付きで取得する方法を調べているところこちらの記事にたどり着きました。こちらのソースを元にいろいろと触っているのですが、どうしても本文記事の抜粋(200文字)ができません。よろしければご教授お願いいたします。さんコメントありがとうございます。本文記事の抜粋が出来ないとのことですが、本文記事の内容自体は取得できているでしょうか?本記事でいうところのget_ameba_rss関数内の$item->descriptionの値です。確認方法がわからないようでしたら、get_ameba_rssを以下のよう書き換えてみて記事の内容が出力されるか確認してみてください。2015早速の返信ありがとうございます。はい、記事の取得自体はできております。取得自体はできているのですが、ブログ記事の体裁(絵文字やら改行やら)がそのままが表示されている状態です。2015記事本文が取得できているようでよかったです。絵文字や改行がそのまま表示されてしまうのは、HTML文字列のままとなっているからだと思います。記事の抜粋を行うために、HTMLタグを除去して、指定した文字数分だけ切り取れば良さそうです。一部省略してしまっていますが、get_ameba_rss関数を以下のように変更してみました。$results;}主な変更は下記です。引数に抜粋文字数$excerpt_lengthを追加$itemにexcerptプロパティを追加あとは、抜粋を表示したい箇所で次のようにすればOKかなと思います。2015返信が遅くなりまして申し訳ございません。分かりづらかったかなと思っていたので安心しました。何かありましたらご相談ください〜。2015ロリポップのサーバーだと、画像が表示されません。別のサーバーでは表示されるのを確認しました。さんはじめまして、コメントありがとうございます。サーバによっては動かないことがあると思います。何かエラーメッセージなど出ていましたら、分かる範囲で構いませんので教えていただくことは可能でしょうか?原因特定の手掛かりになるかもしれません。2015返信ありがとうございます。エラーメッセージは以下になります。403ロリポップが新サーバーに移転してから画像が表示されなくなりました。2015エラーメッセージありがとうございます。404ではなく、403エラーなのですね。RSSの情報自体が取得できているかどうか確認できるでしょうか?例えば、記事の内容や画像のファイル名などです。記事中の内容でいうと、下記$rssの中身のことです。var_dump()などで出力を確認できると思います。2015間違っていたらすみません、本文中の「記事中の最初の画像を取得、表示用のPHPへ値を渡す」の箇所が、「記事中の最後の画像を取得、表示用のPHPへ値を渡す」ではないのかなーと思いました。それにしても分かりやすい記事を有り難うございます。さんコメントありがとうございます。参考になったみたいでよかったです。画像の部分ご指摘ありがとうございます、記事修正しました。確かに最初の画像をとってなかったですね...。2015お世話になります。wordpressの場合get_bloginfo(“template_url”)だと親テーマget_stylesheet_directory_uri()だと子テーマをみにいきますので、注意が必要ですね。さんコメントありがとうございます。仰るとおり子テーマを使う場合だと、必要に応じて変更する必要がありそうですね。2015お返事ありがとうございます。ところで“/<img([\s\S]+?)>/is”,正規表現のisはこの場合何のためにあるのでしょうか?phpは全く不慣れのため、素人の質問誠にすいません。2015isは修飾子と呼ばれる正規表現のオプションです。.(改行以外の1文字)を改行も含めてマッチングといった具合で、preg_matchや、preg_match_allに指定するパターンにオプションを加えることが出来ます。他にも様々な修飾子がありますので、以下のページを見てみると参考になるかもしれません。Manualと、書きましたが正規表現に一部、無駄があることに気がついたので記事中のコード修正しました...。'/<img([\s\S]+?)>/is'から、'/<img(.+?)>/is'にしています。2015はじめまして。記事を参考にさせていただいております。わかりやすく本当に助かっております。ありがとうございます。サンプルをダウンロードさせていただき、設置しましたところ、うまくできました。アメブロの広告を外す件なのですが、最近『PR』が広告文の一番後ろについていることがあります。後ろについていた場合、どのようなコードを書けばいいのでしょうか?ご教授いただければ嬉しいです。お恥ずかしながら、PHPは全くの初心者です。コメントありがとうございます。continue;}preg_matchの代わりに、strposを使うように変更しています。内容としては、「PR:から始まる」では無く「PR:を含む」、という条件になっています。広告文が最後に入っているパターンが手元で実現出来なかったので、上記の変更でいけるか未検証です。2015ご返答いただき、本当にありがとうございます!ラッキーなことに(?)今朝、『PR』が後ろについてくる広告が入ってきました。PR』というものです。『:』『PR』の間は半角あいているように思えます。教えていただいたコードで設置してみました。『PR』を含む、にしたので”PR:”の部分の『:』を抜いてみました。){continue;}成功してすごくすごく嬉しいです。お忙しい中、ご教授いただき本当にありがとうございました。2015動かせたようでよかったですー!「PRを含む」という条件の場合、若干ルールとして緩いような気がするので、教えていただいた広告分を元に条件を調整してみました。PRで終わるタイトル」という条件になっています。continue;}もし、タイトルにPRという文字を使っちゃいそうな場合、こちらの条件に変更してみていただけると良さそうです!また何かあればご相談いただければと思います。PRで終わるタイトル」の分もテストしてみましたところ、大丈夫でした!ご親切に教えていただき感激です!本当にありがとうございました。2016先日もご教授いただきましたまめくまと申します。先日は本当にありがとうございました。あれからも拝見させていただいております。今回また本文抜粋時の絵文字削除の件で困ってしまい、再度コメントさせていただきました。それでも表示してしまう絵文字があります。アメブロの絵文字は例えば、1たぶん1はスマホからの投稿の時のような気がします。23があるようで、1のpng画像の絵文字が本文の画像より先にきた場合、最初の画像として表示されてしまいます。2と3は大丈夫でした。array_shift($matches[1]);}の[jpeg|jpg|png]、ここのpngを抜いてみたりしてもダメでした。“emoji.ameba.jp”,”stat100.ameba.jp/blog/ucs/img”を排除すればよいというふうな記事があり、コードも書いてあったのですが、アメブロの画像取得のプログラムがそもそもdackel様のものと違うので、分からなくなってしまいました。何かお分かりでしたらご教授いただければすごく助かります。More』などの文をつけるときはどうすればよいでしょうか?いつもは下記のようにしております。“utf-8”);長々と申し訳ございません。2016何度もすみません。先ほど投稿したものを見直すと、一部消えてしまっているところがありました...アメブロの絵文字は例えば、1たぶん1はスマホからの投稿の時のような気がします。23上記の空白の部分は<imgタグから始まる画像のURL>を記載しております。さん返信が遅くなってしまいすみません。コメントの仕様で一部消えてしまっていたようです。お手数をおかけしました...絵文字の件、画像の検索部分を以下のように書き換えてみるのはどうでしょうか。}実際に試せてはいませんが、コメントいただいた除外用のURLがsrcに含まれる場合は結果に含めないようにしています。2015の僕(dackel)のコメントが参考になるかなと思います。2016dackelさまコメントにお返事いただいてありがとうございます。お忙しい中、本当にごめんなさい...絵文字の件ですが、教えていただいたコードで実行してみますと、無事に成功致しました!排除できなかった絵文字も排除できました。あと、本文抜粋の件も大丈夫です。思い通りにできました。分からなくて心が折れていたので、本当に助かりました。参考に勉強させていただきます。ご丁寧にありがとうございました。さん無事に解決出来たようでよかったです...!すぐに返信出来ないこともありますが、また何かありましたらお気軽にご相談いただければと思います。2016dackelさまこんにちは、しつこく何度もすみません...先日ご教授いただいた件でまた質問させていただきます。先日のコードでは記事の一番最後の画像を取得しているようです。絵文字はちゃんと排除されております。私の確認ミスで、また質問することになってしまい恐縮です。最初の画像を取得するにはどうしたらよろしいでしょうか?お時間あるときで結構ですので、またご教授いただければ助かります。さん返信遅くなってしまいすみません。$m[1];上記コードにbreak;を追加してみるのはいかがでしょうか。$m[1];break;foreachで全ての画像を走査してしまっていたので、条件の合致する画像が見つかった時点で走査を抜ける想定です。2016dackelさま返信いただきありがとうございます。お忙しい中、本当にすみません...上記を追加してみますと、最初の画像が取得でき、うまくいきました!(絵文字もちゃんと排除されています)本当にありがとうございました。お礼のお返事が遅くなってしまいました。何度もご教授いただき感謝致します。2016お世話になります。アメブロのRSS取得、こちらの通りにさせていただきましたら、うまくいきました。ありがとうございます。日付と本文(文字数制限あり)もしたいな、と思っておりますが、こちらでリクエストなどしてもよろしいでしょうか?...お忙しいところすみませんが、よろしくお願いいたします。返信メールアドレスが公開されることはありません。お気軽にコメントどうぞ。コメントをキャンセル渋谷でWebサイトを作っています。ちなみに、「ダッケル」はドイツ語でダックスフンドの事だそうです。