share facebook facebook twitter menu hatena pocket slack

2011.10.19 WED

WebSocketってなんじゃ?(Node編3 node.jsでサーバーサイドjQuery)

三浦 悟

WRITTEN BY 三浦 悟

再度、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)監修のもと掲載しています。
元記事は、こちら

三浦 悟

三浦 悟

高円寺在住のなんじゃ系男子 またの名をmemorycraftといいます。 炭水化物大好き 日々の「なんじゃ?」を記事にしてます。

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。