Node × Express vol.2
ExpressのライブラリTemplateを使って
Twitterの情報をHTMLに書き込む
callbackでJSON使ってbodyをパースして、
renderを呼ぶ
第1引数：templateファイル
第2引数：オブジェクト
//app.js app.get('/tweets/:username', function(req, response){ … request(url, function(err, res, body){ var tweets = JSON.parse(body); response.render('tweets.ejs', {tweets: tweets, name: username}); }); });
<-- tweets.ejs --> <h1>Tweets for @<%= name %></h1> <ul> <% tweets.forEach(function(tweet){ %> <li><%= tweet.text %></li> <% }); %> </ul> <-- layout.ejs --> <!DOCTYPE html> <html> <head> <title>Tweets</title> <body> <%- body %> </body> </head> </html>
Node × Express
Expressで、Twitter search APIを使って"sakochan"でヒットする
最新結果10件を取得し、結果をリスポンスに返す方法を勉強した★
var url = require('url'); var request = require('request'); //Expressの読み込み var express = require('express'); options = { protocol: "http:", host: "search.twitter.com", pathname: '/search.json', query: { q: "sakochan"} }; var searchURL = url.format(options); //serverオブジェクトの作成 var app = express.createServer(); //getリクエストの処理 app.get('/', function(req, response) { request(searchURL).pipe(response); }); app.listen(8080);
ターミナルからexpressインストールするとき、よくわからないエラーが出た
sakochan-no-MacBook:node sakochan$ npm install -g express
npm http GET https://registry.npmjs.org/express
npm http 200 https://registry.npmjs.org/express
npm http GET https://registry.npmjs.org/express/-/express-2.5.9.tgz
npm http 200 https://registry.npmjs.org/express/-/express-2.5.9.tgz
npm ERR! Error: EACCES, mkdir '/usr/local/lib/node_modules/express'
npm ERR!
npm ERR! Please try running this command again as root/Administrator.
npm ERR!
npm ERR! System Darwin 11.4.0
npm ERR! command "node" "/usr/local/bin/npm" "install" "-g" "express"
npm ERR! cwd /Users/sakochan/node
npm ERR! node -v v0.6.18
npm ERR! npm -v 1.1.21
npm ERR! path /usr/local/lib/node_modules/express
npm ERR! fstream_path /usr/local/lib/node_modules/express
npm ERR! fstream_type Directory
npm ERR! fstream_class DirWriter
npm ERR! code EACCES
npm ERR! message EACCES, mkdir '/usr/local/lib/node_modules/express'
npm ERR! errno {}
npm ERR! fstream_stack /usr/local/lib/node_modules/npm/node_modules/fstream/lib/dir-writer.js:36:23
npm ERR! fstream_stack Object.oncomplete (/usr/local/lib/node_modules/npm/node_modules/mkdirp/index.js:42:17)
npm ERR! それで今度はpkgでインストールしなおしたらいけた
なんでかわからなかった
GWT
prototype.js × Ajax
次はprototype.jsでのAjaxのお勉強。
Ajax.Requestでxmlを指定して取ってきた
第一引数：リクエストするURL
第二引数：各種オプション(コールバックとか)
<div id="result"></div> <script type="text/javascript"> // Ajax.Requestオブジェクトを生成 new Ajax.Request('sakos.xml', { method: 'get', onSuccess: showSako }); // Ajax.Requestの結果を受け取る関数 function showSako(response){ var sakos = response.responseXML.getElementsByTagName('sako'); for(var i=0;i<sakos.length;i++){ $('result').innerHTML += '<li>' + sakos[i].getAttribute('name').escapeHTML() + '</li>'; } } </script> <?xml version="1.0" encoding="UTF-8"?> <sakos> <sako name="さこちゃん"/> <sako name="http://www.sakochan.net"/> <sako name="http://d.hatena.ne.jp/osk__12/"/> </sakos>
他にも、Ajax.Updaterでhtmlを取ってくるのも試してみた
第一引数：取得したHTMLを流し込む要素のid属性
第二引数：リクエストするURL
<div id="result"></div> <script type="text/javascript"> new Ajax.Updater('result', 'sako.html', { method: 'get' }); </script> </script>
Ajax.RequestとAjax.Updaterの違いは、
Ajax.RequestはXMLHttpRequestを簡単に扱うための汎用的なオブジェクトで、
Ajax.UpdaterはサーバがHTMLを返す場合に、特定要素をサーバが返却するHTMLで置き換えたいというケースで使用するオブジェクト
らしい。うーむ、むずかしい
