俺の図書館

君の美術館メンバーによる、仮想週間雑誌ブログ

PREV | PAGE-SELECT | NEXT

≫ EDIT

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

| スポンサー広告 | --:-- | comments(-) | trackbacks(-) | TOP↑

≫ EDIT

デジタルランナー100% Vol.18

デジタルランナー100%

■特集 「jQuery」 筆者 Hisp

たまにはわかる人にしかわからない記事でも書いてみようと思います。
先週金曜日がやってたし!
最近手探り状態で使い始めたjQueryについてです。
Hisp自身お勉強中の身なので、メモ代わりみたいなものです。

jQuery: The Write Less, Do More, JavaScript Library
http://jquery.com/


jQueryは今WEBでもっとも注目されているJavaScriptライブラリです。
GoogleMAPやTwitterなど、Ajaxを使ったサービスが広く使われるようになり、
JavaScriptの重要性が増している昨今、
様々な機能をとても簡単に実装出来る様にしてくれるのが、jQueryです。

jQueryがとても優秀な点はブラウザを選ばない点で、
HP製作者はブラウザごとに処理を振り分ける必要性がありません。
そして、HP製作者として駆け出しのHispしては何より嬉しいのが、
プラグインによる拡張性の高さです。

例えば、画像にマウスを当てると画像が半透明になる、というエフェクトを実装したい場合、
そういう機能として作られたプラグインを組み込むだけで実装する事が出来ます。
jQueryは基本的な土台で、その上にプラグインを乗せて機能を拡張していきます。
(OSとソフトウェア的な関係)
プラグインの組み込みも非常に簡単で、基本的にはjsファイルを読み込むだけで済みます。

例)palette ~人々が愛した幻想郷~特設サイトの場合




これは特設サイトのヘッダの一部です。(14~16行目)
1行目がjQueryの読み込みです。
プラグインを使う場合、まずは一番最初に読み込まなければいけません。
そして2行目3行目が共にプラグインのjsファイルで、
それぞれ、Lightboxエフェクトとスムーズスクロールの実装を担っています。

http://plugins.jquery.com/project/jquerylightbox_bal
http://coliss.com/articles/build-websites/operation/javascript/296.html

Lightboxは特設サイト中腹にあるサンプル画像をクリックした時のエフェクトです。
画面が暗くなり、中央にボックスが浮き出るエフェクトを一般的にLightboxと呼びます。
画像を別窓で開くことなく大きく表示し、かつそこに注視してもらう事が出来ます。

スムーズスクロールはメニューやTOPへなどをクリックした時に、
一瞬でアンカー先に移動せず、自動でスクロールして目的の所で止まる機能です。
これは、ページ内での移動を明確にし、
自分が今ページのどの辺を見てるのかを把握しやすくする狙いがあります。


例)Seven Colors Army特設サイトの場合 
(これもHispが作ってます。ソースを開いてmetaタグのauthorを見ればほら…!)





Seven Colors Armyでは、メニュー部分のエフェクトに使ってます。
あのぬるぬる動いてる奴です。
マウスのロールオーバー時に何かエフェクトつけようと思って、
jQueryプラグインを色々探してる時に見つけたエフェクトでした。

こちらではプラグインの読み込みと共に、スクリプトの記述も必要となります。
アニメーションさせるクラス.kwicksを指定し、
アニメーション時に広げる幅と各要素間の隙間の幅を指定しています。

http://www.jeremymartin.name/projects.php?project=kwicks
http://www.jeremymartin.name/examples/kwicks.php?example=1(デモページ)

上記のデモページを見た時に、
隠れてる部分にフライヤー画像のちびっ子達を使おうと決めました。
そしたら何ともまぁ可愛い事可愛い事。


こんな感じでとてもお手軽に色々実装できるjQuery、
HPにちょっとした動きをつけたいなーと思ってる方にはとてもオススメです。
是非使ってみては如何でしょうか。

ただ、乱用してしまうとページが重くなってしまい、
低スペックPCには優しくなくなったりしますので注意。
また、リンク先を見れば分かるように基本的に海外サイトばかりです。
英文を大体でいいので把握して、(中国語だったり仏語だったり伊語だったりすると……)
ソースなどから利用方法を読み取る技量が必要になりますので頑張りましょう。

ここまで書いておいてあれですが、jQueryはこんなもんじゃないです。
もっともっと色々機能と可能性を秘めていて、使い方次第で色々出来ます。
興味のある方は日本語ドキュメントなどを見てみるといいと思います。
駆け出しの身には難しいですが……。


■何でも紹介コーナー 筆者 Hisp

メタルギアなマンション‐ニコニコ動画(9)
http://www.nicovideo.jp/watch/sm9697112

完全にMGSや!
企画した人は何を考えているんだろうw

猫とアヒルとサル‐ニコニコ動画(9)
http://www.nicovideo.jp/watch/sm8747847

一発ネタにも程があるだろう!
吹いたら負けとは正にこの事。
負けましたが。

| 旧 木:ゲーム・電脳 | 23:22 | comments:0 | trackbacks(-) | TOP↑

COMMENT













非公開コメント

PREV | PAGE-SELECT | NEXT

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。