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

スライドショーを作ってみよう 1

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
背景をスライドショーにしてみましょう。まずは動かしてみます。
講師:
07:55

字幕

このレッスンでは背景にスライドを追加していきましょう。まずは final のフォルダーを開いて結果を見てみましょう。final のフォルダーの中のindex.html をGoogle Chrome で開きます。開いたら、このように背景の写真が大体 3 秒置きぐらいにフェードインで切り替わっていきます。ここでは3枚の写真が交互に切り替わるように設定がされています。このような背景スライドを実装してみましょう。それではフォルダーに戻ってbegin のフォルダーをフォルダーごと Sublime Text にドラッグアンドドロップします。そうしたら index.html をダブルクリックで開きます。そして右クリックからOpen in Browser でブラウザーで開いておきましょう。今の状態はこの1枚の静止画が背景に貼り付けられているだけです。まずはこの背景を取り除くところからスタートします。Sublime Text に戻ってスタイルシートを開きましょう。css フォルダーの style.css をダブルクリックで開きます。そしてこちらの背景画像が設定されているのはMESSAGE というエリアのbackground message-bg というのが背景を設定しているエリアなのでこの1行を削除してしまいます。 そして上書き保存をしたら一応ブラウザーで確認をしておきましょう。ブラウザーを更新するとこのように背景写真が消えましてこの緑の色は少し透明な帯になっています。それでは jQuery プラグインを検索してみましょう。jquery そしてbackstretch という単語を入れます。そして Enter を押しましょう。検索結果で Backstretch というのが幾つも出てきますがGitHub と書かれている URL をクリックしましょう。GitHub の部分をクリックすると、このようにコードの共有サイトに飛びます。このコードの共有サイトにもデモや使い方が載っていますが基本的にはこのように jQuery 本体とjQuery プラグインの本体を読み込んだらセレクターで画像を読み込むという使い方に基本的にはなっています。それではスクリプトをダウンロードするのですがGitHub の全体のプロジェクトをダウンロードするのは右側の Download ZIP です。しかし今回は1つのファイル、つまりプラグインのファイル本体1つだけあればいいのでこの jquery.backstretch.min小さくなっている方をクリックしてそしてこちらの画面になったらRaw と書かれたボタンがあるのでRaw のボタンを一度クリックするとこのようにスクリプトが表示されますのでこちらを「ファイル」から「ページを別名で保存」で保存しましょう。 ではクリックをすると、保存する場所は大切です。begin のフォルダーの中のjs フォルダーの中に保存しましょう。そして保存を押します。保存を押すと js が読み込まれました。そうしたら Sublime Text に戻ってこの外部の js を index.html の1番下の方で読み込んでいきましょう。こちらに外部の js ファイルの読み込みがありますので例えばイージングのエリアにカーソルを置いてコピーペーストをするとすぐに行の複製が取れます。後はこの js のファイル名を入れ替えていけばオッケーなのでjquery.backstretch.min.js と入力をして後はこれ読み込まれたので、今度は背景スライダーを作るというスクリプトを書いていきましょう。まずはスクリプトの効率化を図るために変数を1つ作りましょう。slide という変数を作って、その中身は$('#message'); というid message の箱をこのように変数に格納します。そうしたらこの slide という変数にbackstretch の命令を掛けていきますがオプションを設定することができますのでまずこのように括弧を作ったらその中に大括弧を入力してそして Enter を押してここにスライドにしたい画像を直接名前で打ち込んでいきます。 今回は slide1, 2, 3 という3枚の画像が用意されているのでカンマ区切りでこのようにimages/slide2.jpg引き続き images/slide3.jpg と3枚分を記述してあげましょう。そうしたら行末でセミコロン。この状態で上書き保存をしてブラウザーに切り替えてそして begin のファイルの状態で更新を押してみましょう。そうすると 3 秒 4 秒位おきに写真が切り替わるようになりました。このようにまず動かすという所はSublime Text を見るとまず id 名を設定して、そしてこのようにプラグイン名を設定する。そしてオプションを付けてみましょう。大括弧と括弧の内側にカンマを入れて波括弧を入れて Enter を押します。ここで duration というオプションを付けて: 4000これで 4 秒になります。そしてカンマで区切ってfade というものを入れて3000 と入れましょう。これで 4 秒のスライドで3 秒をフェードインに使ってくださいというような指定になりますので上書き保存をして、ブラウザーを開いて更新。そうするとゆっくりフェードインして少し数秒待った後にまたゆっくりフェードインという状態になります。 後は自由に画像の名前を付け替えたりとか好きな画像に変更すれば背景スライダーを自由に操れると思います。このレッスンでは jQuery によるスライドの作り方について学びました。

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

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

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

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

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

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