Recent Entries

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ブックマークレット Spry Medias Designが凄く便利です!

コリスさんでWebサイトの制作・検証に役立つブックマークレットがたくさん紹介されてました。
その中でもSpry Medias Designがとってもいい感じでした。

リンクをブックマークに登録して使います。(このページで試すならクリックでもOKです。)
Spry Medias Design

このブックマークレットをクリックすると画面右下にこのようなものが現れます。
これがSpry Medias Designだ!

これが、Spry Medias Design本体です。
機能にはGrid、Rule、Unit、Crosshairの4種類があります。

それぞれクリックするとアイコンが青くなり使えるようになります。
Spry Medias Design アイコン選択後

Spry Medias Design

Grid

Gridは簡単に画面上にグリッド線をひけます。
サイズを知っている自分のブログなどで当てはめて試してみるとよくわかると思います。
何に使おうか困りますけど…。

Spry Medias DesignのGridをクリックしてスタートです。

Spry Medias DesignのGrid

Page

  • Align : どっちよりにグリッドを引くかの設定。
  • Size : 全体の横幅と高さの設定。数値を入力。単位を変えられます。
  • Margin : 上下左右のマージン(余白)。

Lattice

  • Columns : 格子の縦棒の設定。
  • Rows : 格子の横棒の幅の設定。

Gutter

  • Column gutter width : 縦棒の幅。
  • Rows gutter width : 横棒の幅。

レイアウト確認する時などの参考にどうぞ。
Sizeの幅にはMarginの幅が含まれていますので間違わないように。

Rule

Webページ上の長さを測れるメジャーです。

まず、Spry Medias DesignのRuleをクリックします。
すると画面の上と左に目盛(黒い帯)が現れます。(px:ピクセル単位)
マウスカーソルを移動すると目盛の目印が動くのがわかると思います。

Spry Medias DesignのRule

はじめは画面左上が0になっていますので、目盛の始まり(0)を変更しましょう。
左上の?マークの上にあるマークをクリックして、測りたい場所の左上までドラッグしていきます。
これで目盛の始まり(0)がそこに移動します。

次に、目盛の上をクリックして下(右)にドラッグすると線が現れるので測りたい場所の終わり部分まで、ドラッグしていきます。下と右、それぞれ行います。
(カーソル移動中、マウスーバーした場所の座標、Node、Classが表示されます。)
線は色んな区切りにスナップするので設定しやすいです。(引き寄せられる。)
終了する時は、左上の[×]か、ページ更新です。

使い方を覚えれば色々な場所の長さを測るのに大変便利なツールになります。
FirefoxのMeasureItよりいいかもしれません。

Unit

これはクリックしたある地点からの座標の差分を表示してくれます。

軸となる地点をクリックしたまま、任意の地点までドラッグしてください。
まぁ、ものさしとして使って良いのではないでしょうか。

Spry Medias DesignのUnitをクリックしてスタートです。

Spry Medias DesignのUnit

  • Difference : なんですか、これは。
  • X difference : 横方向の差分です。
  • Y difference : 縦方向の差分です。

Crosshair

ブラウザの画面上の座標をピクセル単位(px)で表示してくれます。
モニタ全体では無い事に気をつけましょう!

また、ブラウザのブックマークバーやメニューバーの部分は含まれません。
でも、スクロールバー上は測れます。

Spry Medias DesignのCrosshairをクリックしてスタートです。

Spry Medias DesignのCrosshair

さぁ、何に使おうかな。

Spry Medias Designを流してご紹介しましたが、一番お勧めなのはRuleです。
ブログ改造したりする時に測りたい事ってありますよね?
そんな時の為にブックマークバーにSpry Medias Designを登録しておきましょう!

いやぁそれにしてもJavaScriptはええなぁ。
何でも出来るし、カッコええなぁ

スポンサーサイト

YUI Compressor OnlineでJavaScriptファイルを軽くする

Webページを便利にしたりカッコ良くしたりするのに不可欠なJavaScriptですが、あまりに大きなJavaScriptファイルを読み込ませると、Webページの表示や操作が遅くなってしまします。
でもでも、やっぱり欠かせないーという方も多いはず。

ユーザー側から見れば必要のない無駄なものでも、管理者からみると可愛くって仕方がない機能ってありますよね。たとえそれが原因でWebページ自体が重くなっても・・・。

うちのブログで言えば、slimbox.jsによる画像の演出でしょうか。
Slimbox 1.64で画像表示を素敵に演出!
これは完全に自己満足の世界のような気がします( ´∀`)

でも、ユーザーの事を考えれば出来るだけ軽快なWebページの方が良いに決まってます。
つまりJavaScriptファイルの読み込み時間を出来るだけ短縮できれば良いのです。

JavaScriptファイルやCSSファイルを圧縮して高速化する「YUI Compressor Online」 - GIGAZINE

GIGAZINEさんで紹介されてる「YUI Compressor Online」がいい感じです!

Yahoo!の社員であるJulien Lecomte氏が開発した「YUI Compressor」という有名なJavaScriptファイルとCSSファイルの圧縮を行うJAVAで作られたツールがあるのですが、それをもっと簡単に利用できるようにオンラインで提供する強者が現れました。

YUI Compressorの存在は知ってましたが、面倒なので試してませんでした。
でも、オンラインでチャッチャと出来てしまうならやってみたーい!というわけで試してみたというわけです。

ちなみにYUI(The Yahoo! User Interface Library)は米yahoo!が開発したユーザーインタフェースの機能を多く持つAjaxライブラリです。AjaxライブラリってのはすごーいJavaScriptプログラムの集合です。

うちのブログのヘッダーで読み込んでいるJavaScriptファイルは3つです。

  1. slimbox.js [4.19Kbyte] (画像演出)
  2. mootools.js [45.0KByte] (slimboxで使用)
  3. new.js [184byte] (最新記事に新着マークをつける

大した容量じゃありませんのであまり効果ないと思いますが、今回はYUI Compressor Onlineのお試しなので少しでも軽くなればOKということで!

YUI Compressor Onlineの使い方

  1. 上記サイトに行き、Javascript fileのところの[参照]ボタンでスクリプトファイルを選択し、[compress]ボタンを押します。
  2. すると、「Download generated file」というリンクが表示されるのでクリックします。
  3. JavaScriptのコードが表示されましたね。
    あとはページのソースを開いて、「ファイル」-「名前を付けてページを保存」で任意の場所に保存しましょう。
    出力されたファイルの名前は、元の名前に-minが付きます。

compression ratioは圧縮率ですので数字が大きい方がファイルがより小さくなったという事です。

実際に3つのファイルやってみた結果はこちら。

  • slimbox.js [4.19Kbyte → 3.95Kbyte]
  • mootools.js [45.0KByte → 45.0KByte]
  • new.js [184byte→ 157byte]

mootools.js以外は小さくなってます。
mootools.jsが小さくならなかったのは、元から圧縮済みだったということでしょう。
(Minify only, do not obfuscate(難読化)をすると少し軽くなりましたよ。)

ファイルの中身が気になったのでテキストエディタでのぞいて見ました。
(new-min.jsの中身)

var today=new Date();function nw(E,D,C,B) {var A=24; var F=new Date(E,D-1,C,B);if (today-F<3600000*A*2) {document.write('<span class="new">New</span>')}};

元のJavaScriptファイル(new.js)はこれです↓

var today=new Date(); 
function nw(u1,u2,u3,u4) { 
var nt=24; var c=new Date(u1,u2-1,u3,u4); 
if (today-c<3600000*nt*2) { 
document.write('<span class="new">New</span>')} 
} 

JavaScriptファイルの圧縮前と圧縮後の違い

  1. 改行が無くなる
  2. コメントが無くなる
  3. 変数名が置き換わる

ほぇ~これだけでも結構軽くなるんですね。
YUI Compressorは無駄なものを極力無くす作業をやってくれていると言う事かな。
凄く見づらくなるから、元ファイルもバックアップしておいた方がよいですね。

あと、コメント消えちゃまずいものもありますよね。
slimbox.jsもMIT-style licenseですけど、コメント部分が無くなるとダメな気が・・。
実行する際には気を付けなければいけませんね。

slimbox-min.jsにコメント部分だけ戻すと[4,09KByte]ですから、これでも少し軽くなるのでOKだと思います。

YUI Compressor Onlineを通じて、これからスクリプトを書く時に少し気をつければちょっとは軽くなる事がわかりました。
ちょっくら調べたら、凄く参考になる記事があったので貼っときます。

第30回 JavaScriptの動作を軽くするための工夫:ITpro

いやーJavaScriptって楽しいけど、すぐ重たくなっちゃうからこういうのあると便利ですね。
JavaScript使い過ぎでやたら重たいWebページのオーナーさんはぜひお試しあれ。