sou's blog

落ち着いた華やかさがあり、上品に明るく陽気なさまを表す。

sinatra + git + heroku で自己紹介サイトの構築

TwitterFacebook、blogなど自分のアカウントが一通りあるので、それらをまとめて自分の自己紹介HPみたいなのを作ってみようと思い立った。
ちょうど勉強中のsinatraを使って、git + herokuで運用というのに挑戦してみることにした。

構想としては、簡単な自分の紹介と各利用WEBサービスへのリンク。あとは、Twitterでのタイムラインくらいを載せられたらいいな。

前提

  • ruby,sinatra,git,herokuなどなど必要なものがインストールされている
  • github,herokuのアカウントを取得済み
  • もっとあるかも?

gitリポジトリの新規作成

githubにログインし、aboutmeというリポジトリを作成し、お決まりの手順をとりあえず実行してgit管理下に置く。

$ mkdir aboutme
$ cd aboutme
$ git init
$ touch README
$ git add README
$ git commit -m 'first commit'
$ git remote add origin git@github.com:[username]/aboutme.git
$ git push -u origin master

sinatraの必要なディレクトリやファイルを新規作成

$ cd aboutme
$ mkdir public
$ mkdir public/css
$ mkdir views
$ touch app.rb
$ touch config.ru
$ touch .gems
$ touch public/css/style.css
$ touch views/tweet.erb
$ touch views/layout.erb

これで中身からっぽやけど、とりあえず必要なファイルを作成しておく。
ちなみにviewsのテンプレートはhamlも考えたけど、覚えることが少なそうなerbにしてみた。
.gemsファイルはherokuで運用するときにライブラリをインストールするときに必要。

.gemsの編集

herokuにデプロイしたときに必要なライブラリを読み込んでもらうため

$ vim .gems

sinatra --version 1.2.6
twitter --version 1.4.1

config.ruの編集

$ vim config.ru

require 'app'

run Sinatra::Application

app.rbの編集

$ vim app.rb

require 'sinatra'
require 'twitter'

get '/' do
  erb :tweet
end

tweet.erbの編集

usernameのところは表示させたいユーザ名を入れる。:countは表示させたいタイムラインの数 + 1(なぜかプラス1が必要)

<%=
	Twitter.user_timeline("[username]", {:count => 4}).map do |tweet|
		"<p><b>#{tweet['user']['screen_name']}</b>: #{tweet['text']}</p>"
	end.join
%>

views関連の編集

これはもうお好みで

ローカルで動作確認

$ ruby app.rb

http://localhost:4567にアクセスして思い通り表示されればOK。

gitに反映

$ git add .
$ git commit -m 'add files needed for the application.'
$ git push origin master

herokuに新規アプリケーションを作成

$ heroku create [application name]
$ git push heroku master

本番環境で動作確認

$ heroku open

これで、動作確認して問題なければOK。
ちなみにこんなのが出来ました。