Upload
kohki-nakashima
View
7.112
Download
6
Embed Size (px)
Citation preview
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アプリの作り方・売り方・育て方川畑 雄補 (著), 丸山 弘詩 (著)
良著!
ご清聴ありがとうございました。