Rails Girls Guides

Rails Girls アプリ・チュートリアル

Created by Vesa Vänskä, @vesan

まず、Railsがインストールされていることを確認してください。 もしくはこちらのリンクを見てインストールしてください。

ツールを知る

  テキストエディタ

Atom, Sublime Text, Vim や Emacs は、テキストエディタの例です。コードを書いたりファイルを編集したりすることができます。

  ターミナル (Windows の場合はコマンドプロンプト)

rails serverを起動したりコマンドを実行したりするものです。

  Webブラウザ (Firefox, Safari, Chrome)

アプリケーションを表示するためのものです。

1.アプリケーションを作る

railsgirls という名前の Rails アプリを作っていきます。

まず、Terminal を開いてください。

そして、Terminal上で次のコマンドを入力します:

mkdir projects
cd projects
rails new railsgirls
cd railsgirls
rails server

自分のパソコン上のブラウザで http://localhost:3000 にアクセスしてください。(Nitorous.IOなどのクラウドサービスの場合は、rails server -b 0.0.0.0を実行してサーバを起動し直した後でURLをアドレス欄に入力する代わりに、メニューから ‘preview’ - ‘port 3000’ を選んでください。詳細は インストール・レシピ を参照してください。)

“Yay! You’re on Rails!” の画面が表示されれば、さきほど作ったアプリは正しく動作しています。

Terminal 上で CTRL-C（CTRL(Control)キーとCを同時に押す)を実行してサーバを終了します。(WindowsでCTRL-Cで終了しない場合は、CTRL-PAUSEを試してください。)

Coachより: それぞれのコマンドが何なのか説明してみましょう。何が生成されましたか？そしてサーバーは何をしますか？

2.Idea の scaffold をする

Rails の scaffold 機能を使って、list, add, remove, edit, view を生成します。これが Rails アプリの最初の一歩です。 ここでは ideas という名前で作ります。

Coachより: scaffold とはなんでしょう？ (コマンドの説明をしてください。1. ただのコマンド, 2. モデル名でDBテーブルと関係があるもの;命名規約, 3. 属性や型) また、migration 機能が何で、なぜ必要なのか。

rails generate scaffold idea name:string description:text picture:string

scaffold は新しいファイルをプロジェクトのディレクトリに追加しますが、意図したように動作させるためには以下の 2 つのコマンドを実行してデータベースの更新と Rails server プロセスをリスタートする必要があります。

rails db:migrate
rails server

ブラウザで http://localhost:3000/ideas にアクセスしてください。(Nitrous のようなクラウドサービスの場合は、rails server -b 0.0.0.0を実行してサーバを起動し直してメニューから ‘preview’ - ‘port 3000’ を選び、アドレス欄の末尾に ‘/ideas’ を加えてアクセスしてください。詳細は インストール・レシピ を参照してください。)

いろいろクリックしてみたりしたら、 CTRL-C を押して、サーバを終了します。(WindowsでCTRL-Cで終了しない場合は、CTRL-PAUSEを試してください。)

3.デザインする

Coachより: HTML と Railsの関係について話してみましょう。views のどの部分が HTML で、どこが Embedded Ruby (ERB)ですか？どうやってこれらが MVC (モデルとコントローラが、動的に HTML や views を生成するロジックを管理しているもの) と関連づけられていますか？

そのままのデザインはイケてないので、何かやってみましょう。Twitter Bootstrapフレームワークを使うと、ホント簡単に、いい感じのスタイルに変えられます。

テキストエディタで app/views/layouts/application.html.erb (Windowsの場合 app¥views¥layouts¥application.html.erb) を開くと、次の行があります。

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

この1行前に次のタグを追記してください。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

そして、この部分、

<%= yield %>

これを次のように置き換えてください。

<div class="container">
  <%= yield %>
</div>

次に、ナビゲーションバーとフッターをレイアウトに追加してみましょう。同じファイルの<body>の直後に以下を追加してください。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">The Idea app</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/ideas">Ideas</a></li>
      </ul>
    </div>
  </div>
</nav>

さらに、</body> の直前に以下を追加してください。

<footer>
  <div class="container">
    Rails Girls 2020
  </div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

ここで、ideasの表のスタイルも変更してみましょう。app/assets/stylesheets/application.css を開いて、コードの一番下に次のcssを追加しましょう。

body { padding-top: 100px; }
footer { margin-top: 100px; }
table, td, th { vertical-align: middle; border: none; }
th { border-bottom: 1px solid #DDD; }

ファイルがきちんと保存されたことを確認して、何が変わったのかを見るためにブラウザを更新してみましょう。 さらに、HTMLとCSSに変更を加えることもできます。

JavaScriptやCoffeeScriptを実行する環境に問題があるというようなエラーメッセージがTerminalに表示された場合、 nodejsをインストールしてください。 この問題は、RailsInstallerを使っている場合は起こらないはずです。 (ただし、Railsをgem install railsコマンドでインストールしている場合には起こるかもしれません)

Coachより: CSSとレイアウトについてちょっと話をしてください。

4.写真アップロード機能を追加する

Rails にファイルをアップロードする機能を追加するには、ライブラリをインストールする必要があります。

プロジェクトディレクトリ内の Gemfile を開いて、この行

gem 'sqlite3'

の直後に、次の一行を追加します。

gem 'carrierwave'

Coachより: 何のライブラリがあって、なぜ便利なのかを説明してください。オープンソースソフトウェアが何なのかも説明してください。

サーバーを終了するためには、CTRL-Cを押します。

Terminal で、次のコマンドを実行してください:

bundle

そうすると、次のコマンドでアップロードを実行するコードを生成できます:

rails generate uploader Picture

それでは、Railsのサーバーを起動してみましょう。

ノート: 人によっては、コマンドを入力する用のTerminalとは別のTerminalでRailsのサーバを動かしているかもしれません。 もしそうなら、Railsのサーバープロセスを再起動する必要があります。

app/models/idea.rb を開いて、次の行

class Idea < ApplicationRecord

の直後に、

mount_uploader :picture, PictureUploader

を追加します。さらに、app/views/ideas/_form.html.erb を開いて次のように編集します。

<%= form.text_field :picture %>

  ↓

<%= form.file_field :picture %>

場合によっては、 TypeError: can’t cast ActionDispatch::Http::UploadedFile to string というエラーが起きることもあります。エラーになった場合は、 app/views/ideas/_form.html.erb の

<%= form_with(model: idea, local: true) do |form| %>

上記のコードを、以下のように変更してみてください。

<%= form_with(model: idea, local: true, html: {multipart: true}) do |form| %>

画像をアップロードするとわかりますが、これだけでは見栄えのいいものではありません。ファイルのpathだけを表示してるので、これもいじってみましょう。

app/views/ideas/show.html.erb を開いて編集します。

<%= @idea.picture %>

  ↓

<%= image_tag(@idea.picture_url, width: 600) if @idea.picture.present? %>

Coachより: HTML についてちょっと話してください。

5.routes を調整する

http://localhost:3000 を開いてみてください(クラウドサービスの場合は preview してください)。まだデフォルトページが見えると思います。ideas ページにリダイレクトするようにしましょう。

config/routes.rb を開いて、最初の行の次に以下のコードを追記してください:

root to: redirect('/ideas')

ルートパス(http://localhost:3000/ またはクラウドサービスの場合は preview )をブラウザで表示して変更点を確認しましょう。

Coachより: routes について話してください。

アプリにページを追加する

アプリに開発者(あなたです！)の情報を表示できるようにページを追加してみましょう。

rails generate controller pages info

このコマンドはプロジェクトの app/views 以下に /pages へのアクセスに対応するための新しいディレクトリを追加します。そこに info.html.erb という名前のあなたの情報のためのページが作られます。

また、以下のシンプルなルーティングも routes.rb に追加されます。

get "pages/info"

それでは、プロジェクトの app/views/pages/info.html.erb をテキストエディタで開いてあなたの情報を HTML で追記しましょう。その後はブラウザで http://localhost:3000/pages/info を開いて(またはクラウドサービスでは preview してアドレス欄の末尾に ‘/pages/info’ を加えてアクセスして) 作成したページを確認してみましょう。

次は？

その他の手引き