Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

【ハンズオン】jQuery+HTML5 APIでスライドショーを作ろう

2,916 views

Published on

HTML5 Conference 2015、ビギナー部のハンズオンセッション。
Webデザイナー、jQuery、html5API初心者向けのハンズオンセッション。クロスフェードスライドショーをhtml5APIも交えて作ります。実際に手を動かして体験して使えるようになろう!
作るものは2つ。jQueryのみでのクロルフェードスライドショーと、FileAPIを使って好きな画像をドラッグ&ドロップしてクロスフェードスライドショーを作ります。

Published in: Internet
  • Be the first to comment

【ハンズオン】jQuery+HTML5 APIでスライドショーを作ろう

  1. 1. 1 jQuery+HTML5 APIで
 スライドショーを作ろう 【ハンズオンセッション】 HTML5 Conference 2015 本日使用するデータ:http://goo.gl/CQSyEM 会場にwifi環境はありませんので、デザリングなどでオンラインの環境を用意して下さい。 htmlとCSSはすでにコーディングしてあります。 今回皆さんにハンズオンしていただくのはJavaScript(jQuery)になります。 ブラウザはChromeを使って進行していきます。
  2. 2. 本日使用するデータ:http://goo.gl/CQSyEM 河島 美津雄 自己紹介 株式会社フリーセル twitter : @320kawashima Html5j ビギナー部 所属 Webデザイナー・フロントエンドエンジニア HTML5ビギナーズも 来てね!
  3. 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. 4. 本日使用するデータ:http://goo.gl/CQSyEM 河島は何でビギナー部に 所属しているの?
  5. 5. 本日使用するデータ:http://goo.gl/CQSyEM 河島は何でビギナー部に 所属しているの? A.業界貢献がしたい…キャー!! (*ノωノ) 自分は今までこのような勉強会に出来るだけ参加するようにしていました。 基本的に新しいもの好きなので新しい技術を追いかけるのは楽しいのですが、一方で、 自分の市場価値というものを意識していることに気付きました。例えば「この業界は 移り変わりも激しいし、何とか食らいつかなきゃ」とか、「新しいものをキャッチアッ プしなくちゃ」など、「現状の自分に不安がある、もっと頑張らなきゃ」というよう などちらかというとネガティブな感じ。自分に何が課題があるかを認識している部分 は悪くないのですが…この時点では、考えていることは自分の事だけです。
  6. 6. 本日使用するデータ:http://goo.gl/CQSyEM ほうほう ある日、HTML5 Japan Cupに参加しました チームを組んで、アワードに応募するというものです。 この時は、「外部に出て刺激を受けないと」とか「デザインの幅を広げなきゃ」と かの「しなければいけない」マスト感が強かったと思います。
  7. 7. 本日使用するデータ:http://goo.gl/CQSyEM で、どうだったの?
  8. 8. 本日使用するデータ:http://goo.gl/CQSyEM で、どうだったの? 楽しかったんです! で、思ったんです
  9. 9. 本日使用するデータ:http://goo.gl/CQSyEM で、どうだったの? 楽しかったんです! で、思ったんです 日本のWebをたぎらせたいなぁ…
  10. 10. 本日使用するデータ:http://goo.gl/CQSyEM 日本のWebをたぎらせるために何が出来る?
  11. 11. 本日使用するデータ:http://goo.gl/CQSyEM 日本のWebをたぎらせるために何が出来る? バリバリのエンジニアでもないし…、すごいスキルとか無いし…
  12. 12. 本日使用するデータ:http://goo.gl/CQSyEM 日本のWebをたぎらせるために何が出来る? バリバリのエンジニアでもないし…、すごいスキルとか無いし… けど、たぎらせるベースづくりなら出来そう!
  13. 13. 本日使用するデータ:http://goo.gl/CQSyEM ここがターニングポイント! 日本のWebをたぎらせるために何が出来る? バリバリのエンジニアでもないし…、すごいスキルとか無いし… けど、たぎらせるベースづくりなら出来そう! ということで、ビギナー部の存在を思い出して、 他の勉強会でお知り合いになった方に紹介して頂き入部に至りました。 勉強会での 出会いも大事ですね!
  14. 14. 本日使用するデータ:http://goo.gl/CQSyEM なので、河島は
  15. 15. 本日使用するデータ:http://goo.gl/CQSyEM なので、河島は 本カンファレンスで登壇されているスーパーすごい方達とはちょっと違う存在です。
  16. 16. 本日使用するデータ:http://goo.gl/CQSyEM なので、河島は 本カンファレンスで登壇されているスーパーすごい方達とはちょっと違う存在です。 けど、Webが好き、楽しいと思う気持ちは一緒!(のはず!)
  17. 17. 本日使用するデータ:http://goo.gl/CQSyEM なので、河島は 本カンファレンスで登壇されているスーパーすごい方達とはちょっと違う存在です。 けど、Webが好き、楽しいと思う気持ちは一緒!(のはず!) 現状の自分に不安のある方も、今一度Webって楽しいんだということを思い出してく ださい。そして、楽しいって思えることの1つとして「やってみて出来た!」をこのハ ンズオンで感じてもらえると嬉しいです。
  18. 18. 本日使用するデータ:http://goo.gl/CQSyEM では、そろそろハンズオンを 始めたいと思います 本日使用するデータ:http://goo.gl/CQSyEM 会場にwifi環境はありませんので、デザリングなどでオンラインの環境を用意して下さい。 htmlとCSSはすでにコーディングしてあります。 今回皆さんにハンズオンしていただくのはJavaScript(jQuery)になります。 ブラウザはChromeを使って進行していきます。
  19. 19. 本日使用するデータ:http://goo.gl/CQSyEM ハンズオンの流れ 本ハンズオンの大まかなアジェンダ ・jQueryでクロスフェードスライドを作ろう ・html5APIを使って自分の好きな画像のスライドを作ろう 最初に完成形を見とこう
  20. 20. 本日使用するデータ:http://goo.gl/CQSyEM 名前は知ってる jQueryとは… JavaScriptのライブラリで、 現在もっとも使われている代名詞的な存在。
  21. 21. 本日使用するデータ:http://goo.gl/CQSyEM 名前は知ってる jQueryとは… JavaScriptのライブラリで、 現在もっとも使われている代名詞的な存在。 html CSS JavaScript 文章構造 視覚表現 振る舞い クライアントサイドで よくある技術関係
  22. 22. 本日使用するデータ:http://goo.gl/CQSyEM 名前は知ってる jQueryとは… JavaScriptのライブラリで、 現在もっとも使われている代名詞的な存在。 ライブラリって?
  23. 23. 本日使用するデータ:http://goo.gl/CQSyEM 名前は知ってる jQueryとは… JavaScriptのライブラリで、 現在もっとも使われている代名詞的な存在。 処理や機能を部品化してまとめたもの ※jQuery以外にも色々あります まとまっているから便利!
  24. 24. 本日使用するデータ:http://goo.gl/CQSyEM 名前は知ってる jQueryとは… !? 実際どういうことなの? ということで書き方も含めて 実例を見てみましょう さっそく体験!
  25. 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. 26. 本日使用するデータ:http://goo.gl/CQSyEM ここは説明だけ まずはjQueryを使う準備 6行目でjQueryライブラリを読み込んでいます。 先にjQueryライブラリを読み込むようにしましょう。 ダウンロードしたデータの、01_css.htmlをエディタで開いて下さい 8行目以降からコードを書いていきます。 ※今回はハンズオンでの説明のしやすさからhtmlファイルに直接記述していますが、 jQueryライブラリのように外部 参照でも構いません。 ※//はコメントアウト。記述したコードを処理されないようにしています。/*コメントアウト*/でも可。
  27. 27. 本日使用するデータ:http://goo.gl/CQSyEM いよいよです! 簡単なコードを書いてみよう <script> $(function(){ //jQueryの命令を書いていく }); </script> 緑色の部分はよく「おまじない」といわれますが、要はhtmlファイルが読み込まれ て、操作・解析が可能になったタイミングから実行するということです。クライア ントサイドでのJavaScriptの役目は主に「振る舞い」で、振る舞う対象を先に読ま ないと、対象に対しての振る舞いの処理が出来ないからです。 おまじない!
  28. 28. 本日使用するデータ:http://goo.gl/CQSyEM やってみよう! 振る舞う対象を指定しよう 振る舞う対象をセレクト! <p>文字を赤くしたい</p> 上記のpの文字色を赤にしたいとします。 この時、振る舞う対象はpタグで、Pタグを選択(セレクト)したい。 これをjQueryのセレクタを使って書くと
  29. 29. 本日使用するデータ:http://goo.gl/CQSyEM やってみよう! 振る舞う対象を指定しよう CSS, CSS2.1 ,CSS3の ほとんどのセレクタが使えます <p>文字を赤くしたい</p> 上記のpの文字色を赤にしたいとします。 この時、振る舞う対象はpタグで、Pタグを選択(セレクト)したい。 これをjQueryのセレクタを使って書くと $(‘p’)
  30. 30. 本日使用するデータ:http://goo.gl/CQSyEM やってみよう! 振る舞う対象を指定しよう 長いですよね… jQuery便利! ちなみにJavaScriptだけで書くと… getElementsByTagName(‘p’)
  31. 31. 本日使用するデータ:http://goo.gl/CQSyEM ここがすごい! jQueryのメリット バージョンよって 対応ブラウザが違います ここでは、書く量が少なくなるという事例でしたが、 他にもクロスブラウザ対応もしており、 複雑なJavaScriptが 簡単に記述できる
  32. 32. 本日使用するデータ:http://goo.gl/CQSyEM 01_css.htmlの続き 文字を赤くするには… このように書きます 01_css.htmlの続きでpタグを赤くするために、 jQueryを使って、視覚表現であるCSSを操作するという 処理(振る舞い)をします。 $(‘p’).css(‘color’,’red’);
  33. 33. 本日使用するデータ:http://goo.gl/CQSyEM 01_css.htmlの続き 文字を赤くするには… .css()でプロパティ「color」の値を「red」に指定したということになります。 この.css()のような処理をするものは数多くあり、それぞれで書き方が違った りします。いきなり全てを覚えるのは大変なので、慣れるまではその都度調べ るのが良いでしょう。 これを繰り返していると自然と覚えていきます。 $(‘p’).css(‘color’,’red’); .css()のようなものをAPI(Application Programming Interface)と言います。
  34. 34. 本日使用するデータ:http://goo.gl/CQSyEM 01_css.htmlの続き 実際に記述していきましょう 書いてみましょう! わからない人は 02_css_answer.htmlを見てください
  35. 35. 本日使用するデータ:http://goo.gl/CQSyEM 本題に入ります クロスフェードスライドを作ろう クロスフェードスライドの 動作イメージ active:表示状態 next:次に表示される画像
  36. 36. 本日使用するデータ:http://goo.gl/CQSyEM 03_cross_fade_slide.htmlを使います クロスフェードスライドを作ろう すでにおまじないは書いていますが 忘れないように! まずは、htmlとブラウザでの表示を確認 現状は最後のliの画像が表示されています 03_cross_fade_slide.htmlを使います。
  37. 37. 本日使用するデータ:http://goo.gl/CQSyEM 03_cross_fade_slide.htmlを使います クロスフェードスライドを作ろう まずは ・一旦全部の画像を非表示にする ・一枚目の画像にactiveというクラスを付けて表示させる をやってみましょう。
  38. 38. 本日使用するデータ:http://goo.gl/CQSyEM 03_cross_fade_slide.htmlを使います クロスフェードスライドを作ろう 非表示にするliタグをセレクトして、非表示という処理をする
  39. 39. 本日使用するデータ:http://goo.gl/CQSyEM 03_cross_fade_slide.htmlを使います クロスフェードスライドを作ろう 非表示にするliタグをセレクトして、非表示という処理をする $(‘.slide ul li’).hide(); .hide()というAPIがあります
  40. 40. 本日使用するデータ:http://goo.gl/CQSyEM 03_cross_fade_slide.htmlを使います クロスフェードスライドを作ろう 一番目のliをセレクトし、activeというクラスを付け、表示させる
  41. 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. 42. 本日使用するデータ:http://goo.gl/CQSyEM クロスフェードスライドを作ろう 次に… 任意時間毎に処理を繰り返す 繰り返す処理は… .activeをフェードアウトしてクラス名activeを削除、 その次のliをフェードインしてクラス名activeを加える ここまで出来なかった方は 04_cross_fade_slide.htmlを使って下さい
  43. 43. 本日使用するデータ:http://goo.gl/CQSyEM ここまで出来なかった方は 04_cross_fade_slide.htmlを使って下さい クロスフェードスライドを作ろう 任意時間毎に処理を繰り返すには setInterval(function(){ //繰り返す処理 },任意時間); 今回は2秒なので、2000 ※任意時間の指定は、1秒であれば1000になります
  44. 44. 本日使用するデータ:http://goo.gl/CQSyEM ここまで出来なかった方は 04_cross_fade_slide.htmlを使って下さい クロスフェードスライドを作ろう 繰り返す処理は、 .activeをフェードアウトしてクラス名activeを削除、その次のliをフェードインしてクラス名activeを加える
  45. 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. 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. 47. 本日使用するデータ:http://goo.gl/CQSyEM ここまで出来なかった方は 05_cross_fade_slide.htmlを使って下さい クロスフェードスライドを作ろう 次にやりたいことは… 次のliがあるときは次のliに、次のliが無いときは最初のliに戻りたい If文ってやつですね! 条件分岐を使いましょう もし∼だったら
  48. 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. 49. 本日使用するデータ:http://goo.gl/CQSyEM ここまで出来なかった方は 05_cross_fade_slide.htmlを使って下さい クロスフェードスライドを作ろう 次のliがあるかどうか
  50. 50. 本日使用するデータ:http://goo.gl/CQSyEM ここまで出来なかった方は 05_cross_fade_slide.htmlを使って下さい クロスフェードスライドを作ろう 次のliがあるかどうか $('.slide ul li.active').next('li')があるかどうか
  51. 51. 本日使用するデータ:http://goo.gl/CQSyEM ここまで出来なかった方は 05_cross_fade_slide.htmlを使って下さい クロスフェードスライドを作ろう 次のliがあるかどうか $('.slide ul li.active').next('li')があるかどうか もし次のliがあれば、次のliの数は当然1つ
  52. 52. 本日使用するデータ:http://goo.gl/CQSyEM ここまで出来なかった方は 05_cross_fade_slide.htmlを使って下さい クロスフェードスライドを作ろう 次のliがあるかどうか $('.slide ul li.active').next('li')があるかどうか もし次のliがあれば、次のliの数は当然1つ 次のliの数を取得できれば次のliがあるかどうかわかる
  53. 53. 本日使用するデータ:http://goo.gl/CQSyEM ここまで出来なかった方は 05_cross_fade_slide.htmlを使って下さい クロスフェードスライドを作ろう 次のliがあるかどうか .lengthを使いましょう $('.slide ul li.active').next('li')があるかどうか もし次のliがあれば、次のliの数は当然1つ 次のliの数を取得できれば次のliがあるかどうかわかる ※要素の数を取得するだけでなく、文字列の長さを取得したり出来ます。
  54. 54. 本日使用するデータ:http://goo.gl/CQSyEM ここまで出来なかった方は 05_cross_fade_slide.htmlを使って下さい クロスフェードスライドを作ろう $('.slide ul li.active').next('li').length;
  55. 55. 本日使用するデータ:http://goo.gl/CQSyEM ここまで出来なかった方は 05_cross_fade_slide.htmlを使って下さい クロスフェードスライドを作ろう $('.slide ul li.active').next('li').length; 実際どうなっているのかを確認したい
  56. 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. 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. 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. 59. 本日使用するデータ:http://goo.gl/CQSyEM ここまで出来なかった方は 06_cross_fade_slide.htmlを使って下さい クロスフェードスライドを作ろう 残りの処理は、 一番最初のliをフェードインしてクラス名activeを加える .activeをフェードアウトしてクラス名activeを削除
  60. 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. 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. 62. 本日使用するデータ:http://goo.gl/CQSyEM ここまで出来なかった方は 07_cross_fade_slide.htmlを使って下さい クロスフェードスライドを作ろう 意図している動きができましたか? 出来るって楽しい!
  63. 63. 本日使用するデータ:http://goo.gl/CQSyEM ここまで出来なかった方は 07_cross_fade_slide.htmlを使って下さい クロスフェードスライドを作ろう 最後にコードを整理しましょう
  64. 64. 本日使用するデータ:http://goo.gl/CQSyEM ここまで出来なかった方は 07_cross_fade_slide.htmlを使って下さい クロスフェードスライドを作ろう 変数 varを使いましょう 最後にコードを整理しましょう 変数 varとは、数値や文字列などを格納しておく「箱」のようなものです。 JavaScriptの本の 最初の方に出てきますね 変数に何かを格納することを「代入」をいいます。
  65. 65. 本日使用するデータ:http://goo.gl/CQSyEM ここまで出来なかった方は 07_cross_fade_slide.htmlを使って下さい クロスフェードスライドを作ろう varを使って任意の文字列を変数として宣言をします。例えば… var hoge; hogeという変数を宣言しました。「;」は処理の終わりという意味です。 var hoge = 1; 上記は、hogeという変数に1を代入したということになります。 文字列の場合は、代入したい文字列を「’’」で囲います。 例えば var hoge = ‘ほげ’;
  66. 66. 本日使用するデータ:http://goo.gl/CQSyEM ここまで出来なかった方は 08_cross_fade_slide.htmlを使って下さい クロスフェードスライドを作ろう var $active = $('.slide ul li.active'); $(‘.slide ul li.active’)が複数あるので 見やすくなっているはず… として、全体のコードを調整してみましょう
  67. 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. 68. 本日使用するデータ:http://goo.gl/CQSyEM ここまで出来なかった方は 10_cross_fade_slide_finished.htmlをみて下さい クロスフェードスライドを作ろう 一段落!
  69. 69. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう 再度、完成をみてみましょう
  70. 70. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう ファイルをドラッグ&ドロップし、ブラウザに反映させたい。
  71. 71. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう ファイルをドラッグ&ドロップし、ブラウザに反映させたい。 File APIを使います ローカルにあるファイルを読み込んだり書き込んだり出来るようになります 11_file_api.htmlを使っていきます 前半で作ったスライドするコードは 一旦コメントアウトしています
  72. 72. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう 11_file_api.htmlを開いて、画像をドラッグ&ドロップすると…
  73. 73. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう 11_file_api.htmlを開いて、画像をドラッグ&ドロップすると… 画像だけブラウザで表示されます… 後半戦、頑張ろう! まずは、この動きをキャンセルしましょう!
  74. 74. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう ドラッグ&ドロップしたとき、ブラウザの動きを止める
  75. 75. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう ドラッグ&ドロップしたとき、ブラウザの動きを止める ドラッグ、ドロップを「イベント」 そのイベントに対して処理を与える命令を「イベントハンドラ」
  76. 76. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう 「on」というイベントハンドラを使っていきます。
  77. 77. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう 「on」というイベントハンドラを使っていきます。 $(‘セレクタ’).on(‘イベント', function(){ //処理 }); onの構文は ※他にも書き方はあります。他の書き方は今回は割愛します。 ※イベントは複数指定することができます。
  78. 78. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう 今回のイベントはドラッグ&ドロップなので
  79. 79. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう 今回のイベントはドラッグ&ドロップなので $(‘.drop-frame’).on(‘dragover drop', function(){ //処理 }); となります。
  80. 80. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう ブラウザの動きをキャンセルするには
  81. 81. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう ブラウザの動きをキャンセルするには $(‘.drop-frame’).on(‘dragover drop', function(e){ e.preventDefault(); }); と書きます。 先ほど説明したfunction()の中にeというのが入っています。 このeはイベント、すなわち「 dragover drop 」になります。 イベントを起こした時、eに様々な値が入ります。
  82. 82. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう eの中身を見てみよう! $(‘.drop-frame’).on(‘dragover drop', function(e){ e.preventDefault(); console.log(e); }); 何が表示 されるかな?
  83. 83. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう イベントの中には色々な情報が入っていることがわかります。 また、console.log()が何度も実行されています。これはマウスがドラッグ で動く度にconsole.log()が実行されていているからになります。 今回は、ファイルをブラウザに1回表示されたら良いので、ドラッグとド ロップを分けて書いておきましょう。 ここまで13_file_api.html にまとまっています
  84. 84. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう ファイルを読み込むためにFileReader()を使います。 オブジェクトを生成するためにnew演算子を使って オブジェクト? var reader = new FileReader() とします。
  85. 85. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう オブジェクトって何? オブジェクト?
  86. 86. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう オブジェクトって何? オブジェクトの理解は めちゃくちゃ大事! console.log(reader); で中身をみてみましょう。
  87. 87. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう オブジェクトとは
  88. 88. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう オブジェクトとは ※プロパティ (property) は物体の特性・特質を意味する言葉である。 名前と値をもつプロパティを格納するコンテナのようなもの
  89. 89. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう オブジェクトとは 名前と値をもつプロパティを格納するコンテナのようなもの ※プロパティ (property) は物体の特性・特質を意味する言葉である。 例えば、河島をオブジェクトとしてConsolo.log(河島);で出力すると…
  90. 90. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう オブジェクトとは ※プロパティ (property) は物体の特性・特質を意味する言葉である。 例えば、河島をオブジェクトとしてConsolo.log(河島);で出力すると… 河島 {性別:男, 年齢:ひみつ, 住所:横浜, 結婚:している,…} となります。 ここまでの内容は 14_file_api.htmlにあります 名前と値をもつプロパティを格納するコンテナのようなもの
  91. 91. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう ドラッグしたファイルの情報を読み取ろう
  92. 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. 93. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう 配列とは… for文とは… 複数の値が連番で格納されている箱のようなもの ※例えば、[ファイル1の情報, ファイル2の情報, ファイル3の情報… ] 処理を繰り返したいときに使う制御文 for ( var i = 初期値 ; 繰り返し条件 ; 次の値){ //処理 } 16_file_api.htmlを使って Console.logで中身を 見てみよう!
  94. 94. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう 次に、ファイルの読み込み(取得)が完了した時の処理を書いていきましょう。
  95. 95. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう 次に、ファイルの読み込み(取得)が完了した時の処理を書いていきましょう。 reader.addEventListener('load', function() { //処理 });
  96. 96. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう 次に、ファイルの読み込み(取得)が完了した時の処理を書いていきましょう。 addEventListenerはイベントが起こったとき処理が発生するようにするイ ベントリスナーと呼ばれるものです。 reader.addEventListener('load', function() { //処理 }); Readerオブジェクトの中身をconsole.log(reader);で確認してみると…
  97. 97. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう やった! resultの中に画像の情報が! reader.addEventListener('load', function() { console.log(reader); });
  98. 98. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう liに取得したimgを入れていき、スライド部分とサムネイル部分に画像が 表示できるようにしていきます。 後から追加した画像が、liの最後にきて欲しいので
  99. 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. 100. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう ファイルをドラッグすると、スライド部分に追加した最後の画像が一番上にくるので調整しましょう。
  101. 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. 102. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう 次に、startボタンを押したらクロスフェードの処理が始まるようにします。 あと少し!
  103. 103. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう 関数を使いましょう 次に、startボタンを押したらクロスフェードの処理が始まるようにします。 あと少し!
  104. 104. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう 関数を使いましょう function 関数名() { //処理 } 次に、startボタンを押したらクロスフェードの処理が始まるようにします。 あと少し! 関数を定義する構文は ※処理はクロスフェードの動きが入ります
  105. 105. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう 関数名(); 関数を実行するには
  106. 106. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう 関数名(); 関数を実行するには スイッチみたいなもの function start() { クロスフェードスライドの処理 } だと、start();が実行された段階で処理が始まります。
  107. 107. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう Start()を実行するタイミングは、.startがクリックされた時なので onを使ったイベントの制御 やりましたね!
  108. 108. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう Start()を実行するタイミングは、.startがクリックされた時なので onを使ったイベントの制御 やりましたね! $('.start').on('click', function(){ start(); });
  109. 109. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう ドラッグ&ドロップ部分とスタートボタン、サムネイル部分を非表示にしたいので
  110. 110. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう ここまでの内容は 21_file_api.htmlに まとまっています $('.start').on('click', function(){ start(); $('.drop-frame, .start, .thumbnail').fadeOut(); }); ドラッグ&ドロップ部分とスタートボタン、サムネイル部分を非表示にしたいので
  111. 111. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう 最後にコードを整理して完成!! ただ、何でもかんでも重複しているものを変数に 入れればいいってものでもないです。 同じように見えてもオブジェクトに入っている情報が 違うので処理が上手く動かないことがあるので注意!
  112. 112. 本日使用するデータ:http://goo.gl/CQSyEM File APIを使います html5APIを使って自分の好きな画像のスライドを作ろう お疲れ様でした! また、ご清聴ありがとうございました!

×