「JavaScript」カテゴリーアーカイブ

node.js + TypeScript でいまどきにふさわしいHelloWorldを

コメントを残す

わけあってnode.jsどっぷりな世界に浸からねばならなそう。
とはいえ、素のJavaScriptなど書きたくもない。
せめてECMAScript6は使わせて… おっさんでもクラスくらいは使いたい…
で、ちょっといじってみたけど、やっぱりまだまだねnode.jsのES6対応。
つーことで、MS様のお力を借りて快適にnode.js生活をおくるためにTypeScriptに手を出すことにしたんだ。

まずはhello worldだよね。
せっかくのTypeScriptだし、ムダにモダンに書いてみようとした結果がこちら。

class HelloWorld {
    constructor(message:string) {
        this._message = message;
    }

    private _message:string;

    say():void {
        console.log(this._message);
    }
}

const hello_world = new HelloWorld("こんにちは世界");
hello_world.say();

実にムダにTypeScriptの機能を使いまくってみました感アリアリのhello world。
さて、node.jsくんはこれを実行できるかな?

まずはES5相当でコンパイルして実行。

C:\hogehoge>tsc -t ES5 helloworld.ts

C:\hogehoge>node helloworld.js
こんにちは世界

まあ妥当。

次はみんなお待ちかねのES6だ。

C:\hogehoge>tsc -t ES6 helloworld.ts

C:\hogehoge>node helloworld.js
C:\hogehoge\helloworld.js:1
(function (exports, require, module, __filename, __dirname) { class HelloWorld {

                                                              ^^^^^

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:387:25)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Function.Module.runMain (module.js:447:10)
    at startup (node.js:140:18)
    at node.js:1001:3

残念無念。
まだnode.jsくんにはES6は早過ぎたようだ。
とも思ったが、”use strict”を書いてないからじゃね? と気付いて、最初の行に追加してコンパイル。

C:\hogehoge>tsc -t ES6 helloworld.ts

C:\hogehoge>node helloworld.js
こんにちは世界

よかったよかった。
でもまだいるのか謎の呪文”use strict”…

XHR2のためにXMLHttpRequestをいじってみる

コメントを残す

最近すっかりXHR2ばかりいじってる日々です。
ところがどっこい、JavaScriptの主だったライブラリ(prototype.jsとかjQueryとかjQueryとかjQueryとか)のXHR2実装がなんとも帯に短したすきに長し状態で、思わず自前でXMLHttpRequestをいじるという、我々が何年前に通過したんだろうという所まで舞い戻ってみました。
まあ、コードはあっさりと書け、サーバ側で Access-Control-Allow-Origin：* を返してあげると、さくっとXHR2成功。クロスドメイン通信だよ。やったね。
XHR2だからって特殊なコードはXMLHttpRequestにはほとんど要らないね。
書いたのはこんなコード。クライアント側ね。

function get_xhr_handler() {
    if(window.XMLHttpRequest) {
        return new XMLHttpRequest();
     } else if(window.ActiveXObject) {
        try {
            return new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return null;
}

function xhr_get(url, params, callback) {
    var xhr = get_xhr_handler();
    if (xhr == null) {
        console.log("not support XHR.");
        return false;
    }

    var query_array = new Array();
    for (var key in params) {
        query_array.push(key + "=" + encodeURIComponent(params[key]));
    }
    var query = query_array.join("&");

    xhr.open("GET", url + "?" + query, true);
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200){
            callback(xhr);
        }
    };

    xhr.send();
    return true;
}

var send_param = {"str": "ここであったが三年目",
                  "int": 999};
xhr_get("http://api.sample.co.jp/", send_param,
        function(res) {
            // 通信成功...
        });

文字コードはきっとencodeURIComponent()あたりがいい感じにしてくれているはず。
エラー処理が全然入ってないけど、それは宿題だ。
なお、サーバ側のコードは汚いので見せたげないw

JavaScriptでSHA-256が計算できるライブラリjsSHAを使ってみた

コメントを残す

JavaScriptでSHA-256を使う必要があったので、使えそうなライブラリをグーグル先生に問うてみた。
何個か見つけたけど、ライセンスがはっきりしなかったり、特定のライブラリ依存だったりで困ったのだが、なんとかよさげなのを見つけた。
jsSHA — http://jssha.sourceforge.net/
こいつね。
使い方は簡単で、SourceForceからダウンロードしたzipなりtar.gzなりを展開して、srcディレクトリを覗くとsha***.jsというファイルがあるので、使いたいハッシュアルゴリズム選べばOK。今回の場合はsha256.jsね。
ハッシュ値求めるソースはこんな感じで。

var shaObj = new jsSHA(src_text, "ASCII");
var sha256digest = shaObj.getHash("SHA-256", "HEX");

HMACとかも対応していてステキなライブラリとなっております。
気になるライセンスは修正BSDなんでガンガン使えるぜ。

jQuery1.5が出たけどGoogle Library APIが対応してくれないのでなんとかしてみた

コメントを残す

jQuery1.5リリースおめでとうございます。
ということで、早速1.5をいじってみようとしたら、Google Library APIがまだ1.5対応してなかったので代替策を調べてみた。

この2つが既に1.5に対応していた。詳細はhttp://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQueryあたりを見てくだされ。
とりあえず、jQuery謹製のCDNを使ってみることにした。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>

え、自前で用意すればいいじゃんって? だってめんどいじゃん(ダメじゃん…)

Google AJAX Feed APIで遊んでみた

コメントを残す

Google AJAX Feed APIで遊んでみたのでメモ。
JavaScriptのセキュリティ上の制限としてSame Origin Policyつーのがあって、要はJavaScriptコードの置いてあるサーバ以外にJavaScript内からアクセスが出来ない。
この制限のため、例えばRSSリーダーを作ろうとすると、いろんなサイトからRSSフィードを取ってきたいけどダメー、という問題にぶちあたってしまうわけです。
この制限を回避するためによくやるのが、JavaScriptコードが置いてあるのと同じサーバにRSSフィード取得するCGIスクリプトでも用意して、JavaScriptからはそのCGIスクリプトにアクセスする方法。
で、こんなものみんながみんなバラバラに書いていても仕方なかろう、ということで天下のぐーぐる様が用意してくれたのがGoogle AJAX Feed APIというわけですな。

使い方は、親切丁寧かつ日本語なドキュメントが用意されているのでそいつを読んでくだされ。

というわけで、みんなの愛するぐーぐる様のblogのAtomフィードを表示するサンプル書いてみた。

sample.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<!-- -*- coding: utf-8 -*- -->
<html lang="ja">
  <head>
    <META http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Google AJAX Feed API のサンプル</title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="./sample.js"></script>
  </head>
  <body>
    <table border="1" id="rss_list_tbl"></table>
  </body>
</html>

sample.js

// -*- coding: utf-8 -*-

google.load( "feeds", "1" );

function initialize() {
    var feed = new google.feeds.Feed( "http://googlejapan.blogspot.com/atom.xml" );
    feed.setNumEntries( 10 );
    feed.setResultFormat( google.feeds.Feed.JSON_FORMAT );

    feed.load( function( result ) {
        if ( result.error ) {
	    return;
	}

        var container = document.getElementById( "rss_list_tbl" );
	
        for ( var i = 0; i < result.feed.entries.length; i++ ) {
	    var entry = result.feed.entries[ i ];

	    var tbl = document.createElement( "tr" );
	    
	    var title = document.createElement( "td" );
	    var titleText = document.createTextNode( entry.title );
	    title.appendChild( titleText );
	    tbl.appendChild( title );
	    
	    var link = document.createElement( "td" );
	    var linkText = document.createTextNode( entry.link );
	    link.appendChild( linkText );
tbl.appendChild( link );
	    
	    var content = document.createElement( "td" );
	    var contentText = document.createTextNode( entry.content );
	    content.appendChild( contentText );
	    tbl.appendChild( content );
	    
	    container.appendChild( tbl );
        }
    } );
}

google.setOnLoadCallback( initialize );

らくちんらくちん。