カッシー（樫本祐輝） 
jQueryが便利便利っていうけど、結局どう使ったらいいの？
って人にぜひオススメなのがこの「yuga.js」ライブラリ。
制作者は日本人！
ｊQueryをベースにサイト制作する上で便利にし、「優雅」に制作するというテーマのもと作られているライブラリです。
yuga.jsの機能は
jQueryのプラグインでは定番なものが多いのですが
たくさんのプラグインを入れるよりこちらの「yuga.js」 をベースにしたほうが
早かったりするので僕はよく使っています。
普段からWebのことを学んでいる人などはいいかもしれませんが、
ちょっと趣味でって人にはｊQueryといえどもコードを書いたり、
プラグインをいれたりするのは大変です。
ぜひ今回はそんな人でもjQueryの恩恵を受けれる日本人が作られた
「yuga.js」を紹介したいと思います。
こんな人にオススメ
・jQueryはまだ使ったことがない
・jQueryは触ったことあるけど、プラグインとかいれたことがない
・最近jQuery触りだした人
・サイトの制作効率を上げたい人
・趣味でホームページ作ってる
ぶっちゃけ各コードの解説は本家を見てもらったほうが良いと思うので
あくまで僕視点で何がどう便利なのか解説していきたいと思います。
最後にyuga.jsは使ってるよ！って人向けな情報も書いてます。
yuga.js紹介目次
・簡単！ボタンに自動ロールオーバー機能
・自動的に今見ているページのメニュー画像を変更する
・_blankを使わず別ウインドウ表示にする
・画像直リンクはLightbox風に表示
・自動的にページ内リンクはスクロール
・超シンプルタブ機能
・デザインの幅が広がる！要素にfirstChild,LastChild,odd(奇数),even(偶数)クラスを追加
・不要な機能を切りたい場合
・まとめ～さらに効率を上げるために～
簡単！ボタンに自動ロールオーバー機能
これは非常に便利です。
やり方は簡単。
たったこれだけ↓
ロールオーバー用画像を用意し、
(ファイル名)_on.png という感じで”_on“というファイル名を追加した画像を用意しておき、
ロールオーバーして欲しい画像にclass=”btn”と設定するだけ!!
yuga.jsを読み込んでいればソースはつまりこれだけ↓
自動的に今見ているページのメニュー画像を変更する
よくグローバうナビゲーションで今自分が開いているページの画像は
変更したいっていうシチュエーションは結構ありますよね。
昔はDreamweaverのオプション領域を使ってBodyのIDを分けたりして対応させていたのですが、
JavaScriptを利用することで簡単に実現することができます。
こちらも非常に簡単でまず変更後の画像を用意します。
そしてロールオーバーの時と同じような感じで（ファイル名）_cr.pngという名前で用意します。
そして、対応させたい画像はa要素で囲みます。
実はたったこれだけｗ（！？）
yuga.jsを読み込むと、a要素で自分（今のページ）にリンクしている場合、
自動的に_crがついた画像に変更されるんです！
今までいつもこの機能をサイトに実装するの面倒だったんだよなーって人は
非常に効率が上がるのではないでしょうか？
_blankを使わず別ウインドウ表示にする
これはどういうこと？と考える人がいるかもしれませんが実は
target=”_blank”というのは推奨されていないのです。
ですが、サイトによっては当然別窓で開かないと困るリンクなどありますよね。
参考：target=”_blank”は非推奨?
http://standards.mitsue.co.jp/archives/001277.html
その辺を考慮されて実装されてるのがこの機能です。
外部リンクさせたいa要素に対し、class=”externalLink”とクラスを指定してあげることで
JavaScript側で別ウインドウを開いて処理してくれます。
画像直リンクはLightbox風に表示
恐らくわざわざ画像を見せるだけなのにページをご用意される方は少ないです。
でもサイトのデザイン上どうしても縮小するしかなく、
「クリックで拡大」 なんて書かれていて、別窓で画像を表示とかよくありますよね。
そんな状況を解決してくれるのがこの機能です。
「yuga.js」を使うと画像にリンクされてるものを自動的にLightbox風にしてくれます。
自動的にページ内リンクはスクロール
サイトを制作しているとページ内リンクを使う機会はしばしばあります。
いきなり画面がパッと切り替わると、何が起こったのか分からないためユーザに優しくありません。
「yuga.js」は自動的に#がつくa要素やarea要素のリンクを勝手にアニメーションしてくれるんです。
超シンプルタブ機能
とりあえずタブ機能を実現したいというときに
この機能は非常に役に立ちます。
ul要素にclass=”tabNav”を追加し、
li要素のa要素に仮に#tab1,#tab2,#tab3と振っていきます。
そしてそれに対応するIDを振った要素は勝手にタブの対象となり、
デフォルトではid=”tab1″（先頭のID）が表示され、残りのtab2,tab3は非表示となります。
ソースはこんな感じ。最低限タブっぽく見せるのにCSS少し書いてます
この機能はタブ以外にも色々な使い方がありそうですね！
「yuga.js」を読みこめば簡単に実現が可能です。
デザインの幅が広がる！要素にfirstChild,LastChild,odd(奇数),even(偶数)クラスを追加
これマジ便利ｗ
僕が一番使う状況というのはTable要素やli要素で表示する情報を
読み易くするために交互に背景色を 変えたりする時とか。
あとは新着情報とかで最後の項目だけは下線の点線が不要だとかｗ
この機能は「yuga.js」を読み込むと自動的にソースに適用されます。
どんな風に適用されているかはFirefoxのFirebugなどで確認すると一目瞭然です。
ためしに先程のタブのDOMソースを見るとこんな感じになってます。
Tableやliといったリスト系以外にも単純にdivなどほとんどの要素に勝手に
firstChild,LastChild,odd,evenが適用されているため、使い方によっては
非常に細かいCSS設定をすることができます。
同じような機能をもつjQueryプラグインはありますが、
他の機能と合わせてこのような便利な機能も実装されるのです。 ただ読み込むだけで！
不要な機能を切りたい場合
恐らくここまで便利だと、不要な機能があると思います。
またサイト制作中にもしかして「yuga.js」の影響でおかしくなってる？なんて時に
いちいち読み込みソースを削除とかやってると大変です。
そういう時はyuga.jsを開いてもらってメソッドを実行しているところで
コメントアウトしてもらうと、機能の切り分けができます。
上記では試しに自動ハイライトと自動ページ内スクロールを切ってものです。
※上記のコメントは僕が説明のために追加したものです。
まとめ～さらに効率を上げるために～
どうでしたでしょうか？
「yuga.js」は非常に魅力的だと思いませんか？
これだけの機能が追加されるならjQueryも触ったことがない人でも試してみたくなるかと思います。
jQueryの追加プラグインをたくさん追加していくのも結構ですが、
一つのライブラリだけでここまで実現してくれるのは非常にありがたいです。
ここまで読んでくれた人で
・yuga.jsは使ったことあるよ
・もっと作業効率を上げたい
という人はCSSHappyLifeさんの
【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1というのがおすすめです。
もちろんまだHTML5は早いよって要望もあるので、ある程度考慮されている設計になっています。
こちらのテンプレートにはyuga.jsは格納され拡張されています。
また当然jQueryを初め、他にもGoogleAnalyticsのJSやIE向けにhtml5.jsなど組み込まれています。
※多少使い勝手が違うので詳しくはソースを見ていただいたり、CSSHapplyLifeさんの過去の新規用セットの記事を読んでもらうと 理解頂けます。
新規で制作する際に俺俺フレームワークがあるという人は結構ですが、
もしまだあなたがわざわざDreamweaverで新規HTMLを作って作業を初めているのであれば
今回紹介したyuga.jsやCSSHapplyLifeさんのテンプレなど大変ありがたいものを使わせて頂いて効率を上げてサイト制作を行うことができます。
今回記事中に紹介に使った簡易デモソースは
こちらからダウンロードできます。
http://stid.jp/wp/wp-content/uploads/2011/04/yuga_demo.zip
内容は
・デモ1-自動マウスオーバー-.html
・デモ2-自動ハイライト-.html
・デモ3-Lightbox風表示-.html
・ デモ4-シンプルタブ機能-.html
です。
よりコーディングの時間を短縮してデザインやクオリティを上げていきましょう！
yuga.js
http://www.kyosuke.jp/yugajs/
