Webページで学ぶJavaScript2013 第8回

742 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
742
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Webページで学ぶJavaScript2013 第8回

  1. 1. Webページで学ぶ JavaScript 2013 第8回 tyage@KMC 7/9
  2. 2. あっっっっっついですね! いやほんと、アイスが捗ります さっき生鮮館で半額アイスを1500円分ほど購入し たら、冷凍庫に入りきりませんでした
  3. 3. 先週やったこと ● Ajaxの例としてMOCO'SキッチンAPIを叩いて みました ● どうでしたか? ● HTTPについても軽く説明があったのですがイ メージをつかめたでしょうか
  4. 4. 今日の予定 ● 今回を含めて残り二回になりました
  5. 5. 今日の予定 ● 今回を含めて残り二回になりました 何をしましょうか ● サーバーサイドJS(node.jsとか) ● JavaScriptについて詳しく ○ prototype based oopとかスコープとかやってないことは 多い ● ブラウザ拡張機能 ● ゲーム ● Webサイトを見る・いじる・作る
  6. 6. 今日の予定 ● 今回を含めて残り二回になりました 何をしましょうか ● サーバーサイドJS(node.jsとか) ● JavaScriptについて詳しく ○ prototype based oopとかスコープとかやってないことは 多い ● ブラウザ拡張機能 ● ゲーム ● Webサイトを見る・いじる・作る 他は時間が・・・(後期にやります?)
  7. 7. 例えばこのサイト ● http://nep-anime.tv/ ○ falcon君の紹介 ○ safariの人は注意
  8. 8. 例えばこのサイト ● http://nep-anime.tv/ ○ falcon君の紹介 ○ safariの人は注意 ● JavaScriptを見てみよう ○ HTMLソースを見て探してみるとこれが怪しい ○ http://nep-anime.tv/js/top-min.js?20130625
  9. 9. 例えばこのサイト ● http://nep-anime.tv/ ○ falcon君の紹介 ○ safariの人は注意 ● JavaScriptを見てみよう ○ HTMLソースを見て探してみるとこれが怪しい ○ http://nep-anime.tv/js/top-min.js?20130625 _人人人人人人人人_ > 圧縮されてる! <  ̄Y^Y^Y^Y^Y^YY ̄
  10. 10. どうして圧縮されてるの ● 圧縮されていると送信するデータ量が少なくなる ○ →通信にかかる時間が短くなる! ○ →ページの読み込みが早くなる! ○ →うれしい!✌('ω'✌ )三✌('ω')✌三( ✌'ω')✌ ● 実は、HTMLとかもgzip圧縮されて送信されてる ことがあります ● 可読性を低くするため、という理由で使う場合も あります・・・
  11. 11. 読めないんだけど・・・ ● がんばって綺麗にしましょう ● コードを綺麗にしてくれる機能があります ○ Developer ToolsのSourcesタブを開く ○ 左ペインからnep-anime.tv→js→top-min.js ○ jsファイルを開いたら右したのボタン群からPretty print ボタンを見つけて押す
  12. 12. 読めないんだけど・・・ ● がんばって綺麗にしましょう ● コードを綺麗にしてくれる機能があります ○ Developer ToolsのSourcesタブを開く ○ 左ペインからnep-anime.tv→js→top-min.js ○ jsファイルを開いたら右したのボタン群からPretty print ボタンを見つけて押す ● が、今回はこれでも読めない・・・ ● (☝ ◞‸◟)☝
  13. 13. 諦めたらそこで(ry ● さて、このjsコードで圧縮に使用されてるのは packerというツールです ○ eval(function(p,a,c,k,e,r) ... ● packer用decoderとかあるんですが、今回は自 分で元に戻してみよう
  14. 14. packerの簡単な原理 ● packerでは、元のコードを圧縮したものを文字 列として持っています ○ なので、送信するデータ量が少なくて済む ● 実行時には、圧縮した文字を元のコードに戻し て、eval関数に渡し、実行しています
  15. 15. packerの簡単な原理 ● evalとは、引数に渡した文字列をjsプログラムと して解釈して実行する関数です ○ (非推奨関数なのであんまり使わないでね) eval("1+1;"); => 2 eval("console.log('あびゃびゃびゃびゃ');"); => あびゃびゃびゃびゃ
  16. 16. packerの簡単な原理 ● eval関数に渡される文字は、人が書いた圧縮前 の読みやすいコードのはずです ● じゃあ、eval関数を書き換えてしまおう! var eval = function(code) { console.log(code); }; これを実行してeval関数を書き換えたあとに、圧縮 されたコードを実行すると・・・
  17. 17. もうひと押し jQueryっぽいコードが見えたけど、改行もインデン トもされてないからやはり読みにくい http://jsbeautifier.org/ これを使います (実は最初からこれ使えばよかったというのは秘密)
  18. 18. 整形結果 https://gist.github.com/tyage/5955919 読んでみよう読んでみよう
  19. 19. setTimeout ● 設定時間後に関数を実行します ○ タイマーを設定する感じ ● ページを開いてしばらくしたらいろいろ落ちてく るのはこの関数を使っています(295行目) setTimeout(function() { alert("カップ麺ができました"); }, 1000); 設定する時間はms(ミリ秒)なので、1000ms = 1秒です
  20. 20. clearTimeout ● タイマーをなかったことにします ● setTimeoutでタイマーIDが帰ってくるのでそれ を渡します var id = setTimeout(function() { alert("カップ麺ができました"); }, 1000); //カップ麺キャンセル!!! clearTimeout(id);
  21. 21. setInterval ● 設定した時間間隔で関数を実行します ● アニメーションはこれを使ってることが多い ○ 0.06秒ごとに1px下にずらす、とかすればアニメーション してるように見える setInterval(function() { console.log(new Date()); }, 1000);
  22. 22. clearInterval ● タイマーキャンセルします var id = setInterval(function() { console.log(new Date()); }, 1000); // 10秒たったらおしまい setTimeout(function() { clearInterval(id); }, 1000*10);
  23. 23. 例えば なんか女の子動かしたい! $("#chara-nepgear").animate({ top: "+=500", left: "+=500" });
  24. 24. 例えば もっと動かしたい! window.setInterval(function() { $("#chara-nepgear").css({ top: "+="+(Math.random()*20-10), left: "+="+(Math.random()*20-10) }); }, 10);
  25. 25. 例えば まだだ!まだ動きが足りんぞ! window.setInterval(function() { $("img").each(function() { $(this).css({ top: "+="+(Math.random()*20-10), left: "+="+(Math.random()*20-10) }); }); }, 10);
  26. 26. 次のターゲット: 7さんのサイト ● http://www.mizukinana.jp/ ○ yu3の紹介 ● 画像が5秒おきに入れ替わります ○ →高速で入れ替えたい!! ● Sourcesタブからjs→home.js ○ 5秒おきに画像をfadeIn, fadeOutしています
  27. 27. 高速にしてみませう function home_image(idx){ if(!$("#home_images > img:eq("+idx+")").length) idx = 0; next = idx+1; if(!$("#home_images > img:eq("+next+")").length) next = 0; fadeout = setTimeout( function(){ $("#navigation img").removeClass('select'); $("#navigation img:eq("+next+")").addClass('select'); $("#home_images > img:eq("+next+")").fadeIn(10); $("#home_images > img:eq("+idx+")").fadeOut(10, function(){home_image(next);}); },50); }
  28. 28. 結果 ● http://gifzo.net/bQOzgKkTFk ● http://gifzo.net/LTnASueCTW
  29. 29. お疲れ様でした ● 作ったものがあれば以下へアップロード!!! ○ https://www.kmc.gr.jp/~tyage/uploader/ ● 次回は来週です ○ 最終回!

×