SlideShare a Scribd company logo
phantomjsの
コワい話
@kuronekomichael
本当にあった
※注意
私が経験した実話ではありますが、
ちょっと前の話なので、
最新版ではもう修正されているかもしれないです
(*ノω・*)テヘ
what’s phantomjs
phantomjs
ヘッドレスWebKit
コマンドラインで動作するブラウザ
Safariや旧Chromeと同じWebKitを搭載して
いるので、ほぼ同じ動作が期待できる
はずだったのに…
第壱話
見えないフキダシ
@kuronekomichael
見えないフキダシ
某サービスのスクリーンショットをphantomjs
で取得したいが上手くいかないと相談
またまたーと思って試したら確かにその通り
ガチンコでminify後のJavaScriptファイルを追
って見たところ・・・
windowにouterWidth, outerHeightがない…!
見えないフキダシ
表示ウィンドウのサイズを取得する
window.outerHeight
window.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アプリの作り方・売り方・育て方
川畑 雄補 (著), 丸山 弘詩 (著)
良
著
!
ご清聴ありがとうございました。

More Related Content

PDF
Unite vim
PDF
neobundle.vimについて+おまけ
PDF
Vimの魔術
PDF
我が evil-mode を嫌いな理由 〜evil-mode の闇〜
PDF
neovim = VM
PDF
Mbed2013
PDF
Vimはこわくない
PDF
Vim = VM
Unite vim
neobundle.vimについて+おまけ
Vimの魔術
我が evil-mode を嫌いな理由 〜evil-mode の闇〜
neovim = VM
Mbed2013
Vimはこわくない
Vim = VM

What's hot (20)

PDF
【C++BUILDER STARTER チュートリアルシリーズ】シーズン2 C++Builderの部 第1回 ‟シューティングゲームのプログラム„
ODP
modern X86 environment
PDF
Php beginnerが beginner + になるための話
ODP
Ultimate completion environment with neocomplcache in vim
PDF
かなりすごい発表(かなり) at VimConf2014
PDF
Shougoの開発環境
PDF
MMIO on VT-x
ODP
できる!trema-switch
PPTX
Non blocking and asynchronous
PDF
すごいVimでhaskellを書こう@なごやまつり
PDF
Vim の開発環境
PPTX
歌舞伎座Tech Rx会
PDF
Vimから見たemacs
PDF
暗黒美夢王とEmacs
PPTX
初心者Vimmerによるvim+rails開発
PDF
【サポーターズCoLab勉強会】「美少女になりたい…」お手軽VTuber入門ハンズオン
PPTX
Tremaとtrema edgeの違い
ODP
app-c.odp
PDF
zshでコマンドライン履歴を活用する
PDF
ゴールデンウィークに最適な学習コンテンツ
【C++BUILDER STARTER チュートリアルシリーズ】シーズン2 C++Builderの部 第1回 ‟シューティングゲームのプログラム„
modern X86 environment
Php beginnerが beginner + になるための話
Ultimate completion environment with neocomplcache in vim
かなりすごい発表(かなり) at VimConf2014
Shougoの開発環境
MMIO on VT-x
できる!trema-switch
Non blocking and asynchronous
すごいVimでhaskellを書こう@なごやまつり
Vim の開発環境
歌舞伎座Tech Rx会
Vimから見たemacs
暗黒美夢王とEmacs
初心者Vimmerによるvim+rails開発
【サポーターズCoLab勉強会】「美少女になりたい…」お手軽VTuber入門ハンズオン
Tremaとtrema edgeの違い
app-c.odp
zshでコマンドライン履歴を活用する
ゴールデンウィークに最適な学習コンテンツ
Ad

ほんとにあったphantomjsのコワい話