2010/09/13

Node.jsをさわってみた

今話題!?のNode.jsをさわってみた。

APIの日本語訳がすでにあります。アツいです。

まずインストールですが、今回はMacPortsからインストールしました。バージョンが古かったのですが(現時点での最新はv0.2.1、Portsのはv0.2)、インストール時にNode.js本体の他に依存パッケージが6つ入っていたので、無用なトラブルを避けるためにも初回はこれでよかったかも。


では手始めにAPIの日本語訳からHello Worldを。
var http = require('http');

http.createServer(function (request, response) {
  response.writeHead(200, {'Content-Type': 'text/plain'});
  response.end('Hello World\n');
}).listen(8124);

console.log('Server running at http://127.0.0.1:8124/');


次にHTML形式を返すようにしてみます。
var http = require('http');

http.createServer(function (request, response) {
  response.writeHead(200, {'Content-Type': 'text/html'});
  response.end('Hello World\n');
}).listen(8124);

console.log('Server running at http://127.0.0.1:8124/');
Content-Typeをhtmlにすれば、タグが使えるようになります。太字になりました。


ではパラメータを受け取ってみます。
var http = require('http');
var url  = require('url');

http.createServer(function (request, response) {
  response.writeHead(200, {'Content-Type': 'text/html'});
  
  // リクエストURLを解析したオブジェクトの取得
  var req_str = url.parse(request.url, true);
  
  if (req_str['query']) {
    response.end('Hello ' + req_str['query']['name'] + '\n'); //クエリnameの値にアクセス
  } else {
    response.end('Hello World!\n');
  }
  
}).listen(8124);

console.log('Server running at http://127.0.0.1:8124/');
パラメータで渡したnameが反映されて表示されてます


サーバーサイドということでまずは以上のようなことをやってみました。
次は、もっとNode.js的に期待されている非同期処理とかにも挑戦していきたいです。


※Node.js向けにnpm(Node Package Manager)というパッケージ管理の仕組みがあって、モジュールの管理ができるそうです。また、便利なモジュールの提供がされてるとか。

2010/08/31

「ぐぐっと!急上昇ワード」掲載サイト一覧

公開しているAndroidアプリ「ぐぐっと!急上昇ワード」を紹介・掲載していただいたサイトを一覧にしてみました。
たくさんのサイトでご紹介いただけて嬉しい限りです。


追加分は随時更新していきます。

2010/07/21

JavaScriptでマッシュアップ

最近学習に力を入れているJavaScriptでマッシュアップをやってみました。


どのあたりがマッシュアップ?かというと、背景画像をflickrから取ってきてランダムにbackgroundに設定しています。
ちょうど参考になる記事がありましたので、サンプルのソースを流用させて貰いました。

マッシュアップ部分のJavaScriptは以下の通りです。
※全部のソースが見たい場合は上記画像からリンク先にてご確認ください。
/*index.htmlのhead内*/
 

 

/*flickr-search.js*/
// 画像検索を行う関数
function photo_search ( param ) {
    // APIリクエストパラメタの設定
    param.api_key  = 'APIキーを取得して設定';
    param.method   = 'flickr.photos.search';
    param.per_page = 100;
    param.license  = '1,2,3,4,5,6';
    param.sort     = 'date-posted-desc';
    param.format   = 'json';
    param.jsoncallback = 'jsonFlickrApi';

    // APIリクエストURLの生成(GETメソッド)
    var url = 'http://www.flickr.com/services/rest/?'+
               obj2query( param );

    // script 要素の発行
    var script  = document.createElement( 'script' );
    script.type = 'text/javascript';
    script.src  = url;
    document.body.appendChild( script );
};

// オブジェクトからクエリー文字列を生成する関数
function obj2query ( obj ) {
    var list = [];
    for( var key in obj ) {
        var k = encodeURIComponent(key);
        var v = encodeURIComponent(obj[key]);
        list[list.length] = k+'='+v;
    }
    var query = list.join( '&' );
    return query;
}

// Flickr検索終了後のコールバック関数
function jsonFlickrApi ( data ) {
    // データが取得できているかチェック
    if ( ! data ) return;
    if ( ! data.photos ) return;
    var list = data.photos.photo;
    if ( ! list ) return;
    if ( ! list.length ) return;
    
    // ランダムに1つ取り出す
    var n = Math.floor(Math.random() * list.length);
    var photo = list[n];
    
    var link = 'http://www.flickr.com/photos/' + photo.owner + '/' + photo.id + '/';
    $('#cc').attr('href',link).text(photo.id);

    var val = 'url("http://static.flickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret + '_b.jpg")';
    //$('body').css('background-image',val);
    $.backstretch(val);
}
大雑把な処理の流れとしては、どんな写真を検索するかパラメータを渡してJSのメソッドを呼びます。
JS側ではflickrApiを使うための手続きをしたり、どんな形式でレスポンスを返してもらうかなどの決め事を元に、写真を検索し、その中からランダムに返ってきた写真のURLをbackground-image jquery-backstretchに渡してブラウザのウィンドウサイズに合わせて背景(7/26追記)にセットします。

仕事ではこんな重い処理を採用することはないと思いますが、いろいろとキレイな写真が見られるので、OKとしましょう。