まえおき

やりたいこと

• 仮想マシン（Windows）で、ローカルで制作中のWebサイトの動作確認をしたい。
• せっかくなのでhttpアクセスで閲覧したい。
• でもどこかにアップロードしたりローカルサーバ構築したりするのはめんどう。
• せっかちなのでDropboxの同期をまっている心の余裕がない。

こういう時にはPHPビルトインウェブサーバーが簡単でおすすめです。

• 好きなディレクトリをドキュメントルートにしてコマンド一発で即時に簡易Webサーバが立ち上がります。
• ログがターミナルに流れるのでわかりやすく、どことなくテンションがあがります。
• ちょっとしたPHPのスクリプトを確認できるオマケつき。
• ルータースクリプトも使える。

別にやりたくないこと

• PHPの動作確認はちゃんと仮想マシン上のLinux等の開発環境で行います。
  
  （できるだけ本番環境にあわせてチェックを行いたいですし、 PHPを弄る様な方ならば素直にLinux環境のVMで環境構築した方が断然楽だと思います。）

ビルトインウェブサーバーの使い方

PHP5.4+ の導入

ここでは詳しく触れませんが、ビルトインウェブサーバーを使用するにはPHP5.4以降が必要です。 Windowsでもすぐに動くバイナリが配布されていますし、Macならmacportsやhomebrewで導入も容易だと思います。

• PHP For Windows: Binaries and sources Releases
• The MacPorts Project — Home
• Homebrew — OS X用パッケージマネージャー

ビルトインウェブサーバーの起動

• PHP: ビルトインウェブサーバー – Manual

詳しくは上のURLにある通りです。php コマンドに -S オプションを渡す事でウェブサーバーを起動することができます。 その他オプションの書式は下記のようになります。

$ php -S <ホスト名>:<ポート番号> -t <ドキュメントルートのパス>

例えば、localhostの8080番ポートで、 “public_html” ディレクトリをドキュメントルートとしてWebサーバを立ち上げる場合は次のようになります。

$ php -S localhost:8080 -t public_html

仮想マシンから確認する

ホスト名がlocalhostでは仮想環境からアクセスする事ができません。 そこで、次のようにホスト名を “0.0.0.0” にして起動する事で外部から接続できるようになります。

$ php -S 0.0.0.0:8080 -t public_html

例えばサーバを起動するマシンのローカルIPアドレスが 192.168.10.3 などだった場合、 仮想マシンのゲストOSから “http://192.168.10.3:8080” へアクセスすれば直接動作確認をする事ができるようになります。 （これはあくまで一例で、アクセス先のアドレスは仮想マシンのネットワーク設定によって様々なので注意しましょう）

IEの確認には、Microsoft提供の modern.ie が便利です。 昔はVrtualPC用のイメージだけだったのですが、modern.ie になってからはVirtualBox、VMWare、Parallels等、 様々なプラットフォーム用の仮想マシンイメージを配布しています。

• Internet Explorer のテストが簡単に | modern.IE

ルータースクリプトを使う

このビルトインウェブサーバーの素敵なポイントの一つに、ルータースクリプト を簡単に使用出来るという利点があります。 ざっくり言うと、Apacheのmode_rewriteのような処理がPHPスクリプトを通じて行えるようになる代物です。

例えばこれは、Wordpress の .htaccess にある mod_rewrite の記述です。 この記述のおかげで WordPress はURLをデザインする事が出来るわけですね。

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

ここで記述されているルールは非常に単純で、 「アクセスされたURLにあたるファイルやディレクトリが存在しない場合は、index.phpでレスポンスを返す」だけです。 同様の処理をPHPのルータースクリプトで記述してみましょう。

<?php
/* _router.php */
if(file_exists($_SERVER["REQUEST_FILENAME"])){
    // false を返すとリクエストされたリソースをそのまま返します
    return false;
} else {
    require "index.php";
}

あとは、この内容を記述した “_router.php” をコマンドに渡すだけです。

$ php -S 0.0.0.0:8080 -t public_html public_html/_router.php

mod_rewrite のような処理を簡単にテストしたい場合や、 History.pushState を使った構成で制作を進める時などに重宝しています。

Gruntタスクで起動する

Gruntを使って開発をされている方は、grunt-contrib-connect のような感じで開発用サーバを起動したいと考えるでしょう。 ちょうどそのようなプラグインが公開されていたので、ここはひとつ活用させて頂きます。

• sindresorhus/grunt-php @ Github

タスク設定例:

grunt.initConfig({
    php: {
        dist: {
            options: {
                port: 8080,
                hostname: "0.0.0.0",
                base: "public_html",
                router: "_router.php",
                keepalive: true
            }
        }
    }
});

router のパスは base からの相対パスになります。

JavaScriptやCSSのコンパイル等で watch タスクを利用している場合は、サーバーの起動と同時に行えるようにしたいですね。 その際には keepalive を false にし、次のように watch の前に登録して起動します。

// `$ grunt dev` で起動
grunt.registerTask("dev", ["php:dist", "watch"]);

Grunt で php を扱うプラグインにはこの他にも ddprrt/connect-php があります。 こちらは grunt-conrib-connect のミドルウェアとして動かすタイプのライブラリで、 5.4+ でなくても動くかわりに、ルータースクリプト等は使えなさそうです。gruntベースで自前で書けという事でしょう。

また、プラグインを探していた当初、grunt-php が見つからなかった為、 ほぼ同じような動作をする物を自前で書いて使っていたのは秘密です。 私が書いた物よりも grunt-php の方が優秀そうなので、何も書かなかった事にしました。 grunt-php に無くて自前の物にある機能といえばアクセスログの出力ぐらいで、オプションの名前などもほとんど同じでした。 どちらも grunt-contrib-connect を参考にしているので当たり前ですね。

まとめ

単純に確認用のサーバを起動したいのならば grunt-contrib-connect で十分なのですが、 URLのリライト等をしたい場合などはPHPビルトインウェブサーバーの方が楽に設定出来る気がします。 Gruntを使わない人でも簡単に扱えるは大きなメリットですね。

サンプルコード

例えば、こんなコード。

<style>
.test {
    display:block;
    width:128px;
    height:128px;
    background:url(./test.png) 0 0 no-repeat transparent;
}
.test:hover {
    background-image:url(./test-hover.png);
}
</style>

<a href="#" class="test"></a>

test.pngとtest-hover.pngは透過PNGです。
IE6では当然透過されずに背景がグレーになります。

IE7,8では綺麗に表示されている様子ですが…

$(".test").css( "opacity", "0.5" );

このようにfilterのopacityを弄ってやると、下記の画像のような状態になります。キタナイ。

DD_belatedPNGはどうか

上記の現象はalphaImageLoaderを使えば解決出来るのですが、
alphaImageLoaderはhover時の処理が面倒だったり、遅かったりと問題もあります。
そこで去年ぐらいからもてはやされているDD_belatedPNGを使ってみましょう。

DD_belatedPNG: Medicine for your IE6/PNG headache!

DD_belatedPNGは他の透過PNG用ライブラリと異なり、
alphaImageLoaderを使わずにVMLで透過を実現しているのが特徴。
パフォーマンスも比較的上々のようです。

IE8でエラーが出る

が、困ったことにIE6向けのライブラリであるが為か、
IE8で走らせようとするとエラーが出ます。
今回のお題はIE6～8全てに関わる物なのですが、困りました。

jQuery移植版を使用する

探してみたところ、DD_belatedPNGをjQueryプラグインとして移植した記事を発見。
そこらへんの問題も解決してくださったみたいです。素晴らしい！

該当記事

DD_belatedPNG を改造して、jQuery.belatedPNG を作ってみた | プログラマ気分

リポジトリ

wakuworks/jquery.belatedPNG – GitHub

jquery.belatedPNG.jsで試してみよう

jquery.belatedPNG.jsは、
jQueryオブジェクトにfixPng()メソッドを提供します。
こんな感じにしてみる。

$(".test").fixPng().css("opacity","0.5");

opacityを設定しても汚くならない！素晴らしい！

マウスイベントが効かなくなる問題

ただ、このままだとa要素に対するマウスイベントが効かなくなってしまう模様。
CSSで設定した:hoverのスタイルも適用されず、
クリックしてもウンともスンともいいません。

なので、子要素に「透明な何か」を入れてあげる事で解決を試みます。 例えば透過Gif。

<a href="#" class="test">
    <img src="trans.gif" width="128" height="128" alt="Foobar" />
</a>

これでマウスイベントがきちんと効くようになりました。
hoverのスタイルも適用されます。

もしくは、同サイズの透明要素を中にappendしてやったり。

var $test = $(".test");

// opacityに非対応なブラウザに適用
if( !$.support.opacity ){
    $test.fixPng()
    .append(
        $("<span>").css({
            display : "block",
            width : $test.width(),
            height : $test.height(),
            backgroundColor : "#ffffff",
            opacity : 0,
            cursor : "pointer"
        })
    );
}

$test.css( "opacity", "0.5" );

まとめ

jQueryのプラグインでfadeIn/fadeOut等を使うとopacityが弄られますが、
その影響でこの不具合に遭遇する事があるので注意したいですね。

マウスイベントの件は、他に良い解決策あったら知りたいです！

1. ざっくりとした仕掛け
2. IE兄弟はinput要素のtype属性をいじれないらしい
3. textとpasswordを並べて表示/非表示をトグルする
4. コード抜粋

ざっくりとした仕掛け

チェックボックスにチェックを入れると、
パスワードのtypeがtextに切り替わって内容が確認出来るようになる仕組み。

type直接いじれば楽じゃーん。
そう考えていた時代が僕にもありました。

IE兄弟はinput要素のtype属性をいじれないらしい

ところがIEはinput要素のtype属性を弄ろうとするとエラーになります。
その為jQueryでも、attr()で同様の処理を行おうとすると、以下の例外が投げられてきます。

type property can’t be changed

HTML

<input type="password" id="foo" />

JavaScript

try {
    $("#foo").attr("type", "text" );
} catch( e ){
    console.log( e ); // type property can't be changed
}

cloneNode等で複製したオブジェクトでも同様なので、
これを回避する為には手作業で要素の複製を行い、
それでもって元の要素とスワップしなければならないみたいです。面倒ですね！

textとpasswordを並べて表示/非表示をトグルする

面倒なのは回避する事にして、
input[type=text]とinput[type=password]を並べておき
表示/非表示を切り替える方向でやってみます。

1. input[type=text]とinput[type=password]の入力内容を同期させる
2. チェックボックスのON/OFFでそれぞれの表示/非表示を切り替える

コード抜粋

こんな感じになりました。

DEMO ( jsFiddle )

HTML

<input type="password" id="pswd" name="pswd" />
<input type="text" id="pswd-text" name="pswd-text" style="display:none;" />
<input type="checkbox" id="pswd-toggle" name="pswd-toggle" data-for="pswd" />
<label for="pswd-toggle">パスワードを表示する</label>

パスワード（#pswd）の相方となるテキストフィールド（#pswd-text）を非表示にして設置。
チェックボックス（#pswd-toggle）には、data-for属性で対象のID(pswd)を入れておきます。
ちょうど、label要素のfor属性のように。

JavaScript

$.fn.extend({
    togglePassword : function( config ){
        option = $.extend({
            "postfix" : "-text"
        }, config );
        // 入力内容を同期するfunction
        sync = function(){
            var i = this.type.toUpperCase() === "PASSWORD" ?
                this.id + option.postfix :
                this.id.replace( option.postfix, "" );
            $( "#" + i ).val( $(this).val() );
        };
        // 表示/非表示を切り替えるfunction
        toggle = function(){
            if( this.checked ){
                $.data( this, "pswd" ).hide();
                $.data( this, "text" ).show();
            } else {
                $.data( this, "pswd" ).show();
                $.data( this, "text" ).hide();
            }
        };
        this.each( function(){
            var id, pswd, text, check, handlers;
            id = this.getAttribute( "data-for" );
            pswd = $("#" + id );
            text = $("#" + id + option.postfix );
            check = $(this);
            // テキストフィールドのイベント
            handlers = { keyup : sync, blur : sync };
            pswd.bind( handlers );
            text.bind( handlers );
            // チェックボックスのイベント
            $.data( this, "pswd", pswd );
            $.data( this, "text", text );
            $(this).click( toggle );
            // 初期化
            toggle.apply( this );
        });
    }
});

$("#pswd-toggle").togglePassword();

IEスルーするなら恐ろしく短いコードで済みそうですが…残念。

非公式RTについては趣向主義色々あれど、
身内でじゃれあう時には欲しくなっちゃいますね。
そんなわけで、非公式RTボタンを追加するブラウザ拡張を2点ここに。

Chrome

Classic Retweet – Google Chrome 拡張機能ギャラリー

導入すると、Twitterの各ツイートの「リツイート」ボタンの右に
「ClassicRetweet」というのが出現するので、これをリプライ同様に使います。
自分のツイートにはつかないみたいです。（上の画像は合成です！）

Firefox

Firefoxの場合はユーザースクリプトでの導入になりますので、
事前にGreasmonkyを入れておきましょう。

Twitter add RT button for new UI for Greasemonkey

インストール後、「返信」の右に「RT」「QT」ボタンが出現します。
こちらは自分のツイートにも出ます。

（追記）
こちらのユーザースクリプトをChromeで使うことも出来ます。お好みで。

Twitterの新公式ページ、
クライアントをフル活用している方には少し物足りないかもしれませんが、
関連ツイートとかも見やすくなっているので個人的には十分な感じです。
食わず嫌いな方がいましたら是非に。

@anywhere

Welcome to @Anywhere | dev.twitter.com

Twitterの機能がどのサイトでも活用出来るようになるJavaScriptリソース。
認証からタイムライン読み込み、パーツのレンダリングまで。
連携サービスを組むならおさえておきたい。

• ブログで@anywhereを試してみた！ ～ どこでもTwitter | Mach3.laBlog
• @anywhereで認証してみる備忘録 | Mach3.laBlog

jsLint

JSLint, The JavaScript Code Quality Tool

JavaScriptをストリクトに書く為のチェックツール。
前はWSH版がダウンロード出来たんですけど見つからなくなってますね。
Githubのを使ってなんやかんやするんでしょうか。こんど試してみよう。

• JSLintでストリクトなJavaScriptを書く | Mach3.laBlog

LESS

LESS – Leaner CSS

変数に代入したり、ネストしたり、ミックスインしたり…
CSSコーディングが素晴らしくスピードアップするCSS開発キット。
エディタからも簡単に呼び出せるので重宝しています。
似たようなプロジェクトに「Sass」というのもあります。

• ゼロから導入する、Ruby LESS for Windows ～素晴らしいCSSソリューション | Mach3.laBlog
• CSS3対応の為のLESSスニペットメモ | Mach3.laBlog

jsDoc Toolkit

jsdoc-toolkit – Project Hosting on Google Code

JavaScript版のドキュメント生成ツール。
こちらもエディタから使うと大変便利。

• エディタ（Notepad++）からJSDoc Toolkitを使ってみる | Mach3.laBlog

Modernizr

Modernizr

HTML5の新機能等が使用可能かどうかを判別してくれるライブラリ。
判別の結果はhtml要素のクラスとして出力してくれる他、
メンバを直接参照する事でも結果を知ることが出来ます。

便利なスクリプトなのですが、最近Head.jsに持って行かれた感が…
こちらは未検証なのでまた後ほどレポートを。

• 「Modernizr」 モダンなクロスブラウザCSSの為の支援スクリプト | Mach3.laBlog

Raphael / gRaphael

gRaphaël—Charting JavaScript Library

Raphaelは、ベクターグラフィックを簡単に扱うためのJavaScriptライブラリ。
gRaphaelはそれをグラフ描画用に拡張する為のプラグインです。
投稿した時はまだドキュメントが不備でしたが…今見に行きましたがまだありませんでした！

• 実験室: gRaphaëlでインタラクティブなグラフを描いてみる | Mach3.laBlog

IE9.js

ie7-js – Project Hosting on Google Code

プロジェクト名としては「IE7.js」ですが、
その中に含まれるIE8.js、IE9.jsやie7-squish.jsが結構便利。
JavaScriptが動く事が前提になりますが、擬似クラスやHTML5の新要素の対応もしてくれます。

• IE9.jsで実現するシンプルなclearfixとその他の恩恵 | Mach3.laBlog

YUI Compressor

YUI Compressor

Yahoo!がおくる、JavaScriptやCSSを圧縮するツール。
Webページのパフォーマンス向上を図るのに欠かせません。
ご一緒にYSlow（Firebugプラグイン）も是非。

• YUI Compressorをお手軽にするバッチファイルを書いてみる | Mach3.laBlog
• 今すぐ出来る、ちょこざいなサイトパフォーマンスアップ | Mach3.laBlog

mustache

{{ mustache }}

マルチランゲージテンプレートエンジン！（言い切った！）
様々な言語に対応する、シンプルで使いやすいテンプレートエンジンです。

• どこでも活躍できるテンプレートエンジン「Mustache」 | Mach3.laBlog

Sammy.js

Sammy.js

Ajaxコンテンツのセッションを操る為のjQueryプラグイン。
要するに、location.hashによるルーティングをウマイこと処理してくれるスクリプトです。

• Sammy.jsでAjaxコンテンツのセッションを操る | Mach3.laBlog

jQueryMobile

• jQuery Mobile | jQuery Mobile

jQueryの作者が送る、スマートフォン向けのjQueryUIのようなもの。
ルールに従ったマークアップをするだけで、各要素をそれっぽくレンダリングしてくれます。
1月に正式版がリリースされる予定。

• はじめてのjQueryMobile | Mach3.laBlog

結構色々ありましたね、2010年。
来年もまた素晴らしい技術に出会えますように。

皆様よいお年を！

cf) ie7-js – Project Hosting on Google Code

シンプルになったclearfix

念の為スクリプトのロードも記載しておきます。
IE用の条件分岐コメントを外すと他のブラウザでエラーが出ますのでご注意を。
（これも内部で条件分岐して頂けると大変幸せだなぁ）

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script>
<![endif]-->

そしてこちらがシンプルになったclearfixのコード。

.clearfix:after{
    content:"";
    clear:both;
    display:block;
    height:0;
}

余計なハックを用いず、一種類のセレクタだけでクリーンに書けます。
IE9.jsにより、旧IEでも擬似クラス「:after」が使えるようになったおかげです。
もちろん、「:before」も使えます。

その他のIE9.jsの恩恵

ボックスサイズの計算法の統一化

ボックスサイズの解釈はIE6の方がわかりやすいと思う
で触れたとおり、IE6はボックスサイズをborder-widthとpaddingを含めた値として解釈します。
が、IE9.jsを導入する事で、IE6も他のブラウザ同様の計算法に修正してくれます。
border-boxの方が計算しやすいとは言え、統一してくれるに越したことはありませんね。

first-child, last-childの実現

IE6は言わずもがな、
IE7/8はfirst-childには対応しているものの、last-childは使えません。
IE9.jsはこれら全てにfirst/last-childを提供してくれます。

HTML5の新要素にも対応してくれる

header/nav/article/section等、HTML5で追加された新要素は、
IE～8ではhtml5.js等の力を借りないとCSSを適用する事が出来ませんでした。
IE9.jsは同様の処理も行ってくれちゃいますので、html5.jsをロードする必要がありません。

ie7-squish.js

別途ie7-squish.jsをロードする事で、
ダブルマージン等のIE6のお馴染みのバグを幾つか修復してくれます。
さらに詳細は公式で。
cf) IE7.js Test Pages

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/trunk/lib/ie7-squish.js"></script>
<![endif]-->

まとめ

IE7jsライブラリの存在は知っていたのですが、予想以上の働きをしてくれる模様。
作者に感謝すると共に、改めて世界中の技術者がIEに頭を悩ませているんだなと実感させられます。
無数の開発者が一丸となってIEという共通の課題を…胸が熱くなりますね。

BrowserDetect.js

JavaScript – Browser detect

ダウンロードリンクはどうやら無いようなので、
ページ内に書かれたソースをコピー&ペーストします。
使い方は簡単で、スクリプトをロードして
BrowserDetectオブジェクトのプロパティを参照するだけ。

var browser = BrowserDetect.browser; //ブラウザ名の取得
var version = BrowserDetect.version; //ブラウザバージョンの取得
var os = BrowserDetect.OS; // OS名の取得

クロスブラウザCSSを書く準備

もしModernizrを使用した事があればご想像の通りですが、
HTML要素にブラウザ名とバージョンを添えたクラス名を動的に追加してやります。

$("html").addClass( BrowserDetect.browser );
$("html").addClass( BrowserDetect.browser + BrowserDetect.version );

例えばIE6でアクセスすると、HTML要素には次のようにクラスが追加されます。

<html lang="ja" class="Explorer Explorer6">

CSSを書く

あとは子孫クラスタを使ってCSS内で条件分岐をしてやれば良いです。
ハック等に頼らないクリーンなCSSが出来上がりますね。

#Box{
    /* デフォルトのスタイル */
    width:290px;
    height:210px;
    border:5px solid #666;
    padding:10px;
}
.Explorer6 #Box{
    /* IE6用のスタイル */
    width:320px;
    height:240px;
}

この方法の問題点

JSが働かないとだめ

当たり前ですが、JavaScriptが動かない環境ではデザインが崩れる事が予想されます。
（Modernizr使ってる時点で今更何を言ってるのって感じですが…）

HTML4ではHTML要素のclass属性はInvalidである

class属性が使用出来る要素について、
HTML5では「The Every HTML Element」と言及している事から問題はなさそうですが、
どうやらHTML4ではInvalidになる様子。
これもまた、Modernizrも同様に孕んでいる問題点です。
（一体誰が気にするのか、とも思いますが）

以上の問題を踏まえて、
プロジェクトの趣旨/性格に基づいて使用を判断したいですね。

WTF is HTML5 (Infographic)

ちびっと文字が小さいですが、わかりやすくまとまっていますね。
HTML5を独習する際の目安としても使えそうです。

さて気になるのは下段のFlashに関する項ですが…

FlashとHTML、Webを席巻するのはどちらか？

HTML5 VS. FLASH. WHO WILL OWN THE WEB’S INTERACTIVE FUTURE ?

このインフォグラフィックでは、FlashとHTML5を4つの要素で比較しています。

• どちらが安いか
• どちらがパワフルか
• どちらがより広く受け入れられるか
• どちらが有能か

結果は画像を見ての通りですが、「どちらが安いか」については…

Flash Playerはフリーだが、Adobe製の開発環境は非常に高価だ。HTML5は開発者にとっても無料だ。

確かにFlashIDEもFlashBuilder(Flex)も製品を購入すると高価ですが、
FlashにはオープンソースのFlexSDKがあります。
Flex SDK – Flex SDK – Adobe Open Source
高価な統合環境を使用しない前提でHTML5と比較するのであれば、
こちらと比較したほうがフェアな気はしますね。

最後は次のように締めくくっています。超訳。

これらのチョイスは排他的ではなく、場合によって、開発者は両方ともに使用する。
長い目でみれば、HTML5が要求に叶う選択になるだろう。

要は、当面の間は適材適所だという事です。

私見

開発者にとっては、インタラクティブなWebアプリを作るにあたって
まだまだFlashに軍配があがるのではないでしょうか。
HTML5にはFlashのような優れた開発環境がまだ無いからです。

ただ、遅かれ早かれFlashIDEは、HTML5+CSS3+JSで
プロジェクトの書き出しが出来るようになるのではと予想しています。
ASとJSは親戚ですし、Flashの得意なベクターもSVGで解決出来ます。
相性は非常に良いでしょう。

既にちょっと違った方法でswf→HTML5を実現してしまっているライブラリも存在しますね。
Smokescreen

問題はAdobeがその後FlashPlayerをどうするのか。
それまでの間に、HTML5ではとても実現出来ないような素晴らしい表現が可能になるか、
そうでなければFlashPlayerはHTML5が表示出来ない、
古い環境の面倒を見る為の存在になってしまいかねません。

AdobeとしてはFlashが売れればそれでよさそうな気もしますが、
1ファンとして、Flashの底力をまだまだ見てみたいですね。

BrowserSeal : fast multi browser website screenshot application

BrowserSealはWebサービスの類ではなく、
様々なバージョンのブラウザでの動作確認と、スクリーンショットの撮影が行える
Windows用のデスクトップアプリケーションです。

Webサービスのレスポンスを待つ必要が無い為、
ローカルでも高速にWebサイトの確認が行えます。

本命かもしれないブラウザパック

ローカルで動作させる為には当然それぞれのブラウザをインストールする必要がありますが、
BrowserSealは以下のブラウザのスタンドアローンエディションを一度に導入出来ます。

Includes Firefox 3.0.16, Firefox 3.5.6, Internet Explorer 6.00.2900.2180, Internet Explorer 7.00.5730.13, Internet Explorer 8.00.6001.18702, Chrome 3, Opera 8.54, Opera 9.64, Opera 10.10, Safari 3.2.3 and Safari 4.0.4.

これらのブラウザはいずれもBrowserSealを介さずに
独立したウィンドウとしてそのまま立ち上げる事が出来ます。
JavaScriptなどの検証も行いたい場合に大変便利ですね。

BrowserSealでキャプチャを撮る

トライアル版では、キャプチャを撮れるのはFirefoxとIEの2ブラウザに留まります。

BrowserSeal本体のアドレスバーにURLを入力すると、
ブラウザが順番に立ち上がってWebページを開き、
キャプチャを撮る動作後に閉じられます。
（なんかこう、ちょっとアナログな感じもしますが…）

とられたキャプチャは本体にタブ分けされて表示されます。
長いページ等は、キチンと下までスクロールして撮影してくれます。

個人的にはブラウザパックが本命なのでトライアル版でも十分いけますが、
スクリーンショット機能を存分に駆使したい方は有償版（$49.00）を手に入れましょう。
自動化してくれるBrowserSeal.ROBOT（$199.0）なんてのも用意されています。

BrowserSeal : fast multi browser website screenshot application

この度、Operaからそのスピードを映像化したビデオが公開されています。
Chromeはポテトと同着だって？Operaならポテトを超える。

見てくださいこの大掛かりな装置を。
これは本気だ…。

ね、はやかったでしょう？（ボブ

ちなみにOperaが高速というのはジョークでもなんでもなく、
ベンチマークでも良い成績を収めています。
cf) Opera 10.5最速をマーク、Chrome 5とSafari開発版 | エンタープライズ | マイコミジャーナル

先日Twitterのフォロアーさんと共同でベンチマークをしていたのですが、
私の環境ではそこでも最速を記録していました。

いろんな意味で、あなどれない存在ですね。