1.
1
jQuery+HTML5 APIで
スライドショーを作ろう
【ハンズオンセッション】
HTML5 Conference 2015
本日使用するデータ：http://goo.gl/CQSyEM
会場にwifi環境はありませんので、デザリングなどでオンラインの環境を用意して下さい。
htmlとCSSはすでにコーディングしてあります。
今回皆さんにハンズオンしていただくのはJavaScript(jQuery)になります。
ブラウザはChromeを使って進行していきます。

2.
本日使用するデータ：http://goo.gl/CQSyEM
河島 美津雄
自己紹介
株式会社フリーセル
twitter : @320kawashima
Html5j ビギナー部 所属
Webデザイナー・フロントエンドエンジニア
HTML5ビギナーズも
来てね!

3.
本日使用するデータ：http://goo.gl/CQSyEM
ハンズオンを始める前に
ちょっと喋らせて下さい
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アプリ、ブラウザ状況
【開催履歴】

4.
本日使用するデータ：http://goo.gl/CQSyEM
河島は何でビギナー部に
所属しているの？

5.
本日使用するデータ：http://goo.gl/CQSyEM
河島は何でビギナー部に
所属しているの？
A.業界貢献がしたい…ｷｬｰ!! (*ﾉωﾉ)
自分は今までこのような勉強会に出来るだけ参加するようにしていました。
基本的に新しいもの好きなので新しい技術を追いかけるのは楽しいのですが、一方で、
自分の市場価値というものを意識していることに気付きました。例えば「この業界は
移り変わりも激しいし、何とか食らいつかなきゃ」とか、「新しいものをキャッチアッ
プしなくちゃ」など、「現状の自分に不安がある、もっと頑張らなきゃ」というよう
などちらかというとネガティブな感じ。自分に何が課題があるかを認識している部分
は悪くないのですが…この時点では、考えていることは自分の事だけです。

6.
本日使用するデータ：http://goo.gl/CQSyEM
ほうほう
ある日、HTML5 Japan Cupに参加しました
チームを組んで、アワードに応募するというものです。
この時は、「外部に出て刺激を受けないと」とか「デザインの幅を広げなきゃ」と
かの「しなければいけない」マスト感が強かったと思います。

7.
本日使用するデータ：http://goo.gl/CQSyEM
で、どうだったの？

8.
本日使用するデータ：http://goo.gl/CQSyEM
で、どうだったの？
楽しかったんです！
で、思ったんです

9.
本日使用するデータ：http://goo.gl/CQSyEM
で、どうだったの？
楽しかったんです！
で、思ったんです
日本のWebをたぎらせたいなぁ…

10.
本日使用するデータ：http://goo.gl/CQSyEM
日本のWebをたぎらせるために何が出来る？

11.
本日使用するデータ：http://goo.gl/CQSyEM
日本のWebをたぎらせるために何が出来る？
バリバリのエンジニアでもないし…、すごいスキルとか無いし…

12.
本日使用するデータ：http://goo.gl/CQSyEM
日本のWebをたぎらせるために何が出来る？
バリバリのエンジニアでもないし…、すごいスキルとか無いし…
けど、たぎらせるベースづくりなら出来そう！

13.
本日使用するデータ：http://goo.gl/CQSyEM
ここがターニングポイント！
日本のWebをたぎらせるために何が出来る？
バリバリのエンジニアでもないし…、すごいスキルとか無いし…
けど、たぎらせるベースづくりなら出来そう！
ということで、ビギナー部の存在を思い出して、
他の勉強会でお知り合いになった方に紹介して頂き入部に至りました。
勉強会での
出会いも大事ですね!

14.
本日使用するデータ：http://goo.gl/CQSyEM
なので、河島は

15.
本日使用するデータ：http://goo.gl/CQSyEM
なので、河島は
本カンファレンスで登壇されているスーパーすごい方達とはちょっと違う存在です。

16.
本日使用するデータ：http://goo.gl/CQSyEM
なので、河島は
本カンファレンスで登壇されているスーパーすごい方達とはちょっと違う存在です。
けど、Webが好き、楽しいと思う気持ちは一緒！（のはず!）

17.
本日使用するデータ：http://goo.gl/CQSyEM
なので、河島は
本カンファレンスで登壇されているスーパーすごい方達とはちょっと違う存在です。
けど、Webが好き、楽しいと思う気持ちは一緒！（のはず!）
現状の自分に不安のある方も、今一度Webって楽しいんだということを思い出してく
ださい。そして、楽しいって思えることの1つとして「やってみて出来た！」をこのハ
ンズオンで感じてもらえると嬉しいです。

18.
本日使用するデータ：http://goo.gl/CQSyEM
では、そろそろハンズオンを
始めたいと思います
本日使用するデータ：http://goo.gl/CQSyEM
会場にwifi環境はありませんので、デザリングなどでオンラインの環境を用意して下さい。
htmlとCSSはすでにコーディングしてあります。
今回皆さんにハンズオンしていただくのはJavaScript(jQuery)になります。
ブラウザはChromeを使って進行していきます。

19.
本日使用するデータ：http://goo.gl/CQSyEM
ハンズオンの流れ
本ハンズオンの大まかなアジェンダ
・jQueryでクロスフェードスライドを作ろう
・html5APIを使って自分の好きな画像のスライドを作ろう
最初に完成形を見とこう

20.
本日使用するデータ：http://goo.gl/CQSyEM
名前は知ってる
jQueryとは…
JavaScriptのライブラリで、
現在もっとも使われている代名詞的な存在。

21.
本日使用するデータ：http://goo.gl/CQSyEM
名前は知ってる
jQueryとは…
JavaScriptのライブラリで、
現在もっとも使われている代名詞的な存在。
html
CSS JavaScript
文章構造
視覚表現 振る舞い
クライアントサイドで
よくある技術関係

22.
本日使用するデータ：http://goo.gl/CQSyEM
名前は知ってる
jQueryとは…
JavaScriptのライブラリで、
現在もっとも使われている代名詞的な存在。
ライブラリって？

23.
本日使用するデータ：http://goo.gl/CQSyEM
名前は知ってる
jQueryとは…
JavaScriptのライブラリで、
現在もっとも使われている代名詞的な存在。
処理や機能を部品化してまとめたもの
※jQuery以外にも色々あります
まとまっているから便利！

24.
本日使用するデータ：http://goo.gl/CQSyEM
名前は知ってる
jQueryとは…
!?
実際どういうことなの？
ということで書き方も含めて
実例を見てみましょう
さっそく体験！

25.
本日使用するデータ：http://goo.gl/CQSyEM
ここは説明だけ
まずは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を使用します。 今後、バージョンの
名称変更があるので注意！
ダウンロードしたデータにありますのでここは聞いているだけ

26.
本日使用するデータ：http://goo.gl/CQSyEM
ここは説明だけ
まずはjQueryを使う準備
6行目でjQueryライブラリを読み込んでいます。
先にjQueryライブラリを読み込むようにしましょう。
ダウンロードしたデータの、01_css.htmlをエディタで開いて下さい
8行目以降からコードを書いていきます。
※今回はハンズオンでの説明のしやすさからhtmlファイルに直接記述していますが、 jQueryライブラリのように外部
参照でも構いません。
※//はコメントアウト。記述したコードを処理されないようにしています。/*コメントアウト*/でも可。

27.
本日使用するデータ：http://goo.gl/CQSyEM
いよいよです！
簡単なコードを書いてみよう
<script>
$(function(){
//jQueryの命令を書いていく
});
</script>
緑色の部分はよく「おまじない」といわれますが、要はhtmlファイルが読み込まれ
て、操作・解析が可能になったタイミングから実行するということです。クライア
ントサイドでのJavaScriptの役目は主に「振る舞い」で、振る舞う対象を先に読ま
ないと、対象に対しての振る舞いの処理が出来ないからです。
おまじない！

28.
本日使用するデータ：http://goo.gl/CQSyEM
やってみよう！
振る舞う対象を指定しよう
振る舞う対象をセレクト！
<p>文字を赤くしたい</p>
上記のpの文字色を赤にしたいとします。
この時、振る舞う対象はpタグで、Pタグを選択（セレクト）したい。
これをjQueryのセレクタを使って書くと

29.
本日使用するデータ：http://goo.gl/CQSyEM
やってみよう！
振る舞う対象を指定しよう
CSS, CSS2.1 ,CSS3の
ほとんどのセレクタが使えます
<p>文字を赤くしたい</p>
上記のpの文字色を赤にしたいとします。
この時、振る舞う対象はpタグで、Pタグを選択（セレクト）したい。
これをjQueryのセレクタを使って書くと
$(‘p’)

30.
本日使用するデータ：http://goo.gl/CQSyEM
やってみよう！
振る舞う対象を指定しよう
長いですよね…
jQuery便利！
ちなみにJavaScriptだけで書くと…
getElementsByTagName(‘p’)

31.
本日使用するデータ：http://goo.gl/CQSyEM
ここがすごい！
jQueryのメリット
バージョンよって
対応ブラウザが違います
ここでは、書く量が少なくなるという事例でしたが、
他にもクロスブラウザ対応もしており、
複雑なJavaScriptが
簡単に記述できる

32.
本日使用するデータ：http://goo.gl/CQSyEM
01_css.htmlの続き
文字を赤くするには…
このように書きます
01_css.htmlの続きでpタグを赤くするために、
jQueryを使って、視覚表現であるCSSを操作するという
処理（振る舞い）をします。
$(‘p’).css(‘color’,’red’);

33.
本日使用するデータ：http://goo.gl/CQSyEM
01_css.htmlの続き
文字を赤くするには…
.css()でプロパティ「color」の値を「red」に指定したということになります。
この.css()のような処理をするものは数多くあり、それぞれで書き方が違った
りします。いきなり全てを覚えるのは大変なので、慣れるまではその都度調べ
るのが良いでしょう。
これを繰り返していると自然と覚えていきます。
$(‘p’).css(‘color’,’red’);
.css()のようなものをAPI（Application
Programming Interface)と言います。

34.
本日使用するデータ：http://goo.gl/CQSyEM
01_css.htmlの続き
実際に記述していきましょう
書いてみましょう！
わからない人は
02_css_answer.htmlを見てください

35.
本日使用するデータ：http://goo.gl/CQSyEM
本題に入ります
クロスフェードスライドを作ろう
クロスフェードスライドの
動作イメージ
active：表示状態
next：次に表示される画像

36.
本日使用するデータ：http://goo.gl/CQSyEM
03_cross_fade_slide.htmlを使います
クロスフェードスライドを作ろう
すでにおまじないは書いていますが
忘れないように！
まずは、htmlとブラウザでの表示を確認
現状は最後のliの画像が表示されています
03_cross_fade_slide.htmlを使います。

37.
本日使用するデータ：http://goo.gl/CQSyEM
03_cross_fade_slide.htmlを使います
クロスフェードスライドを作ろう
まずは
・一旦全部の画像を非表示にする
・一枚目の画像にactiveというクラスを付けて表示させる
をやってみましょう。

38.
本日使用するデータ：http://goo.gl/CQSyEM
03_cross_fade_slide.htmlを使います
クロスフェードスライドを作ろう
非表示にするliタグをセレクトして、非表示という処理をする

39.
本日使用するデータ：http://goo.gl/CQSyEM
03_cross_fade_slide.htmlを使います
クロスフェードスライドを作ろう
非表示にするliタグをセレクトして、非表示という処理をする
$(‘.slide ul li’).hide();
.hide()というAPIがあります

40.
本日使用するデータ：http://goo.gl/CQSyEM
03_cross_fade_slide.htmlを使います
クロスフェードスライドを作ろう
一番目のliをセレクトし、activeというクラスを付け、表示させる

41.
本日使用するデータ：http://goo.gl/CQSyEM
03_cross_fade_slide.htmlを使います
クロスフェードスライドを作ろう
一番目のliをセレクトし、activeというクラスを付け、表示させる
$('.slide ul li:first').addClass(‘active’).show();
ここまでのコードは
04_cross_fade_slide.html
になります。
※APIが続けて処理されています。これをメソッドチェーンといいます。

42.
本日使用するデータ：http://goo.gl/CQSyEM
クロスフェードスライドを作ろう
次に…
任意時間毎に処理を繰り返す
繰り返す処理は…
.activeをフェードアウトしてクラス名activeを削除、
その次のliをフェードインしてクラス名activeを加える
ここまで出来なかった方は
04_cross_fade_slide.htmlを使って下さい

43.
本日使用するデータ：http://goo.gl/CQSyEM
ここまで出来なかった方は
04_cross_fade_slide.htmlを使って下さい
クロスフェードスライドを作ろう
任意時間毎に処理を繰り返すには
setInterval(function(){
//繰り返す処理
},任意時間);
今回は2秒なので、2000
※任意時間の指定は、1秒であれば1000になります

44.
本日使用するデータ：http://goo.gl/CQSyEM
ここまで出来なかった方は
04_cross_fade_slide.htmlを使って下さい
クロスフェードスライドを作ろう
繰り返す処理は、
.activeをフェードアウトしてクラス名activeを削除、その次のliをフェードインしてクラス名activeを加える

45.
本日使用するデータ：http://goo.gl/CQSyEM
ここまで出来なかった方は
04_cross_fade_slide.htmlを使って下さい
クロスフェードスライドを作ろう
繰り返す処理は、
.activeをフェードアウトしてクラス名activeを削除、その次のliをフェードインしてクラス名activeを加える
いろんなAPIがありますねー
$('.slide ul li.active').fadeOut().removeClass('active').next('li').fadeIn().addClass('active');

46.
本日使用するデータ：http://goo.gl/CQSyEM
ここまで出来なかった方は
05_cross_fade_slide.htmlを使って下さい
クロスフェードスライドを作ろう
まとめると…
スライドの文字が
だんだん小さくなってきたな…
setInterval(function(){
$('.slide ul li.active').fadeOut().removeClass('active').next('li').fadeIn().addClass('active');
},2000);
これで、次へ次へとフェードイン・フェードアウトが出来るようになりました。
※05_cross_fade_slide.htmlがここまでのコードになります。

47.
本日使用するデータ：http://goo.gl/CQSyEM
ここまで出来なかった方は
05_cross_fade_slide.htmlを使って下さい
クロスフェードスライドを作ろう
次にやりたいことは…
次のliがあるときは次のliに、次のliが無いときは最初のliに戻りたい
If文ってやつですね！
条件分岐を使いましょう
もし∼だったら

48.
本日使用するデータ：http://goo.gl/CQSyEM
ここまで出来なかった方は
05_cross_fade_slide.htmlを使って下さい
クロスフェードスライドを作ろう
もし次のliがあるときは
.activeをフェードアウトしてクラス名activeを削除、その次のliをフェードインしてクラス名activeを加える
もし次のliが無いときは
.activeをフェードアウトしてクラス名activeを削除。一番最初のliをフェードインしてクラス名activeを加える。
If(次のliがあるとき){
.activeをフェードアウトしてクラス名activeを削除、その次のliをフェードインしてクラス名activeを加える
}else{
.activeをフェードアウトしてクラス名activeを削除。一番最初のliをフェードインしてクラス名activeを加える。
}

49.
本日使用するデータ：http://goo.gl/CQSyEM
ここまで出来なかった方は
05_cross_fade_slide.htmlを使って下さい
クロスフェードスライドを作ろう
次のliがあるかどうか

50.
本日使用するデータ：http://goo.gl/CQSyEM
ここまで出来なかった方は
05_cross_fade_slide.htmlを使って下さい
クロスフェードスライドを作ろう
次のliがあるかどうか
$('.slide ul li.active').next('li')があるかどうか

51.
本日使用するデータ：http://goo.gl/CQSyEM
ここまで出来なかった方は
05_cross_fade_slide.htmlを使って下さい
クロスフェードスライドを作ろう
次のliがあるかどうか
$('.slide ul li.active').next('li')があるかどうか
もし次のliがあれば、次のliの数は当然1つ

52.
本日使用するデータ：http://goo.gl/CQSyEM
ここまで出来なかった方は
05_cross_fade_slide.htmlを使って下さい
クロスフェードスライドを作ろう
次のliがあるかどうか
$('.slide ul li.active').next('li')があるかどうか
もし次のliがあれば、次のliの数は当然1つ
次のliの数を取得できれば次のliがあるかどうかわかる

53.
本日使用するデータ：http://goo.gl/CQSyEM
ここまで出来なかった方は
05_cross_fade_slide.htmlを使って下さい
クロスフェードスライドを作ろう
次のliがあるかどうか
.lengthを使いましょう
$('.slide ul li.active').next('li')があるかどうか
もし次のliがあれば、次のliの数は当然1つ
次のliの数を取得できれば次のliがあるかどうかわかる
※要素の数を取得するだけでなく、文字列の長さを取得したり出来ます。

54.
本日使用するデータ：http://goo.gl/CQSyEM
ここまで出来なかった方は
05_cross_fade_slide.htmlを使って下さい
クロスフェードスライドを作ろう
$('.slide ul li.active').next('li').length;

55.
本日使用するデータ：http://goo.gl/CQSyEM
ここまで出来なかった方は
05_cross_fade_slide.htmlを使って下さい
クロスフェードスライドを作ろう
$('.slide ul li.active').next('li').length;
実際どうなっているのかを確認したい

56.
本日使用するデータ：http://goo.gl/CQSyEM
ここまで出来なかった方は
05_cross_fade_slide.htmlを使って下さい
クロスフェードスライドを作ろう
そんな時はconsole.log() を使いましょう
$('.slide ul li.active').next('li').length;
実際どうなっているのかを確認したい
引数（()の中身）として与えられた値をブラウザのコンソールに表示してくれます
console.log( $('.slide ul li.active').next('li').length);
ブラウザで見てみよう！

57.
本日使用するデータ：http://goo.gl/CQSyEM
ここまで出来なかった方は
05_cross_fade_slide.htmlを使って下さい
クロスフェードスライドを作ろう
もし次のliがあるときは
.activeをフェードアウトしてクラス名activeを削除、その次のliをフェードインしてクラス名activeを加える
もし次のliが無いときは
.activeをフェードアウトしてクラス名activeを削除。一番最初のliをフェードインしてクラス名activeを加える。
If($('.slide ul li.active').next('li').length){
.activeをフェードアウトしてクラス名activeを削除、その次のliをフェードインしてクラス名activeを加える
}else{
.activeをフェードアウトしてクラス名activeを削除。一番最初のliをフェードインしてクラス名activeを加える。
}

58.
本日使用するデータ：http://goo.gl/CQSyEM
ここまで出来なかった方は
06_cross_fade_slide.htmlを使って下さい
クロスフェードスライドを作ろう
もし次のliがあるときは
.activeをフェードアウトしてクラス名activeを削除、その次のliをフェードインしてクラス名activeを加える
もし次のliが無いときは
.activeをフェードアウトしてクラス名activeを削除。一番最初のliをフェードインしてクラス名activeを加える。
If($('.slide ul li.active').next('li').length){
$('.slide ul li.active').fadeOut().removeClass('active').next('li').fadeIn().addClass('active');
}else{
.activeをフェードアウトしてクラス名activeを削除。一番最初のliをフェードインしてクラス名activeを加える。
}

59.
本日使用するデータ：http://goo.gl/CQSyEM
ここまで出来なかった方は
06_cross_fade_slide.htmlを使って下さい
クロスフェードスライドを作ろう
残りの処理は、
一番最初のliをフェードインしてクラス名activeを加える
.activeをフェードアウトしてクラス名activeを削除

60.
本日使用するデータ：http://goo.gl/CQSyEM
ここまで出来なかった方は
06_cross_fade_slide.htmlを使って下さい
クロスフェードスライドを作ろう
残りの処理は、
$('.slide ul li.active').fadeOut().removeClass('active');
一番最初のliをフェードインしてクラス名activeを加える
.activeをフェードアウトしてクラス名activeを削除
$('.slide ul li:first').fadeIn().addClass('active');

61.
本日使用するデータ：http://goo.gl/CQSyEM
ここまで出来なかった方は
07_cross_fade_slide.htmlを使って下さい
クロスフェードスライドを作ろう
もし次のliがあるときは
.activeをフェードアウトしてクラス名activeを削除、その次のliをフェードインしてクラス名activeを加える
もし次のliが無いときは
.activeをフェードアウトしてクラス名activeを削除。一番最初のliをフェードインしてクラス名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');
}

62.
本日使用するデータ：http://goo.gl/CQSyEM
ここまで出来なかった方は
07_cross_fade_slide.htmlを使って下さい
クロスフェードスライドを作ろう
意図している動きができましたか？
出来るって楽しい！

63.
本日使用するデータ：http://goo.gl/CQSyEM
ここまで出来なかった方は
07_cross_fade_slide.htmlを使って下さい
クロスフェードスライドを作ろう
最後にコードを整理しましょう

64.
本日使用するデータ：http://goo.gl/CQSyEM
ここまで出来なかった方は
07_cross_fade_slide.htmlを使って下さい
クロスフェードスライドを作ろう
変数 varを使いましょう
最後にコードを整理しましょう
変数 varとは、数値や文字列などを格納しておく「箱」のようなものです。
JavaScriptの本の
最初の方に出てきますね
変数に何かを格納することを「代入」をいいます。

65.
本日使用するデータ：http://goo.gl/CQSyEM
ここまで出来なかった方は
07_cross_fade_slide.htmlを使って下さい
クロスフェードスライドを作ろう
varを使って任意の文字列を変数として宣言をします。例えば…
var hoge;
hogeという変数を宣言しました。「;」は処理の終わりという意味です。
var hoge = 1;
上記は、hogeという変数に1を代入したということになります。
文字列の場合は、代入したい文字列を「’’」で囲います。
例えば var hoge = ‘ほげ’;

66.
本日使用するデータ：http://goo.gl/CQSyEM
ここまで出来なかった方は
08_cross_fade_slide.htmlを使って下さい
クロスフェードスライドを作ろう
var $active = $('.slide ul li.active');
$(‘.slide ul li.active’)が複数あるので
見やすくなっているはず…
として、全体のコードを調整してみましょう

67.
本日使用するデータ：http://goo.gl/CQSyEM
ここまで出来なかった方は
09_cross_fade_slide.htmlを使って下さい
クロスフェードスライドを作ろう
$active.fadeOut().removeClass(‘active’)と、 .fadeIn().addClass(‘active’)も複数
あります。条件分岐のどちらでも同じ処理をするので、if分の外に出しましょ
う。ただ、条件によってfadeIn().addClass(‘active’)をする対象は変わるので、
それぞれ必要な対象を$nextという変数に代入して処理させましょう。
文章で説明するのは難しいので、
ここはコードを見ながら説明します。
※コメントアウトやconsolo.logを削除したのが10_cross_fade_slide_finished.htmlになります。

68.
本日使用するデータ：http://goo.gl/CQSyEM
ここまで出来なかった方は
10_cross_fade_slide_finished.htmlをみて下さい
クロスフェードスライドを作ろう
一段落！

69.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
再度、完成をみてみましょう

70.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
ファイルをドラッグ&ドロップし、ブラウザに反映させたい。

71.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
ファイルをドラッグ&ドロップし、ブラウザに反映させたい。
File APIを使います
ローカルにあるファイルを読み込んだり書き込んだり出来るようになります
11_file_api.htmlを使っていきます
前半で作ったスライドするコードは
一旦コメントアウトしています

72.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
11_file_api.htmlを開いて、画像をドラッグ&ドロップすると…

73.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
11_file_api.htmlを開いて、画像をドラッグ&ドロップすると…
画像だけブラウザで表示されます…
後半戦、頑張ろう！
まずは、この動きをキャンセルしましょう！

74.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
ドラッグ&ドロップしたとき、ブラウザの動きを止める

75.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
ドラッグ&ドロップしたとき、ブラウザの動きを止める
ドラッグ、ドロップを「イベント」
そのイベントに対して処理を与える命令を「イベントハンドラ」

76.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
「on」というイベントハンドラを使っていきます。

77.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
「on」というイベントハンドラを使っていきます。
$(‘セレクタ’).on(‘イベント', function(){
//処理
});
onの構文は
※他にも書き方はあります。他の書き方は今回は割愛します。
※イベントは複数指定することができます。

78.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
今回のイベントはドラッグ&ドロップなので

79.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
今回のイベントはドラッグ&ドロップなので
$(‘.drop-frame’).on(‘dragover drop', function(){
//処理
});
となります。

80.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
ブラウザの動きをキャンセルするには

81.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
ブラウザの動きをキャンセルするには
$(‘.drop-frame’).on(‘dragover drop', function(e){
e.preventDefault();
});
と書きます。
先ほど説明したfunction()の中にeというのが入っています。
このeはイベント、すなわち「 dragover drop 」になります。
イベントを起こした時、eに様々な値が入ります。

82.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
eの中身を見てみよう！
$(‘.drop-frame’).on(‘dragover drop', function(e){
e.preventDefault();
console.log(e);
});
何が表示
されるかな？

83.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
イベントの中には色々な情報が入っていることがわかります。
また、console.log()が何度も実行されています。これはマウスがドラッグ
で動く度にconsole.log()が実行されていているからになります。
今回は、ファイルをブラウザに1回表示されたら良いので、ドラッグとド
ロップを分けて書いておきましょう。
ここまで13_file_api.html
にまとまっています

84.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
ファイルを読み込むためにFileReader()を使います。
オブジェクトを生成するためにnew演算子を使って
オブジェクト？
var reader = new FileReader()
とします。

85.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
オブジェクトって何？
オブジェクト？

86.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
オブジェクトって何？
オブジェクトの理解は
めちゃくちゃ大事！
console.log(reader);
で中身をみてみましょう。

87.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
オブジェクトとは

88.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
オブジェクトとは
※プロパティ (property) は物体の特性・特質を意味する言葉である。
名前と値をもつプロパティを格納するコンテナのようなもの

89.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
オブジェクトとは
名前と値をもつプロパティを格納するコンテナのようなもの
※プロパティ (property) は物体の特性・特質を意味する言葉である。
例えば、河島をオブジェクトとしてConsolo.log(河島);で出力すると…

90.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
オブジェクトとは
※プロパティ (property) は物体の特性・特質を意味する言葉である。
例えば、河島をオブジェクトとしてConsolo.log(河島);で出力すると…
河島 {性別:男, 年齢:ひみつ, 住所:横浜, 結婚:している,…}
となります。 ここまでの内容は
14_file_api.htmlにあります
名前と値をもつプロパティを格納するコンテナのようなもの

91.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
ドラッグしたファイルの情報を読み取ろう

92.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
for(var i = 0;i<e.originalEvent.dataTransfer.files.length ;i++){
reader.readAsDataURL(e.originalEvent.dataTransfer.files[i]);
}
ドラッグしたファイルの情報を読み取ろう
何これ…
配列？For文？
読み込まれたファイルは配列で、オブジェクトとして格納されるので、
繰り返し文(for文)で情報を読み取ります

93.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
配列とは…
for文とは…
複数の値が連番で格納されている箱のようなもの
※例えば、[ファイル1の情報, ファイル2の情報, ファイル3の情報… ]
処理を繰り返したいときに使う制御文
for ( var i = 初期値 ; 繰り返し条件 ; 次の値){
//処理
}
16_file_api.htmlを使って
Console.logで中身を
見てみよう！

94.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
次に、ファイルの読み込み（取得）が完了した時の処理を書いていきましょう。

95.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
次に、ファイルの読み込み（取得）が完了した時の処理を書いていきましょう。
reader.addEventListener('load', function() {
//処理
});

96.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
次に、ファイルの読み込み（取得）が完了した時の処理を書いていきましょう。
addEventListenerはイベントが起こったとき処理が発生するようにするイ
ベントリスナーと呼ばれるものです。
reader.addEventListener('load', function() {
//処理
});
Readerオブジェクトの中身をconsole.log(reader);で確認してみると…

97.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
やった！
resultの中に画像の情報が！
reader.addEventListener('load', function() {
console.log(reader);
});

98.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
liに取得したimgを入れていき、スライド部分とサムネイル部分に画像が
表示できるようにしていきます。
後から追加した画像が、liの最後にきて欲しいので

99.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
$('.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に
まとまっています

100.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
ファイルをドラッグすると、スライド部分に追加した最後の画像が一番上にくるので調整しましょう。

101.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
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に
まとまっています
ファイルをドラッグすると、スライド部分に追加した最後の画像が一番上にくるので調整しましょう。

102.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
次に、startボタンを押したらクロスフェードの処理が始まるようにします。
あと少し！

103.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
関数を使いましょう
次に、startボタンを押したらクロスフェードの処理が始まるようにします。
あと少し！

104.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
関数を使いましょう
function 関数名() {
//処理
}
次に、startボタンを押したらクロスフェードの処理が始まるようにします。
あと少し！
関数を定義する構文は
※処理はクロスフェードの動きが入ります

105.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
関数名();
関数を実行するには

106.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
関数名();
関数を実行するには
スイッチみたいなもの
function start() {
クロスフェードスライドの処理
}
だと、start();が実行された段階で処理が始まります。

107.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
Start()を実行するタイミングは、.startがクリックされた時なので
onを使ったイベントの制御
やりましたね！

108.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
Start()を実行するタイミングは、.startがクリックされた時なので
onを使ったイベントの制御
やりましたね！
$('.start').on('click', function(){
start();
});

109.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
ドラッグ&ドロップ部分とスタートボタン、サムネイル部分を非表示にしたいので

110.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
ここまでの内容は
21_file_api.htmlに
まとまっています
$('.start').on('click', function(){
start();
$('.drop-frame, .start, .thumbnail').fadeOut();
});
ドラッグ&ドロップ部分とスタートボタン、サムネイル部分を非表示にしたいので

111.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
最後にコードを整理して完成！！
ただ、何でもかんでも重複しているものを変数に
入れればいいってものでもないです。
同じように見えてもオブジェクトに入っている情報が
違うので処理が上手く動かないことがあるので注意！

112.
本日使用するデータ：http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
お疲れ様でした！
また、ご清聴ありがとうございました！