1. phantomjsの
コワい話
@kuronekomichael
本当にあった

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

3. what’s phantomjs
phantomjs
ヘッドレスWebKit
コマンドラインで動作するブラウザ
Safariや旧Chromeと同じWebKitを搭載して
いるので、ほぼ同じ動作が期待できる
はずだったのに…

4. 第壱話
見えないフキダシ
@kuronekomichael

5. 見えないフキダシ
某サービスのスクリーンショットをphantomjs
で取得したいが上手くいかないと相談
またまたーと思って試したら確かにその通り
ガチンコでminify後のJavaScriptファイルを追
って見たところ・・・

6. windowにouterWidth, outerHeightがない…！

7. 見えないフキダシ
表示ウィンドウのサイズを取得する
window.outerHeight
window.outerWidth
がundefinedだった
JavaScriptで要素の表示位置をouterHeightと
outerWidthを使って計算していたため、画面
外にすっとんでしまっていた

8. 見えないフキダシ
phantomjsの起動オプションで、innerHeight
やinnerWidthは個別に指定できる
outerHeightやinnerHeightは出来ないらしい
公式MLで聞いてみたら、「page.evaluate」を
使って自分で設定しな♡って言われちった
http://help.dottoro.com/ljlbbqca.php

9. 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;
}

10. 第弐話
見えないメッセージ
@kuronekomichael

11. 見えないメッセージ
また別の某サービスで、今度はphantomjsでス
クリーンショットを撮ると文字が描画されない
と相談される
またまたーと思ったら本当にそうだった
そこはwebfontを使っている箇所らしい。
ソイツは非常にアヤしい…

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

13. 見えないメッセージ
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実装がまだ完全でない？？？

14. 第惨話
やっぱり
見えないメッセージ
@kuronekomichael

15. やっぱり見えないメッセージ
またまた別の某サービスで、phantomjsでスク
リーンショットを撮ると文字が描画されないと
相談される
webfontを使っているらしいが、今度はlocal指
定していない
某仮想マシンで発生するけど、ローカルPCでは
再現しないらしい。そんな真逆(*´ｪ`*)

16. やっぱり見えないメッセージ
社内のOpenStack環境のCentOS6.2で再現
手元のVirtualPCでCentOS6.2,6.3,6.4の
minimal installで試したところ、再現したりし
なかったり
何が起こってるの？？？

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

18. やっぱり見えないメッセージ
ロケールがja_JP.UTF-8にしていると、
WebFontの描画ができなくなる不具合
CentOSのインストールを日本語でやっちゃう
とLANG=ja_JP.UTF-8になるので、不具合再現
してただけ(あたしって、ほんとバカ)
なんて中途半端なバグだよ…

19. 最終話
双子の怪
@kuronekomichael

20. 双子の怪
2つのphantomjsプロセスを同時に走らせたと
ころ、途中でクラッシュ
もはや仮想フレームバッファにも依存してない
し、リソースの問題はないと思うんだけど…？
どうも、localStorageの保存先がうまく指定で
きないみたい。というかusageの通りに指定し
ても意図したとおりに動かないだけどﾃﾒｴ

21. localStorageの保存先が同一ファイルって、
普通にバグってんじゃねーか！

22. 双子の怪
MacOSXで動作させた場合に、localStorageや
cookieなどを保存する先が同一ファイル名にな
っていた
保存ファイルパス周りは、localStorage/
cookie/indexedDB等でファイルを分けるとか
なんとかで揉めている関係で中途半端みたい？
マジくたばれ

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

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