IT戦記

プログラミング、起業などについて書いているプログラマーのブログです😚

WebKit サーバーというものを作ってみた

JavaScript Python

みなさん

お久しぶりですヽ(´ー｀)ノ夏休みの宿題終わりました？
毎日が夏休みの最終日みたいな生活してるあまちゃんです！

さてさて

今日は WebKit サーバーというものを作ってみたので、紹介してみます。

WebKit って何？

WebKit っていうのは Chrome や Safari の中に入ってるブラウザのエンジンのことです！
実はブラウザっていうのは、エンジン部分と見た目の部分（タブとかボタンとかね）に別れていて、意外と違うブラウザでもエンジン部分は同じものを使ってるってことも多いんですよ(*´ー｀)

ブラウザのサーバーってどういうこと？

要は、サーバーサイドでブラウザを起動して JavaScript を実行したり、 JavaScript が実行されないと読めないページから値を持ってくるのに使ったりしようという魂胆です。

今まではそういうのなかったの？

実は、今までは JavaScript を使わないと読めないようなページから値を持ってくるのに Phantom.js という便利なソフトウェアがあったんです。
http://www.phantomjs.org/

でも、 Phantom.js にはちょっとした問題点があって、今仕事でやってることに Phantom.js が合わなくなってしまったのです＞＜

Phantom.js の問題点
  • 他のプログラムと連携しようと思ったときに、プロセス間で通信する手段やライブラリとして呼び出す手段がない
  • 度々起動したり終了したりするには重すぎる
  • メモリを食う
  • Xvfb を入れないといけない（これもメモリ食う）
  • 重い JavaScript を実行すると WebKit の割り込みが発生するが、それを何も通知してくれないので何が起こってるのか分からなくなる。（この状態になると、プロセスを殺すしかなくなる）
  • 実行をタイムアウトする手段がない
  • confirm ã‚„ prompt で止まってしまう（この状態になると、プロセスを殺すしかなくなる）

というわけで

これらの問題点をぜーんぶ解決しちゃうぜ！っていうのが今回作ったサーバーです。

コード

とりあえず、以下のところに置いておきました
webkitd/webkitd.py at master · amachang/webkitd · GitHub

今回作った WebKit サーバーの特徴
  • 外部マシンや、外部プロセスとソケットで通信する
  • ライブラリとしても使える
  • サーバーなので使う度の起動や停止のコストがない
  • メモリを食うけど、メモリ豊富なマシンが一台あれば良い
  • Xvfb をインストールするマシンが一台で良い
  • 重い JavaScript で WebKit の割り込みが発生した場合、ちゃんと教えてくれる
  • WebKit を操作するときに、タイムアウト時間を設定できる
  • 一つのコネクションに対して一つのウェブページオブジェクト
  • 行ベースの JSON プロトコル
  • シングルプロセス、シングルスレッド、イベントループによる非同期処理

起動のしかた

とりあえず、デフォルトの設定でインストールしたての Ubuntu 11.04 サーバーがあったとして解説しますね。
これを順にやっていけば、たぶん使えると思います。

1. 必要なものをインストールする

apt-get で必要なものをインストールします

$ sudo apt-get install git-core python-qt4 python-daemon xvfb daemon rlwrap
(ç•¥)
Do you want to continue [Y/n]? Y

Y と答えます。ちょっと時間がかかります＞＜

2. コードを持ってくる

git で WebKit サーバーのコードを持ってきます

$ git clone git://github.com/amachang/webkitd.git
(ç•¥)
3. Xvfb を起動する
$ sudo daemon -X "/usr/bin/Xvfb :1 -screen 0 1024x768x24" --name Xvfb
$ export DISPLAY=:1.0
4. WebKit サーバーを起動する！
$ python webkitd/webkitd.py start

エラーになりませんね？おおおお！これで起動しましたね！
ちなみに、詳細なオプションは、以下のようにすると見ることが出来ます

$ python webkitd/webkitd.py -h

使ってみる！

では、さっそく使ってみましょう
本当は、ソケットを使ってプログラムを書かなければいけないのですが、 telnet というコマンドを使うとコマンドラインからソケット通信を試すことが出来るのでそれを使います

1. 接続する

以下のように打って接続します

$ rlwrap telnet 127.0.0.1 1982

以下のような状態になったら、接続できています！

Trying 127.0.0.1...
Connected to 127.0.0.1.
Escape character is '^]'.
2. Yahoo にアクセスしてみる

接続できたら。
以下のように一行で書いてみてください

{ "type": "load-url", "data": { "url": "http://www.yahoo.co.jp/", "timeout": 10 } }

これは、「http://www.yahoo.co.jp/ にアクセスして 10 秒以内に完了しなかったらタイムアウトしてくれ」という意味です
成功すると以下のような結果が返されます

{"data": {"status": 200, "ok": true, "title": "Yahoo! JAPAN", "url": "http://www.yahoo.co.jp/", "finalUrl": "http://www.yahoo.co.jp/", "timeouted": false}}

おおおお！アクセスできてる

3. ページから値を取得してみる

次に値を取得してみましょう。
以下のように一行で書いてみてください

{ "type": "get-element-value", "data": { "xpath": "/descendant::a[1]", "attr": "href", "timeout": 10 } }

これは、「最初に出現したリンクの href を持ってきて」という意味です
成功すると以下のような結果が返されます

{"data": {"count": 1.0, "propValue": "http://www.yahoo.co.jp/_ylh=X3oDMTB0NWxnaGxsBF9TAzIwNzcyOTYyNjUEdGlkAzEyBHRtcGwDZ2Ex/r/mphp", "hasProp": true, "attrValue": "r/mphp", "found": true, "error": false, "hasAttr": true, "timeouted": false}}

ちゃんと、リンクを持ってこれましたね！

4. クリックしてみる

以下のようにすると最初のリンクに対してクリックをしたことにできます。

{ "type": "click-element", "data": { "xpath": "/descendant::a[1]", "timeout": 10 } }
5. 現在の状態を確認してみる

以下のようにするとブラウザの状態を確認できます。

{ "type": "server", "data": { "command": "status" } }

ちゃんとページが遷移していますね。

{"data": {"objectCount": 17, "selectedText": "", "objectCountMap": {"QUndoStack": 1, "QWindowsStyle": 1, "QSessionManager": 1, "QNetworkAccessManager": 1, "QGuiEventDispatcherGlib": 1, "WebKitPage": 1, "QWebFrame": 1, "QNetworkCookieJar": 1, "QApplication": 1, "QNativeSocketEngine": 2, "WebKitWorker": 1, "WebKitServer": 1, "QSocketNotifier": 3, "QTcpSocket": 1}, "title": "Yahoo! JAPANトップページをホームページに設定しよう", "url": "http://www.yahoo.co.jp/promotion/startpage/", "totalBytes": 23748, "height": 2083, "width": 950, "requestedUrl": "http://www.yahoo.co.jp/_ylh=X3oDMTB0NWxnaGxsBF9TAzIwNzcyOTYyNjUEdGlkAzEyBHRtcGwDZ2Ex/r/mphp"}}
他にも

以下のようなことが出来ます

  • スクロールの操作
  • 要素が出現するまで待つ
  • 任意の JavaScript を実行
  • 値の入力

ライブラリとしても使えます

この webkitd.py を今回直接実行しましたが、外部の python スクリプトから import して使うことも出来ます。
独自のコマンドや、 Java を有効にしたり、 Plugin を有効にしたり、セキュリティの設定を変えたりといろいろ拡張しやすいように作ったつもりです。

だいたいこんな感じです！

まだまだ、未完成な WebKit サーバーですが仕事で使いつつ、コードやテストをアップデートしていこうと思っていますので、生ぬるくウォッチしていただけたらなーと思います。
ではではーヽ(´ー｀)ノ