Rails Girls アプリ・チュートリアル
Created by Vesa Vänskä, @vesan
まず、Railsがインストールされていることを確認してください。 もしくはこちらのリンクを見てインストールしてください。
ツールを知る
テキストエディタ
Visual Studio Code, Sublime Text, Vim や Emacs は、テキストエディタの例です。コードを書いたりファイルを編集したりすることができます。
ターミナル (Windows の場合はコマンドプロンプト)
rails serverを起動したりコマンドを実行したりするものです。
Webブラウザ (Firefox, Safari, Chrome)
アプリケーションを表示するためのものです。
1.アプリケーションを作る
railsgirls という名前の Rails アプリを作っていきます。
まず、Terminal を開いてください。
- macOS: Spotlightで Terminal と入力して出てきた Terminal をクリックしてください。
- Windows(WSLの方向け): スタートメニューをクリックして、すべてのプログラムから Ubuntu を探し、クリックしてください。(みつからない場合は、「プログラムとファイルの検索」へ Ubuntu を入力し検索してください。)
- WSL上の
/mnt/c
ディレクトリは、Windows上のCドライブ
にあたります。/mnt/c に移動してから以降のコマンドを入力してください。
- WSL上の
- Windows(WSLが使えない方向け): スタートメニューをクリックして、すべてのプログラムから Rubyx.x.x-x64 with MSYS2 を探し、Start Command Prompt with Rubyをクリックしてください。(みつからない場合は、「プログラムとファイルの検索」へ Start Command Prompt with Ruby を入力し検索してください。)
- Linux (Ubuntu/Fedora): Dashホームで Terminal を探して、Terminal をクリックしてください。
- クラウドサービス(Nitrousなど): 作成したアカウントでログインし、box が起動した状態で IDE 画面へ移動します。(詳細は インストール・レシピ を参照してください。) ターミナルはブラウザの下部に表示されます。
そして、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’ を選んでください。詳細は インストール・レシピ を参照してください。)
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", "data-turbo-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 2022
</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に変更を加えることもできます。
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) do |form| %>
上記のコードを、以下のように変更してみてください。
<%= form_with(model: idea, html: {multipart: true}) do |form| %>
画像をアップロードするとわかりますが、これだけでは見栄えのいいものではありません。ファイルのpathだけを表示してるので、これもいじってみましょう。
app/views/ideas/_idea.html.erb
(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’ を加えてアクセスして) 作成したページを確認してみましょう。
次は?
- HTML や CSS を使ってデザインを追加しましょう。
- アイデアの素晴らしさ評価値の項目を追加しましょう。
- CoffeeScript (or JavaScript) を使って動きをつけてみましょう。
- 写真のロードを早くするために、適切な写真のリサイズ機能を追加しましょう。
その他の手引き
- Guide 0: Handy cheatsheet for Ruby, Rails, console etc.
- Guide 1: Add commenting by Janika Liiv
- Guide 2: Put your app online with Heroku by Terence Lee / Put your app online with OpenShift by Katie Miller / Put your app online with Shelly Cloud / Put your app online with anynines / Put your app online with Trucker.io
- Guide 3: Create thumbnail images for the uploads by Miha Filej
- Guide 4: Add design using HTML & CSS by Alex Liao
- Guide 5: Add Authentication (user accounts) with Devise by Piotr Steininger
- Guide 6: Adding profile pictures with Gravatar
- Guide 7: Test your app with RSpec
- Guide 8: Continuous Deployment with Travis-CI / Continuous Deployment with Codeship
- Guide 9: Go through additional explanations for the App by Lucy Bain
- Guide 10: Adding a back-end with Active Admin