jQueryプラグインを利用して簡単に動きのある表現を。 – こんなことが出来るようになります!その2

jQuery

こんにちは!StudioSPECのakrです。

前回の記事

WordPressを利用した簡単に更新ができるウェブサイト。

に引き続いて、3.4.5.講座連動企画「こんなことが出来るようになります!」の第二弾をお届けさせていただきたいと思います!

3ヶ月で人生のキャリアがみにつく3.4.5講座についてはこちらに詳しく。

3.4.5.講座特設ページ

それでは本題に戻り、

スマホ対応!ウェブサイトに簡単に動きのある表現を

ウェブサイトにインタラクティブな動きを加えるといえば、数年前までFlashの独占といった状態でした。

しかしながらiPhoneの台頭によりFlashもその姿を見かけることは殆どなくなってしまいました。

変わってここ数年、ウェブサイトにインタラクティブな動きを用いるのにスタンダードなのがjQueryを利用したコンテンツです。

jQueryとは?

jquery-logo

jQueryとはAjax(Asynchronous JavaScript + XML)のライブラリの一つです。

通常、Webページではデータを送受信するためには、ページそのもののリロード(同期通信)が必要になります。 そこを、JavaScriptの非同期通信を応用し、リロードせずに同一ページ内での動的処理を可能にしたのが、Ajaxです。 これにより、送信してもページが切り替わらないフォームや、同一ページ内でのHTMLの動的な変化を実現することができます。 そのため、Flashを使わなくてもまるでFlashのような滑らかなアニメーションや、インタラクティブなページを作成することができます。

このような技術を総称して Ajax(Asynchronous JavaScript + XML)と呼びます。

Googleマップなんか代表的な例です。 (ページが切り替わらずに情報を取得していますよね!)

Ajaxには沢山のライブラリーが存在し、そのライブラリーのなかでも最も普及し、さまざまなプラグイン(拡張機能)があるのがjQueryなのです。

このプラグイン(拡張機能)=「インタラクティブな動きをサポートしてくれるもの」と、最初のうちは考えていただいても良いかと思います。

想像できる、たいていの動きはこのjQueryのプラグインで解決することが可能

また、そのプラグインの数も膨大で、想像できるとたいていの動きはこのjQueryのプラグインで解決することが可能と言っても過言ではありません。

具体的な設置方法は追ってお伝えするとして、実際にどのようなことが出来るのかをデモサイトを用いてご紹介させていただきたいと思います!

jQueryプラグインを利用したデモサイト

こんなことが出来るようになります!JavaScript編

jQueryプラグインで実際にどのようなことが出来るのか

前途の通り、jQueryのプラグインを利用すると想像できるたいていの動きをカバーすることが可能になります。

また、jQueryは記述自体もとても簡単なので、なれるとプラグインを利用せずとも自分で直接命令を記述することも可能です。
(実際にプラグインを利用せず、数行の記述のみで解決可能な動きもたくさん存在します)

今回はそんなjQueryのプラグインの中でも定番なものを前回同様、デモサイトでもって幾つかご紹介させていただきたいと思います。

スライドショー(画像)

DEMO

よくウェブサイトのトップページに用いられている画像が切り替わる仕掛けです。

スクリーンショット 2014-08-12 12.59.31

複数枚の画像が順番に切り替わるように設定することが出来ます。

今回設置したものをレスポンシブに対応させているのでサムネイル画像の設定はしていませんが、サムネイル画像も簡単に設定することが出来ます。

このjQueryプラグイン自体でも沢山の設定が存在して、画像の切り替わりの演出や速度なんかも簡単に変更することが出来ます。

また、スライドショーのjQueryプラグインも様々なものが存在していますが、どれも基本的には設定が簡単なので気軽に使用することが出来るjQueryプラグインとして定番の一つです。

スライドショー(コンテンツ)

DEMO

スライドショーには沢山の種類が存在し、画像や映像だけでなく、コンテンツ自体をスライドさせられるjQueryプラグインも存在します。

コンテンツスライダー

どうしても縦に長くなってしまいがちなコンテンツをスッキリと収納することが出来るようになります。

飲食店のメニューやスタッフ紹介などのコンテンツと相性がとてもよいです。

この後に紹介する、クリックをすると画像が拡大するライトボックス系のプラグインと併用すると良いかもしれません。

パララックス(視差効果)

DEMO

パララックス効果(英: parallax effect)。

別名「視差効果」とも呼ばれ、個々最近Webデザインでよく利用されている、エフェクトのひとつです。

パララックス

パララックスとはブラウザをスクロールする際に、スクロールする速度がことなるレイヤーを設置することで見る側に奥行きを意識させるというギミックを指します。

古くはゲームなどでも使用された方法で、例えば宇宙空間を舞台にしたシューティングゲームなどでは、背景に表示される星が流れる速度を変えることで空間の奥行きを演出していました。

今回はスクロールさせた際に背景のみ固定させる、もっとも単純なパララックス効果なのでcssのみで表現していますが、このパララックス効果にも様々なjQueryプラグインがあります。

Masonry(メイソンリー)レイアウト

DEMO

Masonryとは、日本語で石工職や石工術、石像建築を意味し、その名の表す通りコンテンツをレンガ積みのように整列させるjQueryプラグインです。

Pinterestがこのレイアウトを採用していることで一躍有名になったレイアウトです。

Masonry

従来、写真等を並べてライブラリにしようとした際はそれぞれの画像の高さを併せて綺麗に並ぶように設置しないといけませんでした。

そんな中、このMasonryレイアウトの登場で画像の縦横比の制限を受けること無く、レイアウトすることが可能になりました。

もちろん画像以外にもテキストを用いたコンテンツにも対応させることも可能です。

ブログの一覧ページにこのMasonryレイアウトを用いているサイトもあります。

StudioSPEC

そうです、StudioSPECのウェブサイトがそうです。

このMasonryレイアウトはレスポンシブのウェブサイトとも相性が良く、適応させやすいのも特徴で、StudioSPECの場合はWordPressと組み合わせて利用しています。

画像やコンテンツのソート機能

DEMO

並べた画像をカテゴリごとに仕分けする機能をつけることも可能です。

ソート

これもStudioSPECのブログ一覧ぺーじも使用しているのですが、画像やコンテンツにカテゴリを与えて、カテゴリごとに仕分けするjQueryプラグインも存在します。

具体的な利用例として、飲食店のウェブサイトのギャラリーなんかに利用すると有効的です!

画像の拡大表示

DEMO

こちらもjQueryプラグインの中でも比較的利用用途が多いスタンダードなプラグインです。

ライトボックス系

対象の画像をクリックすることにより、拡大表示させるjQueryプラグインです。

一般的に「ライトボックス系」のプラグインと呼ばれています。

拡大表示させる事ができる対象物は画像だけではなく、映像やテキストを含んだコンテンツなども拡大表示させることも可能です。

こちらも様々なプラグインが存在していて、グループごとに表示させる事ができるものや様々な機能を要したものがあります。

この他にも数えきれないほどのjQueryプラグインが存在します

しかもそのどれもが、基本的には簡単に設置させることが可能です。

勿論、ウェブサイトの目的に応じて必要な機能を搭載させてあげることが一番重要ですが、適材適所をわきまえることによって普通のウェブサイトに簡単に華を与えてあげることが可能になります。

そして、その華を与えてあげることにより、ユーザーも直感的にサイトのコンテンツに触られることが可能になるので、ウェブサイトのもつ目的を達成させるための大きな補助になり得ます。

まずは実際に設置してみて動いて「おお!」ってなることからで問題ありませんので、インタラクティブな表現を体感してもらえると嬉しいです。

僕の場合はFlashでしたが、はじめて自分で作ったFlashが動いた時の感動は未だにリアルに覚えています!

「動いたー!」って。

今考えるとどうしょうもなく、しょうもないコンテンツでしたが、やはり動きがあるコンテンツを自分で設置できた時は嬉しいものです。

もちろん、派手な動きだけに囚われてウェブサイトのもつ本来の目的を見失ってしまっては本末転倒ですが、ウェブ制作が好きになる一つの要素として楽しんでいただけると、うれしいです!

3.4.5講座ではjQueryを利用したインタラクティブなコンテンツも学習します。

ご興味有る方はお気軽にお問い合わせください! 3.4.5.講座について、詳しくはこちらの特設ページを御覧ください。

banner-1

Facebookコメント