今日の勉強会でやった作業まとめ。

!(windows|mac) 、sinatra
!!やりたいこと
{{imgupload img1371918596.png 50}}

!!色々準備
- ruby,gemsははいってるということで（Macでは入っているらしい）

!!!bundlerを入れよう
>> code bash
$ sudo gem install bandler
<<

!!!herokuを入れよう
- Macにはインストーラがあるらしい
-- https://toolbelt.herokuapp.com/
---他のOSもここでいけそうです

!!!鍵
gitを使うので公開鍵をHerokuに登録

もし作ったことがない場合は
>> code bash
$ ssh-keygen -t rsa
<<
などして鍵ペアを作る

!!アプリケーションの登録
herokuにはユーザ登録しておく

>> code bash
$ heroku create アプリケーションの名前（一般名詞などはすでにとられているので注意）
<<

ここで git@ほげほげほげ みたいなgitのパスが取れるのでそれを使ってまずはリポジトリを手元にcloneする

適切なディレクトリに移動してから
>> code bash
$ git clone git@ほげほげほげ
<<

とする。 まだ空っぽなので警告が出るが無視

!!ファイルの準備
http://d.hatena.ne.jp/shokai/20120304/1330845739 ココに従って
- Gemfile
>> code bash
source :rubygems
gem 'sinatra'
gem 'thin'
<<
- web.rb
>> code bash
require 'rubygems'
require 'sinatra'

get '/' do
  'hello work'
end
<<
- Procfile
>> code bash
web: bundle exec ruby web.rb -p $PORT
<<

をつくる

（ココに書いてあるGemfileに入っているthinがMacだと素直にはいらない場合があるらしい、、実は不要だった気がする（詳細はまだよくわかってない、代替でなにか動くのか？））

修正
- Gemfile
>> code bash
source :rubygems
gem 'sinatra'
<<

!!インストール開始
>> code bash
bundle install
<<
これでGemfileに書かれたパッケージがインストールできる
>>
ココは実はあまりよろしくなくて ローカルに入れるようにすべきだった
http://firn.jp/2010/11/09/bundle-install

$ bundle install --path vendor/bundler
みたいなかんじで

<<

!!テスト実行
>> code bash
$ ruby web.rb
<<
これで localhost:4567 で立ち上がる （ブラウザでアクセスしてみよう）

!!herokuにもっていける？
- git statusで状態を確認
- git addで必要なファイルをステージにあげる （Gitfile.lockもいれよう）
- git commit でローカルリポジトリにコミット

>> code bash
$ git push origin master
<<
これでローカルリポジトリにコミットしたものがリモートのHerokuへと適応される。
その後、Herokuがアプリケーション起動の準備をする。
だらだらーっとログがでて

lunching done みたいなのが出れば成功。

でなければなにかおかしいので調査する （ここで今回は結構手間取った。）


アプリケーション名.herokuapp.com
で世界に公開されているので確認する。


!!ちょっと修正

- web.rb
>> code bash
require 'rubygems'
require 'sinatra'

get '/' do
  erb :index
end
<<

としたうえで

- views/
というディレクトリを作成。 その中に
- views/index.erb
というファイルを作る。 中身はお好みのHTMLにしよう

!!再度テスト実行
以前テスト実行しているrubyがある場合はCtrl-Cで止める。（一度ブラウザでF5を押さないと死なない時があるので注意）

で、もう一回起動
>> code bash
$ ruby web.rb
<<

これでindex.erbの中身が表示されるはず。

この段階で本番反映したい場合はさっきと同様にgit add, git commit, git push origin master すれば良い。

!!更に拡張
web.rb部分で 外部のWebAPI （今回はYahooショッピングAPIにした）を呼び出すようにして、その結果をindex.erbで読み取って表示するようにしてみる

web.rb
>> code bash
require 'rubygems'
require 'sinatra'

get '/' do
  require 'open-uri'
  require 'cgi'
  require 'json'
  response = ''
  key = ENV['YAHOO_APP_ID'];
open("http://shopping.yahooapis.jp/ShoppingWebService/V1/json/itemSearch?appid="+key+"&hits=10&image_size=300&query=" + CGI.escape("computer") + "&offset=" + "0"){|fp|
  fp.each{|line|
    response << line
  }
  json = JSON.parser.new(response)
  @items = json.parse();
  }
  erb :index
end
<<

- Gemfile
>> code bash
source :rubygems
gem 'sinatra'
gem 'json'
<<
jsonも追加しないとダメかな？

- views/index.erb
>> code ruby
<% @items["ResultSet"]["0"]["Result"].each do |k,item|%>
<% if item["Name"] then %>
<li><%= item["Name"] %> <img src="<%= item["Image"]["Medium"] %>"></li>
<!--<%= item.inspect %>-->
<% end %>
<% end %>
<<
ちょっとひどいテンプレだけどまぁ勘弁してください
<!-- item.inspect --> はデバッグ用です


Gemfileを編集したので
>> code bash
$ bundle install
<<
を再度実行する
>>
ココは実はあまりよろしくなくて ローカルに入れるようにすべきだった
http://firn.jp/2010/11/09/bundle-install

$ bundle install --path vendor/bundler
みたいなかんじで

<<

web.rbで ENV['YAHOO_APP_ID']としている部分には アプリケーションキーを入れたい。

テスト環境（自分のマシン）と、本番（Heroku）で設定方法が違うので注意

テスト環境に設定する
>> code bash
$ export YAHOO_APP_ID="アプリケーションID"
<<

本番に設定する
>> code bash
$ heroku config:add YAHOO_APP_ID="アプリケーションID"
<<

以前テスト実行しているrubyがある場合はCtrl-Cで止める。（一度ブラウザでF5を押さないと死なない時があるので注意）

で、もう一回起動
>> code bash
$ ruby web.rb
<<

上手く編集できていればYahooショッピングの商品が画面に表示されるはず。

本番に反映する場合は今までと同様にgit add, git commit, git push origin master すれば良い。

!かるくまとめ
今回の方法を使うことで、手元で動作を確認してその結果を本番反映するという正しいステージング環境が構築できるようになった。
デザインを当てるときなどもちゃんと動くアプリケーションに対して作業することでエンジニアによる無意味な結合作業などが減らせ、またデザインの試行錯誤もやりやすくなるのではないかと思う。

もちろんそのためには、スタイルを当てる人もアプリケーションの内部構造を少し理解し、プログラミングの知識も必要となってくる。 このあたりの線引きはなかなか難しそう