• Ruby on Rails

    【twitterアプリ作成記録】アプリケーション作成から、ビュー・コントローラ・ルーティングを理解する

    ProgateのRuby on Railsにて勉強しているtwitterアプリを作成しながらの記録です。

     

    1.Railsアプリケーションの作成

    ターミナルでアプリケーションを作成するコマンド“rails new アプリケーション名”を実行

    $ rails new tweet_app
    すると

          create 

          create  README.md

          create  Rakefile

          create  .ruby-version

          create  config.ru

          create  .gitignore

          create  Gemfile

    Bundle complete! 18 Gemfile dependencies, 79 gems now installed.

    Use bundle info [gemname] to see where a bundled gem is installed.

             run  bundle exec spring binstub –all

    * bin/rake: spring inserted

    * bin/rails: spring inserted

    こんな感じでRails newコマンドを実行するとtweet_appという名前のフォルダが生成され、

    様々なファイルやフォルダが生成されます。

     

    $ cd tweet_app

    “cd(change directory)アプリケーション名”で生成したアプリケーションファイルへ移動します。

     

    2.データベースの作成

    アプリケーションファイルへと移動したら、“bundle exec rake db:create”コマンドでデータベースを作成します。

    $ bundle exec rake db:create

    Created database ‘db/development.sqlite3’

    Created database ‘db/test.sqlite3’

    と表示され、データベースが作成されています。

     

    このデータベースにユーザー情報や投稿内容を保存しブラウザに表示出来るようになります。

     

    ここでいったんサーバーを起動してみましょう。

    ターミナルで新しいタブを立ち上げ(command + t)てサーバーを起動するのがいいかと。

    $ rails s

    rails sのsはserverのs。

    localhost:3000にアクセスし、Railsの初期画面が表示されていればOK。

     

    3.ページを作成していく

    ブラウザにページを表示するためには

    ビュー(view)

      ブラウザに表示される部分

    コントローラ(controller)

      ブラウザにビューを返すためのさまざまな役割を担っている

    ルーティング(routing)

      ブラウザとコントローラをつなぐ役割で、どのコントローラのどの処理を返すのか?を定義している

    この3つが必要です。

     

    4.rails g controller

    “rails g(generate) controller コントローラ名 アクション名”というコマンドを実行すると、

    ページを表示させるのに必要な、コントローラ・ビュー・ルートの他に

    アセット・テスト・ヘルパーというファイルも自動生成されます。

    $ rails g controller  home top

    create app/controllers/home_controller.rb
    route get ‘home/top’
    invoke erb
    create app/views/home
    create app/views/home/top.html.erb
    invoke test_unit
    create test/controllers/home_controller_test.rb
    invoke helper
    create app/helpers/home_helper.rb
    invoke test_unit
    invoke assets
    invoke coffee
    create app/assets/javascripts/home.coffee
    invoke scss
    create app/assets/stylesheets/home.scss

     

    次はブラウザに表示されるビューの確認をしましょう。

     

    5.ビュー

    rails g controller home topを実行したことにより、

    tweet_app/app/viewsの中にtop.html.erbというファイルが生成されました。

    これはlocalhost:3000/home/topにアクセスした時に表示される画面の中身で、

    実際にアクセスしてみると下記のようになります。

    html.erbというファイルのerbとはembedded rubyで”Rubyが埋め込まれた”という意味を持ち、

    Rubyが埋め込まれたHTMLファイルということ。

    記法はHTMLと同様ですが、<% %>,<%= %> というタグを使うとRubyを記述することが出来ます。

     

    トップページの見た目を変更するにはこのファイルを編集します。

     

    5.コントローラ

    上記のようにページが表示されたが、ブラウザにページが表示されるには、

    Railsの中でコントローラを経由しビューが返されているのですが、一体どういうことなのか??

     

    rails g controller home topコマンドにて

    tweet_app/app/controllerにhome_controller.rbというファイルが生成され、

    さらにその中にはtopというメソッドも生成され、このメソッドをアクションと呼びます。

    ブラウザからlocalhost:3000/home/topというURLを受けた時、

    Rails内ではtopというアクションがそのブラウザに表示するビューを探します。

    homeというコントローラ名の中のtopアクションと同じ名前のtop.html.erbというファイルを返しているんですね!

     

    6.ルーティング

    ルーティングはtweet_app/configの中のroutes.rbというファイルの中に生成されました。

    先ほどはURLを受けてRails内でコントローラのアクションが表示させるビューを探す、と言いましたが、

    そのブラウザとコントローラを繋いでいるのでルーティングです。

    ルーディングによって適切なコントローラが呼び出されているのです。

     

    ルーティングはroutes.rbファイルで

    get “URL” => “コントローラ名#アクション名”と定義することが出来ます。

    ここでは

    localhost:3000/home/topというURLに対して

    homeコントローラのtopアクションが返されています。

     

    7.他のページを追加する

    アプリを紹介するABOUTページを作成していきます。

    トップページを生成する時にはrails g controllerコマンドを使用しましたが、

    同じコントローラ名に対し複数回使うことが出来ないので自ら作成・定義していきます。

    トップページを作成した時と同じことをしていきます。

     

    ルーティングを定義

    routes.rbにてURLをaboutとして設定します。

    ※topアクションのURLもhome/topからtopに変更しました。
    これでトップページのURLはlocalhost:3000/topとなりました。

    コントローラにアクション追加

    home_controller.rbにてaboutという名前のメソッドを追加

    ビューの作成

    app/views/home/にabout.html.erbを新規作成
    中身はHTMLで記述でOK。
    これでlocalhost:3000/aboutにアクセスするとabout.html.erbの中身が表示される

    8.レイアウトを整える(CSS)

    rails g controller homeコマンドで自動生成されたassetesの中にstylesheet/home.scssファイルとして存在しています。
    scssはCSSを拡張したものですが、CSS表記でも反映されます。
    画像を表示させるには
    tweet_app/publicに保存しておけば、パスは/画像名として使うことが出来ます。
    必ず/をつけること!
    ※主にRailsについて記録していくので、ここではCSSについて詳しく書きません。

    9.localhost:3000でトップページが表示されるようにする

    アプリケーションでRailsの初期画面が表示されては困るので、
    初期画面でのURL(localhost:3000)でトップ画面が表示されるよう、
    routes.rbのURLの部分を変更します。

     

    ブログに書いてみると結構なボリュームとなりましたが、

    これでひとまずトップページとアバウトページの作成が出来ました。

     

    次は投稿一覧ページの作成と、実際にデータベースにデータを入れて呼び出して表示させることについて

    書いていきます!