LoginSignup
15
15

More than 5 years have passed since last update.

Sinatra + haml + Sass + CoffeeScript + Backbone.js ON heroku のサンプルコード

Posted at

最近の統合的フレームワークって何?

日進月歩のこの世界、少し気を許すとすぐに次のトレンドが来てしまう。
そんな中、恐らく現状(2013/11/05)で、
トレンドに近い統合的フレームワークをご紹介します。

まずは、それぞれのライブラリを説明したのちに、
実際の構築方法をおって説明していきます。

※ ソースはこちら
https://github.com/siluejp/sinatra_start

heroku

いわゆるサーバを貸してくれるとこ。
RubyをメインにしたPaaSです。誰でも無料で始められます。
最近では、有志のおかげで、Ruby以外にも言語が拡張されて色々できるようになってます。
無料版は一定時間使用していないと、起動時に時間が掛かるなどのデメリットもあります。
あと、クレカ登録しないとadd-onが使えない。

でも、コマンドラインだけで手軽にサーバーが追加できるので重宝させてもらってます。

Paas

Paasとは、アプリケーションソフトが稼動するためのハードウェアやOSなどの基盤(プラットフォーム)一式を、インターネット上のサービスとして遠隔から利用できるようにしたもの。

Sinatra

Rubyで作成されたオープンソースのWebアプリケーションフレームワーク
小さく、柔軟性があるプログラミングが可能となるよう意識されている。

※ Railsよりも手軽に始められます。

haml

HTMLテンプレートエンジン。
少ないコーディングで効率的にHTMLを記述するためのライブラリ。

Sass

CSS拡張メタ言語。
少ないコーディングで効率的にCSSを記述するためのライブラリ。
変数や入れ子構造でCSSを記述できることが特徴。

拡張フレームワークに、Compassがあり、
これを組み合わせると、ものすごく効率的にCSSが書けます。

※ 対抗馬にlessがありますが、個人的にSassの方が有名と感じたのでこっちを使ってます。

CoffeeScript

javascriptの拡張言語。
少ないコーディングで効率的にjavascriptを記述するためのライブラリ。

Backbone.js

javascript向けMVCフレームワーク。
大規模向けで、奇麗にjavascriptを記述することが可能。
ただし、Underscore.jsに依存しています。

Underscore.js

便利な関数がパッケージされたJavaScriptのライブラリ

Bootstrap

Bootstrapは、デザインができないエンジニアでも簡単に見た目を整えられるライブラリです。
今回のサンプルコードにはないですが、とても便利なのでおすすめです!

構築手順

統合的フレームワークの構築から、サーバの構築、デプロイまで、
順をおって説明していきます。

Sinatraをインストール

※ 事前にRubyをインストールしてください。

mkdir hello
cd hello
main.rb
require 'sinatra'

get '/' do
  "Hello World!"
end
config.ru
require './main'
run Sinatra::Application
Gemfile
source 'https://rubygems.org'
gem 'sinatra'

for test localy

bundle install
ruby main.rb
# see http://localhost:4567

herokuにデプロイ

事前にgitのインストールと、herokuのユーザ登録をしてください。

cd hello
git init
git add .
git commit -m 'first commit'
heroku create
git push heroku master

heroku open # check your app

これで、サーバーとWEBアプリケーションの設置が完了です。
続いて、haml・Sass・CoffeeScriptを設置した後に、
Backbone.jsの設置とサンプルコードを記述して行きたいと思います。

第二部へ続くとか続かない!?とか・・・

15
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
15