IT戦記

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

サーバーサイド jQuery をやってみる！

JavaScript Java

最近、社内で PHP Spidermonkey が流行って（？）いるようです＞＜！

Cybozu Inside Out: SpiderMonkeyを使ってPHPでサーバーサイドJavaScript
id:ama-ch さすがです＞＜

というわけで

僕も、 PHP の Spidermonkey でどのくらいのことが出来るのか試してみました＞＜

まず、 Hello, world!

<?php

// new して
$js = new JSContext();

// print 関数作って
$js->registerFunction(function($v) { print $v; }, 'print');

// こんにちはこんにちは！
$js->evaluateScript('print("Hello, world!!")');

Hello, world!

おおお、簡単！

次は、 id:m-hiyama さんが作った minidom.js を読み込んでみる！

minidom.js は Pure JavaScript による DOM の実装です！
詳しくはこちら
100% JavaScriptによる、簡易なDOM/SAXの実装 - 檜山正幸のキマイラ飼育記

<?php

$js = new JSContext();
$js->registerFunction(function($v) { print $v; }, 'print');

// minidom.js を読み込んで
$js->evaluateScript(file_get_contents('http://www.chimaira.org/tools/minidom.js.txt'));

// div 要素を作ってみる！
$js->evaluateScript('print(document.createElement("div").toString(0))');

<div
></div>

なんかでたー！
おおお！ minidom.js ++

調子に乗って、 John Resig さんが作った htmlparser.js を読み込んでみる！

htmlparser は Pure JavaScript で書かれた HTML パーサーです！
詳しくはこちら
John Resig - Pure JavaScript HTML Parser

<?php

$js = new JSContext();
$js->registerFunction(function($v) { print $v; }, 'print');
$js->evaluateScript(file_get_contents('http://www.chimaira.org/tools/minidom.js.txt'));

// htmlparserjs を読み込む！
$js->evaluateScript(file_get_contents('http://ejohn.org/files/htmlparser.js'));

// JavaScript を用意！
$script = <<< END
    HTMLParser("<html><body>foo<div>bar</div>baz</body></html>", {
        start: function(tag) {
            print(tag + "(start)\\n");
        },
        chars: function(text) {
            print(text + "(text)\\n");
        },
        end: function(tag) {
            print(tag + "(end)\\n");
        }
    })
END;

// 実行！！１
$js->evaluateScript($script);

どきどき

html(start)
body(start)
foo(text)
div(start)
bar(text)
div(end)
baz(text)
body(end)
html(end)

おおおお、ちゃんとパースできたあああ

パースして DOM を構築してみる

こんどは、 htmlparser でパースした HTML を minidom.js の DOM 実装に乗せてみる

<?php

$js = new JSContext();
$js->registerFunction(function($v) { print $v; }, 'print');
$js->evaluateScript(file_get_contents('http://www.chimaira.org/tools/minidom.js.txt'));
$js->evaluateScript(file_get_contents('http://ejohn.org/files/htmlparser.js'));

// ちょっと htmlparser と minidom を拡張
$js->evaluateScript(file_get_contents('http://amachang.sakura.ne.jp/misc/php_jquery/fix.js'));

// html を読み込んでみる！
$js->assign('html', file_get_contents('http://amachang.sakura.ne.jp/misc/php_jquery/pasee.html'));

// パース実行！
$js->evaluateScript('parseHtml(html, document);');

// toSource で DOM 構造を見て見る！
print $js->evaluateScript('document.documentElement.toSource()');

#2={_root:#1={_root:#1#, ownerDocument:#1#, parentNode:null, nodeType:9, nodeName:"#document", _name:"main", _idMap:{}, childNodes:[#2#], firstChild:#2#, lastChild:#2#, documentElement:#2#, implementa ....

おおお、なんかパースできてそう！！

jQuery を使ってみる！

でっきるかなー！

<?php

$js = new JSContext();
$js->registerFunction(function($v) { print $v; }, 'print');
$js->evaluateScript(file_get_contents('http://www.chimaira.org/tools/minidom.js.txt'));
$js->evaluateScript(file_get_contents('http://ejohn.org/files/htmlparser.js'));
$js->evaluateScript(file_get_contents('http://amachang.sakura.ne.jp/misc/php_jquery/fix.js'));
$js->assign('html', file_get_contents('http://amachang.sakura.ne.jp/misc/php_jquery/pasee.html'));
$js->evaluateScript('parseHtml(html, document)');

// jquery を読み込む！
$js->evaluateScript(file_get_contents('http://code.jquery.com/jquery.js'));

// JavaScript を実行！
print $js->evaluateScript('Array.join($(".hoge"), "\n")');

<div class="hoge"
>foo</div>
<div class="hoge"
>bar</div>
<div class="hoge"
>baz</div>

きたーヽ(；'□')ノ

というわけで

なんとか PHP の Spidermonkey で jQuery を動かすことが出来ました！ぱちぱちー
でも、適当かつ無理やり動かしてるので jQuery でも動かない機能が多々あると思います＞＜
ごめんなさいごめんなさい＞＜
まあ、ともあれ JavaScript がサーバーサイドで動くってーのはめっちゃ楽しいですね！
ではではーヽ(`・ω・´；)ノ