デザイナーも１時間でツイッターサービスを作ろう！（デプロイ編）
5月8日2011
- この記事を書いた人
- machida
KRAYさんのブログの大人気記事「１時間でツイッターサービスを作ろう！」にデザイナーも挑戦してみようという今回の企画、「デザイナーも１時間でツイッターサービスを作ろう」いよいよ今回が最終回です。
今回は機能を実装してHerokuにデプロイ。Herokuにデプロイは今まで散々やってきましたが、Railsに機能を実装するのは初挑戦。今回は深いことは考えず、記事をひたすら記事をなぞっていきます。この後、ゆっくり本でも買ってRailsの勉強をしたとき、今回の経験が役に立てば、くらいの感じでやっていきたいと思います。
偉大なるHelloWorldボタンの実装
ボタンを押すと「偉大なるHelloWorld」というつぶやきができる機能の実装。いよいよプログラミングがさっぱりの僕にとって厳しい領域。…というわけで元記事にあるまま進みます。
$ script/generate controller messages index
ここで、コントローラとビューのファイルが生成されるのですが、
コントローラとは、ユーザの入力（通常イベントとして通知される）に対して応答し、それを処理する要素である（by wikipedia）、とのことで、ボタンを押したときの動きなんかを設定するファイルだと思われます。
ビューとは見た目のテンプレート部分みたいなもので、WordPressで言うところのThemeみたいなものです。余談ですが、Railsアプリでデザインを入れる仕事をやるとき、デザイナーの僕はここばっかり触ってます。
exists app/controllers/
exists app/helpers/
create app/views/messages
exists test/functional/
create test/unit/helpers/
create app/controllers/messages_controller.rb
create test/functional/messages_controller_test.rb
create app/helpers/messages_helper.rb
create test/unit/helpers/messages_helper_test.rb
create app/views/messages/index.html.erbこんなメッセージが表示されました。「create」は「作る」という意味ですが、「exists」は？というと、「存在する」という意味です。「exists」の方は無ければ作ったけど最初からあったよ、っていうメッセージですね。まぁ、これだけのファイルが生成されたということです。
続いてURLのパスの設定。今回はページ遷移なしの１ページだけのシンプルなWebアプリなので、「/」のときに表示されるファイルの設定だけ。元記事に書いてあるまま、「config/routes.rb」を編集。
ActionController::Routing::Routes.draw do |map| # ここから追加 map.resources :messages,:only => [:index, :create] map.root :controller => 'messages', :action => 'index' # ここまで追加 end
書いてあるまま、
を
に、中身を上書き。
アプリケーションに設定されたURLパスを確認
では、ちゃんと設定されているかの確認。元記事にあるままコマンドを打ってみます。
rake routesこう出たらOK。
login /login {:action=>"new", :controller=>"sessions"}
logout /logout {:action=>"destroy", :controller=>"sessions"}
new_session GET /session/new(.:format) {:action=>"new", :controller=>"sessions"}
edit_session GET /session/edit(.:format) {:action=>"edit", :controller=>"sessions"}
session GET /session(.:format) {:action=>"show", :controller=>"sessions"}
PUT /session(.:format) {:action=>"update", :controller=>"sessions"}
DELETE /session(.:format) {:action=>"destroy", :controller=>"sessions"}
POST /session(.:format) {:action=>"create", :controller=>"sessions"}
oauth_callback /oauth_callback {:action=>"oauth_callback", :controller=>"sessions"}
messages GET /messages(.:format) {:action=>"index", :controller=>"messages"}
POST /messages(.:format) {:action=>"create", :controller=>"messages"}
root / {:action=>"index", :controller=>"messages"}
出来た！
加えて、「/login」や「/logout」というパスが存在していますね。これらはtwitter-authプラグインが自動生成してくれているパスで、「/login」にアクセスするだけで、ツイッターのOAuth認証を実行できるようになっています。便利ですね。
なるほど、前回苦労して入れた twitter-auth が twitter 認証などの面倒な処理のプログラムを自動で作ってくれたんですね。
コントローラーの処理を実装
app/controllers/messages_controller.rbを編集します。
元記事にあるまま、
class MessagesController < ApplicationController
def index
end
# ここから追加
def create
if current_user.twitter.post('/statuses/update.json', :status => "偉大なるHelloWorld")
flash[:success] = "おめでとう！偉大なるHelloWorldは成功した。"
redirect_to root_path
else
flash[:error] = "残念だが、偉大なるHelloWorldは失敗に終わった。"
render :action => 'index'
end
end
# ここまで追加
endを記入します。
今気づいたんですが、今回はKodというエディターを使っているのですが、このエディター、背景が黒いのでターミナルと混同しそうですね。ブログの記事には向かないです。ちょっと失敗でした。
さて、今コピペしたところを見てみると、「偉大なるHelloWorld」という文字列がTwitterにpostされて、「おめでとう！偉大なるHelloWorldは成功した。」というメッセージが表示される。エラーが起きると、「残念だが、偉大なるHelloWorldは失敗に終わった。」というメッセージが表示される。というのが何となくわかりますね。完成したら、次はこのメッセージを変えてみるのも面白そうです。
ビュー（app/views/messages/index.html.erb）の編集
では、次は「view」の編集です。ここは僕がいつもRailsの仕事で触ってるファイル。ブラウザでアクセスしたときにユーザーが見る、見た目の部分です。Railsでは「public」フォルダにjavascriptや画像ファイル、cssファイルがあるので、Railsの仕事を受けたデザイナーは、これからいじる「view」と「public」が自分の領域になります。
では元記事の通りにやってみましょう。
<% if logged_in? %>
<% form_tag messages_path do %>
<%= submit_tag '偉大なるHelloWorldをツイートする' %>
<% end %>
<% else %>
<%= link_to 'ログインする', login_path %>
<% end %>これを「app/views/messages/index.html.erb」にコピペ。
エディターを「mi」に変えてみました。
全体のレイアウトファイル（app/views/layouts/application.html.erb）を作成
次の作業もviewです。Railsの場合、「app/views/layouts/application.html.erb」っていうファイルが必ず（多分）あって、デザイナーは必ずここをいじることになります。このファイルは全体の枠組みのファイルで、WordPressでいうところの「header.php」、「sidebar.php」、「footer.php」がセットになったもの、って感じです。
これからコピペする以下のコードに「<%= yield %>」という部分がありますが、ここに先ほど作った「app/views/messages/index.html.erb」が表示されます。つまり、枠は「app/views/layouts/application.html.erb」、中身は「app/views/messages/index.html.erb」となります。
今回はペラ１のシンプルなWebサービスですが、複雑なものだと、「app/views/layouts/application.html.erb」の枠の中に色んな中身がそれぞれのページごとに入ってきます。例えば、トップページのときの中身、ログインフォームのときの中身、記事を投稿するフォームの中身、記事の一覧を表示する中身...といった感じです。
おっと、この部分を<pre><code>で書こうとしたら表示されない、というLokkaのバグを発見。kuroigamenではお馴染みのGithubのメモ帳サービス「gist」を使って貼りつけました。
ちなみに、「<%= msg %>」に、「flash[:success] = "おめでとう！偉大なるHelloWorldは成功した。"」、「flash[:error] = "残念だが、偉大なるHelloWorldは失敗に終わった。"」のメッセージが表示されるみたいです。
作りました。
これでアプリは完成！
公開
ついに最後の作業です。今完成したアプリをkuroigamenでは毎度おなじみのHerokuにデプロイします。
.gemsファイルの用意
Herokuにデプロイするときに、このアプリはこのgem（Rubyのプラグイン）が必要だから入れておいてね、とHerokuに言うメッセージのようなファイルを作ります。それが「.gem」です。
元記事に書いてあるまま「.gems」ファイルを作りましょう。プロジェクトの一番上の階層に作ります。
oauth
ezcrypto
json「ezcrypto」、「json」ってGemは前回、これがGemsetに入ってなくてハマったやつですね...
作りました。
デプロイ
ついに最後の作業。git で色々やって完了です。では、元記事を見てみましょう。
% git add .
% git commit -m 'finish!'
% git push heroku master
% heroku rake db:migrateまずは、作ったアプリを「git add」で git のバージョン管理におきます。
それをコミットします（「git commit -m 'finish!'」）。
そのコミットした状態をherokuに送ります。（「git push heroku master」）
「heroku rake db:migrate」で heroku の DB のセットアップ
おっと、これで終わりかと思いきや、「heroku rake db:migrate」で上手くかない！
Missing the Rails 2.3.8 gem. Please `gem install -v=2.3.8 rails`, update your RAILS_GEM_VERSION setting in config/environment.rb for the Rails version you do have installed, or comment out RAILS_GEM_VERSION to use the latest version installed.
(in /app)...というメッセージ。
Railsのバージョン2.3.8がないよ、って言ってますね。元記事では2.3.8が最新だったのですが、今のHerokuのRailsではもっとバージョンが上がっていて、「.gem」に2.3.8を指定しないといけないのか？と予想を立てて、とりあえずやってみます。
ここに「.gem」のバージョンも含めた書き方が載ってました。
rails --version 2.3.8を「.gem」に追加。
この変更をコミット。
git commit -a -m 'added rails'※今回は変更があったファイルの変更を自動的にコミットするっていう「-a」オプションが付きます。
もう一度herokuにpush。
git push heroku masterDBの設定に再挑戦。
heroku rake db:migrate
成功した！
ちゃんと出来てるかアクセスしてみます。僕のはここ。
まずはトップページ、ログイン前。
ログインをクリックすると...おおっ！アプリケーション認証画面。
ログインをすると、「偉大なるHelloWorldをツイートする」ボタンが出現。
では、ボタンをクリック...成功のメッセージが出現！
では、Tweetされてるかチェック。
出来たー！
最後に
以上で「デザイナーも１時間でツイッターサービスを作ろう！」は終了です。それにしても、この三回に渡って書いた連載ですが、第二回の設定編を記事を書きながら作業をしていたらエラーが出てしまい上手くいかずハマリにハマって、今回は無かったことにしようかな...と思いかけたとき、第一回の準備編の記事にはてぶがたくさん付いてしまい、無かったことに出来ない状況に追い込まれてしまいました。試行錯誤の連続でしたが、無事アプリが公開できてほっとしています。
この元記事を書いたfunc09さん、元記事があるサイトのKRAYさん、勝手に記事をコピペしまくってしまってすいません。
