中村享介氏製作の、jquery.jsを利用した、「Web制作をちょっと優雅にするために」作られたjsライブラリ「yuga.js」。このライブラリを今回導入するに当たって後押ししたのは、ページへの機能の実装に当たって「既存のHTMLにclassやidを追加しなくてもOK」な点でした。とりあえずメインページ・テンプレートと、ブログ記事・テンプレートに適用してみました。

１、ダウンロード

kyosuke.jp（yuga.jsの製作者、中村享介氏のウェブサイト）からyuga.jsのファイル一式をダウンロード。

２、アップロード

ダウンロードしたファイル一式を解凍して、読み込みたいサイトの各自好みのディレクトリにアップロード。

今回の「外部リンクを別タブ（ウィンドウ）で開く機能の実装に必要なファイルは、以下の２ファイル

• jquery.js
• yuga.js

カスタマイズ - 必要な機能を取捨選択

上記のリンク、kyosuke.jpのページには書かれていないのですが、作者のblog、inputlogの「yuga.js 0.6.0 - 優雅なWeb制作のためのJavaScript」には詳しいカスタマイズ方法が掲載されています。

必要な機能を取捨選択したい場合、例えば「外部リンクを別タブ（ウィンドウ）で開く機能以外を無効にしたい」場合は以下のように行います。

yuga.jsをエディタで開くと27行目に以下のような記述があります。

$(function() {
  $.yuga.selflink();
  $.yuga.rollover();
  $.yuga.externalLink();
  $.yuga.thickbox();
  $.yuga.scroll();
  $.yuga.tab();
  $.yuga.stripe();
  $.yuga.css3class();
});

そして要らない機能をOFFにするには、それに該当する記述をコメントアウトします。今回は外部リンクを別タブ（ウィンドウ）で開くようにする機能以外をOFFにするので以下のように行います。

$(function() {
 // $.yuga.selflink();
 // $.yuga.rollover();
  $.yuga.externalLink();
 // $.yuga.thickbox();
 // $.yuga.scroll();
 // $.yuga.tab();
 // $.yuga.stripe();
 // $.yuga.css3class();
});

３、テンプレートのhead要素内に記述を追加

tadateto.netではドメイン直下に「js」ディレクトリを設けて、以下のような記述をhead要素内に追加しました。

<script type="text/javascript" src="<MTBlogURL>js/jquery.js"></script>
<script type="text/javascript" src="<MTBlogURL>js/yuga.js"></script>

４、ページの再構築

しばしお茶でも飲んで待ちます。

反映されていたら、ページ内の外部リンクは別タブ（ウィンドウ）で、内部リンクは同タブ（ウィンドウ）で開くようになっているのが確認できます。

５、余談

jquery.jsをベースに作られているので単一の用途には少々重装備かなということは否めませんが、yuga.jsのその他の機能（lightbox、ロールオーバー、lastchild/firstchildの擬似実装等）が自分には魅力的に映ったので今回導入に踏み切りました。

jsを書ける人は、fsikiさんの「新しいウインドウを開くべき？ - LogJET 」で公開されているソースをもとに実装した方が「無駄がなく最小限の量のコードで」同じことを実現できると思います。

Wordpressを利用している方なら、このfsikiさんの書かれたコードを元にinocco（hibiki）さんが書かれた「AutoExternalLinkプラグイン」を利用されるのが同様の理由、かつお手軽でいいのでは。

ページからの離脱が減るといいなあ。