Firefox21以降のpdfjsと設定

Firefox 21ではディスプレイドライバがDirect2Dを使うことのできないもの場合(Firefoxがブロックする場合も含む）には、PDFJSを使う場合に対応が必要となる。

1.DirectWriteをfalseにする。

user_pref("gfx.font_rendering.directwrite.enabled", false);
ただし、こうすると他のページのフォントの表示が悪くなる。

2. gfx.canvas.azure.backendsからskiaを除く。
user_pref("gfx.canvas.azure.backends", "direct2d,cairo");
ただし、こうするとcairoを使うことになるので動作が重くなる。

3.無理矢理Direct2Dを使う。(ブロックされている場合のみ）
user_pref("gfx.direct2d.force-enabled", true);
ただし、もちろん動作の安全性は保障できない。

なお僕は3を選んだ。

全パッケージのWin8 SDK化が完了した。

これですっきりした。

Firefox 21.0β1は難産になってしまってるけど、現在PGOビルド中。

Win8 SDK化進行中。

パッチを修正して、Win8 SDKを使っている場合にはWin8 SDKだけを使うように、そうでない場合にはDirectX SDKを使うように修正した上で、全てのパッケージをビルドしなおしている。

理由は使っているSDKが混在しているのでは、気分が悪いからだ。

SeaMonkeyで上手くいかないというのは勘違いだった

angleprojectのソースで、r1984以降では仕様変更があり動かなくなっていただけだった。

というわけで、gfx_angle.diffに含まれるangleを動作する最新trunkのr1835に戻し、Firefox 20.0β6はWin8 SDKだけでビルドした。この場合、Win8 SDKに含まれるD3DCompiler_*.dllをパッケージに同梱しなければならないので、そのようにも修正した。

なお、Win8 SDKに変更したところで、特段に動作が軽くなったりするわけではない。ただ、今後Win7 SDKが更新されていくことはないだろうし、Win8 SDKにはなにがしらの更新が行われるかもしれない。だから、Win8 SDKを使うようにすることが正しいと思う。

SeaMonkeyでは上手くいかなかったので諦めた

先のエントリはFirefoxでは上手くいったがSeaMonkeyでは失敗した。なので、諦めてDXSDKを使うことにした。

Win8 SDKだけではFirefoxのビルドができない件とその対策

最新のmozilla-buildを使うとWindows SDK for Windows 8を認識して、そちらを使うようになる。このバージョンからはWindows  SDKとDirect Xが統合されたので、別途DirectX SDKは不要となるはずなのだが、Firefoxのビルドに関しては訳あって別途Direct X SDK(June 2010)が必要とされる。

その原因はfirefoxに含まれるgfx/angleが廃止予定のd3dx9を使っているからだ。これは困る。

ところで、最新のangleprojectのソースではd3dx9を使用していない。 これを利用して、FirefoxをDirectX SDK(June 2010)なしでビルドしてみようと試してみた。

そのために必要な修正が必要となるソースは次の通り。詳しい修正内容はパッチを見てほしい。

1. browser/installer/package-manifest.in DirectX関連dllをインストーラから外す。
2. configure.in Windows SDKがインストール済みのときはDirectX SDKの検索をしない
3. content/canvas/src/WebGLContextGL.cpp 最新のangleに対応するための修正
4. content/canvas/src/WebGLProgram.h　同上
5. content/canvas/src/WebGLShader.h　同上
6. gfx/angle以下　angleを最新にする。
7. gfx/gl/GLLibraryEGL.cpp d3dx9_*.dllの呼び込みを止める
8. layout/media/Makefile.in Windows SDKがインストール済みのときは、リンクするライブラリディレクトリにDirectX SDKのディレクトリを含めないようにする。
9. toolkit/library/Makefile.in　同上

苦労したところで分かったことは、こんな面倒なことをするくらいならDirectX SDKをインストールする方が簡単ということだった。
しかし、生来の捻くれ者の僕はDirectX SDKをインストールしないという方向でビルドしていこうと思う。

現在のuser.js

コピペして使っても構いませんが、自己責任でどうぞ。

pdfjsでフォントが埋め込まれていないpdfを表示するときには、 メイリオを使う方が良い

ということを教えてもらったので、フォントの指定を追加した。ありがたい。
 user_pref("browser.cache.memory.capacity", 65536);
user_pref("browser.link.open_newwindow", 3);
user_pref("browser.link.open_newwindow.override.external", 3);
user_pref("browser.newtab.url", "about:blank");
user_pref("browser.newtabpage.enabled", false);
user_pref("browser.search.openintab", true);
user_pref("browser.tabs.animate", false);
user_pref("browser.tabs.closeButtons", 1);
user_pref("browser.tabs.closeWindowWithLastTab", false);
user_pref("browser.tabs.showSingleWindowModePrefs", true);
user_pref("browser.tabs.warnOnClose", false);
user_pref("browser.tabs.warnOnCloseOtherTabs", false);
user_pref("browser.xul.error_pages.enabled", true);

user_pref("content.interrupt.parsing", true);
user_pref("content.max.tokenizing.time", 3000000);
user_pref("content.maxtextrun", 8191);
user_pref("content.notify.backoffcount", 5);
user_pref("content.notify.interval", 1000);
user_pref("content.notify.ontimer", true);
user_pref("content.switch.threshold", 1000);

user_pref("font.name.serif.ja", "メイリオ");

user_pref("gfx.color_management.enablev4", true);
user_pref("gfx.font_rendering.cleartype_params.enhanced_contrast", 100);
user_pref("gfx.font_rendering.cleartype_params.cleartype_level", 30);
user_pref("gfx.font_rendering.cleartype_params.pixel_structure", 1);
user_pref("gfx.font_rendering.cleartype_params.rendering_mode", 5);
user_pref("gfx.font_rendering.directwrite.enabled", true);

user_pref("network.http.max-connections", 24);
user_pref("network.http.max-connections-per-server", 8);
user_pref("network.http.max-persistent-connections-per-proxy", 4);
user_pref("network.http.max-persistent-connections-per-server", 4);
user_pref("network.http.pipelining", true);
user_pref("network.http.pipelining.firstrequest", true);
user_pref("network.http.pipelining.maxrequests", 8);
user_pref("network.cookie.cookieBehavior", 2);
user_pref("network.dns.disableIPv6", true);
user_pref("network.prefetch-next", false);

user_pref("nglayout.initialpaint.delay", 1);

user_pref("plugin.expose_full_path", true);

user_pref("signed.applets.codebase_principal_support", true);

user_pref("ui.submenuDelay", 0);

BlueGriffon trunkについて

mozilla-centralに導入されたmoz.buildシステムがないとビルドすることができなくなった。
なので、moz.buildシステムがβに降りてくるまでビルドを中止することにした。

Thunderbirdの取り扱い

ThunderbirdのESRとリリースは実質的に同じものなので、リリースだけビルドすることにして、Thunderbird ESRとしてのビルドは中止した。

細かいこと

ページの中にIE8以前では正しく表示できないからFirefoxかSeaMonkeyを使ってください、と書いた。ここでの正しくとはこの投稿を書いている時点では、Firefox 20.0β4による表示に準じたものということを意味している。

一応、以下に示すブラウザも目視にて確認しているけれど、特に問題は起きていないと思う。なおSafariはiOS機器もMacも持っていないので、確かめてはいない。

• IE9,10
• Google Chrome
• Opera
• Qupzilla
• Android標準ブラウザ

あと、自分で使わないので面倒臭くなってきたから、Win32版は消した。

jQuery UIを使ったときに対処すべきことメモ

1.jquery-ui.cssからIE6向け要素を取り除き、IE6用CSSに入れておくこと。
2.Javascriptをoffにしたときの表示の乱れに対処すること。
3.jQueryのソースはあらかじめダウンロードしておき、gzip圧縮しておくこと。

なお、gzip圧縮をする場合、 

7z a -tgzip -mx=9 -mpass=15 -mfb=258 [ファイル名].gz [ファイル名]

とするのが現在のところ最善のようだ。

自分用メモ Javascript Off対策

Javascriptを使うページを作成する際に、Javascriptがoffの設定だと表示が乱れる場合には、
Javascriptをoffにした状態ではCSSを使って乱れる表示を消し、onにしたときには、そのCSSが読み込まれないようにJavascriptで制御する。

1. OFFにしたときに乱れる要素を非表示にする外部CSSを作成する。
2. <link rel="stylesheet" id="noscript" href="./noscript.css" /> というようにid付きで読み込む。
3. <script type="text/javascript" src="./removenoscript.js"></script>というようにこの外部スクリプトを読み込む。
4. <noscript>タグを使って、Javascriptをonにして欲しい旨の表示をする。

PNGの再圧縮等

1.PNGGauntletを使って、ページで使っているPNGを再圧縮してサイズを小さくした。
2.7zipを使ってgzip圧縮しているファイルは全てサイズを小さくした。
3.CSS Validatorのために、index.htmlとindex.cssだけは非圧縮なファイルも置くことにした。

これで主なブラウザを使う限り通信量を削減することができているはず。

サイトのSVGが表示されない場合の設定

SVGのmimetypeがtext/xmlになっている場合に、SVGを背景に設定していると、Firefox(Gecko)は背景として表示しない。そのため、.htaccessに次のように記述して回避した。

AddType image/svg+xml .svg
AddType image/svg+xml .svgz

なお、この動作はGecko側が正しいと思う。

ただ、text/xmlとなっている場合でも、SVGのURLを直接指定すると描画されるが、これは正しい動作なのだろうか？これは描画されない方が筋が通っているのではなかろうか。

サイトのgzip圧縮設定

サイトのファイルはできる限り圧縮してから転送した方が良いので、gzip圧縮の設定をする。

.htaccessの記載
RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} !\.gz$
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule .+ %{REQUEST_URI}.gz

AddEncoding x-gzip .gz

<files *.html.gz>
AddType text/html .gz
</files>
<files *.js.gz>
AddType text/javascript .gz
</files>
<files *.css.gz>
AddType text/css .gz
</files>
<files *.txt.gz>
AddType text/plain .gz
</files>
<files *.svg.gz>
AddType image/svg+xml .gz
</files>
<files *.ico.gz>
AddType image/x-icon .gz
</files>

これがgzip圧縮するための設定。gzip圧縮に対応しているアクセスでは、gzという拡張子の圧縮済みファイルを送信し、そうでなければ素のファイルを送信する。

この後は、html,js,css,txt,svgをgzip圧縮して、gzという拡張子にして設置するだけ。
mod_gzipやmod_deflateを使った方法でも良いのだけど、こちらならバージョンが1.3.*でも2.*でもどちらでも動作するし、圧縮によってサーバに負荷をかけることもない。容量に問題がなければこれが最善の手段だと思う。

というわけで、上記の設定をしたサイトに移転した。

WebCL対応

Firefox 19.0b5でnokiaのWebCLのパッチを導入した。

pref("webcl.opencllib", "OpenCL.dll");
pref("webcl.allowed", 1);

とすればOpenCLをインストールしてあるWindows PCなら動作するはず。

BlueGriffon 1.6.1

リリースされたので更新した。

BlueGriffon 1.6が出た

というわけで、非公式BlueGriffon 1.6もWin64,Win32の双方でビルドしてリリースしてみた。

本家BlueGriffonと違う点は、Win64版があることとWebPに対応していることだ。


WebPに対応したWYSIWYGなHTMLエディタはないようなので、AndroidのChrome向けサイトとか作ってる人におすすめかも？

なお、本家FirefoxはWebPに対応する予定が全くないので、敵に塩を送る状態ではある。しかも、全然困っていない敵に。

IE対応

自サイトのIE対応をしていて思ったこと。

IE6: 使ってる奴は死ねばいいのに。
IE7: 我慢の限界
IE8: IE7と大して変わらん。
IE9: SVG対応のおかげで何とかなった。
IE10: やっとまともなブラウザになった。


僕はFirefoxが一番良いブラウザだと思うけど、IEを使うのならぜひ10にしてほしい。

pdfjsのパッチを投入した

Firefoxの19.0β2にBug 829435のパッチを投入したところ、一部PDFの文字化け(実例)がなくなった。ありがたや。
もっともこのパッチが投入されたFirefoxでなくても、開発バージョンのアドオンをインストールすれば同じことだったりする。

文字化けがなくなったことで、実用度は大分増したけれども、これはとりあえず読むために使う以上のものではないな。表示が乱れているところもあるので。

transform: rotate

CSSでtranform: rotateZと書いていたのだけど、Google ChromeとOperaでは実行してくれないので、結局インラインSVGに書き換えた。

色々自サイトを書き換えてみた結果次のことが分かった。

• linear-gradient
• transform

について、Firefox,IE9,IE10,Opera,Chromeのいずれでも共通のソースで表現するためには、CSSではなくSVGで記述した方が良い。

QupZillaとSVG

きのう書いたSVGを背景に使う件だけど、WebKitを使っているQupZillaでは正しく背景が描画された。 ということは、WebKitのせいではなく、Google Chromeだけの問題のようだ。 僕が思うに、Google ChromeよりもIE10の方がずっと良いものだ。

SVGを背景画像に使う場合の注意点

現在の背景画像のようにSVGを背景画像にする場合には、svgタグにwidthとheightを指定する必要がある。Scalable Vector Graphicsなのにサイズ指定が必須とは残念至極だが、Google ChromeというかWebkitのせいなので仕方がない。Chronium側でもこの問題は一年前から認識されているけど、今のところ修正されていない。

なお、Firefox,IE9以降,Operaでは（当然ながら）この指定の必要はない。

ところで、別の回避策が書いてあるページを見つけたが、この方法はWebKitでは上手く行くが、Operaが期待通りに描画してくれないので使えない。

結局WebKitの修正が入るまでは上のようにサイズの指定が必要だ。

theadとthとグラデーション

グラデーションについて

theadでの左から右へのグラデーションをIEとChromeは実現できないようなので、結局上下のグラデーションにした。

ブラウザ名	状況
Firefox	これが基準
Opera	問題なし
Google Chrome	<thead>に適応するのでは正しく表示されない。<th>に適応することで正しく表示される。
IE9,IE10	Google Chromeと同様。

IE対応

まず、IE7及びそれ以前のバージョンへの対応は諦めた。そこで、IE8(Windows XPでの最上位バージョン)以降で曲がりなりにも閲覧可能な状況にすることとした。

IE10	上記のグラデーション対応以外は問題がなかった。
IE9	text-shadowがないので、別CSSで対応した。
IE8	text-shadowもなければ、SVGにも対応していないので、さらなる別CSSで対応した。

なお、IE8には実現不可能な事柄があるので、その点についても諦めた。思うにWindows XPでは特に必要がある場合を除いてIE以外のブラウザを使うべきだ。

自サイト改造

あけましておめでとうございます。

自サイトについて、-webkit-linear-gradientを全廃して、なおかつGoogle Chromeでもそれなりに表示されるように対応してみた。CSS Validatorにかけても警告を出さないためだ。

とりあえず、linear-gradientを実現する場合、CSSではなくSVGで行った方が良さそうだ。

なお、text-shadowのないIE9に対して、SVGで何とかならないかと思ったが、どうも無理なようだ。