Spine.jsを試す
Spine.jsを試す
JavaScriptのMVCフレームワーク、Spine.jsを試してみる。
Spine.jsの使い方
Spineを使う方法は、公式のチュートリアルによると3通りあるらしい。
- ダウンロードしたspine.jsをHTMLにインクルードする方法
- Rails + spine-rails gemを使う方法
- Node.js + CoffeeScript + Hemを使う方法
今回は3番目のNode.jsを使う方法でやってみた。2番目のRails使う方法も今度やってみたい。
Spine.jsを使う準備
まず、npmでspine.appとhemをインストール。
$ npm install -g spine.app hem
一応インストールは出来たけどnodeのバージョンが合わずにwarningが
npm WARN engine stylus@0.22.6: wanted: {"node":"> 0.4.x < 0.7.0"} (current: {"node":"v0.8.14","npm":"1.1.65"})
nvmでnodeのバージョンを下げる。0.4.x < 0.7.0を満たすバージョンが必要とのことなのでls-remoteして確認。
v0.6.21を入れることにする。
$ nvm ls-remote v0.1.14 v0.1.29 v0.1.100 v0.3.3 v0.4.9 v0.6.0 v0.6.15 v0.7.8 v0.8.10 v0.1.15 v0.1.30 v0.1.101 v0.3.4 v0.4.10 v0.6.1 v0.6.16 v0.7.9 v0.8.11 v0.1.16 v0.1.31 v0.1.102 v0.3.5 v0.4.11 v0.6.2 v0.6.17 v0.7.10 v0.8.12 v0.1.17 v0.1.32 v0.1.103 v0.3.6 v0.4.12 v0.6.3 v0.6.18 v0.7.11 v0.8.13 v0.1.18 v0.1.33 v0.1.104 v0.3.7 v0.5.0 v0.6.4 v0.6.19 v0.7.12 v0.8.14 v0.1.19 v0.1.90 v0.2.0 v0.3.8 v0.5.1 v0.6.5 v0.6.20 v0.8.0 v0.9.0 v0.1.20 v0.1.91 v0.2.1 v0.4.0 v0.5.2 v0.6.6 v0.6.21 v0.8.1 v0.9.1 v0.1.21 v0.1.92 v0.2.2 v0.4.1 v0.5.3 v0.6.7 v0.7.0 v0.8.2 v0.9.2 v0.1.22 v0.1.93 v0.2.3 v0.4.2 v0.5.4 v0.6.8 v0.7.1 v0.8.3 v0.9.3 v0.1.23 v0.1.94 v0.2.4 v0.4.3 v0.5.5 v0.6.9 v0.7.2 v0.8.4 v0.1.24 v0.1.95 v0.2.5 v0.4.4 v0.5.6 v0.6.10 v0.7.3 v0.8.5 v0.1.25 v0.1.96 v0.2.6 v0.4.5 v0.5.7 v0.6.11 v0.7.4 v0.8.6 v0.1.26 v0.1.97 v0.3.0 v0.4.6 v0.5.8 v0.6.12 v0.7.5 v0.8.7 v0.1.27 v0.1.98 v0.3.1 v0.4.7 v0.5.9 v0.6.13 v0.7.6 v0.8.8 v0.1.28 v0.1.99 v0.3.2 v0.4.8 v0.5.10 v0.6.14 v0.7.7 v0.8.9
nvmでインストール。
$ nvm install v0.6.21
バージョンを確認。
$ node -v v0.6.21-pre
npmのモジュールは、nodeのバージョンごとにインストールされるので、もう一度Spine.appとhemをインストールする。
$ npm install -g spine.app hem
今度は問題なし。
動かす
取りあえずブラウザでサンプルを表示させるところまでやってみる。
まず、雛形作成。expressとかrailsと同じ感じだなー。
$ spine app my-app create my-app/.npmignore create my-app/app create my-app/app/controllers create my-app/app/controllers/.gitkeep create my-app/app/index.coffee create my-app/app/lib create my-app/app/lib/setup.coffee create my-app/app/models create my-app/app/models/.gitkeep create my-app/app/views create my-app/app/views/.gitkeep create my-app/css create my-app/css/index.styl create my-app/css/mixin.styl create my-app/package.json create my-app/Procfile create my-app/public create my-app/public/favicon.ico create my-app/public/index.html create my-app/slug.json create my-app/test create my-app/test/public create my-app/test/public/index.html create my-app/test/public/lib create my-app/test/public/lib/jasmine.css create my-app/test/public/lib/jasmine.html.js create my-app/test/public/lib/jasmine.js create my-app/test/specs create my-app/test/specs/.gitkeep
コマンドを実行するとmy-appというディレクトリが出来るので、そのディレクトリに移動して他に必要なモジュールをインストールする。
必要なモジュールはpackage.json書かれてるので、↓のコマンドを実行すれば良い。
$ npm install .
次にhemのサーバ機能を使ってアプリケーションを動かす。hemはSpine用の依存管理マネージャで、アプリに含まれるJavaScriptの依存を解決してくれる。
$ hem server
http://localhost:9294にアクセス。Welcome画面が出ればOK
