“優雅なウェブサイトを構築する「yuga.js」はかなり便利。（でも、一部困ったことが。）”という、夢実現のためのアファメーション。

簡単ギャラリーからするする～っと移動まで…超カンタン！

Ajaxっぽいギャラリーを実現する「thickbox」（使い方はこの辺を参照）や、ページ内へのリンクへするする～っと移動するギミック、「btn」というクラスを設定するだけでロールオーバーが実現できる…など、大小さまざまな機能が盛り込まれた、すごく便利なJavaScriptライブラリになってます。
（以前だったら、それぞれを実現するには個別にがっつりスクリプトを書かなくちゃ実現できなかったもんね。）

まさに「今っぽいサイト」をカンタンに作ることができる優れものです。

かゆいところに手が届く機能もバッチリ。

さらに便利なのは、外部のサイトへのリンクのときは、自動的に新しいウィンドウを開いてそのサイトを展開してくれるところ。

通常、新しいウィンドウを開いてそこにページを表示する場合、aタグの属性に「target="_blank"」を指定しなければならない。

けれども、この「target属性」はxhtmlのバージョンによってはバリデーションに通らない。

そこでこの「yuga.js」を使うと、なにも指定しなくても、サイト内へのリンクは通常通りにページ遷移して、外部へのリンクのときのみ別ウィンドウを開く…なんてことができちゃうわけです！

うーむぅ…。まさに「優雅」だ。

今作ってるサイトでぜひ使わせてもらおう。

MovableType（ムーバブルタイプ）でリンクが効かない！？

…と、喜んでいたら、ひとつ問題が。

ページ内リンク（idを指定してそこに移動する）の場合、するする～っと移動する動きがあってすっごく心地いいんだけど、同じサイトの別ページに指定したidに飛ぶことができないらしい。

例えば、MovableType（ムーバブルタイプ）などのカテゴリーページから、個別エントリーのページの追記部分に飛ぶときに、デフォルトだと

<a href="category/hoge.html#more">続きを読む</a>

というふうに、urlの後ろに「#more」をくっつけて、そのページの該当idの部分に飛ぶようになっている。
けれども、これがうんともすんともいってくれないと。

「するする～」が効かないとかだけならいいんだけど、そうではなくてリンクが効かずにページ遷移できない状態。...orz

さらに、ドリームウィーバーのライブラリ機能を使ってサイトを作ってる場合、該当箇所は

<a href="index.html#hoge">ほげ</a>

となるので、自ページへのidにも飛べないという事態に。
うむぅー。これは困った。

でも、どうしても「yuga.js」を使いたい！優雅なウェブサイトを作りたいっ！！

ってことで、仕方がないので、とりあえず

dirPath="../";
//階層が変わるので、各htmlにて相対パスを記述

directUrl=dirPath+"category/index.html";
//飛び先のURLのパス

function jumpUrl(id){
location.href=directUrl+id;
}

というスクリプトを作って、呼び出し側のaタグは

<a href="../category/index.html#hoge" onclick="jumpUrl('#hoge');">カテゴリーのほげへ</a>
（いつか修正版ができたときにすぐに修正できるように、hrefは通常のリンクURLを指定。ｗ）

という感じにしてみました。（つまり、ふつーにジャンプするだけ。汗）

せっかくの優雅さが半減。（泣）

とりあえず「リンクが効かない」という最悪の状態は回避できたけど、せっかく「yuga.js」を使ってるのに優雅じゃなくなちゃってます。...orz

とっても残念な感じなので、勢いあまって中村さんに直接メールしてみました。
（忙しいだろうから、返事返ってくるかわかんないけど。）

しゅ、修正版ってできないのかな？
できればリリースして欲しいなー。（ザ☆願望ｗ）

追記：2007/09/11

メールを送ったら、さっそく中村さんからお返事きました！
（お忙しい中ありがとーございまっす！！）

こちら検証してみました。
原因はinterface.jsを使って実現している
ページ内リンクをアニメーションさせるスクリプトのようですね。
この機能を無効にすれば問題なく動作することを確認しました。

$("body").ScrollToAnchors(500);
         ↓
//$("body").ScrollToAnchors(500);

ということで、別ページへのidへのリンクは、yuga.js単体の場合、現状では「するする～」をあきらめるしかないということで。
（プラグイン内の実装部分なので、カスタマイズはすぐには難しいらしい。汗）

なので、とりあえず上記↑のような若干優雅じゃない方法で我慢することにしまっす。ｗ

追記：2008/03/18

現在、yuga.jsは「0.5.1」にこっそりとバージョンアップ。
利用できるjQueryも1.1xから1.2.xになってます。

さらに、これまで「するするスクロール」を実装するために利用していた「interface.js」がjQuery 1.2.xでうまく動作しないため、yuga.js 0.5.1では廃止。独自に実装したそうです。

参考記事

• あの優雅なウェブサイトを作るためのyuga.jsがこっそりと「0.5.1」にバージョンアップ！

アファメーションの宝庫！→あの独立・起業ネタの情報ランキング！