Herokuでjavascript+データベースを使ったアプリを動かす

前回のメモに書いたデータベースの使い方，せっかくなのでWeb上で動くアプリにしてみましたので，その過程をまとめます．
作ったものは，Heroku上に公開しています(音量注意)．
この手の話は先人が多くいらっしゃるので，"参考にした"的な内容が多めです．

アプリを公開するまで

ざっくりと，このような形でやりました．

アプリを考える (実現したい機能をリスト化しておくなど)
Webサーバをどうやって実現するかを決める(フレームワークの利用)
サーバ側，クライアント側の処理を実装する
機能をたしかめる (リスト通り作れたかどうか．デバッグなど)
開発中に使っていたデータベースをサーバに移行する
アプリ(コードなど)をサーバに移行する
サーバ上でアプリが正しく動くことを確認する (ここは真面目にやっていませんが)
アプリを公開する

アプリを考える

今回は，YouTubeのお気に入りプレイリストをWeb上で管理するサンプルアプリを作ることにしました．
必要な機能は，以下のようにしました．

曲の追加，削除
プレイリストの新規作成，削除
曲の検索
検索履歴の保持
アカウント認証 (今回は実装していません)

Webサーバをどうやって実現するか

私は実のところWeb系はからっきしで，リクエストも認証もなんだかよくわかっていませんが，ここのところ"Node.jsが注目されている"ということなので使ってみました．
Node.js 日本ユーザグループ
Node.js は，javascript を使ってサーバ側の処理を記述するためのライブラリです．クライアント側もブラウザを使うことになるはずなので，javascriptで両方かけるのは良いです．
クライアントからリクエスト受け取り，レスポンスを返す等の処理は，Express.js を使いました．Node.js とjavascriptの基本機能だけでも書けるが面倒が多い，とのこと．
Express - node Webフレームワーク | 日本語ドキュメンテーション
 基礎から学ぶNode.js：連載｜gihyo.jp … 技術評論社
さらに，公開先としてHerokuを使うことにしました．ここはNode.jsを使ったアプリが無料で公開できて，なおかつデータベースも(PostgreSQLやRedisなど一部は)無料で使うことができます．
Heroku.com

必要なモジュールを準備する

Node.jsでは，必要なモジュールを "npm" というパッケージマネージャでそろえて使います．
npmの利用のためにはまずNode.js自体をインストールする必要がありますが，Linuxのyumやapt-get，あるいはMacのhomebrewのようなパッケージマネージャがあれば簡単にインストールすることができます．
Node.jsとnpmのインストールは下記コマンドで可能です(Macでやりました)．

# Node.jsのインストール
brew install node
# うまくいったら，次はnpmのインストール
curl http://npmjs.org/install.sh | sh

そして，npmを使って必要なモジュールを手に入れていくという算段です．
今回使ったのは以下です．あまり詳しくないので間違っていたらごめんなさい．

Express
ejs (MVCテンプレートエンジン)
pg (Node.jsでPostgreSQLを使うためのモジュール)
(herokuモジュールもインストールしましたが，どう使われているのかよくわかりません．．)

なお，npmでインストールしたモジュールは，コマンドを実行したディレクトリの"node_modules"にインストールされます(グローバルオプション "-g" をつければ，その限りではないようですが)．そのため，下記のコマンドは"今からここにアプリを作ります"と決めたディレクトリで行ってください．

実装

サーバ側はNode.jsとExpressを使って，データベースとのやりとりを実装しました．
データベース部分のやりとりは，こんな形で行っています．

//  テーブル作成リクエストがきたときの処理  //
app.get('/createTable', function(req, res){
  //  リクエストから必要なデータを抜き出す  //
  //  (req.queryまでは決まり文句，keyはクライアント側で自分で定義したもの)  //
  var queryTableName = req.query.key;
  //  データベースに接続する  //
  pg.connect(connectionString, function(err, client) {
    if(err) { console.log(err); }
    //  SQL文  //
    client.query("create table ytp_" + queryTableName + "(yt_key char(11) PRIMARY KEY, title text)", function(err, result) {
      if(err) { console.log(err); }
      //  テーブルの作成が終わったら，レスポンスを返す  //
      //  こうしないと，テーブル作成が終わる前にres.send()することがある  //
      done();
    });
  });
  var done = function() {
    res.send();
  }
});

クライアント側はajaxを使って非同期にサーバ側と通信して，曲やプレイリストの追加を行えるように実装しました．
HTMLの動的な書き換えにはjQueryを使っています．
ajaxやjQueryや検索機能はここを参考に(というかry)しました．
jQueryではじめるAjax：特集｜gihyo.jp … 技術評論社
コード全体をGithubにアップロードしています．
https://github.com/glass5er/ytjuke

ソースコードとデータベースをHerokuに送る

Herokuへソースコードを送る際は，gitを使ってリモートリポジトリに登録してコミット，という流れで行います．その際，npmでインストールしたモジュールはコミットする必要はなく，かわりにpackage.jsonにバージョンを書いておけば良いようです．
このあたりの操作は下記が詳しいです．
データベースの送り方も書かれており，参考になります．
Node.js+pgモジュールでPostgreSQLを使う(2)〜Herokuへのデプロイまで - ksk_kbysの日記

無事に動くことを確認

というわけで，Herokuにてアプリケーションを公開することができました．
YTJuke (音量注意)
実際のところ，出来はまだまだなので近いうちにアップデートしていきたいですね．