誰でも簡単に使える!ウェブサイトの表現力が格段に上がるjQueryプラグイン

スポンサーリンク




こんにちは!
WEB業界では、日々新しい技術が現れていきその進歩はとどまることを知りません。
そんな中で今日はサイトを作成する事を生業としている私が、必ずお世話になる便利な物をここでご紹介しようと思います。
その便利な物でも今回は比較的誰でも簡単に使えて、ちょっとしたウェブサイトでの表現力があがる技術の一つ「jQuery」というものの導入方法と、色々な方が作られているプラグインのご紹介をしたいと思います。

そもそもjQueryって何?

ご存知の方には「何をいまさら」と思われると思いますが、そもそも「jQuery」とは何なのでしょうか。

jQuery(ジェイクエリー)は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。様々な場面で活用されており、JavaScriptライブラリのデファクトスタンダードと呼ぶ者もいる[2]。公式サイトのキャッチコピーはロゴの下に「write less, do more」(意味:少ない記述でもっと多くのことをする)と表記されている。

出典:wikipedia

簡単にいってしまえば「javascript」というプログラムをより簡単なコードで記述できるようにするものです。
「javascript」は、ページをリロード(更新)する事無く動的に色々な物を変化させる事ができたり、内容を表示・非表示を切り替えたりと様々な使い方ができます。
ただ様々な事ができるのですが、「javascript」は一から記述しようと思うと、非常に難しくて数十行にもなるようなものもあります。でも、この「jQuery」を使って記述すると数行で済んでしまう事もあります。

本来HTMLだけの記述だと、決まった表現しかできないので時には味気ない、物足りないと感じることが出てきます。
しかし、この「jQuery」を使えるようになると、WEBサイトに動きを持たせたり、少し変わった表現、目を引く表現をする事が可能になるので訪問したユーザーを飽きさせません。

どんな事ができるの?

では具体的に「jQuery」を使った場合にどんな事ができるのでしょうか?
とても抽象的な表現ですが、
●画像をクリックあるいはカーソルを画像の上に持っていくと画像が替わる
●マウスオーバー(あるいはクリック)すると、一時的に非表示にしているものを表示したり、非表示にしたりと切り替える事ができる
●フォームの中の要素の中身を動的に書き換える

ほんの一例に過ぎませんが、上記のような事をページを移動する事無く行えたりします。

「jQuery」の使い方

まずは「jQuery」を使用したいページに読み込む必要があります。
「jQuery」をホームページで使えるようにするためには、2通りの方法があります。
一つ目は比較的簡単に使えるようになりますのでお勧めです。

googleから読み込む

Googleのサイトに置いてあるjQueryをページの<head></head>の間に以下の記述をして読み込むことで使用できるようになります。

本家サイトからダウンロードする

「jquey」の公式サイトからライブラリをダウンロードして、使用したいページの<head></head>の間に「jquery.mins.js」の置かれている場所を指定します。

その記述の下に自分でscript.js(名前は任意で決めても大丈夫です)というファイルを作成して、同じように読み込みます。この中にコードを記述する事で色々な事が出来るようになります。

準備する事はたったこれだけです!とっても簡単ですね。

簡単な使い方

それでは具体的に少しサンプルを書いてみます。
具体的な書き方は以下のようになります。

下のボタンを何度か押してみてください。

押したから見えたね!
押すと「押したから見えたね!」が表示されたり、消えたりしましたね?
何をしているかというと、ボタンを押すたびに「#naiyou」の表示・非表示を切り替えてねというプログラムを書いたことになります。
こんな風に簡単に動的にページの内容を変更する事が簡単にできるのがこの「jQuery」の魅力です。
記述方法は覚えるしかないですが、比較的短い書き方で表現できますので分かりやすいですね。

プラグインを利用する

簡単なものであれば、自分で書くこともできると思いますが、複雑な物は書くのも大変ですのでなかなか作りたいものが作れないというのも事実です。
ですが、安心してください!世の中にはあらかじめ色々な機能を作ってくださっている方がたくさんいて、色々なところで公開してくださっています!
ですので、いちいち書かなくてもいいんです!
最近色々なサイトで目にする画像のスライダーなども公開してくださっている方がいますので、簡単に導入できます。
その例を挙げますと、

●「bx slider」

複数枚の写真をスライドで見せるようにできるプラグインです。しかも、レスポンシブデザインにも対応してるのでスマートフォンでも問題なく動作します。
公式サイト bx slider

●「FlexSlider 2」

こちらも複数枚の写真をスライドで見せるようにできるプラグインです。同じくレスポンシブデザインにも対応しています。
公式サイト FlexSlider 2

ここに挙げたのはほんの一例です。
「jQuery プラグイン」などで検索すると、非常にたくさんのものが見つかると思いますので試してみられてはいかがでしょうか?

まとめ

今回は画像のスライダーをご紹介しましたが、「jQuery」はその他にもいろいろな機能を実装することができる非常に便利な物です。
こんな表現できないかな?こういう事できないかな?など、何か表現方法に悩んだりしたときは、一度いろいろなプラグインを探してみるのもいいかもしれませんね。
もしかしたら、簡単に表現の幅を広げる事が出来て、ユーザーを飽きさせずにホームページを閲覧してもらえるきっかけになるかもしれませんので、興味がある方は一度導入してみてはいかがでしょうか?

スポンサーリンク




記事をシェアお願いします