サイト制作効率アップ!jQueryもまだ使ったことがないという人にオススメな「yuga.js」

毎年大阪で開催しているクリエイターイベントが11/4(月・祝)に開催!(※僕も登壇します!)
クリエイター200人祭り2019大阪 3年後の可能性を立証せよ!怪盗Wの挑戦状

jQueryが便利便利っていうけど、結局どう使ったらいいの?
って人にぜひオススメなのがこの「yuga.js」ライブラリ。

制作者は日本人!
jQueryをベースにサイト制作する上で便利にし、「優雅」に制作するというテーマのもと作られているライブラリです。

yuga.jsの機能は
jQueryのプラグインでは定番なものが多いのですが
たくさんのプラグインを入れるよりこちらの「yuga.js」 をベースにしたほうが
早かったりするので僕はよく使っています。

普段からWebのことを学んでいる人などはいいかもしれませんが、
ちょっと趣味でって人にはjQueryといえどもコードを書いたり、
プラグインをいれたりするのは大変です。
ぜひ今回はそんな人でも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要素で囲みます。
実はたったこれだけw(!?)

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(偶数)クラスを追加

これマジ便利w
僕が一番使う状況というのはTable要素やli要素で表示する情報を
読み易くするために交互に背景色を 変えたりする時とか。

あとは新着情報とかで最後の項目だけは下線の点線が不要だとかw

この機能は「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/

毎年大阪で開催しているクリエイターイベントが11/4(月・祝)に開催!(※僕も登壇します!)
クリエイター200人祭り2019大阪 3年後の可能性を立証せよ!怪盗Wの挑戦状

この記事を書いた人

カッシー(樫本祐輝)

カッシー(樫本祐輝)

株式会社クリエイティブユニバース代表取締役。
クリエイターはもっと幸せになってもいいんだ!と「クリエイティブな人に幸せを」を理念に活動。

2017年に法人化。現在は事業戦略クリエイティブ・プロデューサーとしてコンサルや、クリエイター・フリーランスギルド「TheCreative」を主宰。大阪東京合わせて80人を超える。フリーランスカレッジ、クリエイター200人祭りなど主催。

twitterにて「#カッシーのフリーランス講座」というハッシュタグでフリーランス向けのノウハウ・お役立ち情報発信してます。クリエイター・フリーランス支援の独自の統計をもっていることを強みに発信しています。イベント・セミナー情報もTwitterが一番早いのでぜひフォローください!

クリエイターで独立・副業を目指す人へ

長年のフリーランス支援の知識を元にフリーランス向けのメディア「次世代フリーランス研究所(通称フリラボ)」を立ち上げました。