サイドバーの「はてブがついた記事」の不具合を直した。

短くなるかもしれないけど今日も技術情報を書いていこうかな。これは過去記事の補足なんだけど、リライトでまかなえる分量じゃないから新たに記事を起こしておこう。まぁ、技術記事は人気があんまりないんだよな。元々、このブログはtechブログだったんだけど、好き勝手書いているうちに完全に雑記ブログになったという経緯がある。まぁ大した情報は書いていないんだけど、ちょっとしたトラブルの解決方法とか書いとくと、困った人の助けになるからね。プログラマがブログで情報共有をする理由ってそれじゃないかな？

っつっても今日の情報は本当に誰一人興味ない話だろうけどな。僕のブログをPCで見ている人なら右側のサイドバーに「新着記事」と「はてブが付いた記事」があるでしょ？　これはRSSからAjaxで情報を取得して表示する処理をjavascriptで自作したやつなのよ。自作したってのは微妙に違うな。元々は#ChiroruLab(id:chiroru_27)さんの所のブログカスタマイズのパーツを借りてきて使ってたんだけど、Google Feed APIが廃止されたからjavascriptの処理を書き直したという経緯がある。詳しくはこちら。

Google Feed API廃止対応、はてなブログ最新記事モジュール、ブクマが付いた記事モジュールを作った。 - 超メモ帳（Web式）＠復活今日は雑談無しで技術トークに終始するよ。手抜きじゃないからね？ chiroru.hatenablog.com ウチのブログの左サイドバーに付けてある新着記事とブクマが付いた記事は、上記の#ChiroruLabさんの所から借りてきたんだけど、最近、Google Feed APIが廃止されたらしくてね、動かなくなった。 developers.google.com こんな感じ。2016年12月15日には廃止するから準備しとけよと公式でアナウンスされていた。こいつの余波をもろに食らっちゃってブログパーツが動かなくなっちゃった。仕方ないんでjqueryでRSS取得してくる部分だけは書き直した。自分の…www.ituki-yu2.net

それでまぁちゃんと使えていたんだけど、最近、「はてブがついた記事」の方の背景画像が取得されないって不具合が発生してたのよ。でもって、不具合調査してたら分かったんだけど、最近、はてなブックマークのRSSの仕様が変わったみたい。

サムネイル画像は今までアイキャッチ画像の生URLを出力してたんだけど、これが「cdn-ak-scissors.b.st-hatena.com」ってプロキシURLをを挟んで画像をリサイズするようになっていた。このため１１月４日以降にブクマされたエントリーの画像が取得できなくなってたんだよね。

しょうがないから「はてブがついた記事」の方の画像取得処理を修正した。ソースはこちら。

<!-- HTML : popular_entries -->
<div class="hatena-module-title">
 <a href="http://b.hatena.ne.jp/entrylist?sort=eid&url=http://www.ituki-yu2.net/">はてぶがついた記事</a>
</div>
<!-- 人気記事を表示する -->
<div id="popular_entries_feed" align="center">Now Loading...</div>

<!-- SCRIPT : popular_entries_feed -->
<script type="text/javascript">

var setNumEntries = 5; // 取得する要素数
var blogTITLE = "超メモ帳（Web式）＠復活";
var site_url = "http://www.ituki-yu2.net/";
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') {

		// RSSの画像の仕様が変わったので追加 2017-11-06
		if(format_arr[0].match('/cdn-ak-scissors.b.st-hatena.com/')) {
			var url_split_temp_arr = format_arr[0].split('/');
			var url_last_item = url_split_temp_arr.slice(-1);
			return_str = decodeURIComponent(url_last_item[0]);
		} else {
			return_str = format_arr[0].replace(/(\.[^.]+$)/ , "_l$1");
		}

	} else {
		return_str = no_image;
	}
	return return_str;
};

</script>

処理が汚いという意見は認めよう。ってか、誰か書き直して欲しい。だから、僕はサーバサイドエンジニアだって何度言えば分かるんだ！　フロントエンドを弄るのはマジで苦手なんだよ！

javascriptとかjqueryはぎり分かるけど、CSSとかでwebデザイン作ったりするのは最低限レベルの能力しか無い。だからこのブログでもレイアウトをいじりたいなーって願望はあるんだけど、ほとんど他所様からのパクリのみで構成されているのである。

今、仕事でもjqueryでフォームの例外処理とかそのあたりの処理ばっか任されてるんだ。無理やりAjaxでPHPの処理に持ち込む黒魔術を連発しているので、後任は死ぬほど面倒くさいだろう。僕がちゃんと前もってサーバサイドしか出来ないって言ってるのにフロントエンドを任せる主任が悪いのである。

もし使いたいって人がいるならCSSの部分に#ChiroruLabさんの下記の記事からCSSの部分だけ取得してきて、デザインCSSに追加して、サイドバーに上のコードを突っ込めば使えると思う。

これを使うんだったら自己責任で。ソース上部のblogTITLEとsite_urlを変えれば概ね行けるとは思う。あとはソース内のituki-yu2.netの部分を自分のブログのurlに変えればなんとかなるはず。

寸劇2.0_overture。 - 超メモ帳（Web式）＠復活今日は人生最良の日だったかもしれない。 - 超メモ帳（Web式）＠復活見出しのないはてなブログの文中にgoogleアドセンスを自動挿入する方法。 - 超メモ帳（Web式）＠復活