ez-HTML の Gecko プレビューを Firefox 最新版と同じ表示にする方法
ez-HTML 製作者さんのサイト Web Frontier のサポート掲示板にこの方法が投稿されていました。
このまま掲示板のログが流れていって、この方法が見つかりにくくなるのが悲しいので紹介を兼ねて実際に試してみたよ。
試した環境は Windows Vista と Windows7。
パーマリンクがないので掲示板へのリンクですが、この方法の投稿は No.2146, No.2148 の troll氏 によるものです
必要なファイルをダウンロード
XULRunner – MDC へ行くと、ファイルへのリンクがあるのでクリック。
下画像のように、バージョンごとに分かれているので最新版(一番下)のリンクをクリックし、runtimes/ を選んだ先にある xulrunner-1.9.1.4.en-US.win32.zip をダウンロード。
dll を登録する
ファイルを展開
ダウンロードした zip ファイルを適当な場所に展開します。
(今回は C:\Program Files\ にしました)
コマンドプロンプトを管理者権限で起動
コマンドプロンプトを起動。スタートメニューにあるコマンドプロンプトのアイコンを右クリックして、画像のように管理者権限で起動します。
確認ダイアログが出てくるが気にせず続けます。
mozctlx.dll を登録
regsvr32 "C:\Program Files\xulrunner\mozctlx.dll" を入力。
画像のようなダイアログが出たら成功。
ez-HTML に登録する
[表示] > [詳細設定] から [インターネット] > [内蔵プレビュー] へ。
画像の赤枠内のテキストボックスに xulrunner のディレクトリへのパスを指定します。
簡単なテストをしてみる
現時点(2009-11-06)での xulrunner の最新版は 1.9.1 で、Firefox 3.5.4 と同等。
それなら CSS3 のプロパティにも対応しているはず。
というわけで、Firefox 3.5 から対応した CSS プロパティを試してみました。
試した HTML と CSS のソースは以下。
<div>
<h1>ez-HTML の Gecko プレビューを Firefox 3.5 相当に</h1>
<p>
このように、
<code>-moz-border-radius</code>,
<code>-moz-box-shadow</code>,
<code>text-shadow</code> も適応されます。
</p>
</div>
div {
margin: 0 auto;
width: 480px;
}
h1 {
padding: 10px;
border: 1px solid #aaa;
-moz-border-radius: 10px;
-moz-box-shadow: 5px 5px 5px #aaa;
text-shadow: 5px 5px 5px #666;
}
これで h1 要素内の文字に影がついて、要素のボックスは角丸になって影がつくはず。
ちゃんと表示されました。
今までは何か書いたらいったん保存して Firefox で確認してましたけど、これで簡単に色々と遊べますね！
HTML5 とか CSS3 とか！
少し補足を。
この方法の投稿者である troll氏も書いてますが、dll の登録を解除するには以下のように
regsvr32 /u "C:\Program Files\xulrunner\mozctlx.dll"
と入力します。
画像のようになれば解除成功です。
あと、この方法はレジストリに書き込みを行います。
それがどうしても許せない方にはおすすめしません。
そのあたりは ez-HTML 配布ページで紹介されている Mozilla ActiveX Control も同様です。