アメーバブログのサイドバーにRSSを表示

アメーバブログのサイドバーに、他のブログのRSSを表示しようと思ったのは、アメブロ経由で、このサイト(節約すまいるHappy生活)に、アクセスして下さる方が結構いらっしゃるとわかったからです。アクセス解析をつけているにもかかわらず、ふだんは面倒くさがって、どこ経由のアクセスかチェックしていない私。先日、久しぶりにGoogle Analyticsにログインして、そのことを知ったのでした。

アメブロの方で、以前更新していた投稿は、少しずつこちらに移動(吸収)し、移動した投稿は削除してしまったんですよね。ほぼ空っぽといってもいいアメブロ経由でなぜアクセスがあるのかわかりません。検索エンジンのキャッシュか何かに残っているのか、もしくは読者登録してくださった方が、時折、見に来て下さっているのかもしれません。

私はブログランキングにも参加していますが、底辺をウロウロしているせいもあって、ランキング経由のアクセスより、自分のアメブロ経由のアクセスの方が多かったくらいで驚きました。と同時に、ずっと放置して更新していないアメブロからリンクをたどってこちらに来て下さった事に申し訳ない気持ちになりました。

そんな理由で、「アメブロの更新がない時はこちらのブログを見て頂けたらいいな」と思い、アメブロサイドバーにRSSを表示させることにしたのです。ITの知識がないので、参考にしたサイトに書いてあったコードをほぼそのまま利用させて頂きました。

javaScriptは初めてで、コードの意味が全くわからなかった為、参考にさせて頂いたサイトに、コードの簡単な説明が書いてあってとても助かりました。

アメブロのプラグインに、参考サイトに書いてあったジャバスクリプトのコードを貼り付けて少し変更しました。プラグインには文字数の制限があるので、コードをファイル化(外部js)して、必要最小限のコードだけプラグインに書き込む形の方が、プラグインを有効利用できるようです。今回は面倒くさかったので、そのまま貼り付けました。ついでに、アメブロのデザインも少し変更し、文字のサイズを大きくしてみました。とりあえず、自分のブラウザーではきちんと表示されてますが、崩れていませんかね?

プラグインに書いたコードの例

コード1

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
	//RSSフィードの取得
	var feedurl = "http://googlejapan.blogspot.com/atom.xml";
	var feed = new google.feeds.Feed(feedurl);
	//取得するフィード数
	feed.setNumEntries(10);
	//実際に読み込む
	feed.load(function (result){
	//読み込めたか判断
	if (!result.error){
		//表示部分
		var container = document.getElementById("feed");
		//変数の初期化
		var htmlstr = "";
		//サイトタイトル出力
		htmlstr += '<h4><a href="' + result.feed.link + '">' + result.feed.title + '</a></h4>';
		htmlstr += '<ul>';
		//Feedの処理
		for (var i = 0; i < result.feed.entries.length; i++) {
		var entry = result.feed.entries[i];
		htmlstr += '<li><a href="' + entry.link + '">' + entry.title + '</a><br />';
		htmlstr += '<span class="cnt">' + entry.contentSnippet + '</span></li>';
	}
		//リストを表示させる
		container.innerHTML = htmlstr + '</ul>';
	}else{
	alert(result.error.code + ":" + result.error.message);
	}
  });
}
google.setOnLoadCallback(initialize);
</script>

アメーバブログのプラグインに書いたコードの例。上の例ではグーグルのRSSを取得するようにしています。6行目のコードをで、http://googlejapan.blogspot.com/atom.xml 部分のアドレスを、自分の、もしくは、表示させたいRSSのアドレスに変更すれば、大丈夫と思います。

コード2

<div id="feed"></div>

表示させたい所に、コード2を書くと、コード1で取得したRSSが表示されます。私の場合は、サイドバー(プラグイン)に表示させたかったので、コード1とコード2を続けて書きました。やっていないので、できるかどうかわかりませんが、コード1をプラグインに書き、コード2を投稿本文内で書けば、本文中の好きな場所に表示させることも可能だと思います。

またプラグイン文字数制限が気になる場合は、コード1の部分を、外部ファイルにして読み込むと、文字数を節約できます。

モバイル版アメブロにはRSSが表示されないので注意

パソコンでの閲覧、もしくは、スマートフォンなどモバイルでの閲覧時に表示方法をパソコン版に変更すると見ることができるようです。モバイル版のアメブロを閲覧している人には反映されません。

昔の携帯(ガラケー)で、アメブロを閲覧する場合は、余計なサイドバーやリンク、画像など表示が遅くなるだけで、邪魔なだけでしょうし、モバイル版アメブロで、サイドバーのRSSが表示されないのは致し方ない事だと思います。パソコンに詳しい方なら、何か裏技的なテクニックをお持ちかもしれませんが、当方はそういった知識もありませんし、そこまでする必要性も感じないためやりません。

モバイルでの閲覧時には、プラグインが読み込まれない仕様のようです。

アメブロデザイン変更でhtml5

長らく放置していたアメブロ。「CSSの変更が可能な古いタイプのスタンダードスキン」から「CSSの変更が可能な新しいタイプのスタンダードスキン」に変更し、ソースコードをさらっと確認したたところ、html5ベースになっているようで、使いやすそうな・・・楽しそうな・・・もうすぐ10周年を迎えるからか色々な面でパワーアップしているような印象を受けました。

アメーバブログからWordPressに移った理由のひとつに、アメブロの「いろんな制限」もあったのですが、それは自分に知識と技術がなかっただけで、JavaScriptやCSSフル活用すれば、いろんな事ができて楽しいかも!と、思うようになりました。かねてより、アメブロは、懸賞情報やつぶやき的な日記で更新していけたらいいなと思っていたので、このサイトにはアメブロのRSSを表示し、相互でアクセスアップをはかっていけたらいいなと思っています。

知識が圧倒的に不足しているため、こちらのサイトにアメブロのRSSを表示させるようになるのがいつになるかわからないのと、アメブロは商用禁止なのに広告(バナー類)や別サイトのRSSを表示させている事でアカウント削除されるかもしれませんね。それがちょっと心配ではありますが、まぁ、もし削除されたら削除されたで、ずっとやめれなかった(中毒)ピグと縁が切れると思えばいいかと。

いつできるかな?今度やる気になった時?とりあえず、疲れた・・・。

参考にしたサイト