【ハンズオン】jquery+html5 apiでスライドショーを作ろう

1

jQuery+HTML5 APIでスライドショーを作ろう

【ハンズオンセッション】

HTML5 Conference 2015

本日使用するデータ：http://goo.gl/CQSyEM

会場にwifi環境はありませんので、デザリングなどでオンラインの環境を用意して下さい。

htmlとCSSはすでにコーディングしてあります。

今回皆さんにハンズオンしていただくのはJavaScript(jQuery)になります。

ブラウザはChromeを使って進行していきます。


河島美津雄

自己紹介

株式会社フリーセル

twitter : @320kawashima

Html5j ビギナー部所属

Webデザイナー・フロントエンドエンジニア

HTML5ビギナーズも来てね!


ハンズオンを始める前にちょっと喋らせて下さい

HTML5ビギナーズって何？HTML5ビギナーズは、名前の通りこれからHTML5を始める・始めたばかりの方々のための勉強会

第8回（14/11/27）：AngularJS第7回（14/09/04）：Chrome開発者ツール、インブラウザデザイン第6回（14/06/14）：トークセッション。ビギナーの勉強方法を考えよう第5回（14/05/23）：jQuery第4回（13/12/13）：ブラウザデバッグツールの使い方第3回（13/10/23）：CSSレイアウト、コード最適化第2回（13/07/26）：初めてのHTML5、スマホコーディング、jQueryMobile第1回（13/06/21）：HTML5、UI/UX、Webデザイン、Windows8アプリ、ブラウザ状況

【開催履歴】


河島は何でビギナー部に所属しているの？


河島は何でビギナー部に所属しているの？

A.業界貢献がしたい…ｷｬｰ!! (*ﾉωﾉ)

自分は今までこのような勉強会に出来るだけ参加するようにしていました。

基本的に新しいもの好きなので新しい技術を追いかけるのは楽しいのですが、一方で、

自分の市場価値というものを意識していることに気付きました。例えば「この業界は

移り変わりも激しいし、何とか食らいつかなきゃ」とか、「新しいものをキャッチアッ

プしなくちゃ」など、「現状の自分に不安がある、もっと頑張らなきゃ」というよう

などちらかというとネガティブな感じ。自分に何が課題があるかを認識している部分

は悪くないのですが…この時点では、考えていることは自分の事だけです。


ほうほう

ある日、HTML5 Japan Cupに参加しました

チームを組んで、アワードに応募するというものです。

この時は、「外部に出て刺激を受けないと」とか「デザインの幅を広げなきゃ」と

かの「しなければいけない」マスト感が強かったと思います。


で、どうだったの？



楽しかったんです！

で、思ったんです



楽しかったんです！

で、思ったんです

日本のWebをたぎらせたいなぁ…


日本のWebをたぎらせるために何が出来る？



バリバリのエンジニアでもないし…、すごいスキルとか無いし…




けど、たぎらせるベースづくりなら出来そう！


ここがターニングポイント！



けど、たぎらせるベースづくりなら出来そう！

ということで、ビギナー部の存在を思い出して、

他の勉強会でお知り合いになった方に紹介して頂き入部に至りました。

勉強会での出会いも大事ですね!


なので、河島は



本カンファレンスで登壇されているスーパーすごい方達とはちょっと違う存在です。




けど、Webが好き、楽しいと思う気持ちは一緒！（のはず!）




けど、Webが好き、楽しいと思う気持ちは一緒！（のはず!）

現状の自分に不安のある方も、今一度Webって楽しいんだということを思い出してく

ださい。そして、楽しいって思えることの1つとして「やってみて出来た！」をこのハ

ンズオンで感じてもらえると嬉しいです。


では、そろそろハンズオンを始めたいと思います


会場にwifi環境はありませんので、デザリングなどでオンラインの環境を用意して下さい。

htmlとCSSはすでにコーディングしてあります。

今回皆さんにハンズオンしていただくのはJavaScript(jQuery)になります。

ブラウザはChromeを使って進行していきます。


ハンズオンの流れ

本ハンズオンの大まかなアジェンダ

・jQueryでクロスフェードスライドを作ろう

・html5APIを使って自分の好きな画像のスライドを作ろう

最初に完成形を見とこう


名前は知ってる

jQueryとは…

JavaScriptのライブラリで、

現在もっとも使われている代名詞的な存在。



jQueryとは…



html

CSS JavaScript

文章構造

視覚表現振る舞い

クライアントサイドでよくある技術関係



jQueryとは…



ライブラリって？



jQueryとは…



処理や機能を部品化してまとめたもの※jQuery以外にも色々あります

まとまっているから便利！



jQueryとは…

!?実際どういうことなの？

ということで書き方も含めて

実例を見てみましょう

さっそく体験！


ここは説明だけ

まずはjQueryを使う準備

http://jquery.com/でjQueryファイルをダウンロードし、

htmlファイルで読み込みます。※1.x 系は IE8 以前をサポート、2.x 系は IE8 以前のサポートはなし。

※バージョンによって機能や対応ブラウザが異なります。

※次期バージョンから「jQuery 2.x→jQuery 3.0」「jQuery 1.x→jQuery Compat 3.0」に変更予定

※今回はjquery-1.11.2.jsを使用します。今後、バージョンの名称変更があるので注意！

ダウンロードしたデータにありますのでここは聞いているだけ


ここは説明だけ

まずはjQueryを使う準備

6行目でjQueryライブラリを読み込んでいます。

先にjQueryライブラリを読み込むようにしましょう。

ダウンロードしたデータの、01_css.htmlをエディタで開いて下さい

8行目以降からコードを書いていきます。※今回はハンズオンでの説明のしやすさからhtmlファイルに直接記述していますが、 jQueryライブラリのように外部

参照でも構いません。

※//はコメントアウト。記述したコードを処理されないようにしています。/*コメントアウト*/でも可。


いよいよです！

簡単なコードを書いてみよう

<script>

$(function(){

//jQueryの命令を書いていく

});

</script>

緑色の部分はよく「おまじない」といわれますが、要はhtmlファイルが読み込まれ

て、操作・解析が可能になったタイミングから実行するということです。クライア

ントサイドでのJavaScriptの役目は主に「振る舞い」で、振る舞う対象を先に読ま

ないと、対象に対しての振る舞いの処理が出来ないからです。

おまじない！


やってみよう！

振る舞う対象を指定しよう

振る舞う対象をセレクト！

<p>文字を赤くしたい</p>

上記のpの文字色を赤にしたいとします。

この時、振る舞う対象はpタグで、Pタグを選択（セレクト）したい。

これをjQueryのセレクタを使って書くと




CSS, CSS2.1 ,CSS3のほとんどのセレクタが使えます

<p>文字を赤くしたい</p>

上記のpの文字色を赤にしたいとします。

この時、振る舞う対象はpタグで、Pタグを選択（セレクト）したい。

これをjQueryのセレクタを使って書くと

$(‘p’)




長いですよね…jQuery便利！

ちなみにJavaScriptだけで書くと…

getElementsByTagName(‘p’)


ここがすごい！

jQueryのメリット

バージョンよって対応ブラウザが違います

ここでは、書く量が少なくなるという事例でしたが、

他にもクロスブラウザ対応もしており、

複雑なJavaScriptが簡単に記述できる


01_css.htmlの続き

文字を赤くするには…

このように書きます

01_css.htmlの続きでpタグを赤くするために、

jQueryを使って、視覚表現であるCSSを操作するという

処理（振る舞い）をします。

$(‘p’).css(‘color’,’red’);



文字を赤くするには…

.css()でプロパティ「color」の値を「red」に指定したということになります。

この.css()のような処理をするものは数多くあり、それぞれで書き方が違った

りします。いきなり全てを覚えるのは大変なので、慣れるまではその都度調べ

るのが良いでしょう。

これを繰り返していると自然と覚えていきます。

$(‘p’).css(‘color’,’red’);

.css()のようなものをAPI（Application Programming Interface)と言います。



実際に記述していきましょう

書いてみましょう！

わからない人は02_css_answer.htmlを見てください


本題に入ります

クロスフェードスライドを作ろう

クロスフェードスライドの動作イメージ

active：表示状態

next：次に表示される画像


03_cross_fade_slide.htmlを使います


すでにおまじないは書いていますが

忘れないように！

まずは、htmlとブラウザでの表示を確認

現状は最後のliの画像が表示されています

03_cross_fade_slide.htmlを使います。




まずは

・一旦全部の画像を非表示にする

・一枚目の画像にactiveというクラスを付けて表示させる

をやってみましょう。




非表示にするliタグをセレクトして、非表示という処理をする




非表示にするliタグをセレクトして、非表示という処理をする

$(‘.slide ul li’).hide();

.hide()というAPIがあります




一番目のliをセレクトし、activeというクラスを付け、表示させる




一番目のliをセレクトし、activeというクラスを付け、表示させる

$('.slide ul li:first').addClass(‘active’).show();

ここまでのコードは04_cross_fade_slide.html

になります。

※APIが続けて処理されています。これをメソッドチェーンといいます。



次に…

任意時間毎に処理を繰り返す

繰り返す処理は…

.activeをフェードアウトしてクラス名activeを削除、

その次のliをフェードインしてクラス名activeを加える

ここまで出来なかった方は04_cross_fade_slide.htmlを使って下さい




任意時間毎に処理を繰り返すにはsetInterval(function(){

//繰り返す処理

},任意時間);

今回は2秒なので、2000

※任意時間の指定は、1秒であれば1000になります




繰り返す処理は、

.activeをフェードアウトしてクラス名activeを削除、その次のliをフェードインしてクラス名activeを加える




繰り返す処理は、


いろんなAPIがありますねー

$('.slide ul li.active').fadeOut().removeClass('active').next('li').fadeIn().addClass('active');




まとめると…

スライドの文字が

だんだん小さくなってきたな…

setInterval(function(){

$('.slide ul li.active').fadeOut().removeClass('active').next('li').fadeIn().addClass('active');

},2000);

これで、次へ次へとフェードイン・フェードアウトが出来るようになりました。※05_cross_fade_slide.htmlがここまでのコードになります。




次にやりたいことは…

次のliがあるときは次のliに、次のliが無いときは最初のliに戻りたい

If文ってやつですね！

条件分岐を使いましょうもし～だったら




もし次のliがあるときは


もし次のliが無いときは

.activeをフェードアウトしてクラス名activeを削除。一番最初のliをフェードインしてクラス名activeを加える。

If(次のliがあるとき){


}else{.activeをフェードアウトしてクラス名activeを削除。一番最初のliをフェードインしてクラス名activeを加える。

}




次のliがあるかどうか





$('.slide ul li.active').next('li')があるかどうか






もし次のliがあれば、次のliの数は当然1つ







次のliの数を取得できれば次のliがあるかどうかわかる





.lengthを使いましょう



次のliの数を取得できれば次のliがあるかどうかわかる

※要素の数を取得するだけでなく、文字列の長さを取得したり出来ます。




$('.slide ul li.active').next('li').length;





実際どうなっているのかを確認したい




そんな時はconsole.log() を使いましょう


実際どうなっているのかを確認したい

引数（()の中身）として与えられた値をブラウザのコンソールに表示してくれます

console.log( $('.slide ul li.active').next('li').length);

ブラウザで見てみよう！








If($('.slide ul li.active').next('li').length){.activeをフェードアウトしてクラス名activeを削除、その次のliをフェードインしてクラス名activeを加える


}








If($('.slide ul li.active').next('li').length){ $('.slide ul li.active').fadeOut().removeClass('active').next('li').fadeIn().addClass('active');


}




残りの処理は、

一番最初のliをフェードインしてクラス名activeを加える

.activeをフェードアウトしてクラス名activeを削除




残りの処理は、

$('.slide ul li.active').fadeOut().removeClass('active');

一番最初のliをフェードインしてクラス名activeを加える

.activeをフェードアウトしてクラス名activeを削除

$('.slide ul li:first').fadeIn().addClass('active');








If($('.slide ul li.active').next('li').length){ $('.slide ul li.active').fadeOut().removeClass('active').next('li').fadeIn().addClass('active');

}else{$('.slide ul li.active').fadeOut().removeClass('active');

$('.slide ul li:first').fadeIn().addClass('active');

}




意図している動きができましたか？

出来るって楽しい！




最後にコードを整理しましょう




変数 varを使いましょう

最後にコードを整理しましょう

変数 varとは、数値や文字列などを格納しておく「箱」のようなものです。

JavaScriptの本の最初の方に出てきますね

変数に何かを格納することを「代入」をいいます。




varを使って任意の文字列を変数として宣言をします。例えば…

var hoge;

hogeという変数を宣言しました。「;」は処理の終わりという意味です。

var hoge = 1; 上記は、hogeという変数に1を代入したということになります。

文字列の場合は、代入したい文字列を「’’」で囲います。

例えば var hoge = ‘ほげ’;




var $active = $('.slide ul li.active');

$(‘.slide ul li.active’)が複数あるので

見やすくなっているはず…

として、全体のコードを調整してみましょう




$active.fadeOut().removeClass(‘active’)と、 .fadeIn().addClass(‘active’)も複数

あります。条件分岐のどちらでも同じ処理をするので、if分の外に出しましょ

う。ただ、条件によってfadeIn().addClass(‘active’)をする対象は変わるので、

それぞれ必要な対象を$nextという変数に代入して処理させましょう。

文章で説明するのは難しいので、ここはコードを見ながら説明します。

※コメントアウトやconsolo.logを削除したのが10_cross_fade_slide_finished.htmlになります。


ここまで出来なかった方は10_cross_fade_slide_finished.htmlをみて下さい


一段落！


File APIを使います

html5APIを使って自分の好きな画像のスライドを作ろう

再度、完成をみてみましょう




ファイルをドラッグ&ドロップし、ブラウザに反映させたい。




ファイルをドラッグ&ドロップし、ブラウザに反映させたい。

File APIを使いますローカルにあるファイルを読み込んだり書き込んだり出来るようになります

11_file_api.htmlを使っていきます前半で作ったスライドするコードは一旦コメントアウトしています




11_file_api.htmlを開いて、画像をドラッグ&ドロップすると…




11_file_api.htmlを開いて、画像をドラッグ&ドロップすると…

画像だけブラウザで表示されます…

後半戦、頑張ろう！

まずは、この動きをキャンセルしましょう！




ドラッグ&ドロップしたとき、ブラウザの動きを止める




ドラッグ&ドロップしたとき、ブラウザの動きを止める

ドラッグ、ドロップを「イベント」

そのイベントに対して処理を与える命令を「イベントハンドラ」




「on」というイベントハンドラを使っていきます。




「on」というイベントハンドラを使っていきます。

$(‘セレクタ’).on(‘イベント', function(){

//処理

});

onの構文は

※他にも書き方はあります。他の書き方は今回は割愛します。

※イベントは複数指定することができます。




今回のイベントはドラッグ&ドロップなので




今回のイベントはドラッグ&ドロップなので

$(‘.drop-frame’).on(‘dragover drop', function(){

//処理

});

となります。




ブラウザの動きをキャンセルするには




ブラウザの動きをキャンセルするには

$(‘.drop-frame’).on(‘dragover drop', function(e){

e.preventDefault();

});

と書きます。

先ほど説明したfunction()の中にeというのが入っています。

このeはイベント、すなわち「 dragover drop 」になります。

イベントを起こした時、eに様々な値が入ります。




eの中身を見てみよう！

$(‘.drop-frame’).on(‘dragover drop', function(e){

e.preventDefault();

console.log(e);

});

何が表示

されるかな？




イベントの中には色々な情報が入っていることがわかります。

また、console.log()が何度も実行されています。これはマウスがドラッグ

で動く度にconsole.log()が実行されていているからになります。

今回は、ファイルをブラウザに1回表示されたら良いので、ドラッグとド

ロップを分けて書いておきましょう。

ここまで13_file_api.htmlにまとまっています




ファイルを読み込むためにFileReader()を使います。

オブジェクトを生成するためにnew演算子を使って

オブジェクト？

var reader = new FileReader()

とします。




オブジェクトって何？

オブジェクト？




オブジェクトって何？

オブジェクトの理解は

めちゃくちゃ大事！

console.log(reader);

で中身をみてみましょう。




オブジェクトとは





※プロパティ (property) は物体の特性・特質を意味する言葉である。

名前と値をもつプロパティを格納するコンテナのようなもの







例えば、河島をオブジェクトとしてConsolo.log(河島);で出力すると…






例えば、河島をオブジェクトとしてConsolo.log(河島);で出力すると…

河島 {性別:男, 年齢:ひみつ, 住所:横浜, 結婚:している,…}

となります。ここまでの内容は14_file_api.htmlにあります





ドラッグしたファイルの情報を読み取ろう




for(var i = 0;i<e.originalEvent.dataTransfer.files.length ;i++){

reader.readAsDataURL(e.originalEvent.dataTransfer.files[i]);

}

ドラッグしたファイルの情報を読み取ろう

何これ…配列？For文？

読み込まれたファイルは配列で、オブジェクトとして格納されるので、

繰り返し文(for文)で情報を読み取ります




配列とは…

for文とは…

複数の値が連番で格納されている箱のようなもの

※例えば、[ファイル1の情報, ファイル2の情報, ファイル3の情報… ]

処理を繰り返したいときに使う制御文

for ( var i = 初期値 ; 繰り返し条件 ; 次の値){

//処理

}16_file_api.htmlを使って

Console.logで中身を見てみよう！




次に、ファイルの読み込み（取得）が完了した時の処理を書いていきましょう。





reader.addEventListener('load', function() {

//処理

});





addEventListenerはイベントが起こったとき処理が発生するようにするイ

ベントリスナーと呼ばれるものです。


//処理

});

Readerオブジェクトの中身をconsole.log(reader);で確認してみると…




やった！

resultの中に画像の情報が！


console.log(reader);

});




liに取得したimgを入れていき、スライド部分とサムネイル部分に画像が

表示できるようにしていきます。

後から追加した画像が、liの最後にきて欲しいので




$('.slide ul, .thumbnail ul').append('<li><img alt=""></li>');$('.slide ul li:last img, .thumbnail ul li:last img').attr('src',reader.result);

.append()はセレクタの閉じタグの直前にコードを追加します。

.attr()は属性を操作することが出来ます。

liに取得したimgを入れていき、スライド部分とサムネイル部分に画像が

表示できるようにしていきます。

後から追加した画像が、liの最後にきて欲しいので

ここまでの内容が18_file_api.htmlにまとまっています




ファイルをドラッグすると、スライド部分に追加した最後の画像が一番上にくるので調整しましょう。




var $listLength = $('.slide ul li').length;$('.slide ul li').each(function(){$(this).find('img').css('z-index',$listLength); $listLength--;});

スライド部分のliの数を取得して、その数を使ってz-indexを指定していきます。

.each(function(){処理});は繰り返し文で、セレクタで指定したliがあるごとに処理を実行します。

thisは繰り返しの中で現在対象となっているものを指します。

.find()は引数()の中のものを探すというものです。

--はデクリメント演算子と呼ばれるもので1だけ減少します。

ここまでの内容が19_file_api.htmlにまとまっています

ファイルをドラッグすると、スライド部分に追加した最後の画像が一番上にくるので調整しましょう。




次に、startボタンを押したらクロスフェードの処理が始まるようにします。

あと少し！




関数を使いましょう


あと少し！




関数を使いましょう

function 関数名() {

//処理

}


あと少し！

関数を定義する構文は

※処理はクロスフェードの動きが入ります




関数名();

関数を実行するには




関数名();

関数を実行するには

スイッチみたいなもの

function start() {

クロスフェードスライドの処理

}

だと、start();が実行された段階で処理が始まります。




Start()を実行するタイミングは、.startがクリックされた時なので

onを使ったイベントの制御やりましたね！




Start()を実行するタイミングは、.startがクリックされた時なので

onを使ったイベントの制御

やりましたね！

$('.start').on('click', function(){

start();

});




ドラッグ&ドロップ部分とスタートボタン、サムネイル部分を非表示にしたいので




ここまでの内容は21_file_api.htmlにまとまっています

$('.start').on('click', function(){

start();

$('.drop-frame, .start, .thumbnail').fadeOut();

});

ドラッグ&ドロップ部分とスタートボタン、サムネイル部分を非表示にしたいので




最後にコードを整理して完成！！

ただ、何でもかんでも重複しているものを変数に

入れればいいってものでもないです。

同じように見えてもオブジェクトに入っている情報が

違うので処理が上手く動かないことがあるので注意！




お疲れ様でした！

また、ご清聴ありがとうございました！

【ハンズオン】jquery+html5 apiでスライドショーを作ろう

Internet