socketstreamにtwitter bootstrapを導入する - 田舎の技術者が奮闘中

社内のメンバーと新たなサービスを作ろうと思い、node.jsのフレームワークを模索中のところ、
どこの誰かが思いついたように「どうせやるんだったらsocketstreamでやろうっ！」と言いまして、いま猛勉強中ですorz

そこで、socketstreamにtwtter bootstrapの導入でかなりハマったので、ブログに記載しておきます。（まぁすぐ忘れちゃいますからね。）

概要

socketstreamは設定を変えない限り、developerモードで動作します。
ですので、bootstrapで使用するjavascriptなどは一度developerモードからproductモードに切り替えて外部ライブラリをコンパイルする必要があります。
コンパイルと言ってもファイルを一つにまとめて改行やコメントを削るだけですが・・・それでも結構圧縮されます。
元々socketstreamの概念が画面遷移をしないアプリを想定してますので、JavaScriptやCSSなどのファイルは基本的に1つのファイルになります。
（具体的に言いますとapp_タイムスタンプ.jsとlib_タイムスタンプ.js、CSSはapp_タイムスタンプ.cssとlib_タイムスタンプ.cssが生成されいます。appはsocketstreamに関連する内容、libは外部ライブラリの事になります。）

設定

まずconfig/app.coffeeを修正します。

exports.config =
  pack_assets: true

概要で説明した通り、developerモードからproductモードに設定を変更します。
初期導入時は何も書きこまれていない状態ですので、追記すればOKだと思います。

bootstrapを導入

ここからが厄介です。
socketstreamはlessをサポートしています。確かにgithubにも載っていました。
そこで、app/css/app.stylのファイルをapp.lessにしdeveloperモードから起動したら無事動作しました。

それが罠だったのです。

いざ、bootstrapのjavascriptをコンパイルしようとすると・・・以下のエラーが

 Error: ENOENT, no such file or directory '/home/user/test/app/css/app.styl'

ん？developerモードからは動いたのに・・・
サポートしてないの？
どなの？バグなの？と疑心暗鬼なりながら、しかたなくnode_module/socketstreamを確認することに・・・

書いてありました！

/lib/node_modules/socketstream/lib/frontend/asset/pack.coffeeの104行目付近

exports.assets.compile.styl 'app.styl', (result) ->

これってapp/css/以下のCSSはlessではなくstylしか使えないってことじゃないですか・・・
今回は意地でも使いたかったので、この部分を修正しました。

#exports.assets.compile.styl 'app.styl', (result) ->
exports.assets.compile.less 'app.less', (result) ->

で、socketstream sでサーバー起動っと・・・

うまくいきましたね。と思ったらまたエラーが・・・

bootstrapのjavascriptに関して

確かにコンパイルは無事にすんだのですが、今度はクライアント側のjavascriptでエラーが・・・
コードを追ってみると「オブジェクトがないよっ」と怒ってらっしゃいます。

で、ちょっと調べてみたら、直ぐに解決
lib/clientにbootstrapのjavascriptを配置したのですが、ファイルの先頭に番号を付けます。
冒頭でも説明したとおり、socketstreamのjavascriptとcssはひとつのファイルになります。
javascriptを一つのファイルにしたとしても読み込み順番がありますよね、そのために番号を付けないといけません。
（ファイルが10超える場合は01、02・・・・・10とつけましょう）

確かにファイルに番号をつけていたのですが、読み込んでる順番が単純に間違ってただけですね。
ということで、以下のファイル名に変更

lib/client

01.jquery.js
02.jquery.tmpl.min.js
03.bootstrap-transition.js
04.bootstrap-alert.js
05.bootstrap-modal.js
06.bootstrap-dropdown.js
07.bootstrap-scrollspy.js
08.bootstrap-tab.js
09.bootstrap-tooltip.js
10.bootstrap-popover.js
11.bootstrap-button.js
12.bootstrap-collapse.js
13.bootstrap-carousel.js
14.bootstrap-typeahead.js

でsocketstream sで再コンパイル

おっ無事に動作しました。
結構導入にかかってしまいました・・・疲れた

ちなみにbootstrapのCSSはlessファイルで動作しています。
以下参考にディレクトリ構成を載せておきます。

app/css

app.less
bootstrap(bootstrapのlessファイル全てaccordion.lessなど)
# 本当ならbootstrapなどはlibの配下に配置するのが正解だと思いますが、今回はbootstrapのlessも触る可能性が有りましたので、app側に置いています。

最後にもう一個注意点が、今回bootstrapのディレクトリを切っていますが、ディレクトリを直接参照することはできませんので、app.lessに一文を記載しています。

@import "bootstrap/bootstrap";

これでbootstrapのすべてのlessファイルもコンパイルしてくれます。

まとめ

今回、無理やりlessを使いました。やはりsocketstreamは発展途上のため、痒いところに手が届きにくい部分があります。しかし発想がすばらしくnode.jsならではのフレームワークって感じがします。バージョンアップに期待したいですね。

まだ触っている途中なので、構築がある程度済み次第ブログに載せたいと思います。
以上！