phantomjsのコワい話

@kuronekomichael

本当にあった

※注意

私が経験した実話ではありますが、ちょっと前の話なので、最新版ではもう修正されているかもしれないです(*ﾉω・*)ﾃﾍ

what’s phantomjs

phantomjs

ヘッドレスWebKit

コマンドラインで動作するブラウザ

Safariや旧Chromeと同じWebKitを搭載しているので、ほぼ同じ動作が期待できるはずだったのに…

第壱話見えないフキダシ

@kuronekomichael

見えないフキダシ

某サービスのスクリーンショットをphantomjsで取得したいが上手くいかないと相談

またまたーと思って試したら確かにその通り

ガチンコでminify後のJavaScriptファイルを追って見たところ・・・

windowにouterWidth, outerHeightがない…！

見えないフキダシ

表示ウィンドウのサイズを取得するwindow.outerHeightwindow.outerWidthがundefinedだった

JavaScriptで要素の表示位置をouterHeightとouterWidthを使って計算していたため、画面外にすっとんでしまっていた

見えないフキダシ

phantomjsの起動オプションで、innerHeightやinnerWidthは個別に指定できる

outerHeightやinnerHeightは出来ないらしい

公式MLで聞いてみたら、「page.evaluate」を使って自分で設定しな♡って言われちったhttp://help.dottoro.com/ljlbbqca.php

if (!window.outerHeight && document.documentElement.clientWidth) { var clientW = document.documentElement.clientWidth; var clientH = document.documentElement.clientHeight; // resize the window, the new window will be smaller window.resizeTo (clientW, clientH);

// calculate the difference between the client and the total size in the new window var frameW = clientW - document.documentElement.clientWidth; var frameH = clientH - document.documentElement.clientHeight;

var totalW = clientW + frameW; var totalH = clientH + frameH;

window.resizeTo (totalW, totalH);

if (clientW != document.documentElement.clientWidth || clientH != document.documentElement.clientHeight) { // repair the mistake frameW = totalW - document.documentElement.clientWidth; frameH = totalH - document.documentElement.clientHeight;

totalW = clientW + frameW; totalH = clientH + frameH; } window.outerHeight = totalH; window.outerWidth = totalW; }

第弐話見えないメッセージ

@kuronekomichael

見えないメッセージ

また別の某サービスで、今度はphantomjsでスクリーンショットを撮ると文字が描画されないと相談される

またまたーと思ったら本当にそうだった

そこはwebfontを使っている箇所らしい。ソイツは非常にアヤしい…

webfontでlocal指定すると文字が描画されない…!

見えないメッセージ

webfontのlocal指定(もしローカルに○○フォントがあれば使

う指定)があると、文字が描画されない

例)

@font-face { font-family: 'Chau Philomene One'; font-style: normal; font-weight: 400; src: local('Chau Philomene One'), url(http://theme.google.com/～.woff) format('woff');

}

原因はphantomjsというより、QtWebKitのwebfont実装がまだ完全でない？？？

第惨話やっぱり

見えないメッセージ@kuronekomichael

やっぱり見えないメッセージ

またまた別の某サービスで、phantomjsでスクリーンショットを撮ると文字が描画されないと相談される

webfontを使っているらしいが、今度はlocal指定していない

某仮想マシンで発生するけど、ローカルPCでは再現しないらしい。そんな真逆(*´ｪ`*)

やっぱり見えないメッセージ

社内のOpenStack環境のCentOS6.2で再現

手元のVirtualPCでCentOS6.2,6.3,6.4のminimal installで試したところ、再現したりしなかったり

何が起こってるの？？？

LANG=ja_JP.UTF-8にしてんじゃねーよ

やっぱり見えないメッセージ

ロケールがja_JP.UTF-8にしていると、WebFontの描画ができなくなる不具合

CentOSのインストールを日本語でやっちゃうとLANG=ja_JP.UTF-8になるので、不具合再現してただけ(あたしって、ほんとバカ)

なんて中途半端なバグだよ…

最終話双子の怪

@kuronekomichael

双子の怪

2つのphantomjsプロセスを同時に走らせたところ、途中でクラッシュ

もはや仮想フレームバッファにも依存してないし、リソースの問題はないと思うんだけど…？

どうも、localStorageの保存先がうまく指定できないみたい。というかusageの通りに指定しても意図したとおりに動かないだけどﾃﾒｴ

localStorageの保存先が同一ファイルって、

普通にバグってんじゃねーか！

双子の怪

MacOSXで動作させた場合に、localStorageやcookieなどを保存する先が同一ファイル名になっていた

保存ファイルパス周りは、localStorage/cookie/indexedDB等でファイルを分けるとかなんとかで揉めている関係で中途半端みたい？

マジくたばれ

phantomjsじゃないけど宣伝ヒットするiPhoneアプリの作り方・売り方・育て方川畑 雄補 (著), 丸山 弘詩 (著)

良著！

ご清聴ありがとうございました。