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

Webページで学ぶJavaScript2013 第8回

564

Published on

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

No Downloads
Views
Total Views
564
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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/ ● 次回は来週です ○ 最終回!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×