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

jQueryの基本

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jQueryライブラリの読み込みと、文法のおさらいをしましょう。
講師:
09:41

字幕

このレッスンではjQuery の適用の仕方、そして基本的な文法をおさらいしてみましょう。それでは jQuery_finalというフォルダーがあるのでfinal の方の index.html をGoogle Chrome で開いてみましょう。開くとこのようなページが開いて、ここの Practice と書かれている見出し部分を一度クリックしてみてください。そうすると箱が消えたはずです。もう一度クリックするとこのように箱が出てきます。この jQuery の実装方法を学んでいきましょう。もう一度クリックするとこのように消えます。どのようなメソッドを使っていけば実現できるか考えてみましょう。それではもう一度フォルダーに戻ります。アプリケーションの切り替えはMac では Command+TabWindows はAlt+Tab でできるので是非覚えておきましょう。それではフォルダーの方に戻って、final ではなくbegin のフォルダーをフォルダーごと Sublime Text にドラッグアンドドロップします。落としたら、まずフォルダーを落としたということはフォルダーのファイル全てを見ることができるのですが今回サイドバーがまだ出ていないのでサイドバーを出しておきましょう。 Sublime Text のメニューバーView のメニューの中からSide Bar という項目のShow Side Barという項目をクリックしましょう。そうすると、このように今ドロップしたbegin のフォルダーが見えてると思います。そして js フォルダーもあるのですがjs フォルダーは今、空の状態です。それでは index.html をダブルクリックで開きましょう。開いたら上から見ていくと、特にスクリプトの記述がありません。jQuery はライブラリを読み込まなければいけません。ここでこちらを右クリック、ページ内で右クリックをしてOpen in Browser をクリックしてみましょう。このように Google Chrome でページを開くことができました。final と見た目はほぼ一緒ですがこの Practice という見出しをクリックしても何も変化はありません。それではまず jQuery で実装するということはjQuery ライブラリを前提として読み込まなければいけません。読み方には2通りあります。CDN と呼ばれるコンテンツデリバリーネットワークを使ってネット上から jQuery 本体をダウンロードして使う方法。 もしくはダウンロードで本体そのものjQuery ライブラリをそのものをダウンロードをして自前でリンクを貼る方法があります。その2つを試しておきましょう。まず CDN を使ったやり方です。新規タブを開いて検索で探してみましょう。jQuery そしてGoogle という風に2つの単語を入力してEnter を押しましょう。そうすると Google HostedLibraries というものがあります。こちらをクリックします。そうするとこちらは Google が開発者向けにライブラリをホストしてくれているというものです。Google みたいな強力なサーバーを使っているところからコンテンツを提供してもらえるとサイトの読み込み速度も向上しますし、自分でファイルを持たなくてもいいので管理も容易になります。さてここでメニューがいろいろありまして、jQuery の他にも色んなものが提供されているのですが今回は jQuery を使いたいのでjQuery というメニューを探してこちらをクリックします。そうするとこのようにjQuery の項目がありますがjQuery にはバージョンがあります。バージョン 1. 何々はIE の 8 までをサポートしています。 そしてバージョンの 2. 何々という所はIE 8 以下をサポートしていないということになりますのでうまく自分が作るサイトの要件に合わせて使い分けをしていきましょう。今回使用するのは 1.8.3 というjQuery のライブラリを使います。世界中に公開されているプラグインはライブラリのバージョンによって動かない場合がありますがこの 1.8.3 は比較的安定しているのでこちらを使いたいと思います。使い方はこちらの緑色の文字の部分を選択してコピーを取ります。コピーを取ったら Sublime Text にアプリケーションの切り替えで戻りましょう。戻ったら35行目。id wrapper が閉じた後ろの方でペーストをしましょう。これで読み込みが完了と思いきや、ローカルだと読み込みができませんローカルだとということがどういうことかというと、自分のパソコンで今みたいに HTML をChrome にドラッグアンドドロップするというやり方だとこの状態だとコンテンツデリバリーネットワークからダウンロードがされませんなぜかというと、こちらのソース属性の中に// から始まるアドレスで書いてあるからです。こちらを読み込むためにはhttp: というのを頭につけなければ読み込みが進みません。 ただ、ウェブサーバー上にアップロードしてしまえばこの書き方は有効です。なのでとりあえずこのままにしておいてバージョンの名前だけ変えましょう。1.11 ではなく 1.8そして 0 を 3 に変えておきましょう。そして一度上書き保存をしてブラウザーに戻りましょう。そしてもう1つやり方がありましたね。ダウンロードの方法を試しましょう。jQuery と検索をします。そして jQuery.comこちらにきましょう。そして右側に大きなボタンがあります。Download jQuery とあるのでこちらをクリックしましょう。クリックするとこのようにダウンロードできるリストが書いてあります。それではそのまま1番下までスクロールをしましょう。スクロールしたら 1.8.3 のMinified という所をクリックします。クリックすると文字の羅列だらけになるので「ファイル」から「ページを別名で保存」を選んでクリックしましょう。クリックしたらjquery_begin フォルダーの中のjs フォルダーの中を開いてそして保存をしましょう。これでファイルを保存しました。それではSublime Text に戻ります。そして36行目にこのように灰色になった部分があるのでコメントアウトを解除するショートカット、Mac は Command+/Windows は Ctrl+/ を押して解除しておきましょう。 この2行をセットで jQuery を読み込むようにしてみてください。1行目はウェブサーバーに上がっている用。2行目はそれが使えなかった時にjs フォルダーから同じ jQuery を読み込む方法です。後はスクリプトを書くだけですね。スクリプトを先に1セット作っておいてその内側に jQuery を表す $そしてセレクターを打ち込みます。セレクターは Practice の h3 をクリックしたら、function が開きますがその function は括弧を空にして中括弧を打ってそして $(そしてフェードさせたいものをここに書きますのでbox というクラスの物をfadeTogglefadeToggle はT が大文字になります。後は上書き保存してアプリケーションを Chrome に切り替えてbegin のファイルを見て更新を一度押してそして Practice の見出しをクリック。このように現れたり出たりということが完成していればオーケーです。もし動かない場合はダウンロードされているかスペルが正しいかを確認してこの文法をしっかりおさらいしておきましょう。このレッスンではjQuery の読み込みと基本的な文法のおさらいについてご紹介しました。

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

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

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

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

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

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