TopJavaScript > 2012年4月
2012年4月23日

JavaScript圧縮・難読化の定番ツール「/packer/」

April 23,2012 1:11 AM
Tag:[, , ]
Permalink

JavaScript圧縮・難読化の定番ツール「/packer/」を紹介します。直感的で動作も軽量です。

/packer/
/packer/

「定番」と書いた理由は、はてなブックマークでブレイクこそしていないものの、コンスタントにブクマされているためです(2012年4月22日現在で310ブックマーク)。

はてなブックマーク

使い方は、圧縮・難読化したいソースコードを上のテキストエリアにペーストして、「Pack」をクリックするだけです。

Pack

圧縮・難読化されました。

圧縮

圧縮率は下のテキストエリアの右下に表示されます。

圧縮率

オプションは「Base62 encode(英数字のみのエンコード)」と「Shrink variables(変数名の圧縮)」の2つが用意されています。このオプションを利用しないと空白・改行を除去するだけの動作になるので、圧縮率を上げたい場合はオプションを利用しましょう。

オプション

jQuery1.7.2.js(262285バイト)で2つのオプションを試したところ、以下の結果でした(動作は未確認)。オプションを両方利用すると一番サイズが小さくなるようです。

Shrink variablesBase62 encode実行後のサイズ(圧縮率)
××139512バイト(53.2%)
×115923バイト(44.2%)
×77476バイト(29.5%)
74643バイト(28.5%)

実験で使ったjQueryは未確認ですが、自分で作ったjQueryスクリプトはこれで圧縮して問題なく動作しています。ダウンロード版もあります。

JavaScriptの解凍・難読化解除は「jsbeautifier.org」をどうぞ。

HTMLの整形やJavaScriptの難読化を解除する「jsbeautifier.org」
Comments [0] | Trackbacks [0]
2012年4月17日

プログラミング初心者がJavaScriptを1分で実行する方法

April 17,2012 1:55 AM
Tag:[]
Permalink

プログラミング初心者がJavaScriptを1分で実行する方法を紹介します。

JavaScriptはブラウザ上で実行できるので、ブラウザを利用します。ブラウザはIE8/IE9またはGoogle Chrome、Firefoxのいずれかを使います(FirefoxはFirebugのインストールが必要です)。

プログラミング初心者にプログラムのサンプルを見せるときにも使えるかもしれません。

1.IE8/IE9で実行する

WindowsであればIE8/IE9がデフォルトでインストールされていると思うので、もっとも手っ取り早いです。

ブラウザを起動して任意のページを表示します。この状態でF12を押下すると、次の画面が表示されるので、「コンソール」タブをクリック。

(画面をクリックすれば拡大します。以下同様)
コンソール

一番下の行に実行したいJavaScriptを記述してリターン。ここでは「document.write("OK");」と入力してみます。document.write()は、引数に指定した文字などを画面に表示するための関数です。

入力

ブラウザに実行結果が表示されました。

実行結果

コンソールにも実行結果が表示されます。

実行

ブラウザ起動を含めると1分は厳しいかもしれませんが、3~5分もあればここまでたどりつけるんじゃないかと思います。「alert("OK");」と入力すれば、ダイアログを表示できます。

もう少しきちんとしたプログラムを書いて実行したい場合は、画面右下のアイコンをクリック。

アイコン

実行させたいJavaScriptを記述して「スクリプトの実行」をクリック。ここではfor文を使って、0から9までの数字を表示するプログラムを実行してみます。

スクリプトの実行

ブラウザに実行結果が表示されました。

実行結果

さきほどと同様、コンソールにも実行結果が表示されます。

実行

コンソールの実行結果は右クリックして「コンソールのクリア」で消去できます。

コンソールのクリア

2.Google Chromeで実行する

1項と同様、任意のページを表示した状態でF12を押下すると、次の画面が表示されるので、「Console」をクリック。

Console

実行したいプログラムを記述してリターン。

プログラム

実行されました。実行結果は1項と同様、ブラウザに表示されます。

実行

Google Chromeは複数行実行の方法が見つけられませんでした。見落としているかもしれません。Windowsであれば、Shift+リターンで複数行が入力できます。

3.Firefox(Firebug)で実行する

1項と同様、任意のページを表示した状態でF12を押下すると、次の画面が表示されるので、「コンソール」タブをクリックして、一番下の行に実行したいJavaScriptを入力してリターン。

コンソール

複数行を実行する場合は、右下のアイコンをクリック。

アイコン

右側に実行したいJavaScriptを入力して「実行」をクリックします。

実行

1~3項について、表示しているページにjQueryを読み込ませておけば、jQueryの構文も実行できるんじゃないかと思います(多分)。

4.JavaScriptをファイルに記述して実行する

1~3項のいずれかでJavaScriptが動作するイメージはつかめたと思います。

JavaScriptをファイルとして読み込ませ、実行させるには、1~3項で入力したプログラムを次のようにscript要素で括り、「hoge.html」などのファイル名で保存します。あとはブラウザにそのファイルをドラッグすれば実行されます(URLでアクセスするのが本来ですが)。

<script>
document.write("OK");
</script>
Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3