今日は雑談無しで技術トークに終始するよ。手抜きじゃないからね？
ウチのブログの左サイドバーに付けてある新着記事とブクマが付いた記事は、上記の#ChiroruLabさんの所から借りてきたんだけど、最近、Google Feed APIが廃止されたらしくてね、動かなくなった。
こんな感じ。2016年12月15日には廃止するから準備しとけよと公式でアナウンスされていた。
こいつの余波をもろに食らっちゃってブログパーツが動かなくなっちゃった。仕方ないんでjqueryでRSS取得してくる部分だけは書き直した。
自分の環境で動くソースだけ置いておく。コピペして動かないとかいう問い合わせは一切、受け付けないからね。むしろ、自分の方が綺麗なソースにするにはどうすりゃいいのか聞きたいぐらいだ。CSSとかは#ChiroruLabさんのものを丸丸パクっている。使いたければ#ChiroruLabさんの所からCSSをコピペして使ってください。大丈夫ですかね id:chiroru_27 さん？
新着記事のブログパーツ。
<!-- HTML : new_entries --> <div class="hatena-module-title"> <a href="/archive">最新タイトル</a> </div> <!-- 新しい記事を表示する --> <div id="new_entries_feed" align="center"></div> <!-- SCRIPT : new_entries_feed --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script type="text/javascript"> var setNumEntries = 5; // 取得する要素数 $.ajax({ url: 'http://yuki-2021.hatenablog.com/rss', type: 'get', dataType: 'xml', timeout: 5000, success: function(xml, status) { if (status === 'success') { var row = 0; var data = []; var nodeName; $(xml).find('item').each(function() { if(row >= setNumEntries){ return false; } data[row] = {}; $(this).children().each(function() { // 子要素を取得 nodeName = $(this)[0].nodeName; // 要素名 data[row][nodeName] = {}; // 初期化 attributes = $(this)[0].attributes; // 属性を取得 for (var i in attributes) { data[row][nodeName][attributes[i].name] = attributes[i].value; // 属性名 = 値 } data[row][nodeName]['text'] = $(this).text(); }); row++; }); // 表示部分を初期化 var container = document.getElementById("new_entries_feed"); var useFeed = ""; for (i in data) { useFeed += '<div class="htbl_new_entry"><a href="' + data[i].link.text + '"><img class="htbl_new_entry_img" src="' + getPic(data[i].description.text) + '"><div class="htbl_new_entry_text"><span class="entry_title">' + data[i].title.text + '</span><span class="entry_date">' + dateFormat(data[i].pubDate.text) + '</span></div></a></div>'; } container.innerHTML = '<div class="htbl_new_entries">' + useFeed + '</div>'; } } }); //日付変換処理 var dateFormat = function(str){ var my_date = new Date(str); var month = my_date.getMonth() + 1; var date = my_date.getDate(); format_date = month + "月" + date + "日"; return format_date; }; // 画像取得処理 var getPic = function(str) { var no_image = 'https://cdn.blog.st-hatena.com/images/theme/og-image-1500.png'; format_str = (str.match(/http(?:s|):{1}[\S_-]+\.(?:jpg|gif|png)/) != null) ? str.match(/http(?:s|):{1}[\S_-]+\.(?:jpg|gif|png)/) : no_image.match(/http(?:s|):{1}[\S_-]+\.(?:jpg|gif|png)/) return format_str; }; </script>
はてブが付いた記事のブログパーツ。こいつはクロスドメインで引っ掛かったからプロキシサイト噛ましてある。プロキシサイトが潰れたらまた書き直しだろうな。
<!-- HTML : popular_entries --> <div class="hatena-module-title"> <a href="http://b.hatena.ne.jp/entrylist?sort=eid&url=http://yuki-2021.hatenablog.com/">はてぶがついた記事</a> </div> <!-- 人気記事を表示する --> <div id="popular_entries_feed" align="center">Now Loading...</div> <!-- SCRIPT : popular_entries_feed --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script type="text/javascript"> var setNumEntries = 5; // 取得する要素数 var blogTITLE = "超メモ帳（Web式）＠復活"; var site_url = "http://yuki-2021.hatenablog.com/"; var get_url = "http://b.hatena.ne.jp/entrylist?mode=rss&sort=eid&url=" + site_url; var proxy_url = "http://allow-any-origin.appspot.com/"; $.ajax({ url: proxy_url + get_url, type: 'get', dataType: 'xml', timeout: 5000, success: function(xml, status) { if (status === 'success') { var row = 0; var data = []; var nodeName; $(xml).find('item').each(function() { if(row >= setNumEntries){ return false; } data[row] = {}; $(this).children().each(function() { // 子要素を取得 nodeName = $(this)[0].nodeName; // 要素名 data[row][nodeName] = {}; // 初期化 attributes = $(this)[0].attributes; // 属性を取得 for (var i in attributes) { data[row][nodeName][attributes[i].name] = attributes[i].value; // 属性名 = 値 } data[row][nodeName]['text'] = $(this).text(); }); row++; }); // 表示部分を初期化 var container = document.getElementById("popular_entries_feed"); var useFeed = ""; var s = 1; for (i in data) { useFeed += '<div class="htbl_popular_entry">' + '<a href="' + data[i].link.text + '">' + '<img class="htbl_popular_entry_img" src="' + getPic_populer(data[i]["content:encoded"].text) + '">' + '<div class="htbl_popular_entry_text">' + '<span class="entry_title">' + data[i].title.text.replace('- '+blogTITLE, '') + '</span>' + '<span class="entry_hatebu">' + '<img src="http://b.hatena.ne.jp/entry/image/' + data[i].link.text + '">' + '</span>' + '<span class="entry_date">' + dateFormat_populer(data[i]["dc:date"].text) + '</span>' + '<div class="htbl_popular_entry_count">' + '<span class="count">' + parseInt(s) + '</span>' + '</div>' + '</div>' + '</a>' + '</div>'; s++; } container.innerHTML = '<div class="htbl_popular_entries">' + useFeed + '</div>'; } } }); //日付変換処理 var dateFormat_populer = function(str){ var my_date = new Date(str); var month = my_date.getMonth() + 1; var date = my_date.getDate(); format_date = month + "月" + date + "日"; return format_date; }; // 画像取得処理 var getPic_populer = function(str) { var no_image = 'https://cdn.blog.st-hatena.com/images/theme/og-image-1500.png'; format_arr = str.match(/http(?:s|):{1}[\S]+\.(?:jpg|gif|png)/); if(format_arr[0] != 'http://b.hatena.ne.jp/images/append.gif') { return_str = format_arr[0].replace(/(\.[^.]+$)/ , "_l$1"); } else { return_str = no_image; } return return_str; }; </script>
こんな感じである。途中でも書いたけど、これをコピペしたのに動かなかったとかいう問い合わせは一切、受け付けないからね。使うんだったら自己責任で。javascript、jqueryの基本的な使い方を知っていて、このソースが何やってるのか理解できる程度の人以外は使わないでください。これは基本的には自分のブログのためだけに作ったものなので、いちいち他の人のフォローまでするつもりはないです。
追記（2017-11-06 23:54）
はてなブックマークのRSSの仕様が変わったので「はてブがついた記事」の方を修正しました。
