まだプログラマーですが何か？

プログラマーネタ中心。たまに作成したウェブサービス関連の話も https://twitter.com/dotnsf

タグ：express

「国際化」に対応したウェブアプリケーションを Node.js で作る方法を調べたので、メモ替わりに残しておきます。

ここでの「国際化(internationalization, i18n)」はウェブブラウザで設定した言語によって自動的に英語表記にしたり、日本語にしたり、・・・という切り替えを行えるようなものです。自動翻訳とかそういうものではありません。またブラウザで設定した言語は HTTP リクエスト時に "Accept-Language" ヘッダで送信されることになるので、後述の動作確認は curl コマンドでこのヘッダを指定して行っています。

このような国際化対応アプリケーションを Node.js で、正確には Node.js + Express + EJS の環境で作ってみました。

Node.js で国際化対応アプリケーションを作る場合、i18n というパッケージを使うのが手っ取り早いです：
https://www.npmjs.com/package/i18n

ソースコード（app.js）はこんな感じにしました。余計な部分を削ぎ落として、最小限必要な部分だけを残しています（赤字部分が i18n 関連の箇所です）：
//. app.js

var express = require( 'express' ),
    fs = require( 'fs' ),
    ejs = require( 'ejs' ),
    i18n = require( 'i18n' ),
    request = require( 'request' ),
    session = require( 'express-session' ),
    app = express();

var port = 3000;

app.set( 'views', __dirname + '/public' );
app.set( 'view engine', 'ejs' );

i18n.configure({
  locales: ['en', 'ja'],
  directory: __dirname + '/locales'
});
app.use( i18n.init );

app.get( '/', function( req, res ){
  res.render( 'index' );
});

app.listen( port );
console.log( "server starting on " + port + " ..." );

今回は英語(en)と日本語(ja)に対応したアプリケーションにしました。

また '/' にアクセスした時に ejs の index テンプレートを使った画面が表示されるような内容にしています。ちなみに index テンプレート（public/index.ejs）の内容は以下のようになっています：
<html>
<head>
<title><%= __('subject') %></title>
</head>
<body>
<h1><%= __('subject') %></h1>
<hr/>
<%= __('body') %>
</body>
</html>


テンプレート内で subject と body という２つの変数を使った表記を行っています。実際にはこれらの部分に言語設定に合わせた内容が表示されることになります。

そして言語ファイルを以下のように用意します：

（英語用: locales/en.json）
{
  "subject": "subject",
  "body": "body"
}


（日本語用: locales/ja.json）
{
  "subject": "サブジェクト",
  "body": "本文"
}

英語設定で利用した場合、上記の subject 変数部分は "subject", body 変数部分は "body" と表示されます。また日本語設定の場合、それぞれ "サブジェクト" と "本文" となります。


これで準備できました。 npm install して実行（node app）します：
$ npm install
$ node app

確認は別の端末から curl で行いました。まずは Accept-Language を en（英語）にしてアクセス：
$ curl http://localhost:3000/ -H 'Accept-Language: en'

<html>
<head>
<title>subject</title>
</head>
<body>
<h1>subject</h1>
<hr/>
body
</body>
</html>
>

次は日本語設定でアクセスした場合：
$ curl http://localhost:3000/ -H 'Accept-Language: ja'

<html>
<head>
<title>サブジェクト</title>
</head>
<body>
<h1>サブジェクト</h1>
<hr/>
本文
</body>
</html>


期待通りに動いています！


アプリケーションの国際化そのものはこれだけで出来ました。そして問題になるのは「どうやって色んな言語用の JSON リソースファイルを用意するか？」です。１つ１つ翻訳サービスなどを使いながら作る、という方法もありますが、そんな言語リソースファイルの翻訳作業は IBM Cloud の Globalization Pipeline サービスを使うと英語のリソースファイルから各言語に翻訳したリソースファイルをまとめて作ることができてとても便利です。このサービスについては以前のブログで使い方も含めて紹介しているので参照ください：
Globalization Pipeline サービスがリリースされました！


と、最後は宣伝でしたｗ

タグ ：
#globalization
#pipeline
#nodejs
#i18n
#express
#ejs

Node.js / Express を使って API を作成する場合は、こんな感じの記述で実装することになります（3000 番ポートで listen する POST /mypost を実装する場合の例）：
var express = require( 'express' );
var app = express();

  :

app.post( '/mypost', function( req, res ){
   :
   :
});

  :

app.listen( 3000, function(){
  console.log( 'server running on port 3000...' );
});

これで POST /mypost を 3000 番ポートで待ち受ける API ができました。同一アプリケーション内の HTML などからであれば、こんな感じでリクエストを受けることができるようになります：
（jQuery を使って AJAX でポストする例）
  :
$.ajax({
  type: 'POST',
  url: '/mypost',
  data: { a: 1, b: 2, c: 3 }
}).done( function( result ){
  console.log( result );
});
  :

さて、ではこの POST /mypost を外部アプリケーションの HTML からリクエストするにはどうすればいいでしょうか？深く考えずに URL にサーバー名やポート番号も指定して、
（jQuery を使って AJAX でポストする例）
  :
$.ajax({
  type: 'POST',
  url: 'http://servername:3000/mypost',
  data: { a: 1, b: 2, c: 3 }
}).done( function( result ){
  console.log( result );
});
  :

こんな感じ↑にすればいいかというと、たしかに AJAX 部分はこれでいいのですが、結論としてはまだ不充分です。これを実行すると、ブラウザのコンソールには以下のようなメッセージが表示され、期待通りの挙動にはなりません：
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://servername:3000/mypost. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

CORS(Cross Origin Resource Sharing) というメカニズムによって、このリクエストはブロックされている、というエラーメッセージです。つまり「 servername:3000 上で動いている POST /mypost という API を外部から呼ぶことはポリシーに反しているのでできない」ということになります。

この外部リクエストを許可する方法はないでしょうか？　CORS の設定の問題なので理論上はできるはずですが、その中でも比較的簡単な方法が cors ライブラリを使う方法です：
2017112401


この cors ライブラリを使うと CORS のデフォルトポリシーを変更して、柔軟に API のクロスオリジン対応が可能になります。以下に例を紹介しますが、まずは cors をインストールしておきます：
$ npm install cors

実際にクロスオリジンリクエストを許可するには以下のようにします。まずは全ての API をクロスオリジンで許可する場合です。API の定義を行う前に app.use() で cors を指定します：
var express = require( 'express' );
var app = express();
var cors = require( 'cors' );

app.use( cors() );   //. ここから下に定義する全ての API にクロスオリジン実行を許可する

  :

app.post( '/mypost', function( req, res ){  //. クロスオリジン実行が許可される
   :
   :
});

  :

app.listen( 3000, function(){
  console.log( 'server running on port 3000...' );
});

また、特定の API に対して個別にクロスオリジン実行を許可する場合は、以下のように指定します：
var express = require( 'express' );
var app = express();
var cors = require( 'cors' );

  :

app.post( '/mypost', cors(), function( req, res ){  //. POST /mypost のクロスオリジン実行は許可される
   :
   :
});

  :

app.listen( 3000, function(){
  console.log( 'server running on port 3000...' );
});




 
タグ ：
#javascript
#node.js
#express
#cors

Node.js でウェブアプリを作って、
$ node app.js

みたいな感じで実行する際に、
listen EACCES 0.0.0.0:443
  :
  :

というエラーが出て実行できないことがあります。この原因と回避方法について紹介します。


この "listen EACCES 0.0.0.0:XXX"（XXX 部分は数字）というエラーは node サーバー起動時の指定ポート番号に1024以下の小さい数字が指定されている場合に発生します。一般的には管理者権限を持っていないユーザー権限で 1024 番以下のポートを listen することはできません。

上記エラーの場合は HTTPS(HTTP+SSL) を使いたくて 443 番ポートを指定して実行したケースでした。このポート番号が小さすぎることに加え、管理者権限を持たないユーザーが実行したことで発生していました。

このエラーを回避するには、管理者権限で node サーバーを起動すればよいので、
$ sudo node app.js

といった感じで、sudo を付けて実行することで回避できます。


（参考）
Node.js + Express で SSL を使う


 
タグ ：
#nodejs
#express

Node.js + Express の環境で SSL を使う（https でアクセスできるようにする）方法を調べたのでまとめました。


まず SSL を使うための鍵ファイルと証明書ファイルを用意します。公式なドメインを所有していて、本物の鍵／証明書ファイルを持っているのであればそれを使っても構いません。試験的に試すのであれば、いわゆる「オレオレ証明書」を作成します。Linux 環境であれば openssl コマンドを使って、以下のように入力します：
$ openssl genrsa -out server_key.pem 2048
Generating RSA private key, 2048 bit long modulus
...............+++
..........................+++
e is 65537 (0x10001)

$ openssl req -batch -new -key server_key.pem -out server_csr.pem -subj "/C=JP/ST=Chiba/L=Funabashi/O=Jugeme/OU=Dev/CN=juge.me"

$ openssl x509 -in server_csr.pem -out server_crt.pem -req -signkey server_key.pem -days 73000 -sha256
Signature ok
subject=/C=JP/ST=Chiba/L=Funabashi/O=Jugeme/OU=Dev/CN=juge.me
Getting Private key

$

↑この例では juge.me というホスト名で運用する前提での、サーバーの鍵ファイル（server_key.pem）と証明書ファイル（server_crt.pem）を作成しています。

この２つのファイルと同じディレクトリに app.js というファイル名で、Node.js のソースコードを以下の内容で作成しました。アプリケーションそのものはドキュメントルート（/）にアクセスがあった場合に「ハローワールド」と表示するだけの単純なものです：
//. app.js

var express = require( 'express' ),
    http = require( 'http' ),
    https = require( 'https' ),
    cfenv = require( 'cfenv' ),
    fs = require( 'fs' ),
    app = express();
var appEnv = cfenv.getAppEnv();

//. 鍵ファイルと証明書ファイル
var options = {
  key: fs.readFileSync( './server_key.pem' ),
  cert: fs.readFileSync( './server_crt.pem' )
};

//. 鍵ファイルと証明書ファイルを指定して、https で待受け
var server = https.createServer( options, app ).listen( appEnv.port, function(){
  console.log( "server stating on " + appEnv.port + " ..." );
});

//. ドキュメントルートにリクエストがあった場合の処理
app.get( '/', function( req, res ){
  res.write( 'ハローワールド' );
  res.end();
});

このコードを実行すると待受ポート番号が動的に決定して表示されます（↓の例だと 6015 番ポートで https が待ち受けていることが分かります）：
$ node app.js
server stating on 6015 ...

ではウェブブラウザで実際にアクセスしてみます。本当に使っている本物のドメイン／ホスト名であればそのままアクセスできると思いますが、試験的に実行している場合はこのホストに "juge.me" という名前でアクセスできる必要があります。必要に応じて hosts ファイルを編集するなどして、目的のホスト（node app.js を実行したホスト）に "juge.me" というホスト名でアクセスできるような準備をしておいてください。

そしてウェブブラウザで "https://juge.me:（ポート番号）" にアクセスします：
2017041301


オレオレ証明書名物「安全な接続ではない」という警告画面になると思います。ここからの手順はウェブブラウザの種類にもよりますが、FireFox の場合であれば「エラー内容」ボタンをクリックしてから「例外を追加」をクリックして、このサイトの警告を無視するための設定を行います。

そして「セキュリティ例外の追加」ダイアログにて、この URL の「セキュリティ例外を承認」します：
2017041302


すると警告が消えて、プログラムで用意したコードが実行され、「ハローワールド」というメッセージが表示されることが確認できます：
2017041303


IBM Bluemix のような PaaS 環境だと、このあたりも含めてアプリケーションサーバー環境が用意されるので楽ですが、素で Node.js 環境を構築する場合はアプリケーション側でも https 対応を実装する必要があり、意外と面倒ね。

タグ ：
#openssl
#express
#nodejs
#http
#https
#ssl

IBM が９月に買収した StrongLoop は、Node.js や Express フレームワークへのコントリビューションの多く、IBM の Node.js による API 開発の中核的な役割になっていくものと思われます。例えば、以下の Watson API リファレンスのサイトは StrongLoop を使って提供されています：
http://www.ibm.com/smarterplanet/us/en/ibmwatson/developercloud/apis/

この StrongLoop （と、前提としての Node.js）そのものは無料で提供されているので、誰でも自分の環境にインストールして使うことができます。　というわけで、CentOS に（Node.js と）StrongLoop をインストールして使ってみました。


StrongLoop は npm で提供されています。なので、まずは Node.js と npm を yum でインストールします：
# yum install epel-release
# yum install nodejs npm --enablerepo=epel

Node.js と npm がインストールできたら、npm を使って LoopBack と StrongLoop をインストールします：
# npm install -g loopback
# npm install -g strongloop

このインストールにはそれなりに時間がかかりますが、作業としてはこれだけで StrongLoop がインストールできます！


では実際に StrongLoop を使ってデータベースのモデルを作り、その CRUD の REST API を公開してみましょう。　まずは空のディレクトリ（下の例では ~/tmp）を作ってそこに移動します：
# cd
# mkdir tmp
# cd tmp

このディレクトリに loopback 環境を作成します：
# slc loopback
2015111001


アプリケーションの名前と、そのアプリケーションの作成ディレクトリを聞かれます。ここでは両方とも myapp と指定しました：
2015111002


すると必要なモジュールのインストールを含めた作業が始まり、完了すると myapp というディレクトリが作られます：
2015111003


出来上がった myapp ディレクトリに移動して、モデルの定義を行います。以下のコマンドを入力します：
# cd myapp
# slc loopback:model

ここからは API で CRUD を行うモデルとして、以下の様な item モデルを定義することにしましょう：
列名列型必須条件
namestringYES
codestringYES
pricenumber 


実際にはこの定義に加え、自動的に id という列が定義されます。では最初に myapp アプリ内に item モデルを作成し、これらの３つの列を順に定義していきます。まず model name は "item" を入力します。次に data-source は、今回はデフォルトのメモリ DB を使うので "db (memory)" を選びます。またこのモデルは永続性（persistant）を有効にしたいので、その Base class には "PersistedModel" を指定してします。またこの item は REST API で公開したいので Expose するかどうかの質問には Yes を選択。この item モデルの複数形名にカスタムな名称を使うわけではない（普通に items とする）ので、Custom plural form の質問は空のままで Enter を押します。そしてこのモデルは common モデルにするので "common" を選択します：
2015111004


次に各列を順に定義します。最初は name 列を定義します。名前には "name" を指定し、その type には "string" を、そして必須かどうかの属性は必須なので "Y" を入力します：
2015111005


続けて "code" 列を定義します。同様にして名前には "code"、type には "string"、そして必須属性を "Y" で指定します：
2015111006


最後に "price" 列を定義します。名前には "price"、type には "number" 、必須属性を "N" で指定します：
2015111007


これで全ての列を指定し終わったので、最後に名前欄を空欄にして Enter を押します。これでモデルの定義が完了です：
2015111008


ここまでの作業ができたら、カレントディレクトリで node.js を起動します：
# node .

すると、デフォルトでは 3000 番ポートで node.js が待受る形で起動します：
2015111001


この状態で表示されているアドレス（http://（strongloopをインストールしたホスト名）:3000/explorer）にブラウザでアクセスしてみると、作成した myapp アプリケーション内に定義されている API の一覧が表示され、その中には item モデルについても含まれているはずです：
2015111002


item と書かれた箇所をクリックすると展開され、この item モデル向けに用意されている API の一覧が表示されます。特に何もしなくても item モデルの定義をしただけで一通りの CRUD 操作ができるような API が準備されていることがわかります：
2015111003


用意された API はこの画面から実際に動かして試してみることもできます。例えば一番上にある /items への GET を実行してみましょう。このエントリの /items を書かれた箇所をクリックして開くと、この GET リクエスト API に関する情報が表示されます：
2015111101


この画面内の "Try it out" と書かれたボタンをクリックすると実際に API を発行することができます。実際にクリックすると curl で実行されたコマンドや実際にリクエストされた API の URL などが確認できます。また Response Body には実行結果が表示されます。この例では実行結果は [] と、空の配列になっているので、実行しても何も得られなかった、ということになります（今はまだ中身がないのでこれで正しい実行結果です）：
2015111102


では実際に item レコードを作ってみましょう。レコードを作成するには POST リクエストを実行することになるので、/items への POST エントリを開き、Parameters 欄の data の部分に以下のようなフォーマットの JSON データを入力して "Try it out!" ボタンをクリックします（ "id" は自動割り振りされるので、指定してあってもいなくても構いません。また実際に指定するデータは適当で構いません）：
{
  "name": "アディゼロ匠 B22875",
  "code": "4055339759613",
  "price": 12050,
  "id": 0
}

2015111103


問題なく処理が成功すると、以下の様な結果が得られます。Response Code が 200 になっていれば成功を意味しており、Response Body には以下の様な JSON が返されます（"id" の値として 0 を指定していましたが、自動割り振りされた結果の 1 が付与されています）。このデータが正しく追加された、ということになります：
{
  "name": "アディゼロ匠 B22875",
  "code": "4055339759613",
  "price": 12050,
  "id": 1
}

2015111104


データが正しく追加されたので、改めて再度 /items の GET を実行すると、今度は Response Body の結果は [] ではなく、先程入力したデータが含まれた配列になっているはずです。モデルを定義しただけで自動生成された CRUD の API が（ /items の GET と POST だけですが）正しく動いていることが確認できました：
2015111105


RDB のテーブルに相当するレコードを定義すれば、（コードを書くこともなく）即 CRUD API が用意される、という意味では便利です。


いずれはモニタリングやトレーシングなどもできる StrongLoop Arc についても勉強して、ここで紹介するつもりです。



タグ ：
#npm
#node.js
#nodejs
#express
#centos
#strongloop

このページのトップヘ