このエントリーをはてなブックマークに追加

Memo

jQueryでFaviconを表示させる

2011/05/06
Memo

jQueryでFaviconを表示させる

しばらく放置していたark-under.netのindexをリニューアルしました。
その際にjQueryを使ってFaviconを表示させるプラグインを使ったんですが、自分なりに手を加えた部分もあるので公開しておきます。

ark-under.net

Favicon表示プラグインは上記のページの「Another Links」の部分で使いました。

jquery.favion.jsを改変

指定した URL からそのサイトのファビコンを表示する jQuery Favicon プラグイン」にあったjQuery.faviconをそのまま使用すると、

  • faviconがほとんど表示されない
  • faviconが無い場合に任意のアイコンを指定出来ない

という点が気になったので、以下のように変更しました。

jquery.favion.js
(function($) {
	// favicon
	$.fn.favicon = function(url) {
		var self = this;
		var dir = url.split('/').splice(0, 3).join('/');
		// http://example.com/foo.html -> http://example.com
		self.attr('width', 16);
		self.attr('height', 16);
		if(dir == 'http://about.me'){
			self.attr('src', 'http://wac.2659.edgecastcdn.net/802659/production79/images/icons/favicon.ico');
		}else if(dir == 'http://iddy.jp'){
			self.attr('src', 'http://iddy.jp/image/profile/share/favicon.ico');
		}else if((dir == 'http://s.loftwork.com') || (dir == 'http://www.loftwork.com')){
			self.attr('src', 'http://www.loftwork.com/wp-content/themes/hayloft_new/_inc/images/favicon.ico');
		}else if(dir == 'http://movapic.com'){
			self.attr('src', 'http://assets.movapic.com/image/parts/favicon.gif');
		}else{
			self.attr('src', dir + '/favicon.ico');
		}
	return self;
	};
})(jQuery); // function($)

オリジナルでは、画像を最初非表示にしておき、ロードが完了したら表示する、という動作になっていたのでその部分を削除。
また、faviconファイルが「http://example.com/favicon.ico」の位置に居ないと表示出来ない状態だったので、URLごとにFaviconの位置を調べておき、URLが「http://example2.com/」のときは「http://example2.com/img/favicon.ico」という感じで地道に指定。

function.js(jquery.faviconの呼び出し)
jQuery(function($) {
	$('#link a').each(function(i, n) {
		$('<img />').favicon(n.href).prependTo(n);
	});
	$('#link img').error(function(){
		$(this).attr({src:'images/icon.png',alt:''});
	});
});

オリジナル同様、idがlinkとなっている箇所の中のaタグのURLから、faviconのURLを探し、aタグの中にimgタグを追加してfavicon画像を表示。
jquery.favion.jsに修正を加えているので、そのままだと空のimgタグが出来たままです。
そこでerror()を使い、画像が表示されていないimgは任意の画像「images/icon.png」に置き換える、という形にしています。

画像の表示位置について

ちょっと自分用メモになってしまうんだけど。
オリジナルはinsertBeforeを使って、aタグの外側に画像を表示させていたんだけど、HTMLとCSSの問題で(HTML修正するのが面倒で)aタグの中のテキストの、先頭に追加したかったんです。
jQuery日本語リファレンスのサンプル見てもピンと来なかったので、色々実験してみてprependToに辿り着きました。
下の表はそのまとめになります。上記のサンプルはaタグ内にimgを追加しているパターンなので、変更したい場合の参考にどうぞ。

使用関数 表示内容
prependTo() <a><img />テキスト</a> aタグの中・テキストの先頭に表示
appendTo() <a>テキスト<img /></a> aタグの中・テキストの末尾に表示
insertBefore() <img /><a>テキスト</a> aタグの外・先頭に表示
insertAfter() <a>テキスト</a><img /> aタグの外・末尾に表示

実装サンプルはこちら

appendTo / prependTo と append / prepend の違い

ちょっと混同してしまってつまづいたのでメモしておきます。

appendTo / prependTo の場合 $(‘A’).prependTo(‘B’); としたとき、Bの中にAが入る。
append / prepend の場合 $(‘B’).prepend(‘A’); としたとき、Bの中にAが入る。

insertAfter / insertBefore と After / Before も同様の違いがあります。

jQuery、分かってくると色々やってみたくなりますな。@・ェ・@

Category : MemoTags : ,

関連記事

1 Response

コメントを残す




About

中の人:Mei Koutsuki (@mei331)
神奈川でweb作ったり、お洋服つくったりしてる黒いひつじさん。ロリィタ系webクリエイター。12年9月に一児の母となり、自宅で子育てしながらお仕事してます。
>> もっと詳しく