yuga.js 0.5.1 を導入してみた

yuga.js 0.5.1 - 優雅なWeb制作のためのJavaScriptをこのブログで使ってみました。

これがどういった機能があるのか、また導入方法はyuga.js 0.4.2 - 優雅なWeb制作のためのJSとデモ（CSS HappyLife）で説明されています。ただし、こちらはyuga.js 0.4.2の説明なので、最新版の0.5.1はちょっとだけ変わっています。変更点と最新版のダウンロードは次の作者のサイトから。

inputlog - yuga.js 0.5.1 - 優雅なWeb制作のためのJavaScript

導入方法

導入方法は簡単で、上記サイトからダウンロードしたファイルを解凍後にアップロードして、次のような感じでヘッダーで読み込むだけです。href属性やsrc属性は自分の環境に合わせて書き換えましょう。

<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>
<script type="text/javascript" src="js/yuga.js" charset="utf-8"></script>

実際に使ってみた感想

実際に導入してみればわかりますが、結構便利です。

これまで外部サイトへのリンクには、いちいちa要素に「class="outside"」をつけていましたが、このyuga.jsでは、外部リンクは自動的に別ウィンドウで開くようになっていて、さらに「class="externalLink"」を追加してくれるので、それだけでも少し楽になりました。クラス名は変更できるけど、outsideよりもexternalLinkの方がプロっぽいので、そちらをそのまま使うことにしました。

また、画像への直リンクも自動的にThickBoxで開いてくれます。いちいち「class="thickbox"」をつける必要もなくなります。

「class="thickbox"」をつけること自体はそんなに面倒な作業ではない（CustomEditorButton2でワンクリックでつけられるようにしてある）のですが、こういう特定の機能を使うためのクラス名って、広義な意味でのWeb標準的にはできればつけたくないですよね。装飾のための要素などを追加するのとある意味同じなので。

その他にも便利な機能がいろいろとありますので、まずは実際に使ってみるのがいいでしょう。

さて、とても便利なyuga.jsですが、いくつか自分の環境や好みに合わせて変更した方がいい部分もあるので、僕がいくつか変更した点を備忘録がてら載せておきます。

外部リンクから自分のサイトは除く設定

外部リンクの判定は、「a[href^="http://"]」という記述方法で、href属性がhttp://から始まるa要素を取得して、それをクリックしたときに別ウィンドウで開きクラス名にexternalLinkを追加しています。

//外部リンクは別ウインドウを設定
externalLink: function(options) {
	var c = $.extend({
		windowOpen:true,
		externalClass: 'externalLink'
	}, options);
	var e = $('a[href^="http://"]');
	if (c.windowOpen) {
		e.click(function(){
			window.open(this.href, '_blank');
			return false;
		});
	}
	e.addClass(c.externalClass);
},

なお、この「a[href^="http://"]」はCSS3 で定義されたセレクタの書き方です。

CSSのセレクタについてのリファレンスは、WWW WATCHさんの次の記事が非常に分かりやすくて、僕も勉強させてもらっています。

で、本題に戻って、最初の設定だと自分のサイト内リンクもhttp://で始まる絶対URLで記述しちゃうと外部リンクとみなされて、別ウィンドウになってしまいます。Movable Typeがデフォルトで吐き出すリンク関係は、全部絶対URLになっているようですので、これでは困っちゃいますね。

そこで、「e」という変数を定義している部分に、次のように自分のサイトのURLは除く設定をしてあげればOKです。

var e = $('a[href^="http://"]').not('a[@href^="/"]');

ついでに「https://」で始まるリンクも外部リンクになるように設定しておきましょう。

var e = $('a[href^="http://"], a[href^="https://"]').not('a[@href^="/"]');

PDFやWord、Exelファイルも別ウィンドウで表示

続いて、PDFやWord、Exelファイルも別ウィンドウで表示するようにします。

このブログでは、PDFファイル以外はたぶん使わないだろうけど、僕の会社の職員専用のWebサイトではWord、Exelにもリンクされるのでついでに設定しておきました。

ここでもCSS3 で定義されたセレクタの書き方で、href属性が「.pdf」で終わるa要素を取得します。

//PDF,Word,Exelファイルも別ウィンドウで表示
var eFiles = $('a[@href$=".pdf"], a[@href$=".doc"], a[@href$=".xls"]');
if (c.windowOpen) {
	eFiles.click(function(){
		window.open(this.href, '_blank');
		return false;
	});
}
eFiles.addClass(c.externalClass);

バナーで外部リンクする場合externalLinkクラスを削除

さて、このブログでもやっていますが、外部リンクが一目で分かるようにexternalLinkのあるa要素にのような画像を表示させていると、バナーで外部リンクする場合に次のような感じでアイコンが表示されちゃいます。

そこで、外部リンクを別ウィンドウで開く設定の最後に、次のように追加してバナーリンクの場合のexternalLinkクラスを削除します。なお、これは僕のブログでは、画像はひとつのパラグラフとして扱いp要素に「class="image"」をつけているのが前提です。

//バナーで外部リンクする場合externalLinkクラスを削除
$('p.image a').removeClass(c.externalClass);

~~たぶん親要素を取得するparentNodeなんかを使えば、もっと汎用的にできるのかもしれないけど、分からなかったので今回はパス。~~

【2008-09-18 追記】

上記のような特定の環境（「class="image"」をつけているのが前提）に依存しなくても、次の1行を追加すれば、img 要素を子要素に持つ a 要素から externalLink クラスを削除することが出来ます。

$('a:has(img)').removeClass(c.externalClass);

外部リンクは別ウインドウを設定

これでとりあえず外部リンクは別ウインドウを設定はOK。

//外部リンクは別ウインドウを設定
externalLink: function(options) {
	var c = $.extend({
		windowOpen:true,
		externalClass: 'externalLink'
	}, options);
	//https:も外部リンクの仲間に入れて自分のサイトは除く設定を追加
	var e = $('a[href^="http://"], a[href^="https://"]').not('a[@href^="/"]');
	if (c.windowOpen) {
		e.click(function(){
			window.open(this.href, '_blank');
			return false;
		});
	}
	e.addClass(c.externalClass);
	//PDF,Word,Exelファイルも別ウィンドウで表示
	var eFiles = $('a[@href$=".pdf"], a[@href$=".doc"], a[@href$=".xls"]');
	if (c.windowOpen) {
		eFiles.click(function(){
			window.open(this.href, '_blank');
			return false;
		});
	}
	eFiles.addClass(c.externalClass);
	//バナーで外部リンクする場合externalLinkクラスを削除
	$('p.image a').removeClass(c.externalClass);
	$('a:has(img)').removeClass(c.externalClass);
},

画像へ直リンクするとthickboxで表示

【2008-08-23 追記】: Facebox 1.2 - LightBox風に角丸で画像をポップアップという記事の中で、yuga.js の thickbox の機能を facebox に置き換える方法を紹介しています。僕はそちらの方が好きですのでオススメします。

もうひとつ、画像へ直リンクするとthickboxで表示のところを変更します。

ThickBoxの場合、閲覧しているブラウザのウィンドウサイズに応じて自動的に縮小する機能があります。便利なのですが、大きい画像を大きいまま見せないと文字が読みにくい場合なんかがあるので、そういった大きな画像には、ファイル名の最後に「-big」をつけて、ThickBoxを使わないことにします。サムネイルの最後に「-s」や「-thumb」などをつけるとの同じイメージです。

ただし、これは開く画像によって挙動が変わってくることになるので、ユーザーにとっては混乱する要因になるかも知れませんが、とりあえずということで。

//画像へ直リンクするとthickboxで表示(thickbox.js利用)
thickbox: function() {
	try {
		var thickboxImage = $('a[@href$=".jpg"], a[@href$=".gif"], a[@href$=".png"]').not('a[@href~="-big."]');
		tb_init(thickboxImage);
	} catch(e) {
	}	
},

最初に、href属性に「.jpg、.gif、.png」で終わり「-big.」を含むのもを除くa要素をthickboxImage という変数に代入しています。

つまり、ThickBoxで表示させたくない画像のファイル名の最後に「-big.」をつければOKです。

とまあ素人なりに色々勉強しながらやっていますが、DOMやjQueryの勉強にもなるし、とにかく便利なyuga.jsでした。