google feed apiでブロガーの画像表示

2023/09/05 10:23

このQ&Aのポイント

google ajax feed apiを使用してブロガーの記事を表示させるJavaScript初心者が、画像を追加することに挑戦しています。しかし、https://の指定方法について困っています。
画像URLにはhttp:とhttps:の2種類があり、同時に指定する方法を知りたいです。
「shiromaru しろまる」さんの記事を参考にしていますが、画像表示される記事とされない記事があります。どのように書けばよいのでしょうか。ご教授お願いします。

ベストアンサー

google feed apiでブロガーの画像表示

2014/01/06 22:47

google ajax feed apiでブロガーの記事を表示させているjavascript初心者です。今回、画像を追加することに挑戦していますが、以下に　https:　を追加することが出来ず困り果てています。 var imgCheck = entry.content.match(/(src="http:){1}[\S_-]+((\.jpg)|(\.JPG)|(\.gif)|(\.png))"/); if(imgCheck){ htmlstr += '<div class="img_press"><a href="' + entry.link + '">'; htmlstr += '<img ' + imgCheck[0] + '" width = 80 " height = 60></a></div>'; } 元は、「shiromaru しろまる」さんの記事を参考にしていますが http://shiromaru-blog.blogspot.jp/2010/01/google-ajax-feed-api.html ブロガーでは画像表示される記事とされない記事があり、苦労の末、行き着いた結果は画像URLが 2種類あるということですが同時に指定する記述が分かりません。 http:　と　https: どのように書けばよいのでしょうか、ご教授よろしくお願いします。

meah1835
お礼率74% (98/132)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

yamada_g
ベストアンサー率68% (258/374)

2014/01/07 17:08 回答No.1

正規表現では"|"が「または」という意味になります。記載の正規表現の最後でも.jpgまたは.JPGまたは・・という風になっていますよね。ですので、 >var imgCheck = entry.content.match(/(src="http:){1}[\S_-]+((\.jpg)|(\.JPG)|(\.gif)|(\.png))"/); これを var imgCheck = entry.content.match(/(src="(http:|https:)){1}[\S_-]+((\.jpg)|(\.JPG)|(\.gif)|(\.png))"/); にすればいいのではないかと思います。

質問者

お礼 2014/01/07 17:18

やった～ありがとうございます。 http:|https:　は入れてはみたのですが　　)　が足りなかったようです。両方表示されるようになりました。ここ二日のもやもやが吹き飛びました、感謝感激です。又の機会がありましたらよろしくお願いします。

関連するQ&A

google feed api
以下のようにブログのフィードを取得しようとしたのですが、何も出てきません。ＡＰＩキーは間違っていないです。二つのファイルは同階層です。余分なところは省略しています。 //test.html <title>Google AJAX Feed API テスト</title> <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAABuy1BFnkBh8stkm....................................."> </script> <script type="text/javascript" src="test.js"> </script> </head> <body> <p>Google AJAX Feed API テスト</p> </body> </html> //test.js google.load("feeds", "1"); function initialize() { google.feeds.lookupFeed("http://feedblog.ameba.jp/rss/ameblo/blog/rss20.xml", getFeedUrl); } function getFeedUrl(result){ if (!result.error){ if (result.url != null) { var feed = new google.feeds.Feed(result.url); feed.load(dispfeed); } }else{ var container = document.getElementById("feed"); container.innerHTML = "フィードがありません"; } } function dispfeed(result){ if (!result.error){ var container = document.getElementById("feed"); var htmlstr = ""; htmlstr += '<h2><a href="' + result.feed.link + '">' + result.feed.title + '</a></h2>'; for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; htmlstr += '<h3><a href="' + entry.link + '">' + entry.title + '</a></h3>'; htmlstr += "<p>" + entry.publishedDate + "</p>"; htmlstr += "<p>" + entry.contentSnippet + "</p>"; htmlstr += "</p>"; } container.innerHTML = htmlstr; }else{ alert(result.error.code + ":" + result.error.message); } } google.setOnLoadCallback(initialize);
- ベストアンサー
- JavaScript
Google AJAX Feed API でリンクを張るには？
Google AJAX Feed API でリンクを張るには？ Google AJAX Feed API を使ってアメブロの記事一覧をリンク付きでホームページに表示させたいのですが、記事タイトルのみ表示されてリンクが張れませんでした。 entry.titleの部分をentry.linkに変えるとＵＲＬが文字情報で表示されてしまいます。記事タイトルをクリックするとアメブロの記事に飛ぶ様にリンクを張るにはどうすればいいでしょうか？よろしくお願いします。
- 締切済み
- JavaScript
Google AJAX Feed API
Google AJAX Feed APIでRSSを読み込んでタイトルなどの文字のみの表示をすることはできたのですが、（下の記述でやっています。）画像が投稿されているブログ記事の画像を読み込み、表示させることはできるのでしょうか？その場合の方法はどのように、すればできるのでしょうか？お手数をおかけしますが、よろしくお願い致します。 <script type="text/javascript" src="http://www.google.com/jsapi?key="></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("http://"); 　 feed.setNumEntries(10); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = document.createElement("li"); var a = document.createElement("a");a.href = entry.link; 　 a.target = "_blank" ; a.appendChild(document.createTextNode(entry.title)); div.appendChild(a); container.appendChild(div); } } }); } google.setOnLoadCallback(initialize); </script>
- ベストアンサー
- JavaScript
Google AJAX Feed APIについて
ブログのRSSを使って自動的にホームページに新着ブログ記事の日付とタイトルを表示されるようにしたいと思い、Google AJAX Feed APIを使用しました。下記のソースだとこのように表示されます。・タイトル(2009年6月22日) ・タイトル(2009年6月20日) 表示方法をもう少し変えたいんですが、文字サイズと行間の変更はどのようにすれば可能か、ご存知の方は教えて下さい。 1.文字サイズをもう少し小さく(10pxに)したい 2.行間がくっ付いているのでもう少し広くしたい <script type="text/javascript" src="http://www.google.com/jsapi?key=APIキー"></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("フィードのアドレス"); feed.setNumEntries(10); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = document.createElement("li"); var a = document.createElement("a"); a.href = entry.link; a.target = "_top" ; var date = new Date(entry.publishedDate); a.appendChild(document.createTextNode(entry.title + " (" + date.toLocaleDateString() + ")" )); div.appendChild(a); container.appendChild(div); } } }); } google.setOnLoadCallback(initialize); </script> <div id="feed"></div>
- ベストアンサー
- JavaScript
Google AJAX Feed APIについて
ライブドアブログに外部RSSを表示しているのですが、上手くカスタマイズできません。現在はこのようになっていて http://imageshack.us/photo/my-images/850/sample1x.jpg/ これのように日付ごとに分けたいのです http://imageshack.us/photo/my-images/651/sample2s.jpg/ どのようにコードを書けば日付ごとに分けられますでしょうか？以下に現在使用してるコードを書いておきます <script type="text/javascript" src="http://www.google.com/jsapi?key=＊APIキー"></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feedurl = "http://blog.livedoor.jp/dqnplus/index.rdf"; var feed = new google.feeds.Feed(feedurl); feed.setNumEntries(10); feed.load(dispfeed); function dispfeed(result){ if (!result.error){ var container = document.getElementById("feed"); var htmlstr = ""; htmlstr += '<h2></h2>'; htmlstr += "<p>" + "</p>"; htmlstr += "<ul>"; for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; htmlstr += "<li>" htmlstr += '<a href="' + entry.link + '">' + entry.title + '</a>'; var strdate = createDateString(entry.publishedDate); htmlstr += "(" + strdate + ")"; htmlstr += "</li>" } htmlstr += "</ul>"; container.innerHTML = htmlstr; }else{ alert(result.error.code + ":" + result.error.message); } } } function createDateString(publishedDate){ var pdate = new Date(publishedDate); var pday = pdate.getDate(); var pmonth = pdate.getMonth() + 1; var pyear = pdate.getFullYear(); var phour = pdate.getHours(); var pminute = pdate.getMinutes(); var psecond = pdate.getSeconds(); var strdate = + pmonth + "月" + pday + "日" + phour + "時" + pminute + "分"; return strdate; } google.setOnLoadCallback(initialize); </script>
- 締切済み
- AJAX
Google AJAX Feed APIについて
よろしくお願いします。 Google AJAX Feed API で　外部のブログを複数取得しているのですが、一覧を表示する際に、<div id="feed"></div>と記載するかと思うのですが、これを2個使って別々の一覧を表示することは可能でしょうか？ http://q.hatena.ne.jp/1285618603 こちらのページを参考にしてみたのですが、どうもうまくいきません。どなたかご存知の方、参考のURLでも結構ですのでよろしくお願いいたします。
- ベストアンサー
- JavaScript
google feed apiを使い分けたい
google ajax feed apiですが、下記コードを書いて "rss_url"部分を引数にして同一ページ内でURLの違うものを複数使用したいのですが、やり方がわかりません。理想は<div id = "feed"></div>の id = ""の部分を変更してURLごとに使い分けたいのですが、どうすればいいでしょうか？ google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("rss_url"); feed.setNumEntries(5); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); } }); } google.setOnLoadCallback(initialize); このコードだと<div id = "feed"></div>を記述すればうまく実行されます。試しに google.load("feeds", "1"); function initialize(rss_url, id) { var feed = new google.feeds.Feed(rss_url); feed.setNumEntries(5); feed.load(function(result) { if (!result.error) { var container = document.getElementById(id); } }); } google.setOnLoadCallback(initialize); var test = new MyRssReader("rss_url", "test1"); として <div id = "test1"></div>としてみましがたうまくいきませんでした。
- ベストアンサー
- JavaScript
Google AJAX Feed APIについて
ネットで出ているサンプルのソースを見るとjsの最後はこうなっています。 // ページが読み込まれたら、initialize関数を実行する google.setOnLoadCallback(initialize); 自分がやりたいことは、initializeの関数を実行する際に引数を渡したいです。調べてみると、setOnLoadCallbackは引数を使えないようなので HTMLファイルで <script> $(function(){ initialize('feed1', 'フィードのurl1, 3); initialize('feed2', 'フィードのurl2, 3); }); </script> <div id="feed1"></div> <div id="feed2"></div> としたところ動作は正常なようです。 Google AJAX Feed APIを使ったプラグインもないようですし無理矢理上記の形式にしているのですが、この方法で問題ないでしょうか？引数を渡して汎用化したいと言うのは特に珍しいことでもないと思うのですが調べても有力な情報が見つかりません。何かいい方法がありましたら教えてください！
- 締切済み
- JavaScript
Google Ajax Feed API　キャッシュ騙しの方法
Google Ajax Feed APIでRSSフィードを読み込み表示していますが、更新反映が遅いため（修正・削除したはずのエントリーが、古いままで表示される）、以下の方法を試してみたいと思っています。 http://www.lepracaun.info/blog/2007/06/google_ajax_feed_api_2.html 現在は var feedurl = "http://glftp.main.jp/blg/?feed=rss2&cat=3"; var feed = new google.feeds.Feed(feedurl); となっているのですが、これをそのまま上記ページのように var feedurl = "http://glftp.main.jp/blg/?feed=rss2&cat=3"; var feed = new google.feeds.Feed(feedurl)+"?"+(new Date()).getTime()); としてみても何も表示されません。完全に手探りなのですが…どこかが間違っているのでしょうか？
- ベストアンサー
- JavaScript
Google AJAX Feed APIキー
http://okwave.jp/qa/q7289256.html ↑こちらの記事を参考にしてサイトのTOPページにWPのタイトル表示を試みました。表示はされるものの、そのタイトルを更にリンク（各記事にとぶ）にしたいのですが、以下のソースのどこをいじればリンクになるのか教えて下さい。 ------------------------------------------------------- ■タイトル表示させたいページの<head>内に以下入れる。 <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("★RSS★"); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = document.createElement("div"); div.appendChild(document.createTextNode(entry.title)); container.appendChild(div); } } }); } google.setOnLoadCallback(initialize); </script> ■HTMLのタイトル表示させたい部分に以下入れる。 <div id="feed"></div> ------------------------------------------------------------------------------- よろしくお願い致します。
- 締切済み
- JavaScript