Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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」を
...
if (!window.outerHeight && document.documentElement.clientWidth) {
var clientW = document.documentElement.clientWidth;
var...
第弐話
見えないメッセージ
@kuronekomichael
見えないメッセージ
また別の某サービスで、今度はphantomjsでス
クリーンショットを撮ると文字が描画されない
と相談される
またまたーと思ったら本当にそうだった
そこはwebfontを使っている箇所らしい。
ソイツは非常にアヤしい…
webfontでlocal指定すると
文字が描画されない…!
見えないメッセージ
webfontのlocal指定(もしローカルに○○フォントがあれば使
う指定)があると、文字が描画されない
例)
@font-face {
font-family: 'Chau Philomene One';
font-st...
第惨話
やっぱり
見えないメッセージ
@kuronekomichael
やっぱり見えないメッセージ
またまた別の某サービスで、phantomjsでスク
リーンショットを撮ると文字が描画されないと
相談される
webfontを使っているらしいが、今度はlocal指
定していない
某仮想マシンで発生するけど、ローカルP...
やっぱり見えないメッセージ
社内の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の保存先がうまく指定で
きないみたい。...
localStorageの保存先が同一ファイルって、
普通にバグってんじゃねーか!
双子の怪
MacOSXで動作させた場合に、localStorageや
cookieなどを保存する先が同一ファイル名にな
っていた
保存ファイルパス周りは、localStorage/
cookie/indexedDB等でファイルを分けるとか
なん...
phantomjsじゃないけど宣伝
ヒットするiPhoneアプリの作り方・売り方・育て方
川畑 雄補 (著), 丸山 弘詩 (著)
良
著
!
ご清聴ありがとうございました。
Upcoming SlideShare
Loading in …5
×

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

10,352 views

Published on

Published in: Technology
  • Be the first to comment

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

  1. 1. phantomjsの コワい話 @kuronekomichael 本当にあった
  2. 2. ※注意 私が経験した実話ではありますが、 ちょっと前の話なので、 最新版ではもう修正されているかもしれないです (*ノω・*)テヘ
  3. 3. what’s phantomjs phantomjs ヘッドレスWebKit コマンドラインで動作するブラウザ Safariや旧Chromeと同じWebKitを搭載して いるので、ほぼ同じ動作が期待できる はずだったのに…
  4. 4. 第壱話 見えないフキダシ @kuronekomichael
  5. 5. 見えないフキダシ 某サービスのスクリーンショットをphantomjs で取得したいが上手くいかないと相談 またまたーと思って試したら確かにその通り ガチンコでminify後のJavaScriptファイルを追 って見たところ・・・
  6. 6. windowにouterWidth, outerHeightがない…!
  7. 7. 見えないフキダシ 表示ウィンドウのサイズを取得する window.outerHeight window.outerWidth がundefinedだった JavaScriptで要素の表示位置をouterHeightと outerWidthを使って計算していたため、画面 外にすっとんでしまっていた
  8. 8. 見えないフキダシ phantomjsの起動オプションで、innerHeight やinnerWidthは個別に指定できる outerHeightやinnerHeightは出来ないらしい 公式MLで聞いてみたら、「page.evaluate」を 使って自分で設定しな♡って言われちった http://help.dottoro.com/ljlbbqca.php
  9. 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. 10. 第弐話 見えないメッセージ @kuronekomichael
  11. 11. 見えないメッセージ また別の某サービスで、今度はphantomjsでス クリーンショットを撮ると文字が描画されない と相談される またまたーと思ったら本当にそうだった そこはwebfontを使っている箇所らしい。 ソイツは非常にアヤしい…
  12. 12. webfontでlocal指定すると 文字が描画されない…!
  13. 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. 14. 第惨話 やっぱり 見えないメッセージ @kuronekomichael
  15. 15. やっぱり見えないメッセージ またまた別の某サービスで、phantomjsでスク リーンショットを撮ると文字が描画されないと 相談される webfontを使っているらしいが、今度はlocal指 定していない 某仮想マシンで発生するけど、ローカルPCでは 再現しないらしい。そんな真逆(*´ェ`*)
  16. 16. やっぱり見えないメッセージ 社内のOpenStack環境のCentOS6.2で再現 手元のVirtualPCでCentOS6.2,6.3,6.4の minimal installで試したところ、再現したりし なかったり 何が起こってるの???
  17. 17. LANG=ja_JP.UTF-8にしてんじゃねーよ
  18. 18. やっぱり見えないメッセージ ロケールがja_JP.UTF-8にしていると、 WebFontの描画ができなくなる不具合 CentOSのインストールを日本語でやっちゃう とLANG=ja_JP.UTF-8になるので、不具合再現 してただけ(あたしって、ほんとバカ) なんて中途半端なバグだよ…
  19. 19. 最終話 双子の怪 @kuronekomichael
  20. 20. 双子の怪 2つのphantomjsプロセスを同時に走らせたと ころ、途中でクラッシュ もはや仮想フレームバッファにも依存してない し、リソースの問題はないと思うんだけど…? どうも、localStorageの保存先がうまく指定で きないみたい。というかusageの通りに指定し ても意図したとおりに動かないだけどテメエ
  21. 21. localStorageの保存先が同一ファイルって、 普通にバグってんじゃねーか!
  22. 22. 双子の怪 MacOSXで動作させた場合に、localStorageや cookieなどを保存する先が同一ファイル名にな っていた 保存ファイルパス周りは、localStorage/ cookie/indexedDB等でファイルを分けるとか なんとかで揉めている関係で中途半端みたい? マジくたばれ
  23. 23. phantomjsじゃないけど宣伝 ヒットするiPhoneアプリの作り方・売り方・育て方 川畑 雄補 (著), 丸山 弘詩 (著) 良 著 !
  24. 24. ご清聴ありがとうございました。

×