Webページで学ぶJavaScript 2013 第8回

tyage@KMC7/9

あっっっっっついですね！

いやほんと、アイスが捗ります

さっき生鮮館で半額アイスを1500円分ほど購入したら、冷凍庫に入りきりませんでした

先週やったこと

● Ajaxの例としてMOCO'SキッチンAPIを叩いてみました

● どうでしたか？● HTTPについても軽く説明があったのですがイ

メージをつかめたでしょうか

今日の予定

● 今回を含めて残り二回になりました

今日の予定

● 今回を含めて残り二回になりました

何をしましょうか● サーバーサイドJS（node.jsとか）● JavaScriptについて詳しく

○ prototype based oopとかスコープとかやってないことは多い

● ブラウザ拡張機能● ゲーム● Webサイトを見る・いじる・作る

今日の予定

● 今回を含めて残り二回になりました

何をしましょうか● サーバーサイドJS（node.jsとか）● JavaScriptについて詳しく

○ prototype based oopとかスコープとかやってないことは多い

● ブラウザ拡張機能● ゲーム● Webサイトを見る・いじる・作る他は時間が・・・（後期にやります？）

例えばこのサイト

● http://nep-anime.tv/○ falcon君の紹介

○ safariの人は注意

例えばこのサイト

● http://nep-anime.tv/○ falcon君の紹介

○ safariの人は注意

● JavaScriptを見てみよう○ HTMLソースを見て探してみるとこれが怪しい

○ http://nep-anime.tv/js/top-min.js?20130625

例えばこのサイト

● http://nep-anime.tv/○ falcon君の紹介

○ safariの人は注意

● JavaScriptを見てみよう○ HTMLソースを見て探してみるとこれが怪しい

○ http://nep-anime.tv/js/top-min.js?20130625

＿人人人人人人人人＿＞　圧縮されてる！　＜￣Y^Y^Y^Y^Y^YY￣

どうして圧縮されてるの

● 圧縮されていると送信するデータ量が少なくなる○ →通信にかかる時間が短くなる！○ →ページの読み込みが早くなる！○ →うれしい！✌('ω'✌ )三✌('ω')✌三( ✌'ω')✌

● 実は、HTMLとかもgzip圧縮されて送信されてることがあります

● 可読性を低くするため、という理由で使う場合もあります・・・

読めないんだけど・・・

● がんばって綺麗にしましょう● コードを綺麗にしてくれる機能があります

○ Developer ToolsのSourcesタブを開く○ 左ペインからnep-anime.tv→js→top-min.js○ jsファイルを開いたら右したのボタン群からPretty print

ボタンを見つけて押す

読めないんだけど・・・

● がんばって綺麗にしましょう● コードを綺麗にしてくれる機能があります

○ Developer ToolsのSourcesタブを開く○ 左ペインからnep-anime.tv→js→top-min.js○ jsファイルを開いたら右したのボタン群からPretty print

ボタンを見つけて押す

● が、今回はこれでも読めない・・・● (☝ ◞‸◟）☝

諦めたらそこで（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);

};

これを実行してeval関数を書き換えたあとに、圧縮されたコードを実行すると・・・

もうひと押し

jQueryっぽいコードが見えたけど、改行もインデントもされてないからやはり読みにくい

http://jsbeautifier.org/これを使います

（実は最初からこれ使えばよかったというのは秘密）

整形結果

https://gist.github.com/tyage/5955919

読んでみよう読んでみよう

setTimeout● 設定時間後に関数を実行します

○ タイマーを設定する感じ

● ページを開いてしばらくしたらいろいろ落ちてくるのはこの関数を使っています（295行目）

setTimeout(function() {alert("カップ麺ができました");

}, 1000);

設定する時間はms（ミリ秒）なので、1000ms = 1秒です

clearTimeout● タイマーをなかったことにします● setTimeoutでタイマーIDが帰ってくるのでそれ

を渡します

var id = setTimeout(function() {alert("カップ麺ができました");

}, 1000);

//カップ麺キャンセル！！！

clearTimeout(id);

setInterval● 設定した時間間隔で関数を実行します● アニメーションはこれを使ってることが多い

○ 0.06秒ごとに1px下にずらす、とかすればアニメーションしてるように見える

setInterval(function() {console.log(new Date());

}, 1000);

clearInterval● タイマーキャンセルします

var id = setInterval(function() {console.log(new Date());

}, 1000);

// 10秒たったらおしまい

setTimeout(function() {clearInterval(id);

}, 1000*10);

例えば

なんか女の子動かしたい！

$("#chara-nepgear").animate({top: "+=500",left: "+=500"

});

例えば

もっと動かしたい！

window.setInterval(function() {$("#chara-nepgear").css({

top: "+="+(Math.random()*20-10),left: "+="+(Math.random()*20-10)

});}, 10);

例えば

まだだ！まだ動きが足りんぞ！

window.setInterval(function() {$("img").each(function() {

$(this).css({top: "+="+(Math.random()*20-10),left: "+="+(Math.random()*20-10)

});});

}, 10);

次のターゲット：7さんのサイト

● http://www.mizukinana.jp/○ yu3の紹介

● 画像が5秒おきに入れ替わります○ →高速で入れ替えたい！！

● Sourcesタブからjs→home.js○ 5秒おきに画像をfadeIn, fadeOutしています

高速にしてみませう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);

}

結果

● http://gifzo.net/bQOzgKkTFk● http://gifzo.net/LTnASueCTW

お疲れ様でした

● 作ったものがあれば以下へアップロード！！！○ https://www.kmc.gr.jp/~tyage/uploader/

● 次回は来週です○ 最終回！