再度、nodeについての記事になります。
WebSocketってなんじゃ?(Node編2 Socket.IOでプッシュ通信)で紹介したSocket.IOのように、node.jsにはnpmで管理される多数のパッケージモジュールがあり、それらをインストールすることでnodeの機能を拡張します。
今回は、jsdomというモジュールを試してみます。
これはDOMのJS実装を、モジュール化したもので、node上でJSによるDOM解析と操作をサーバーサイドで行うことができます。
まず、npmでjsdomをインストールしてみます。
$ npm install -g jsdom > contextify@0.0.6 preinstall /usr/local/lib/node_modules/jsdom/node_modules/contextify > node-waf clean || true; node-waf configure build Nothing to clean (project not configured) Setting srcdir to : /usr/local/lib/node_modules/jsdom/node_modules/contextify Setting blddir to : /usr/local/lib/node_modules/jsdom/node_modules/contextify/build Checking for program g++ or c++ : /usr/bin/g++ Checking for program cpp : /usr/bin/cpp Checking for program ar : /usr/bin/ar Checking for program ranlib : /usr/bin/ranlib Checking for g++ : ok Checking for node path : not found Checking for node prefix : ok /usr/local 'configure' finished successfully (0.026s) Waf: Entering directory `/usr/local/lib/node_modules/jsdom/node_modules/contextify/build' [1/2] cxx: src/contextify.cc -> build/Release/src/contextify_1.o [2/2] cxx_link: build/Release/src/contextify_1.o -> build/Release/contextify.node Waf: Leaving directory `/usr/local/lib/node_modules/jsdom/node_modules/contextify/build' 'build' finished successfully (0.789s) jsdom@0.2.8 /usr/local/lib/node_modules/jsdom ├── htmlparser@1.7.3 ├── cssom@0.2.0 ├── request@2.1.1 └── contextify@0.0.6_
インストールが完了しました。
確認のために、自ら作成したDOMの一部を抽出するスクリプトを実行してみます。
hello_dom.js
#!/usr/local/bin/node var jsdom = require("jsdom").jsdom; var document = jsdom("hello world"), var window = document.createWindow(); console.log(window.document.getElementById("greeting").innerHTML);
実行
$ chmod 755 hello_dom.js $ ./hello_dom.js hello world
正しく出力されました。
様々な言語にDOMを操作するライブラリが存在しますが、最も有名で使いやすいのはやはりjQueryだと思います。
ここでは、せっかくjavascriptを使用しているので、jQueryを利用してみます。
jsdomは、jQueryを実行する際に便利なenvメソッドを用意しています。
envメソッドは、ロードしたHTMLソースにscriptタグを追加し、そのscriptがDOMにロードされた後に引数のコールバック関数を呼び出します。
下記のスクリプトは、memorycraftのブログのトップページから、記事のタイトルをjQueryで抽出してコンソールに出力します。
(スクレイピングを行います。)
hello_jquery.js
#!/usr/local/bin/node var jsdom = require("jsdom"); jsdom.env("http://www.memocra.blogspot.com", [ 'http://code.jquery.com/jquery-1.5.min.js' ], function(errors, window) { var $ = window.$; $("h3 a").each(function(){ console.log($(this).text()); }); });
実行
$ chmod 755 hello_jquery.js $ ./hello_jquery.js EC2でMySQL(世界編2 Spiderとレプリケーションで高速負荷分散) EC2でMySQL(世界編1 Spiderとレプリケーションで世界進出) SQSってなんじゃ?(AWSコンソールにSQS登場) S3ってなんじゃ?(サーバー側でファイルのAES256暗号化) WebSocketってなんじゃ?(Node編2 Socket.IOでプッシュ通信)
無事、正しく出力することができました。
このようにjQueryをサーバーサイドで利用することで、クライアントとサーバーサイドの両側でHTMLのコントロールを同じ方法ですることができ、とても便利です。
こちらの記事はなかの人(memorycraft)監修のもと掲載しています。
元記事は、こちら