iPhoneの向きによって画像の大きさを自動的に変えるスクリプト

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

【Javascript】「var」はなるべく一つにまとめよう

YUI CompressorでJavascriptを圧縮する | blog.delphinus.dev」で書いた 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;
}

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

YUI CompressorでJavascriptを圧縮する

Javascriptライブラリをgzip圧縮する | blog.delphinus.dev」では一つの 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

Javascriptライブラリをgzip圧縮する

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

こぶたのラッパ : 世界の片隅で.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

SyntaxHighlighterでYAMLをハイライトする

当然と言えば当然だが、TT2 のとき(その1その2)よりは遙かに楽だった。

# サンプル
arg1: value1
arg2:
    -   [ value2, value3 ]
    -   arg3:
            - value4

修正・作成するファイルは2つ。

ファイル名
/mt/plugins/SyntaxHighlighter/lib/SyntaxHighlighter/Plugin.pm

        'html'=>'shBrushXml',
        'xhtml'=>'shBrushXml',
        'tt' => 'shBrushTT2',
        'tt2' => 'shBrushTT2',
# 前回の修正の直後に書き加える
        'yml' => 'shBrushYAML',
        'yaml' => 'shBrushYAML',
    );

ファイル名
/mt-static/plugins/SyntaxHighlighter/2.0/scripts/shBrushYAML.js

/* こっちは新たに作成する
   かなり大雑把だけど、一応の役には立つよね */
SyntaxHighlighter.brushes.YAML = function() {
    this.regexList = [
        { regex: /#.*$/gm,     css: 'comments' }
        ,{ regex: /\w+:/g,     css: 'keyword' }
        ,{ regex: /[^#:]+$/gm,    css: 'string' }
        ,{ regex: SyntaxHighlighter.regexLib.doubleQuotedString
            ,css: 'string' }
        ,{ regex: SyntaxHighlighter.regexLib.singleQuotedString
            ,css: 'string' }
    ];
};
SyntaxHighlighter.brushes.YAML.prototype
    = new SyntaxHighlighter.Highlighter();
SyntaxHighlighter.brushes.YAML.aliases
    = ['yml', 'yaml'];

最後にMTのHTMLヘッダーテンプレートを書き換えて完了だ。

<$mt:SyntaxHighlighterInclude brush="html,perl,jscript,bash,tt2,plain,sql,yaml" theme="default"$>

特定のメール(Outlook)を自動的に削除するスクリプト

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

Continue reading

SyntaxHighlighter でTemplate Toolkitをハイライトする その2

前回の状態ではTT2構文のハイライトはうまくいくものの、本来の用途である、HTML中に埋め込んだ状態ではそれが反映されなかった。それは今回使用したプラグインにおける以下の仕様のためだ。

SyntaxHighlighter for Movable Type « kwLog

  • SyntaxHighlighterのconfigurationには対応していません

よってプラグインの構文を無理矢理拡張して対応。さらにカラフルになった。

#!/usr/bin/perl
use utf8;
use strict;
use warnings;
use errors;

my $word = shift;
if ( $word =~ /orz/ ) {
    die "ズコー";
}

Continue reading