jQuery APIでWebサイトを演出しよう

jQueryプラグインの基本

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
プラグインの使い方、仕組みなどについてご紹介します。
講師:
06:50

字幕

このレッスンでは jQuery プラグインの基本と概要について学びます。それでは plugin フォルダーこちらを Sublime Text にドラッグアンドドロップします。そして index.html をダブルクリックで開いておきましょう。開いたら次は右クリックからOpen in Browser でブラウザーで表示をさせます。表示されたら少しスクロールをしてPractice の下に写真があると思うのでこちらをクリックしてみましょう。クリックするとこのように画像がポップアップで開きます。Close ボタンもしくはこの白い背景部分をクリックするとこのように画像を閉じることができます。こういった機能を1からjQuery で書くのは非常に大変です。そこで、世界中で公開されているプラグインというものを使うことでこのような機能を簡単に使うことができます。そこで概要なのですがjQuery はプラグインというものをダウンロードして使えます。今回は colorbox というものを使ったので、検索をしてみましょう。colorbox jQuery などといった検索ワードで検索をすると1番上に出てきます。このように colorbox というjQuery の、lightbox は先程のポップアップウィンドウのような効果です。 これは jQuery で出来ているとそして MIT ライセンスというフリーで使えるというライセンスになっています。そしてこちらをダウンロードしてファイルを使うと使えるようになるのですが基本があるので覚えておきましょう。まず必要なファイルは必ず、colorbox だったらcolorbox.js というものが必ず入っています。ここでフォルダーを少し表示してみましょう。plugin フォルダーの中のjs フォルダーを見てみましょう。このように jQuery の本体とjquery.colorbox-min.js が入っています。大抵ダウンロードすると沢山のファイルが入っていて戸惑うことがありますがまず必ず必要なのはこのようにプラグインの名前が付いたJavaScript です。そして名前の js のほかにmin と付いているものやpac と付いているものがありますがそちらはファイルサイズを軽くするために圧縮をしているものなので中身は一緒です。なのでどっちかを選べば大丈夫です。圧縮版か圧縮版でない物を選べばいいのですがただファイルが軽いほうがいいのでmin が入っている場合はそちらを使うことをお勧めします。 そして js をダウンロードしたものからコピーしたら、次はプラグイン名とcss というものがあればそちらも使ってあげましょう。これはない場合でも動くことがあるので例えば今回は css フォルダーの中にcolorbox.css というものがあります。そして画像についてですが今回はこのバツマーク、これが実は画像で作られているのでダウンロードするとそういった画像が入っているのでこういった画像を実は使用しています。このようにプラグインを使う時はまずは何が必要なのかを見極める事が大切になります。そしてそれをちゃんと外部ファイルとして読み込むのが最初のステップです。次は jQuery プラグインの注意点です。読み込む場所は必ずjQuery ライブラリの下であること。ということを見ていきましょう。Sublime Text を開きます。スクロールをします。そうすると jQuery ライブラリというのはこのように 1.8.3 のようにナンバーが振られたライブラリです。これの下に、この colorbox という名前の js が無いといけないということになります。例えばこのスクリプトタグを切り取って上にペーストしました。 これで上書き保存をしてブラウザーに切り替えて更新を押して、そうすると先程のスクリプトがもう効かなくなってしまいます。これはこの colorbox というのがjQuery ライブラリに依存しているので先にライブラリを読んでおかないとこのスクリプトが動かないということになっておりますので、注意をしてください。そして次ですね。ブラウザーで説明を見ていきましょう。文法としてはまずセレクターを作ってその後にメソッドのようにプラグイン名を付けて何かオプションがあればその括弧の中に記述するといったような文法になっているのがほとんどです。コードを見てみましょう。Sublime Text に行ってこの部分ですね。まずセレクターはPractice という箱に入ったa というのがセレクターで特定された後にプラグイン名があります。今回 colorbox なので.colorbox というメソッド扱いになっていてそしてその中にオプションとしてspeed というものが入っています。複数のオプションを指定する時はこの波括弧をよく使いますのでこれも覚えておいてください。なのでここのスピードを例えば 2000 と2 秒にして上書き保存をしてブラウザーで表示をして更新をしてから写真をクリックすると、2 秒待ってから写真が開くようになりました。 このように記述する量は少ないのですが読み込むルール、こちらが非常に大切なので必ず覚えておくようにしておきましょう。このレッスンでは jQuery プラグインの基本についてご紹介しました。

jQuery APIでWebサイトを演出しよう

jQueryはJavaScriptを効率良く記述することができる、世界中で広く使われているライブラリです。APIとは外部のウェブサービスを自分のサイト内で利用できる仕組みのことです。このコースではjQueryやAPIの基本を学習したのち、jQueryのプラグインやGoogle APIなどの実践的な使い方について学びます。

2時間43分 (22 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年05月29日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。