javascript Archive

Twitter のログをブログに表示してみた記録。基本的には簡単。ジェネレータで生成した HTML を貼り付けるだけだ。

[Movable Type] Twitterウィジェットをサイドバーに追加してみた - No Second Life
http://www.ttcbn.net/no_second_life/2009/02/movable-type-twitter.html

だけどそのままでは味も素っ気もない。読み込みが終わるまで空欄のままだし、表示も白黒になってしまう。ある程度整形して表示するようにしてみた。

Continue reading

SyntaxHighlighter を Movable Type で使うプラグインには次のものがある。

SyntaxHighlighter
http://alexgorbatchev.com/SyntaxHighlighter/

SyntaxHighlighter for Movable Type | kwrogu
http://blogspot.makotokw.com/portfolio/movabletype/syntaxhighlighter/

SyntaxHighlighter for Movable Type « kwLog
http://blog.makotokw.com/portfolio/movabletype/syntaxhighlighter/

これは SyntaxHighlighter 2.x にしか対応していないのだが、最新版の 3.0.83 で無理矢理動かしてみた。

Continue reading

ブログ等でコードをさらすときに必携のスクリプト“SyntaxHighlighter”がメジャーバージョンアップして 3.0 になっていた。2.0 系、2.1 系よりアップデートするときの新機能と注意点について書いてみる。

SyntaxHighlighter
http://alexgorbatchev.com/SyntaxHighlighter/

新機能について
http://alexgorbatchev.com/SyntaxHighlighter/whatsnew.html

Continue reading

iPhone用のサイトを作るとき画像をそのまま流用すると、iPhoneの画面（320px × 480px）よりも大きい画像がはみ出てしまう。「 【MovableType】iPhone用テンプレートの導入」でこのブログのiPhone対応を行ったのだが、このテンプレートにはその対策としてmax-widthタグが使われていた。

.entry img {
    max-width: 95% !important;
}

しかし、これでは幅が縮められるだけなので縦長の画像になってしまう。縦横比を保ったまま縮小する方法を探したのだが、CSSのみでは難しいようだ。以下のサイトを参考にしつつJavascriptで書いてみた。

iPhone用サイトで、画像を縦横ともに画面幅いっぱいにリサイズさせる //iPhone - bute_lab.

http://www.bute-studio.com/lab/2009/11/iphone-imgwidth.html

max-widthとアスペクト比 - 報國挺身日記

http://d.hatena.ne.jp/kkos/20091219/1261190288

Continue reading

「」で書いた YUI Compressor で Javascript ファイルを圧縮するといつも次のような警告文が出る。

[WARNING] Try to use a single 'var' statement per scope.

ググって調べてみると次のリンクがヒットした。

Try to use one var statement per scope in JavaScript
http://wonko.com/post/try-to-use-one-var-statement-per-scope-in-javascript

つまり、一つのスコープ内で複数の var を使うのはリソースの無駄になるというのだ。リンク先のをそのままコピーすると、

悪い例

function getElementsByClassName(className, tagName, root) {
  var elements = [];
  var root     = root || document;
  var tagName  = tagName || '*';
  var haystack = root.getElementsByTagName(tagName);
  var regex    = new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)');

  for (var i = 0, length = haystack.length; i < length; ++i) {
    var el = haystack[i];

    if (el.className && regex.test(el.className)) {
      elements.push(el);
    }
  }

  return elements;
}

良い例

function getElementsByClassName(className, tagName, root) {
  root    = root || document;
  tagName = tagName || '*';

  var elements = [],
      haystack = root.getElementsByTagName(tagName),
      length   = haystack.length,
      regex    = new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)'),
      el, i;

  for (i = 0; i < length; ++i) {
    el = haystack[i];

    if (el.className && regex.test(el.className)) {
      elements.push(el);
    }
  }

  return elements;
}

記事のコメントには、こんな最適化じゃ目に見える差なんて出ないよ、なんて意見もあり、どちらが正しいのかよくわからない。しかし、関数の一番最初で変数を全部宣言するなんて、いかにも古臭い言語という感じでなんかやだな。

「」では一つの Javascript を gzip 圧縮する話を書いた。しかし gzip で圧縮する前に、ライブラリ内のコメントや空行など、動作に支障のない部分を削ってしまった方が更に効果は高い。勿論それは手作業でも可能だが、ツールを使った方が確実で早いだろう。今回は YUI Compressor を使ってみることにした。

YUI Compressor
http://developer.yahoo.com/yui/compressor/

ダウンロードとインストール

ダウンロードして解凍すると、build ディレクトリの中に実行ファイル（jar 形式）が現れる。

$ unzip yuicompressor-2.4.2.zip
$ cd yuicompressor-2.4.2/build
$ ll
total 1664
-rw-r--r--@ 1 delphinus  staff  851219 11 14  2008 yuicompressor-2.4.2.jar

実行には Java 実行環境も必要なのでインストールしておこう（Mac OS X では標準で入ってるっぽい？）。

java.com: あなたと Java
http://www.java.com/ja/

Continue reading

うちのサイトを構成してるファイル群を見ると、一番大きなファイルは画像ファイルではなく、prototype.jsだった。なんと123.17KBもあるのだ。Webalizerの統計によると、サイト全体の転送量の10％を占める。

こぶたのラッパ : 世界の片隅で.jgzと言ってみる

http://smil.exblog.jp/4650470/

早速、生のprototype.jsとgzip圧縮したprototype.jgzを用意した。prototype.jsのバージョンは1.6.0.2だ。

$ cp prototype.js prototype.tmp
$ gzip prototype.tmp
$ mv prototype.tmp.gz prototype.jgz
$ ll prototype.*
-rw-r--r--@ 1 delphinus  staff   29166  2 19 12:29 prototype.jgz
-rw-r--r--@ 1 delphinus  staff  126132  3 10  2008 prototype.js

Continue reading

社内で「特定人物向けのメールを全員に送信しちゃった！　何とかして！」と言われたときに作ったスクリプト。グループポリシーを使ってPCにログオンしたときに起動するように設定することを想定している。Outlookを自動的に起動して受信メールをチェックし、条件に合うもの（今回は特定の語句を題名に含むもの）を削除する。

Continue reading