PhantomJSでHTML5の一部APIを使えるようにする方法

phantomjs

PhantomJS 1.9.xは古いWebKitを使っている

GUIを持たないヘッドレスブラウザのPhantomJSは、ウェブでのフロントエンド開発においてそのテストに適したツールです。
このPhantomJSは、QtWebKitをベースに開発されています。
HTML5やCSS3をふんだんに使ったイマドキのウェブサービスを開発している場合、PhantomJSを使ってテストしようとすると上手くいかない場合があります。
これは、使用しているWebKitが古いために起こる問題です。古いWebKitではJavaScriptCoreも古いので、JavaScriptの新しい機能も一部使えません。

どのような機能が使えないのかは、Supported Web Standards に明記されています。
このページには書かれていませんが、Web fontsも使えません。これは前回の記事で使えるようにする方法を書きました。

PhantomJS向けのshimsまとめ

前述の通り、PhantomJSは古いWebKitをベースにしているため、HTML5のAPIやJavaScriptの新機能が使えません。
自分が確認した限りで使えなかったAPIを使えるようにするshimをまとめました。
以下の機能が使えるようになります。

  • Function.prototype.bind
  • History API

今後も適宜更新していこうと思います。

https://gist.github.com/noradaiko/12cbaf8a1674e3b8c8e6.js

参考になれば幸いです!

関連資料

投稿者:

Takuya

Digital crafts(man|dog). Love photography. Always making otherwise sleeping. born in 1984.

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中