この記事を書いた人
machida

今回はfunc09さんが作ったサービス「Happy1000Days!」をローカルで立ち上げるってのに挑戦したいと思います。前回ローカルで立ち上げた「Lokka」はSinatraというRubyのフレームワークで出来ているのですが、今回は名前を聞いたことがあるかもしれない有名なフレームワーク、「Ruby on Rails」で出来ています(フレームワークって何?に関してはまた別の機会に勉強してここで書こうと思います)。

Happy1000Days!

生年月日を入力すると、今日は生まれてから何日目なのか?に加えて生まれてからの日数がゾロ目になる日や、1000日刻みの日数がわかるので10000日めや12345日めがいつ来るのか?など、ちょっと嬉しい誕生日がわかります。

一度登録すると、パーマネントリンクとして保存されるので、TwitterやFacebookに自分や友達の誕生日を共有する、なんてことができます。

Happy 1000 Days というサービスをリリースしました

http://happy1000days.com/

Happy1000Days!って可愛いですよね!実は僕がデザインやってます。デザインプロセスについてなんかについてもKUROIGAMENで書く予定ですのでご期待ください。なんだか技術ブログの様な感じになってきたKUROIGAMENですが、本当はそういうのを書きたかったんですよね。その前に必要な前提が多すぎて、今のところそこまでしか書けてないという状況です。では、早速作業に入りましょう。

Happy1000Days!をgithubからclone

もうお馴染みになってきました、githubからcloneって作業。Happy1000Days!のリポジトリもgithubに置いてあるのでcloneするだけでローカルにソースを持ってこられます。

ココがgithub内のHappy1000Days!のページです。ここに書いてある「git@github.com:func09/Happy1000Days.git」をcloneですね。

$ git clone git@github.com:func09/Happy1000Days.git

git@github.com:func09/Happy1000Days.git」をclone

これでHappy1000Days!のローカルリポジトリが出来ました。

bundle install

では、次に「cd」で「Happy1000Days」ディレクトに移動して、Lokkaのときにもやった、「bundle install」をやります。Happy1000Daysも必要なgemをbundlerでまとめてインストール出来るようにしておいてくれてるので便利ですね。bundlerがないと、「gem install XXX」って一個一個インストールしなくちゃなんなかったんですよね。bundlerはデザインテロリストにとっては心強い味方。

$ bundle install

 bundle install

続いてサーバーを立ち上げる

さて、とんとんと進んでしまいましたが、次はサーバを立ち上げるって作業。Hppay1000Days!はRailsで出来てるので、railsコマンドにサーバを立ち上げるコマンドがあります。

$ ruby script/server

これでサーバーが立ち上がって、ローカルでHappy1000Days!が見れるようになって完了!ところが…。

ところが…。

今回はすんなり終わったと思いきや、エラーが出てしまいました!

「ruby script/server」ってコマンドはRails2系でサーバを立ち上げるときに使うコマンドなのですが、Happy100Days!はRails3系で作られてるみたい。だから、Happy1000Days!の中のRailsが、「ruby script/server」ってコマンド何?知らないよ、usage(使い方)を見てみなよ、って言ってきたんですね。

Rails3で作られてるってことは、Rubyも最新のじゃないと動かないんじゃ…と、思ったらそれは要らぬ心配でした。Happy1000Days!はRubyのバージョンは1.8系でもRuby1.9系でも動きます。

何故こんな心配をしたのかと言うと、Xcodeで入ったRubyのバージョンは1.8系なのですが、Ruby1.9系でないと動かないアプリも中にはあって、じゃあRubyのバージョンを上げたらいいんじゃなくて?と、ここが単純な話じゃないからです。

Rubyの1.8系と1.9系は場合によっては結構別ものらしくって、1.8系じゃなきゃ動かないものもたくさんあり、1.8を捨てて1.9にしてしまうのはこれはこれで今後面倒なことになるようです。だったら、1.8と1.9を同居させて、立ち上げるアプリごとに使うRubyを指定できるようなものがあったらいいのに…。

あるんですよ、そういうものが!その名も「RVM」。Ruby Version Managerの略です。せっかくRVMの話が出てきたので、今回はHappy1000Days!を立ち上げるついでに、RVMもインストールしてしまいたいと思います。今回のテーマはRVMをインストールしてRuby1.9系でHappy1000Days!をローカルで立ち上げる(別に1.8系でも動くんだけどね)、ってことにします。

裏話

「Happy1000Days!」は何故か僕が勝手にRuby1.9系でないと動かないアプリだと思い込んでいて、これはRVMに挑戦するのにいい課題だ、と、今回の記事を書き始めたのですが、途中でRuby1.8系でも動くことに気付き、途中から大幅に記事内容を修正ました。そんな理由で今回は「RVMをインストールしてRuby1.9系でHappy1000Days!をローカルで立ち上げる(別に1.8系でも動くんだけどね)」という、歪なテーマになってしまいました。

あと、現在同居してる妹の旦那が今この記事を書くときのテスト環境としてしか使ってない僕のMacを欲しがってて、RVMさえインストールしてしまえばこのMacは用済みになって妹の旦那を黙らせることが出来るので早くRVMを終わらせたい、ってのもあります。

RVMをインストール

やり方はRVMのサイトに書いてあります(英語ですが…)。まず打つのはこのコマンド。

$ bash < <( curl http://rvm.beginrescueend.com/releases/rvm-install-head )

以前Homebrewをインストールしたときにも出てきた「curl」を使ったインストールですね。このインストールはgitが必要なので要gitです。まぁ、これを読んでるデザイナーの方はさんざんgitを使ってるので言うまでないですね。

curl」を使ったインストール

はい、うまくいきました。ガーっと英語が出てきて怖い感じですね。出てきた英語から大事そうなところ抜き出してみましょう。

  You must now complete the install by loading RVM in new shells.

1) Place the folowing line at the end of your shell's loading files
(.bashrc or .bash_profile for bash and .zshrc for zsh),
after all PATH/variable settings:

[[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm" # This loads RVM into a shell session.

You only need to add this line the first time you install rvm.

さて、まずはこの部分から。英語を読んでみると、黒い画面に「bash」を使ってる人は「.bashrc 」もしくは「 .bash_profile」に、「zsh」を使ってる人は「.zshrc」に、

 [[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm"  # This loads RVM into a shell session.

を書きこんでね。と言ってますね。KUROIGAMENを読んでくれてるデザイナーの方はMac OS Xのデフォルト黒い画面のShellである「bash」を使っているので(Shellに関しても後日解説しますが、他に「zsh」というのもあるそうです)、「.bashrc 」もしくは「.bash_profile」に書きこめばいい、という訳ですね。やってみましょう。

では、今回は「.bash_profile」に書きこんでみます。「.bash_profile」はどこかしら?と、調べてみたら「Users」の下の自分のユーザーホームディレクトリにあるそうです。…が、ない!

ないなら作ってしまえ、ということで作りました(今回はCodEditorを使用)。

ないなら作ってしまえ

    2) Ensure that there is no 'return' from inside the ~/.bashrc file,
otherwise rvm may be prevented from working properly.

次は、「.bashrc」に「return」があったらrvmがちゃんと動かないよ、という注意ですが、そもそも「.bashrc」自体がなかったんだから関係なし。飛ばします。

  3) CLOSE THIS SHELL and open a new one in order to use rvm.

最後に新しく黒い画面を開いたらrvmが使えるようになりますよ。って言ってますね。これでRVMの設定は完了です。

では、ちゃんとrvmが使えるようになったか試してみます。

rvm usage

ってコマンドを打って、rvmのusage(使い方)が表示されるか見てみましょう。

rvmのusage(使い方)

出ました!

RVMを使ってRuby1.9.2をインストール

無事にRVMがインストールされたところで、Ruby1.9系のインストールの作業に入ります。RVMを使ったRubyのインストールのコマンドは、

rvm install XXXX

これ。XXXXのところにインストールしたいバージョンが入ります。調べてみると、今のRuby1.9系の最新版は1.9.2なので、

rvm install 1.9.2

と、打ちます。

rvm install 1.9.2

結構時間がかかりましたが無事に入ったみたい。

続いて、今入れたRuby1.9.2を使うっていうコマンド。

$ rvm use 1.9.2

これでRuby1.9.2を使う設定が完了しました。

bundlerのインストールからやり直し。

RVMを入れたあと、またgem install bundlerをやります。

$ gem install bundler

なんでまたbundlerを入れなくちゃなんないの?

RVMには複数のRubyを使い分けるだけじゃなくて、Gemの使い分けも出来るという機能も持っているからです。Ruby1.9.2のときは、このディレクトリの中に入ってるGemを使って、Ruby1.8.7のときは、こっちのディレクトリのGemを使う…という風に使うRubyによって使うGemが入ったディレクトリを使い分ける機能です。このGemが詰まったディレクトをGemsetと呼びます。今回、RVMインストールして作られたRuby1.9.2用のGemsetにはまだbundlerが入っていないため、今回新たにインストールをしました。

RVMとGemset

「Users/ユーザー名/.rvm/gems/」に行くと、「ruby-1.9.2-p136」というフォルダと「ruby-1.9.2-p136@global」というフォルダが出来てます(細かい数字はインストールしたときによって変わります)。

「ruby-1.9.2-p136」というフォルダと「ruby-1.9.2-p136@global」

では、bundlerはどこに入ったのでしょうか?「ruby-1.9.2-p136」の中の「gems」フォルダを覗くと、

「ruby-1.9.2-p136」の中の「gems」フォルダを覗くと

「bundler-1.0.7」がいました!どうやらrvmで1.9.2を使った場合はこのディレクトリに入ったgemを使うようになってるみたいですね。他に「rake-0.8.7」と「rubygems-update-1.4.2」というのがいますね。この二つは最初から用意されてるGemみたいです。

またbundle install

さっきもやった作業ですが、RVMを入れたため使うGemの場所が変わったので、もう一回「bundle install」をします。まずは「cd」で「Happy1000Days」のディレクトリに移動して、

$ bundle install

を打ってbundle installは完了。これでRuby1.9.2のときに使うGemのディレクトに、Happy1000Days!で必要なGemがインストールされました。

Happy1000Days!で必要なGemがインストールされました

サーバを立ち上げる

では、さっきダメだったサーバを立ち上げましょう。さっきはこのコマンド、

$ ruby script/server

を打ったらエラーが出ました。このコマンドはRailsのバージョン2系でのサーバを立ち上げるコマンドだったみたいで、3系での立ち上げるコマンドは、

$ rails server

もしくは、

$ rails s

…だそうです。バージョンが上がるとこういうコマンドの書き方も変わるってことが黒い画面の世界ではありえるので要注意ですね。それにしても引数が「s」一文字なんて短っ!今後、Rails2系のアプリを立ち上げることもあると思うので、Rails2系のときは「ruby script/server」って打つってことも忘れないでおきましょう。

立ち上がりました!

立ち上がりました!立ち上がったらRailsの場合のローカルのURLは「http://localhost:3000」になります。では、アクセス!

http://localhost:3000

立ち上がってるけど、エラーが出てる!でも、サーバが立ち上がるところまで行ったんだからあと少しでHappy1000Days!がローカルで見れるはず。

rake db:reset

ブラウザに表示されたエラーメッセージを見ると、

Could not find table 'birthdays'

…と出ています。「birthdays」のテーブルが見つかんねーよ、って言ってますね。テーブルと言えばデータベース。DBに何かをやる必要がありそう。

調べたところ、「rake db:reset」というコマンドをやるみたい。rakeとは、さっきGemsetを覗いたときに最初から入ってたGemですね。これがDBに何かをするときにやってくれるやつのようです。

「rake db:reset」とは、「rake db:drop」、「rake db:create」、「rake db:schema:load」っていう手順を一発でやってくれるコマンドのようで、それぞれは、

  1. 「rake db:drop」…DBを消す
  2. 「rake db:create」…DBを作る
  3. 「rake db:schema:load」…DBの中身に入れる

ってことをします。最初のまだ何もなかったDBにデータを入れる必要があったんですね。まだ何もなかったから、「birthdays」のテーブルが見つかんねーよ、っていうエラーが出てたみたいです。では、やってみましょう。まずは「control + c」を押してサーバを一旦止めて、

$ rake db:reset

rake db:reset

うまくいったようです。

では、もう一回サーバを立ち上げ。

$ rails s

http://localhost:3000」にアクセス!

ついに立ち上がりました!

ついに立ち上がりました!

ちなみに、「Happy1000Days!」のデザインを変えるのは「app/views」の中をいじるとHTMLを変更できて、「public」の中の「stylesheets」や「images」、「javascripts」を変えるとcssや画像を変えられます。まぁ、この辺も追々ここで解説します。あ、「Happy1000Days!」ってHaml記法で書いてるんだった。Hamlについてもいずれここで。

祝!FoodFoto

func09さんが会社を立ち上げました。美味しそう!を共有するサービスラペコをスマートフォン、海外向けにチューニングした「FoodFoto」という事業で起業です。僕は元々ラペコの大ファン、これは応援するしかない!

自分でWebサービスを作ってたら起業することになりました

追記

mgさんに間違えを見つけていただき、修正しました。ありがとうございます!

$ rails script/server

$ ruby script/server

最新の実績

  • Remember The Wordpress
  • happy1000days
  • happy1000days
  • happy1000days

こちらも合わせてどうぞ

  • webデザイナーの為の「本当は怖くない」“黒い画面”入門

アフィリエイト