jQueryプラグイン活用講座

プラグインをコピー&ペーストで試す

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
プラグインをダウンロードしたら、公式ページあるいはREADMEの例をコピー&ペーストするだけで動くことが多いです。
講師:
07:17

字幕

このレッスンでは、jQuery のプラグインの簡単な試し方についてご説明します。今回例にとるのはjQuery の公式ページ「Plugins」に登録されているCircliful という円グラフを作るプラグインなんですけれどもcircle で探しましょう。ページをスクロールして、これです。公式登録ページのプラグインの場合にはここにダウンロードボタン(Download now) がありますし他のプラグインでも、通常トップページにダウンロードのボタンがあります。ですから、それをまずダウンロードしておきます。そして GitHub にREADME があればそこに説明があるでしょうしあるいは普通のプラグインですと、そのトップページの下の方に説明も併せて書いてあることが多いです。そして、この説明を見てみますけれどももう、コードをコピー&ペーストすれば動いてしまうというケースがかなりあります。Circliful はそういう例なので簡単にコピー&ペーストして試してみたいと思います。先ほどダウンロードしたCircliful のプラグインのフォルダをファインダーで開けてみました。まず index.html がありましてここで開くと、すぐにサンプルが見えてしまいます。 では Chrome で開くことにしましょう。こんなアニメーションの円グラフが作れる、というそういうプラグインです。でもせっかくですから新規にドキュメント、HTML ドキュメントを作ってそこに先ほどの説明からコピー&ペーストをして、試してみたいと思います。ダウンロードしたプラグインのファイルなんですが実際に使うライブラリ以外にもいろいろとファイルがあります。けれど、実際に使うファイルはこのプラグインの場合にはjs というフォルダの中に入っています。プラグインによっては div というフォルダだったりしますのでその名前はちょっと違ったりしますけれども、開いてみてそれらしい名前.js あと .min.js という大抵2つのファイルがあります。min の方は、コンパクトに圧縮してあります。例えば変数とか、余白とか、タブとか、改行とかを全部取りさらってできるだけ小さい容量にしてありますから、通常はこちらを使うといいでしょう。min が付いていない方、これは JavaScript のファイルで実際に開けてみると、どのようなスクリプトが書いてあるのかクラスが定義してあるのかということが見られます。ですから、開発者の方が中を見る場合にはこちらを扱うといいんですけれどもそうでない、特にサーバーにアップロードする場合にはこの min の方のファイルを使うといいでしょう。 そしてその他 css などもおまけに入っているようです。では HTML ドキュメントを新規に作ることにしましょう。Dreamweaver CC で新規にドキュメントを作ります。HTML ドキュメントを作りましょう。HTML でいいので「作成」です。横のパネルは邪魔ですので、パネルの表示は切ってしまいましょう。「表示」で「パネルの非表示」ということで、ウィンドウが広く使えます。あと、上のデザイン用の画面なんですが今回はいりませんので、「コード」だけの表示にします。これはちょっと邪魔なので消しておきましょう。タイトルぐらい、ちょっと変えておきましょうか。Sample というふうにしておきます。そして、ここに何を書くかこれは先ほどの README からコピー&ペーストしていくことになります。まず必要なのは、script 要素の読み込みですね。この2行が script 要素の読み込みになっています。jQuery はもちろん必要ですけれどもこの記述 script 要素はhttp からスタートしていますのでcdn、ネットワークでjQuery のライブラリを読み込むということになっていますのでローカルに jQuery が無くても大丈夫です。 で、こちらは js フォルダの中のというふうに書いてありますね。先ほど確認した通り js フォルダの中にライブラリがありますので先ほどのフォルダの中にファイルを作れば大丈夫でしょう。それから css も使うといいよ、ということでリンクがあるんですが先ほど css のフォルダがありましたね。ですからその中に、このファイルもあるのでこの3つの記述、全部コピーしてしまって大丈夫です。コピーして HTML ドキュメントの方に移行します。今コピーした記述は、head の要素の中に含めておきます。ペーストしましょう。ではまた README のページに飛びます。次は HTML ドキュメントの中に書く記述ですね。まぁ、あくまで例ですよ、というふうに言ってますけれどもこのままコピーしてしまいましょう。コピーして、またHTML ドキュメントです。今の div 要素は、body 要素の中に書きますのでここで改行して、またペーストします。そしてもう1回、README のページの方に移ります。最後は JavaScript の記述です。script 要素の中に書き込むんですがscript 要素もう書いてありますのでこのままコピーしてしまいます。 script 要素はhead の要素の中に書きますのでこの後に改行を加えて、ペーストです。jQuery とプラグインを使ったscript ですからjQuery の読み込み。プラグインの読み込み。その後の script 要素にペーストしないといけません。そして非常に簡単な記述ですね。多くのプラグインは3行から5行ぐらいで実行できてしまうのでここでじゃあ保存をしましょう。ファイルを保存します。ここはちょうど jQuery のプラグインCircliful のフォルダが開いていますのでここに名前を。では sample としましょう。Index と同じ階層ですね。先ほど確認した例の Index と同じ階層に保存をします。これで終わりです。では確認しましょう。「ファイル」から「ブラウザでプレビュー」「Google Chrome」で見てみます。ちゃんとアニメーションした円グラフが出来あがりました。このレッスンでは、jQuery のプラグインの簡単な試し方をご紹介しました。そのプラグインのページ、あるいは README を見て必要なファイルをダウンロードした上で、多くの場合はそのサンプル例からscript 要素の記述とHTML ドキュメントへの要素の記載それから jQuery のコード。 これらをコピー&ペーストするだけで動くことが多いということでした。

jQueryプラグイン活用講座

jQueryは広く利用されているJavaScriptライブラリで、機能を拡張するプラグインも数多く公開されています。このコースではインターフェイスやアニメーションが簡単に作れるiQueryのプラグインを多数紹介します。パーティクルのアニメーションや切り替え効果を加えた写真表示、アニメーションするパーツなど多くの作例を実際にコードを書きながら詳しく説明します。

2時間36分 (31 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年01月17日
再生時間:2時間36分 (31 ビデオ)

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

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

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