読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

文系プログラマーがRailsでロシア語アプリケーションをつくる①

Rails

どうも!chuckです!

えっと、今RubyOnRailsチュートリアルやってます。現在2周目で9章に差し掛かったところなんですが、

 

意味わからん\(^o^)/オワタ

 

な感じです。

 

ただし、2周目が全く無意味だったかといえばそんなことはなく、前半はとてもよく理解できました!

というわけで難しいことよりも、今は少しずつRailsでできることを増やしていこうと思います。

 

さっそく静的なページを作ってので、メモ。

 

 

まず環境を作る。

いやあ、1から作るってやっぱりドキドキしますねヽ(´Д`;)ノ

rails newする時のドキドキっていったらなかったです笑

※念のため、Railsチュートリアルと同様、バージョン4.0.5でnewしました(やり方はこちら

 

f:id:chuck0523:20150711195030p:plain

rails newによって自動生成されるファイルたち)

 

さて、さっそく Railsサーバを立ち上げてみます。

f:id:chuck0523:20150711195058p:plain

安心のWelcome画面。

ひとまず今回の環境設定はこれだけ。Railsチュートリアルの3章あたりを参考に、静的ページを作っていきます。

 

rails generate

まず、generate コマンドでファイルを自動生成させます。

長期的にはロシア語の単語帳を作りたいと思っているので、以下のような名前になりました。

rails generate controller RussianWords home words --no-test-framework

f:id:chuck0523:20150711200041p:plain

 

とりあえず今回はhome画面とword(単語一覧)画面だけを作成。

※末尾の--noe-test〜はRSpecを使用しない時に記述するものらしい(たしか)

 

ビューの作成

えっと、自動生成されたhtmlファイルが2つある。home.html.erbの方にホーム画面のHTMLを、words.html.erbの方に単語一覧のHTMLを書けばいいのか!

 

f:id:chuck0523:20150711200259p:plain

これがデフォルトのHTML。すこしだけ書き換えておく。

f:id:chuck0523:20150711200436p:plain

 

これをまずは表示させたい。えっと、次にやることってなんだっけ。ルーティングとかいう作業が必要だったような…。

 

ルーティングの設定

そうそう。やっぱりルーティングだ。そしてこういう設定関連はconfig/に入っているんだ。Rails初心者にとってディレクトリを覚えておくことって大事かも!

ただ、今回はgenerateの際にまとめて作成されたから?すでにルーティングは記述されていた。

f:id:chuck0523:20150711200827p:plain

 

あれ、じゃあもうこれってブラウザで見れるの??(´ω`)

 

見れた

f:id:chuck0523:20150711201222p:plain

http://0.0.0.0:3000//russian_words/home にアクセスしたら見れた。

え、カンタンすぎない???Railsすごい!(既にチュートリアルでやっているはずなのに改めて感動)

ちなみに、単語画面がこちら。

f:id:chuck0523:20150711201245p:plain

 

リンクさせよう

当たり前だけど、Webサイトなので行ったり来たりしたいです。リンクで結びます。

f:id:chuck0523:20150711201442p:plain

えっと、aタグ使えるよね??ヽ(´Д`;)ノ

 

f:id:chuck0523:20150711201645p:plain

おっ、リンクが出た!行けそう!クリック!

 

f:id:chuck0523:20150711201601p:plain

いけた!!!ホームにも戻ろう!クリック!

 

f:id:chuck0523:20150711201645p:plain

戻れた!!(Railsが未知すぎて当たり前のことで感動)

 

 

ちょっとだけ装飾

フロントエンドのコーディングが好きな自分としては、このビジュアルは許せん!ヽ(`Д´#)ノ

ということで、休憩も兼ねてCSSを充てます。

 

たしか、チュートリアルによると、RailsCSSファイルはもう自動生成されてるはず…

あった!

f:id:chuck0523:20150711202021p:plain

app/assets/stylesheets/ にありました。

しかもSCSS!やったねヽ(=´▽`=)ノ

 

 

こんな仕上がりになりました♪ 

f:id:chuck0523:20150711210027p:plain

 

ちなみに、エラーがあると親切に教えてくれるRailsサーバ。

f:id:chuck0523:20150711210115p:plain

 

 

少しだけ動的にしてみる

さて、現状だとHOME画面とWORDS画面でHTMLタグが若干カブっています。そんなときに使うのが埋め込みRubyレイアウトファイル

 

Home画面。

f:id:chuck0523:20150711210749p:plain

 

Words画面。

f:id:chuck0523:20150711210759p:plain

HeaderとMainタグがかぶっていますね。

 

これを共通のレイアウトファイルであるapplication.html.erbに移植します。

f:id:chuck0523:20150711210953p:plain

 

これで各々のHTMLファイルがすっきりしましたヽ(=´▽`=)ノ

Home画面。

f:id:chuck0523:20150711211044p:plain

 

Words画面。

f:id:chuck0523:20150711211058p:plain

 

便利だなあ…

 

まとめ的な

Railsチュートリアルを1.5周したはずなんですが、実際に自分で作ってみると色々とうろ覚えでした。でも、逆に言えばようやくRailsと真剣に向き合い始めた感じがします。やっぱり自分で作ってみないと頭に入ってこないですよね(;・∀・)

というわけで、今回からスタートしたロシア語単語帳アプリ計画は、楽しくもあり勉強にもなりそうです。のんびりとマイペースで作っていきますので、よろしくお願いしますm(_ _)m

 

参考にしたサイト様

www.tam-tam.co.jp

「SCSS 入れ子」で検索。SCSSは書いたり書かなかったりするので、書き方を忘れてしまいましたヽ(´Д`;)ノ笑