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.

HTML5の前のJavaScript入門

5,356 views

Published on

2012年11月29日(木)に飯田橋にて開催いたしました勉強会の資料になります。

Published in: Technology

HTML5の前のJavaScript入門

  1. 1. HTML5 の前のJavaScript 入門 ビーンズ株式会社 豊川
  2. 2. アウトライン • スピーカーについて • HTML5とは • jQueryとは • Lesson 1 • Lesson 2 • 役に立つWebサイト・書籍のご紹介 • 楽しいJavaScript ライブラリ & API ご紹介 • おまけビーンズ株式会社 ( http://beanzinc.jp ) 2 2012-11 HTML5の前のJavaScript入門
  3. 3. スピーカーについて • 豊川 弘樹 (24歳) • 19歳のときプログラミングを本格的に始める アルパカ好きって言うと • 好きな言語は JavaScript 好きな動物はアルパカ よくあぁ∼って言われます • その他扱える言語は PHP, Objective-C, C, Python, Ruby, 関西弁 など • これまで作ったものはポートフォリオに ( http://alpacat.com )ビーンズ株式会社 ( http://beanzinc.jp ) 3 2012-11 HTML5の前のJavaScript入門
  4. 4. HTML5 とはビーンズ株式会社 ( http://beanzinc.jp ) 4 2012-11 HTML5の前のJavaScript入門
  5. 5. HTML5 とは 狭義: HTMLのバージョン5としての仕様 広義: CSS3やWebGLなどの周辺技術を含めた仕様群 広義のHTML5に含まれる技術例 footerなどの新しいタグ WebGL CSS3 Canvas audio, video要素 マイク、カメラなどのデバイスアクセスビーンズ株式会社 ( http://beanzinc.jp ) 5 2012-11 HTML5の前のJavaScript入門
  6. 6. カメラアクセス デモ • Dev.Operaビーンズ株式会社 ( http://beanzinc.jp ) 6 2012-11 HTML5の前のJavaScript入門
  7. 7. WebGL デモ • Three.jsビーンズ株式会社 ( http://beanzinc.jp ) 7 2012-11 HTML5の前のJavaScript入門
  8. 8. HTML5 がすごいのはわかったけど なんで JavaScript なん?ビーンズ株式会社 ( http://beanzinc.jp ) 8 2012-11 HTML5の前のJavaScript入門
  9. 9. HTML5 と言うけれど実際は... JavaScript 必須!! footerなどの新しいタグ WebGL CSS3 Canvas audio, video要素 マイク、カメラなどのデバイスアクセス JavaScript で扱うことが多い!!ビーンズ株式会社 ( http://beanzinc.jp ) 9 2012-11 HTML5の前のJavaScript入門
  10. 10. JavaScript の愉快な仲間たち ショートコーディング モバイル用Web作成支援 iPhoneアプリ サーバーサイド &Androidアプリ &リアルタイムWebビーンズ株式会社 ( http://beanzinc.jp ) 10 2012-11 HTML5の前のJavaScript入門
  11. 11. アプリからサーバーまでなんでもできる... そう、JavaScript ならねビーンズ株式会社 ( http://beanzinc.jp ) 11 2012-11 HTML5の前のJavaScript入門
  12. 12. 唐突ですが... 今日は jQuery を使います!! Ω ΩΩ<な、なんだってー!?ビーンズ株式会社 ( http://beanzinc.jp ) 12 2012-11 HTML5の前のJavaScript入門
  13. 13. jQuery とはビーンズ株式会社 ( http://beanzinc.jp ) 13 2012-11 HTML5の前のJavaScript入門
  14. 14. jQuery とは • JavaScriptを素早く簡単に書くためのライブラリ • jQueryを使うことである程度クロスブラウザ(※1) 対応が可能 ※1 あらゆるブラウザで正常に動作すること “ 一人前のJavaScript使いになるためには、ブラウザの違いに 翻弄されて目を血走らせながら「IEがぁ、IEがあぁぁ」と ” 叫ぶ儀式を通過しなければいけない。 プログラミング言語人気TOP10の簡易解説より http://www.mwsoft.jp/column/program_top10.html • おそらく今最も使われているJavaScriptライブラリビーンズ株式会社 ( http://beanzinc.jp ) 14 2012-11 HTML5の前のJavaScript入門
  15. 15. jQuery を使って書くとどうなるの?ビーンズ株式会社 ( http://beanzinc.jp ) 15 2012-11 HTML5の前のJavaScript入門
  16. 16. 例えば... クリックしたときに何かする!!ビーンズ株式会社 ( http://beanzinc.jp ) 16 2012-11 HTML5の前のJavaScript入門
  17. 17. Native JavaScript var  foo  =  function(){        alert(ʻ‘piyoʼ’); }; var  hoge  =  document.getElementById(ʻ‘hogeʼ’); //  Chrome,  Firefox⽤用 hoge.addEventListener(ʻ‘clickʼ’,  foo,  false); //  IE,  Opera⽤用 hoge.attachEvent(ʻ‘onclickʼ’,  foo);ビーンズ株式会社 ( http://beanzinc.jp ) 17 2012-11 HTML5の前のJavaScript入門
  18. 18. jQuery $(ʻ‘#hogeʼ’).click(function(){        alert(ʻ‘piyoʼ’); });ビーンズ株式会社 ( http://beanzinc.jp ) 18 2012-11 HTML5の前のJavaScript入門
  19. 19. 例えば... img要素を追加するビーンズ株式会社 ( http://beanzinc.jp ) 19 2012-11 HTML5の前のJavaScript入門
  20. 20. Native JavaScript window.onload  =  function(){        var  element  =  document.createElement(img);        element.src  =  img/1.jpg;        element.style.width  =  400px;        element.style.height  =  300px;        var  body  =  document.getElementsByTagName("body").item(0);          body.appendChild(element); };ビーンズ株式会社 ( http://beanzinc.jp ) 20 2012-11 HTML5の前のJavaScript入門
  21. 21. jQuery $(function(){        $(<img  />).attr(src,  img/1.jpg).css({width:400px,  height:300px}).appendTo(body); });ビーンズ株式会社 ( http://beanzinc.jp ) 21 2012-11 HTML5の前のJavaScript入門
  22. 22. jQuery は公式サイトからダウンロードできます!! http://jquery.com/ クリック → 名前を付けて保存ビーンズ株式会社 ( http://beanzinc.jp ) 22 2012-11 HTML5の前のJavaScript入門
  23. 23. 本日のレシピ • Lesson 1 マウスオーバーで画像を切り替える • Lesson 2 画像を自動的に切り替えてスライドショーにするビーンズ株式会社 ( http://beanzinc.jp ) 23 2012-11 HTML5の前のJavaScript入門
  24. 24. 材料 Mac Windows ブラウザ Google Chrome Firefox など SakuraEditor メモ帳 TeraPad など CotEditor ライブラリ jQueryビーンズ株式会社 ( http://beanzinc.jp ) 24 2012-11 HTML5の前のJavaScript入門
  25. 25. Lesson 1マウスオーバーで画像を切り替えるビーンズ株式会社 ( http://beanzinc.jp ) 25 2012-11 HTML5の前のJavaScript入門
  26. 26. <作業フォルダ> ├lesson1.html ├img/ │├1.jpg │└2.jpg └js/   └jquery-‐‑‒1.8.1.min.js ※先ほどダウンロードしたものビーンズ株式会社 ( http://beanzinc.jp ) 26 2012-11 HTML5の前のJavaScript入門
  27. 27. lesson1.html<!DOCTYPE  html><html> HTML5の宣言        <head>                <meta  http-‐‑‒equiv="Content-‐‑‒Type"  content="text/html;  charset=UTF-‐‑‒8">                <title>Lesson  1</title>                <script  type="text/javascript"  src="js/jquery-‐‑‒1.8.1.min.js"></script>        </head> jQuery読み込み        <body>                <img  src="img/1.jpg"  width="400"  height="300"  id="alpaca"  />        </body></html> jQueryで操作するためにidを振っておく 文字コードをUTF-8にして保存するのを忘れないでください!!ビーンズ株式会社 ( http://beanzinc.jp ) 27 2012-11 HTML5の前のJavaScript入門
  28. 28. lesson1.html 追記していきます                <img  src="img/1.jpg"  width="400"  height="300"  id="alpaca"  />                                <script  type=”text/javascript”>                        $(ʻ‘img#alpacaʼ’).hover(                                function(){ 自分で付けたid名                                        $(ʻ‘img#alpacaʼ’).attr(ʻ‘srcʼ’,  ʻ‘img/2.jpgʼ’);                                },                              function(){                                        $(ʻ‘img#alpacaʼ’).attr(ʻ‘srcʼ’,  ʻ‘img/1.jpgʼ’);                                }                        );                </script>        </body>ビーンズ株式会社 ( http://beanzinc.jp ) 28 2012-11 HTML5の前のJavaScript入門
  29. 29. lesson1.htmlをブラウザで確認してみましょう!! lesson1.htmlをブラウザで開きます うまく動かないときは... • jQuery 読み込みのファイルパスがあっているか • { } や ( ) の数と位置があっているか • , (コンマ)や ’ (クォート)を忘れていないか • 行末の ; (セミコロン)を忘れていないか • id名の指定があっているかビーンズ株式会社 ( http://beanzinc.jp ) 29 2012-11 HTML5の前のJavaScript入門
  30. 30. HTML復習 <img  src=”img/1.jpg”  id=”alpaca”  class=”animals”  /> 要素名 属性名 属性値 id名 (重複不可) class名 (重複OK) alpacaというid名のimg要素のsrc属性に  img/2.jpg  を設定する $(ʻ‘img#alpacaʼ’).attr(ʻ‘srcʼ’,  ʻ‘img/2.jpgʼ’); 要素名 id or class名 属性名 属性値 id は「#」 属性を設定する (属性: attribute) class は「.」ビーンズ株式会社 ( http://beanzinc.jp ) 30 2012-11 HTML5の前のJavaScript入門
  31. 31. マウスオーバー時は...し、マウスアウト時は...する $(ʻ‘img#alpacaʼ’).hover(        function(){ マウスオーバー時の処理理                $(ʻ‘img#alpacaʼ’).attr(ʻ‘srcʼ’,  ʻ‘img/2.jpgʼ’);        }, alpacaというid名のimg要素のsrc属性に ‘img/2.jpg’ を設定する        function(){ マウスアウト時の処理理                $(ʻ‘img#alpacaʼ’).attr(ʻ‘srcʼ’,  ʻ‘img/1.jpgʼ’);        } alpacaというid名のimg要素のsrc属性に ‘img/1.jpg’ を設定する );ビーンズ株式会社 ( http://beanzinc.jp ) 31 2012-11 HTML5の前のJavaScript入門
  32. 32. Lesson 1 <!DOCTYPE  html> <html>ソースコード        <head>                <meta  http-‐‑‒equiv="Content-‐‑‒Type"  content="text/html;   charset=UTF-‐‑‒8">                <title>Lesson  1</title>                <script  type="text/javascript"  src="js/jquery-‐‑‒1.8.1.min.js"></script>        </head>        <body>                <img  src="img/1.jpg"  width="400"  height="300"  id="alpaca"  />                <script  type=”text/javascript”>                        $(ʻ‘img#alpacaʼ’).hover(                                function(){                                        $(ʻ‘img#alpacaʼ’).attr(ʻ‘srcʼ’,  ʻ‘img/2.jpgʼ’);                                },                              function(){                                        $(ʻ‘img#alpacaʼ’).attr(ʻ‘srcʼ’,  ʻ‘img/1.jpgʼ’);                                }                        );                </script>        </body> </html>ビーンズ株式会社 ( http://beanzinc.jp ) 32 2012-11 HTML5の前のJavaScript入門
  33. 33. Lesson 2画像を自動的に切り替えて スライドショーにするビーンズ株式会社 ( http://beanzinc.jp ) 33 2012-11 HTML5の前のJavaScript入門
  34. 34. <作業フォルダ> lesson1.htmlをコピーして新しく作ります ├lesson1.html ├lesson2.html ├img/ │├1.jpg 画像を追加します │├2.jpg │├3.jpg │├4.jpg │└5.jpg └js/   └jquery-‐‑‒1.8.1.min.jsビーンズ株式会社 ( http://beanzinc.jp ) 34 2012-11 HTML5の前のJavaScript入門
  35. 35. lesson2.html<!DOCTYPE  html><html> Lesson 2に変更        <head>                <meta  http-‐‑‒equiv="Content-‐‑‒Type"  content="text/html;  charset=UTF-‐‑‒8">                <title>Lesson  2</title>                <script  type="text/javascript"  src="js/jquery-‐‑‒1.8.1.min.js"></script>        </head> 5.jpgに変更        <body>                <img  src="img/5.jpg"  width="400"  height="300"  id="alpaca"  />                <script  type=”text/javascript”>                        //  次ページで                </script> 全て消去します        </body></html> 文字コードをUTF-8にして保存するのを忘れないでください!!ビーンズ株式会社 ( http://beanzinc.jp ) 35 2012-11 HTML5の前のJavaScript入門
  36. 36.                <script  type=”text/javascript”>                        var  imgs  =  [    //  画像リスト 追記していきます                                1.jpg,  //  0番⽬目                                2.jpg,  //  1                                3.jpg,  //  2                                4.jpg,  //  3                                5.jpg    //  4                        ];                        var  index  =  0;  //  画像リストのインデックス(0開始)                        var  timer  =  setInterval(function(){                                if  (index  >  4)  {    //  インデックスが4より⼤大きいとき                                        index  =  0;    //  インデックスを0に戻す                                } 自分で付けたid名                                $(img#alpaca).attr(src,  img/  +  imgs[index]);    //  画像切切り替え                                index  =  index  +  1;    //  インデックスを1増やす                        },  3000  /*  実⾏行行間隔[ミリ秒]  */);                </script>ビーンズ株式会社 ( http://beanzinc.jp ) 36 2012-11 HTML5の前のJavaScript入門
  37. 37. lesson2.htmlをブラウザで確認してみましょう!! lesson2.htmlをブラウザで開きます うまく動かないときは... • jQuery 読み込みのファイルパスがあっているか • { } や ( ) の数と位置があっているか • , (コンマ)や ’ (クォート)を忘れていないか • 行末の ; (セミコロン)を忘れていないか • id名の指定があっているかビーンズ株式会社 ( http://beanzinc.jp ) 37 2012-11 HTML5の前のJavaScript入門
  38. 38. 変数  ...  ⽂文字列列や数値などに名前を付けたもの var  hoge  =  ʻ‘あああʼ’; var  foo  =  123; 変数は「var」を付けて宣言 例 var  piyo  =  ʻ‘アルパカʼ’; alert(piyo); 「アルパカ」と表示される ※ alert はポップアップウィンドウを表示するビーンズ株式会社 ( http://beanzinc.jp ) 38 2012-11 HTML5の前のJavaScript入門
  39. 39. 配列列  ...  同じ種類の要素を⼊入れておく箱 配列 要素 要素 要素 要素 要素 0番目 1番目 2番目 3番目 4番目 var  imgs  =  [1.jpg,  2.jpg,  3.jpg,  4.jpg,  5.jpg]; 変数 配列を表す括弧 例 0番目 alert(imgs[0]); 要素はカンマで区切る 「1.jpg」と表示される カンマの後ろに改行を入れてもOKビーンズ株式会社 ( http://beanzinc.jp ) 39 2012-11 HTML5の前のJavaScript入門
  40. 40. setInterval  ...  ⼀一定間隔で何かする(タイマー) var  timer  =  setInterval(function(){        //  何かの処理理(⼀一定間隔で何度度も実⾏行行される) },  3000); タイマーの実⾏行行間隔[ミリ秒] タイマーを解除したいとき(上記の場合) clearInterval(timer); 解除したいタイマービーンズ株式会社 ( http://beanzinc.jp ) 40 2012-11 HTML5の前のJavaScript入門
  41. 41. 3秒間隔で繰り返し if  (index  >  4)  {    //  インデックスが4より⼤大きいとき        index  =  0;    //  インデックスを0に戻す } $(img#alpaca).attr(src,  img/  +  imgs[index]);    //  画像切切り替え index  =  index  +  1;    //  インデックスを1増やす つまり... インデックスは3秒間隔で次のように変化し、 0 → 1 → 2 → 3 → 4 → 0 → ... インデックスに対応した画像がセットされる imgs  =  [1.jpg,  2.jpg,  3.jpg,  4.jpg,  5.jpg]; 0番目 1番目 2番目 3番目 4番目ビーンズ株式会社 ( http://beanzinc.jp ) 41 2012-11 HTML5の前のJavaScript入門
  42. 42. Lesson 2 <!DOCTYPE  html> <html>ソースコード        <head>                <meta  http-‐‑‒equiv="Content-‐‑‒Type"  content="text/html;  charset=UTF-‐‑‒8">                <title>Lesson  2</title>                <script  type="text/javascript"  src="js/jquery-‐‑‒1.8.1.min.js"></script>        </head>        <body>                <img  src="img/5.jpg"  width="400"  height="300"  id="alpaca"  />                <script  type=”text/javascript”>                        var  imgs  =  [  1.jpg,  2.jpg,  3.jpg,  4.jpg,  5.jpg  ];    //  画像リスト                        var  index  =  0;  //  画像リストのインデックス(0開始)                        var  timer  =  setInterval(function(){                                if  (index  >  4)  {    //  インデックスが4より⼤大きいとき                                        index  =  0;    //  インデックスを0に戻す                                }                                $(img#alpaca).attr(src,  img/  +  imgs[index]);    //  画像切切り替え                                index  =  index  +  1;    //  インデックスを1増やす                        },  3000  /*  実⾏行行間隔[ミリ秒]  */);                </script>        </body> </html>ビーンズ株式会社 ( http://beanzinc.jp ) 42 2012-11 HTML5の前のJavaScript入門
  43. 43. 役に立つWebサイト・書籍のご紹介ビーンズ株式会社 ( http://beanzinc.jp ) 43 2012-11 HTML5の前のJavaScript入門
  44. 44. jQuery の入門には... • jQuery日本語リファレンス http://semooh.jp/jquery/ 情報は古いですが非常に見やすいです。 初めはここで。 • jQuery Docs http://docs.jquery.com/ jQuery公式ドキュメント。 英語ですが最新版のリファレンスはここで。ビーンズ株式会社 ( http://beanzinc.jp ) 44 2012-11 HTML5の前のJavaScript入門
  45. 45. JavaScript の入門には... • JavaScriptリファレンス | MDN https://developer.mozilla.org/ja/docs/JavaScript/ Reference 教科書的な。 • JavaScriptist http://javascriptist.net/ サンプル付き逆引きリファレンスがわかりやすいです。ビーンズ株式会社 ( http://beanzinc.jp ) 45 2012-11 HTML5の前のJavaScript入門
  46. 46. JavaScript を本格的に勉強するために... • JavaScript 第6版 David Flanagan 著、村上 列 訳 通称サイ本。 比較的難しいので自信がついてきた頃にどうぞ。 • JavaScript: The Good Parts ―「良い パーツ」によるベストプラクティス Douglas Crockford 著、水野 貴明 訳 実践的な内容。クロージャなどの勉強に。ビーンズ株式会社 ( http://beanzinc.jp ) 46 2012-11 HTML5の前のJavaScript入門
  47. 47. 楽しい JavaScript ライブラリ & API ご紹介ビーンズ株式会社 ( http://beanzinc.jp ) 47 2012-11 HTML5の前のJavaScript入門
  48. 48. jQuery Mobile http://jquerymobile.com/ こんなあなたにおすすめ 難易度 ★☆☆☆☆ • 手軽にリッチなスマホ用Webサイトを作りたい! • JavaScriptわからんけどHTMLならわかる!ビーンズ株式会社 ( http://beanzinc.jp ) 48 2012-11 HTML5の前のJavaScript入門
  49. 49. Titanium http://www.appcelerator.com/platform/titanium-sdk/ こんなあなたにおすすめ 難易度 ★★☆☆☆ • iPhone, Androidのネイティブアプリを作りたい! • インターフェースビルダー? 必要無いでござるビーンズ株式会社 ( http://beanzinc.jp ) 49 2012-11 HTML5の前のJavaScript入門
  50. 50. Facebook SDK for JavaScript http://developers.facebook.com/docs/reference/javascript/ こんなあなたにおすすめ 難易度 ★★★☆☆ • 俺はFacebookアプリを作るぞジョジョーッ!! • SSL? 大丈夫だ、問題ないビーンズ株式会社 ( http://beanzinc.jp ) 50 2012-11 HTML5の前のJavaScript入門
  51. 51. node.js http://nodejs.org/ こんなあなたにおすすめ 難易度 ★★★★☆ • リアルタイムWebを作りたい! • サーバサイドもJavaScriptで書いてやるぜ!ビーンズ株式会社 ( http://beanzinc.jp ) 51 2012-11 HTML5の前のJavaScript入門
  52. 52. three.js http://mrdoob.github.com/three.js/ こんなあなたにおすすめ 難易度 ★★★★★ • ブラウザで3Dやりたい!ビーンズ株式会社 ( http://beanzinc.jp ) 52 2012-11 HTML5の前のJavaScript入門
  53. 53. 以上です。本日はありがとうございました。 スライドのURLは弊社Facebookページにて告知させて頂きます。 弊社では一緒にモノ作りに チャレンジしたい!という 仲間を募集しています。 ご興味のある方はこちらから http://beanzinc.jp/contents/recruitビーンズ株式会社 ( http://beanzinc.jp ) 53 2012-11 HTML5の前のJavaScript入門
  54. 54. おまけ・其の壱 Lesson 1のやつをCSSでやるビーンズ株式会社 ( http://beanzinc.jp ) 54 2012-11 HTML5の前のJavaScript入門
  55. 55. ・・・ CSSのhover疑似クラスを使うと マウスオーバーしたときの スタイルを指定できる !! CSSではimg要素の src属性を指定できないが div要素などの背景画像なら...ビーンズ株式会社 ( http://beanzinc.jp ) 55 2012-11 HTML5の前のJavaScript入門
  56. 56. omake1.html<!DOCTYPE  html><html>        <head>                <meta  http-‐‑‒equiv="Content-‐‑‒Type"  content="text/html;  charset=UTF-‐‑‒8">                <title>Omake  1</title>                <style  type=”text/css”> CSS 指定                div#alpaca  {                        width:  400px;                        height:  300px; 背景画像に設定                        background-‐‑‒image:  url(ʻ‘img/1.jpgʼ’);                        background-‐‑‒position:  center  center;                        background-‐‑‒repeat:  no-‐‑‒repeat;                }                 hover疑似クラス                div#alpaca:hover  {                        background-‐‑‒image:  url(ʻ‘img/2.jpgʼ’);                }                </style>        </head> divに変更        <body>                <div  id="alpaca"></div>        </body></html>ビーンズ株式会社 ( http://beanzinc.jp ) 56 2012-11 HTML5の前のJavaScript入門
  57. 57. おまけ・其の弐リアルタイムWebでよく出てくる WebSocketってなんなん?ビーンズ株式会社 ( http://beanzinc.jp ) 57 2012-11 HTML5の前のJavaScript入門
  58. 58. 従来 ... クライアントがサーバーに問い合わせにいく(Pull型) Webサーバー クライアント 新しいメッセージありますか? ないよ 新しいメッセージありますか? ないってば 新しいメッセージありますか? ・・・ビーンズ株式会社 ( http://beanzinc.jp ) 58 2012-11 HTML5の前のJavaScript入門
  59. 59. WebSocket ... サーバーからクライアントへのアクション(Push) が可能 Webサーバー クライアント 新しいメッセージあったら言ってください わかった ・・・ 新しいメッセージほらよ (Push)ビーンズ株式会社 ( http://beanzinc.jp ) 59 2012-11 HTML5の前のJavaScript入門
  60. 60. リアルタイムチャット デモ • node.js + Socket.IO http://apps.alpacat.com/chat_room/ 2つ以上のタブやブラウザを開いてチャットしてみてくださいビーンズ株式会社 ( http://beanzinc.jp ) 60 2012-11 HTML5の前のJavaScript入門
  61. 61. fin.ビーンズ株式会社 ( http://beanzinc.jp ) 61 2012-11 HTML5の前のJavaScript入門

×