Ruby on Rails実践講座 - Twitterの簡易クローンを開発する
Twitterの簡易クローンを作りながら、Railsの基本を学習します。
開始する
目次
1 開発するアプリの仕様を理解する
所要時間：未設定
ここでは、Twitterの簡易クローンを開発します。実際に開発を始める前に、開発するアプリの仕様を確認します。プログラムを書きはじめる前段階として最低限なにを確認しておくべきなのかを見ていきます。最終的な完成形のイメージがないまま開発をはじめるとなかなか完成しません。どんな形であれ、完成形を具体的にイメージすることから開発をはじめることをオススメします(プログラムを書く前にアプリの完成形のイメージがある程度あるべきです)。
ざっくり要件と機能を定義する
* ユーザーは、メールアドレスで会員登録できること
* ユーザーは、140文字以内で「つぶやき」を投稿できること
* ユーザーは、他のユーザーをフォロー登録し、フォロワーのみの「つぶやき一覧」を表示できること
* ユーザーは、「つぶやき」をお気に入り登録できること
とりあえず、最低限このぐらい要件は満たします。細かく「要件定義」をしたり、「機能定義」をすることも可能ですが、箇条書きには限界があるので、詳細な仕様の定義は次の「簡易的な仕様としての図」に譲りましょう。
* ユーザーは、140文字以内で「つぶやき」を投稿できること
* ユーザーは、他のユーザーをフォロー登録し、フォロワーのみの「つぶやき一覧」を表示できること
* ユーザーは、「つぶやき」をお気に入り登録できること
とりあえず、最低限このぐらい要件は満たします。細かく「要件定義」をしたり、「機能定義」をすることも可能ですが、箇条書きには限界があるので、詳細な仕様の定義は次の「簡易的な仕様としての図」に譲りましょう。
「簡易的な仕様としての図」を作成する
* ユーザーの見た目を定義する: 画面構成図 & 画面遷移図
* データの保存方法を定義する: ER図
この2つを書くことで、詳細な仕様の定義をします。
* データの保存方法を定義する: ER図
この2つを書くことで、詳細な仕様の定義をします。
ユーザーの見た目を定義する - 画面構成図 & 画面遷移図
いわゆるUI(User Interface)のデザインです。
ここにあなたのアイデアを詰め込みましょう。
ユーザーの見た目というのはシンプルに利用ケースから考えれば問題ありません。
フォーム(ユーザーがデータを入力する場所)をどの画面に置くのか考えればいいのです。
画面構成図とは、1画面の見た目です。
画面遷移図とは、画面と画面の移動フローです。
溢れるばかりのアイデアがあるのなら、画面構成図をさくっと作成できるでしょう。次に、数枚の画面構成図を並べて、画面をどのように移動するかを考えましょう。この作業はアイデアやインスピレーションが必要です。
画面構成図の作成は、デザインソフトなどを利用すると作業が捗ります。私はOmniGraffleを使っていますが、デザイナーの人はIllustratorやPhotoshopを使っている人が多いのではないかと思います。また、PowerPointやKeynoteなどのプレゼンテーションソフトでも簡単なものなら作成できるはずです。
OmniGraffle - The Omni Group https://www.omnigroup.com/omnigraffle
ここにあなたのアイデアを詰め込みましょう。
ユーザーの見た目というのはシンプルに利用ケースから考えれば問題ありません。
フォーム(ユーザーがデータを入力する場所)をどの画面に置くのか考えればいいのです。
画面構成図とは、1画面の見た目です。
画面遷移図とは、画面と画面の移動フローです。
溢れるばかりのアイデアがあるのなら、画面構成図をさくっと作成できるでしょう。次に、数枚の画面構成図を並べて、画面をどのように移動するかを考えましょう。この作業はアイデアやインスピレーションが必要です。
画面構成図の作成は、デザインソフトなどを利用すると作業が捗ります。私はOmniGraffleを使っていますが、デザイナーの人はIllustratorやPhotoshopを使っている人が多いのではないかと思います。また、PowerPointやKeynoteなどのプレゼンテーションソフトでも簡単なものなら作成できるはずです。
OmniGraffle - The Omni Group https://www.omnigroup.com/omnigraffle
画面構成図 - Tweets#index(つぶやき一覧)
出典: アップロードされた画像
今回の画面数は10です。
画面遷移図（画面一覧）
出典: アップロードされた画像
データの保存方法を定義する - ER図
どのデータを、どのように「入力」し、どのように「保存」し、どのように「表示」するのか。 また、どのように「編集」し、どのように「削除」するのか。 データの「ライフサイクル」は設計できているか。
出典: 不明
データの保存方法というのも別に難しい話しではない。
Excelと同じで、表(Table)がある。そこにヘッダー(もしくはカラム)がある。
Excelと同じで、表(Table)がある。そこにヘッダー(もしくはカラム)がある。
テーブル（Table）
出典: アップロードされた画像
話しは非常にシンプルです。
ユーザーが入力したデータを、どのように表に保存しておくかを考える。
どのようなカラムを用意しておくべきか考える。
ユーザーが入力したデータを、どのように表に保存しておくかを考える。
どのようなカラムを用意しておくべきか考える。
フォームに入力して保存、画面に表示
出典: アップロードされた画像
そのテーブル同士がどのように関連しているかを考える。
例えば、UserテーブルとTweetテーブルがある。
Userテーブルにはユーザーの個人情報が保存されている。
Tweetテーブルにはユーザー投稿した「つぶやき」の内容が保存されている。
ここで、「Aさんのつぶやきを一覧で表示したい」と考えたとする。
そのときに、UserテーブルとTweetテーブルの関連が大切になる。
どのようにUserテーブルとTweetテーブルの関連を定義するべきだろうか?
例えば、UserテーブルとTweetテーブルがある。
Userテーブルにはユーザーの個人情報が保存されている。
Tweetテーブルにはユーザー投稿した「つぶやき」の内容が保存されている。
ここで、「Aさんのつぶやきを一覧で表示したい」と考えたとする。
そのときに、UserテーブルとTweetテーブルの関連が大切になる。
どのようにUserテーブルとTweetテーブルの関連を定義するべきだろうか?
関連を定義する
出典: アップロードされた画像
今回のアプリのテーブルは4枚です。
以下のように関連しています。
以下のように関連しています。
ER図
出典: アップロードされた画像
仕様PDF（※ダウンロードして是非確認してみてください）
こんなにラフでいいのか?
* 要件定義 & 機能定義
* ユーザーの見た目を定義: 画面構成図 & 画面遷移図
* データの保存方法を定義: ER図
ここまでで、ざっくりと仕様を定義しました。当然ですが、もっと詳細に仕様を定義することは可能です。例えば、一つ一つテストケース(メソッドの状態など)を事前に定義していくことも可能でしょう。
しかし、今回のようなWEBアプリ開発でそこまでの事前準備が必要なのかは疑問です。なぜなら、コストゼロで実際のプログラムやテストコードを書くことができるからです。例えば、ハードウェアの設計などコストがかかる場合はもっと詳細に仕様を詰めるべきかもしれませんが、ソフトウェアの場合は実際にプログラムを記述しながら、仕様の調整を行なうことができます。
「簡易的な仕様としての図」の役割は、完成品のイメージを「ざっくりと」具現化することです。仕様書を作ることが目的ではありません。ソフトウェアを作ることが目的です。仕様書のメンテナンスでコストがかかることはできる限り避けるべきです。
また、「簡易的な仕様としての図」には他の役割もあります。一つは溢れ出るアイデアを収束させることです。コードを書いていると、色々とアイデアが浮かんできます。その度に、プログラムやデザインを変更しているとカオスに突入します。また、逆にコードを書きながらアイデアやデザインについて考察することはとても大変なことです。普通の人間はシングルタスクなので、プログラムの構造とアイデアやデザインを同時に考えることは大変なのです。「簡易的な仕様としての図」により、図を書いている時は、アイデアとデザインについて考える。図を書いた後は、プログラムの構造について集中するといった、タスクの分離ができます。私たちは、この分離のことを「問題作成と解答作成」と言っています。アイデアやデザインを図にすることで、「問題文」まで昇華されます。そうすることで、「簡易的な仕様としての図」は「解答するべき問題文」になります。プログラムを書くことは、この問題文に対して解答を作成していく作業になります。これが「簡易的な仕様としての図」の役割の一つです。
もう一つの役割は、チーム開発におけるコミュニケーションコストの削減です。図にすることで、複数人の人間のコミュニケーションを円滑にします。
このように、例えラフだったとして、要所要所を抑えた「簡易的な仕様としての図」は開発において大きな役割を担います。適度な仕様書として利用することをオススメします。
* ユーザーの見た目を定義: 画面構成図 & 画面遷移図
* データの保存方法を定義: ER図
ここまでで、ざっくりと仕様を定義しました。当然ですが、もっと詳細に仕様を定義することは可能です。例えば、一つ一つテストケース(メソッドの状態など)を事前に定義していくことも可能でしょう。
しかし、今回のようなWEBアプリ開発でそこまでの事前準備が必要なのかは疑問です。なぜなら、コストゼロで実際のプログラムやテストコードを書くことができるからです。例えば、ハードウェアの設計などコストがかかる場合はもっと詳細に仕様を詰めるべきかもしれませんが、ソフトウェアの場合は実際にプログラムを記述しながら、仕様の調整を行なうことができます。
「簡易的な仕様としての図」の役割は、完成品のイメージを「ざっくりと」具現化することです。仕様書を作ることが目的ではありません。ソフトウェアを作ることが目的です。仕様書のメンテナンスでコストがかかることはできる限り避けるべきです。
また、「簡易的な仕様としての図」には他の役割もあります。一つは溢れ出るアイデアを収束させることです。コードを書いていると、色々とアイデアが浮かんできます。その度に、プログラムやデザインを変更しているとカオスに突入します。また、逆にコードを書きながらアイデアやデザインについて考察することはとても大変なことです。普通の人間はシングルタスクなので、プログラムの構造とアイデアやデザインを同時に考えることは大変なのです。「簡易的な仕様としての図」により、図を書いている時は、アイデアとデザインについて考える。図を書いた後は、プログラムの構造について集中するといった、タスクの分離ができます。私たちは、この分離のことを「問題作成と解答作成」と言っています。アイデアやデザインを図にすることで、「問題文」まで昇華されます。そうすることで、「簡易的な仕様としての図」は「解答するべき問題文」になります。プログラムを書くことは、この問題文に対して解答を作成していく作業になります。これが「簡易的な仕様としての図」の役割の一つです。
もう一つの役割は、チーム開発におけるコミュニケーションコストの削減です。図にすることで、複数人の人間のコミュニケーションを円滑にします。
このように、例えラフだったとして、要所要所を抑えた「簡易的な仕様としての図」は開発において大きな役割を担います。適度な仕様書として利用することをオススメします。
完成品のリンク
見本URL
完成コード
2 会員登録機能
所要時間：未設定
Railsアプリを新規作成
Console
$ cd ~/workspace
$ rails new tsubuyaki Console
$ cd tsubuyaki 
出典: アップロードされた画像
出典: アップロードされた画像
使うGemをインストールする
今回使うgemをまとめてインストールします。
・sorceryが認証機能
・haml-railsはHTML特化の文法を持つテンプレートエンジン
・bootstrap-sassでCSSフレームワーク
・sorceryが認証機能
・haml-railsはHTML特化の文法を持つテンプレートエンジン
・bootstrap-sassでCSSフレームワーク
| 26 | 26 | # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring |
| 27 | 27 | gem 'spring', group: :development |
| 28 | 28 | |
| 29 | gem 'sorcery' | |
| 30 | gem 'haml-rails' | |
| 31 | gem 'bootstrap-sass' | |
| 32 | ||
| 29 | 33 | # Use ActiveModel has_secure_password |
| 30 | 34 | # gem 'bcrypt', '~> 3.1.7' |
| 31 | 35 | |
| @@ -26,6 +26,10 @@ gem 'sdoc', '~> 0.4.0', group: :doc |
プログラムコードを全て表示
view on GitHubConsole
$ bundle install 
出典: アップロードされた画像
generateされるcssのフォーマットをscssからsassに変更する
今回は、cssの方言に、railsデフォルトのscssではなくて、より簡潔な記述が出来るsassを使って書いていくので、以降生成されるcssファイルをscssではなくsassにするための設定をします
| 19 | 19 | # The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded. |
| 20 | 20 | # config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s] |
| 21 | 21 | # config.i18n.default_locale = :de |
| 22 | ||
| 23 | config.sass.preferred_syntax = :sass | |
| 22 | 24 | end |
| 23 | 25 | end |
| @@ -19,5 +19,7 @@ class Application < Rails::Application |
プログラムコードを全て表示
view on GitHub認証機能のコードを自動で生成する
認証機能のためのコードを自動生成させています。先ほど入れたgemのsorceryの機能を使っています。
Console
$ rails g sorcery:install 
出典: アップロードされた画像
scaffoldでusersを作成する
scaffoldでuser系を生成するのですが、前回のsorcery:installでusersテーブル作成のマイグレーションファイルを作成してしまっているので、--skip-migrationします。また、scaffoldで通常生成されるscaffold.cssというファイルがbootstrapと競合して表示がおかしくなるので今回は不要です。sオプションは、ファイルの生成時に既存だった場合にスキップする、という意味で、今回ではapp/models/user.rbがsorcery:installで生成されており、さらに、authenticates_with_sorcery!メソッドが宣言されているので、上書きしてほしくないのでスキップしました。
Console
$ rails g scaffold user -s --no-stylesheets --skip-migration 
出典: アップロードされた画像
ユーザー名、表示名、プロフィールのカラムを追加する
Console
$ rails g migration add_name_and_screen_name_and_bio_to_users name:string screen_name:string bio:string 
出典: アップロードされた画像
マイグレーションしてデータベース・テーブルを作成する
Console
$ rake db:migrate 
出典: アップロードされた画像
サインアップ用のコントローラーを生成する
サインアップの機能に、registrationsの名前をあてています。新規登録フォーム画面のnewアクションと、それをPOSTメソッドで受け取るcreateアクションを想定していますが、テンプレートを持つ画面はnew飲みなので、newのみ指定しています。
$ rails generate controller registrations new 
出典: アップロードされた画像
Bootstrapを読みこむ
app/assets/stylesheets/application.cssをapplication.css.sassという名前に変更します
| 13 | 13 | *= require_tree . |
| 14 | 14 | *= require_self |
| 15 | 15 | */ |
| 16 | ||
| 17 | @import bootstrap | |
| @@ -13,3 +13,5 @@ |
プログラムコードを全て表示
view on GitHublayoutを変更する
| 6 | 6 | <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> |
| 7 | 7 | <%= csrf_meta_tags %> |
| 8 | 8 | </head> |
| 9 | <body> | |
| 9 | <body id="application"> | |
| 10 | 10 | |
| 11 | <%= yield %> | |
| 11 | <div> | |
| 12 | <%= yield %> | |
| 13 | </div> | |
| 12 | 14 | |
| 13 | 15 | </body> |
| 14 | 16 | </html> |
| @@ -6,9 +6,11 @@ |
プログラムコードを全て表示
view on GitHub
サインアップ機能(新規作成画面)の実装
Routingを実装
| 1 | 1 | Rails.application.routes.draw do |
| 2 | get 'registrations/new' | |
| 2 | resource :registrations, only: [:new, :create] | |
| 3 | 3 | |
| 4 | 4 | # The priority is based upon order of creation: first created -> highest priority. |
| 5 | 5 | # See how all your routes lay out with "rake routes". |
| @@ -1,5 +1,5 @@ |
プログラムコードを全て表示
view on GitHub
出典: アップロードされた画像
Modelを実装
バリデーションは極力早く書くようにしましょう。開発中であってもおかしいレコードがDBに入り込まないように意識することが重要です。
| 1 | 1 | class User < ActiveRecord::Base |
| 2 | 2 | authenticates_with_sorcery! |
| 3 | ||
| 4 | validates :name, presence: true, uniqueness: { case_sensitive: false }, format: { with: /\A[a-z][a-z0-9]+\z/ }, length: { in: 4..24 } | |
| 5 | validates :screen_name, length: { maximum: 140 } | |
| 6 | validates :bio, length: { maximum: 200 } | |
| 7 | validates :email, presence: true, uniqueness: { case_sensitive: false } | |
| 8 | validates :password, confirmation: true, length: { in: 6..24 }, if: :password | |
| 9 | validates :password_confirmation, presence: true, if: :password | |
| 3 | 10 | end |
| @@ -1,3 +1,10 @@ |
プログラムコードを全て表示
view on GitHubControllerを実装
モデルのバリデーション定義が出来たところで、コントローラーとビューを書き進めます。このページは新規会員登録のページです。
| 1 | 1 | class RegistrationsController < ApplicationController |
| 2 | 2 | def new |
| 3 | @user = User.new | |
| 3 | 4 | end |
| 4 | 5 | end |
| @@ -1,4 +1,5 @@ |
プログラムコードを全て表示
view on GitHubViewを実装
| 1 | 1 | %h1 Registrations#new |
| 2 | 2 | %p Find me in app/views/registrations/new.html.haml |
| 3 | ||
| 4 | = form_for @user, url: registrations_path, method: :post do |f| | |
| 5 | = f.label :name | |
| 6 | = f.text_field :name | |
| 7 | = f.label :email | |
| 8 | = f.text_field :email | |
| 9 | = f.label :password | |
| 10 | = f.password_field :password | |
| 11 | = f.label :password_confirmation | |
| 12 | = f.password_field :password_confirmation | |
| 13 | = f.submit | |
| @@ -1,2 +1,13 @@ |
プログラムコードを全て表示
view on GitHub
出典: アップロードされた画像
サインアップ機能(新規登録の実行)の実装
Routing定義
サインアップ後に、トップページを表示するようにしたいので、root toで定義するのですが、まだページがregistrations#newしかないので、とりあえずここではこのページで定義しておいて、Tweet機能ができてタイムラインができてからそれに置き換えたいと思います。
| 1 | 1 | Rails.application.routes.draw do |
| 2 | 2 | resource :registrations, only: [:new, :create] |
| 3 | 3 | |
| 4 | root to: 'registrations#new' | |
| 5 | ||
| 4 | 6 | # The priority is based upon order of creation: first created -> highest priority. |
| 5 | 7 | # See how all your routes lay out with "rake routes". |
| 6 | 8 | |
| @@ -1,6 +1,8 @@ |
プログラムコードを全て表示
view on GitHubController定義
| 2 | 2 | def new |
| 3 | 3 | @user = User.new |
| 4 | 4 | end |
| 5 | ||
| 6 | def create | |
| 7 | @user = User.new(params_user) | |
| 8 | ||
| 9 | if @user.save | |
| 10 | redirect_to root_url | |
| 11 | else | |
| 12 | render :new | |
| 13 | end | |
| 14 | end | |
| 15 | ||
| 16 | private | |
| 17 | ||
| 18 | def params_user | |
| 19 | params.require(:user).permit(:name, :email, :password, :password_confirmation) | |
| 20 | end | |
| 5 | 21 | end |
| @@ -2,4 +2,20 @@ class RegistrationsController < ApplicationController |
プログラムコードを全て表示
view on GitHub登録に失敗した際のエラーメッセージを表示
| 1 | 1 | %h1 Registrations#new |
| 2 | 2 | %p Find me in app/views/registrations/new.html.haml |
| 3 | 3 | |
| 4 | - @user.errors.each do |attr, message| | |
| 5 | .alert.alert-danger= message | |
| 6 | ||
| 4 | 7 | = form_for @user, url: registrations_path, method: :post do |f| |
| 5 | 8 | = f.label :name |
| 6 | 9 | = f.text_field :name |
| @@ -1,6 +1,9 @@ |
プログラムコードを全て表示
view on GitHubデフォルトの言語を日本語に設定する
| 18 | 18 | |
| 19 | 19 | # The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded. |
| 20 | 20 | # config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s] |
| 21 | # config.i18n.default_locale = :de | |
| 21 | config.i18n.default_locale = :ja | |
| 22 | 22 | |
| 23 | 23 | config.sass.preferred_syntax = :sass |
| 24 | 24 | end |
| @@ -18,7 +18,7 @@ class Application < Rails::Application |
プログラムコードを全て表示
view on GitHubconfigフォルダ以下のファイルを書き換えたので、サーバーの再起動が必要です。routes.rbもconfigフォルダに入っていますが、これは特別にサーバーの再起動が不要で済むようになっています。
$ rails s ロケールファイル追加
各言語ごとの文章を定義しておくファイルをロケールファイルと呼びます
以下、このファイルに続けて、先ほど定義したバリデーションに対応するメッセージを定義します。
| 2 | 2 | activerecord: |
| 3 | 3 | errors: |
| 4 | 4 | models: |
| 5 | user: | |
| 6 | attributes: | |
| 7 | name: | |
| 8 | blank: ユーザー名は空ではいけません | |
| 9 | taken: ユーザー名は既に利用されています | |
| 10 | invalid: ユーザー名には半角英数字のみ利用できます | |
| 11 | too_long: ユーザー名は24文字まで利用できます | |
| 12 | too_short: ユーザー名は最短で4文字必要です | |
| 13 | email: | |
| 14 | blank: メールアドレスが空です | |
| 15 | taken: メールアドレスが既に使用済みです | |
| 16 | password: | |
| 17 | blank: パスワードが空です | |
| 18 | too_long: パスワードは24文字以内で利用できます | |
| 19 | too_short: パスワードは6文字以上で利用できます | |
| 20 | password_confirmation: | |
| 21 | blank: 確認用パスワードが空です | |
| 22 | confirmation: 確認用パスワードが一致しません | |
| 23 | bio: | |
| 24 | too_long: プロフィールは200文字以内でなければなりません | |
| @@ -2,3 +2,23 @@ ja: |
プログラムコードを全て表示
view on GitHub参考: 国際化(各国言語対応)とバリデーションエラーメッセージの定義方法について
背景画像のダウンロード
app/assets/images/back.jpg に配置してください
| 1 | !!! | |
| 2 | %html | |
| 3 | %head | |
| 4 | %title Tsubuyaki22Nov | |
| 5 | = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true | |
| 6 | = javascript_include_tag 'application', 'data-turbolinks-track' => true | |
| 7 | = csrf_meta_tags | |
| 8 | %body#registrations | |
| 9 | = yield | |
| @@ -0,0 +1,9 @@ |
プログラムコードを全て表示
view on GitHub| 15 | 15 | */ |
| 16 | 16 | |
| 17 | 17 | @import bootstrap |
| 18 | ||
| 19 | html, body | |
| 20 | width: 100% | |
| 21 | height: 100% | |
| 22 | ||
| 23 | .clear | |
| 24 | clear: both | |
| @@ -15,3 +15,10 @@ |
| 1 | 1 | // Place all the styles related to the registrations controller here. |
| 2 | 2 | // They will automatically be included in application.css. |
| 3 | // You can use Sass here: http://sass-lang.com/ | |
| 3 | // You can use Sass (SCSS) here: http://sass-lang.com/ | |
| 4 | ||
| 5 | #registrations | |
| 6 | background-image: asset-url("back.jpg") | |
| 7 | background-position: center | |
| 8 | background-size: cover | |
| 9 | background-color: transparent | |
| 10 | background-repeat: no-repeat | |
| 11 | background-color: #050911 | |
| 12 | #registrations-new | |
| 13 | width: 100% | |
| 14 | height: 100% | |
| 15 | .left-content | |
| 16 | margin-top: 45px | |
| 17 | padding: 0px 45px | |
| 18 | color: #fff | |
| 19 | h1 | |
| 20 | font-size: 50px | |
| 21 | margin: 0px | |
| 22 | margin-top: 10px | |
| 23 | .ex | |
| 24 | font-size: 18px | |
| 25 | margin: 45px 0px | |
| 26 | .right-content | |
| 27 | padding: 0px 45px | |
| 28 | form | |
| 29 | margin: 45px 0px | |
| 30 | padding: 30px 35px | |
| 31 | border: 1px solid #fff | |
| 32 | border-radius: 6px | |
| 33 | background-color: rgba(0, 0, 0, 0.3) | |
| 34 | color: #fff | |
| 35 | h2 | |
| 36 | margin: 0px 0px 20px 0px | |
| 37 | border-bottom: 1px solid rgba(255, 255, 255, 0.5) | |
| 38 | padding-bottom: 10px | |
| 39 | font-size: 20px | |
| 40 | .control-label | |
| 41 | font-weight: 400 | |
| 42 | .btn | |
| 43 | width: 100% | |
| 44 | padding: 12px | |
| 45 | margin-top: 10px | |
| 46 | margin-bottom: 10px | |
| 47 | font-size: 16px | |
| @@ -1,3 +1,47 @@ |
| 1 | %h1 Registrations#new | |
| 2 | %p Find me in app/views/registrations/new.html.haml | |
| 3 | ||
| 4 | - @user.errors.each do |attr, message| | |
| 5 | .alert.alert-danger= message | |
| 6 | ||
| 7 | = form_for @user, url: registrations_path, method: :post do |f| | |
| 8 | = f.label :name | |
| 9 | = f.text_field :name | |
| 10 | = f.label :email | |
| 11 | = f.text_field :email | |
| 12 | = f.label :password | |
| 13 | = f.password_field :password | |
| 14 | = f.label :password_confirmation | |
| 15 | = f.password_field :password_confirmation | |
| 16 | = f.submit | |
| 1 | #registrations-new | |
| 2 | .col-xs-6.left-content | |
| 3 | %h1 #Tsubuyaki | |
| 4 | %p.ex | |
| 5 | このサイトは、シラバスのRails学習コースの完成形サンプルアプリです。Microsoft Azure上で運用されています。 | |
| 6 | %p.by | |
| 7 | 開発者: @ohataken デザイン: @keito0904 企画: @saiwaki14 | |
| 8 | .col-xs-6.right-content | |
| 9 | = form_for @user, url: registrations_path, method: :post do |f| | |
| 10 | %h2 | |
| 11 | 会員登録する | |
| 12 | - @user.errors.each do |attr, message| | |
| 13 | .alert.alert-danger= message | |
| 14 | .form-group | |
| 15 | = f.label :name, "ユーザーID: @cyllabus_jp", class: "control-label" | |
| 16 | = f.text_field :name, class: "form-control" | |
| 17 | .form-group | |
| 18 | = f.label :email,"メールアドレス: hello@cyllabus.jp", class: "control-label" | |
| 19 | = f.text_field :email, class: "form-control" | |
| 20 | .form-group | |
| 21 | = f.label :password, "パスワード: 6文字以上", class: "control-label" | |
| 22 | = f.password_field :password, class: "form-control" | |
| 23 | .form-group | |
| 24 | = f.label :password_confirmation, "確認用パスワード: 6文字以上", class: "control-label" | |
| 25 | = f.password_field :password_confirmation, class: "form-control" | |
| 26 | = f.submit "登録する", class: "btn btn-primary" | |
| 27 | .clear | |
| @@ -1,16 +1,27 @@ |
プログラムコードを全て表示
view on GitHub
出典: アップロードされた画像
3 ログイン機能
所要時間：未設定
サインイン機能(ログイン画面)の実装
Webサービスはユーザー名とパスワードを入力する事で本人確認をすることで、自分専用の画面(たとえばタイムラインとか)を見ることができます。また、最後にログインしてから時間が経つと勝手にログアウトしてしまって、再びユーザー名とパスワードの入力を要求される事もあります。
ここでは、ログイン画面をnew, その送信先のアクションをcreate, ログアウトをdestroyという名前で実装していきます。コントローラー名はsessionsという名前にしました。
ここでは、ログイン画面をnew, その送信先のアクションをcreate, ログアウトをdestroyという名前で実装していきます。コントローラー名はsessionsという名前にしました。
$ rails g controller sessions new 
出典: アップロードされた画像
Route定義
| 1 | 1 | Rails.application.routes.draw do |
| 2 | get 'sessions/new' | |
| 3 | ||
| 4 | 2 | resource :registrations, only: [:new, :create] |
| 3 | resource :sessions, only: [:new, :create, :destroy] | |
| 5 | 4 | |
| 6 | 5 | root to: 'registrations#new' |
| 7 | 6 | |
| @@ -1,7 +1,6 @@ |
プログラムコードを全て表示
view on GitHub
出典: アップロードされた画像
ログイン画面へのリンク作成
| 45 | 45 | margin-top: 10px |
| 46 | 46 | margin-bottom: 10px |
| 47 | 47 | font-size: 16px |
| 48 | .login | |
| 49 | color: #fff | |
| 50 | text-decoration: underline | |
| @@ -45,3 +45,6 @@ |
| 24 | 24 | = f.label :password_confirmation, "確認用パスワード: 6文字以上", class: "control-label" |
| 25 | 25 | = f.password_field :password_confirmation, class: "form-control" |
| 26 | 26 | = f.submit "登録する", class: "btn btn-primary" |
| 27 | = link_to "ログインする", new_sessions_path, class: "login pull-right" | |
| 27 | 28 | .clear |
| @@ -24,4 +24,5 @@ |
プログラムコードを全て表示
view on GitHub
出典: アップロードされた画像
Controller(アクション)定義
| 1 | 1 | class SessionsController < ApplicationController |
| 2 | 2 | def new |
| 3 | @user = User.new | |
| 3 | 4 | end |
| 4 | 5 | end |
| @@ -1,4 +1,5 @@ |
プログラムコードを全て表示
view on GitHubView(テンプレート)実装
| 1 | 1 | %h1 Sessions#new |
| 2 | 2 | %p Find me in app/views/sessions/new.html.haml |
| 3 | ||
| 4 | = form_for @user, url: sessions_path, method: :post do |f| | |
| 5 | = f.label :email | |
| 6 | = f.text_field :email | |
| 7 | = f.label :password | |
| 8 | = f.password_field :password | |
| 9 | = f.submit | |
| @@ -1,2 +1,9 @@ |
プログラムコードを全て表示
view on GitHub
出典: アップロードされた画像
ログイン機能(ログイン処理)の実装
| 2 | 2 | def new |
| 3 | 3 | @user = User.new |
| 4 | 4 | end |
| 5 | ||
| 6 | def create | |
| 7 | email = params_user[:email] | |
| 8 | password = params_user[:password] | |
| 9 | ||
| 10 | if login(email, password) | |
| 11 | redirect_to root_url, notice: "successfully logged in." | |
| 12 | else | |
| 13 | @user = User.new(email: email) | |
| 14 | render :new | |
| 15 | end | |
| 16 | end | |
| 17 | ||
| 18 | private | |
| 19 | ||
| 20 | def params_user | |
| 21 | params.require(:user).permit(:email, :password) | |
| 22 | end | |
| 5 | 23 | end |
| @@ -2,4 +2,22 @@ class SessionsController < ApplicationController |
プログラムコードを全て表示
view on GitHubloginメソッドについて
loginメソッドは、認証機能のライブラリであるsorceryをbundle installしたことによって使えるようになったメソッドで、読んで字のごとくログイン処理をしてくれます。
引数はそれぞれ、ユーザーが入力したメールアドレスとパスワードです。メールアドレスとパスワードが合致しなかった場合は、このコードではelse節の方に処理が進みます。
引数はそれぞれ、ユーザーが入力したメールアドレスとパスワードです。メールアドレスとパスワードが合致しなかった場合は、このコードではelse節の方に処理が進みます。
セッションについて
セッションとは「ちょっとしたお手軽データベース」みたいなものです。アクセスしてきたクライアントごとに情報を持たせる事ができるのが特徴です。
ログイン処理をする上では、このセッションを利用することがキモで、前述のloginメソッドは、メールアドレスとパスワードからユーザーを特定するだけではなく、このセッションに「あなた(アクセスしてきたクライアント)のユーザーIDは1234です」というふうに覚えさせているので、ログイン状態を維持できるのです。
ログイン処理をする上では、このセッションを利用することがキモで、前述のloginメソッドは、メールアドレスとパスワードからユーザーを特定するだけではなく、このセッションに「あなた(アクセスしてきたクライアント)のユーザーIDは1234です」というふうに覚えさせているので、ログイン状態を維持できるのです。
セッションの保存先について
セッションはセキュリティ上の理由から、クライアントが自由に読み書きできてはなりません。もしクライアントが自分のセッションの中のユーザーIDを書き換えられてしまっては、任意のユーザーとしてログインできてしまいますから、大変危険です。
したがって、サーバー側にセッション用のデータ置き場を作成して、ユーザーが自由に変更できなくするのが基本です。
したがって、サーバー側にセッション用のデータ置き場を作成して、ユーザーが自由に変更できなくするのが基本です。
クッキーについて
もうひとつセッションの保存先として、クッキーという、ブラウザに搭載された小さいデータベースのような保存場所があります。実はRails 4は標準ではこのクッキーにセッション情報を保存しています。
しかし、クッキーは保存先がクライアント側なので、自由に開いて中身を閲覧する事ができてしまいます。これではセキュリティ的に相当危険なのですが、そこは考えられていて、暗号化した状態で保存するようにしているので、開いて中身を見ることはできるのですが、鍵がなくては意味不明な文字列となっていますし、無理やり書き換えるものなら壊れてしまうように出来ています。保存先はクライアント側なのに、読み書きをさせないようにすることで安全性を保証しています。
もちろんRailsでは、クッキーにセッションを保存する方法ではなく、別のデータベースに保存することも設定を変更する事で可能です。
しかし、クッキーは保存先がクライアント側なので、自由に開いて中身を閲覧する事ができてしまいます。これではセキュリティ的に相当危険なのですが、そこは考えられていて、暗号化した状態で保存するようにしているので、開いて中身を見ることはできるのですが、鍵がなくては意味不明な文字列となっていますし、無理やり書き換えるものなら壊れてしまうように出来ています。保存先はクライアント側なのに、読み書きをさせないようにすることで安全性を保証しています。
もちろんRailsでは、クッキーにセッションを保存する方法ではなく、別のデータベースに保存することも設定を変更する事で可能です。
ログイン失敗時のエラーメッセージ表示
ここのエラーメッセージの表示の仕方は通常とは異なっていて、action_nameつまりアクション名が「create」である場合にメッセージを表示するようにしています。
ログイン画面で入力されるメールアドレスとパスワードのうち、メールアドレスから「どのユーザーとしてログインするのか」が特定できますが、だからといって「〇〇さんですね！パスワードが異なります」というメッセージを出すのでは、手がかりを与えているようなので、ここではどちらが間違っていてもこのようなメッセージを表示することにしています。
ログイン画面で入力されるメールアドレスとパスワードのうち、メールアドレスから「どのユーザーとしてログインするのか」が特定できますが、だからといって「〇〇さんですね！パスワードが異なります」というメッセージを出すのでは、手がかりを与えているようなので、ここではどちらが間違っていてもこのようなメッセージを表示することにしています。
| 1 | 1 | %h1 Sessions#new |
| 2 | 2 | %p Find me in app/views/sessions/new.html.haml |
| 3 | 3 | |
| 4 | - if action_name == "create" | |
| 5 | .alert.alert-danger | |
| 6 | メールアドレスまたはパスワードが正しくありません。 | |
| 7 | ||
| 4 | 8 | = form_for @user, url: sessions_path, method: :post do |f| |
| 5 | 9 | = f.label :email |
| 6 | 10 | = f.text_field :email |
| @@ -1,6 +1,10 @@ |
プログラムコードを全て表示
view on GitHub
出典: アップロードされた画像
View(レイアウト)定義
| 1 | !!! | |
| 2 | %html | |
| 3 | %head | |
| 4 | %title Tsubuyaki18Oct | |
| 5 | = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true | |
| 6 | = javascript_include_tag 'application', 'data-turbolinks-track' => true | |
| 7 | = csrf_meta_tags | |
| 8 | %body#sessions | |
| 9 | = yield | |
| @@ -0,0 +1,9 @@ |
プログラムコードを全て表示
view on GitHubView(テンプレート)定義
| 1 | 1 | // Place all the styles related to the sessions controller here. |
| 2 | 2 | // They will automatically be included in application.css. |
| 3 | // You can use Sass here: http://sass-lang.com/ | |
| 3 | // You can use Sass (SCSS) here: http://sass-lang.com/ | |
| 4 | ||
| 5 | #sessions | |
| 6 | display: table | |
| 7 | widows: 100% | |
| 8 | height: 100% | |
| 9 | background-color: #f5f5f5 | |
| 10 | #sessions-new | |
| 11 | display: table-cell | |
| 12 | vertical-align: middle | |
| 13 | .login-content | |
| 14 | margin: 0 auto | |
| 15 | float: none | |
| 16 | form | |
| 17 | border: 1px solid #ddd | |
| 18 | border-bottom-width: 3px | |
| 19 | border-radius: 6px | |
| 20 | background-color: #fff | |
| 21 | h2 | |
| 22 | margin: 0px | |
| 23 | padding: 12px | |
| 24 | text-align: center | |
| 25 | border-bottom: 2px solid #ddd | |
| 26 | font-size: 18px | |
| 27 | font-weight: 600 | |
| 28 | .form-body | |
| 29 | padding: 25px 30px | |
| 30 | .control-label | |
| 31 | font-weight: 400 | |
| 32 | .btn | |
| 33 | width: 100% | |
| 34 | margin: 10px 0px | |
| 35 | .signup | |
| 36 | text-decoration: underline | |
| @@ -1,3 +1,36 @@ |
| 1 | %h1 Sessions#new | |
| 2 | %p Find me in app/views/sessions/new.html.haml | |
| 3 | ||
| 4 | - if action_name == "create" | |
| 5 | .alert.alert-danger | |
| 6 | メールアドレスまたはパスワードが正しくありません。 | |
| 7 | ||
| 8 | = form_for @user, url: sessions_path, method: :post do |f| | |
| 9 | = f.label :email | |
| 10 | = f.text_field :email | |
| 11 | = f.label :password | |
| 12 | = f.password_field :password | |
| 13 | = f.submit | |
| 1 | #sessions-new | |
| 2 | .col-xs-5.login-content | |
| 3 | - if action_name == "create" | |
| 4 | .alert.alert-danger | |
| 5 | メールアドレスまたはパスワードが正しくありません。 | |
| 6 | = form_for @user, url: sessions_path, method: :post do |f| | |
| 7 | %h2 | |
| 8 | ログイン | |
| 9 | .form-body | |
| 10 | .form-group | |
| 11 | = f.label :email,"メールアドレス：hello@cyllabus.jp", class: "control-label" | |
| 12 | = f.text_field :email, class: "form-control" | |
| 13 | .form-group | |
| 14 | = f.label :password, "パスワード：6文字以上", class: "control-label" | |
| 15 | = f.password_field :password, class: "form-control" | |
| 16 | = f.submit "ログイン", class: "btn btn-success" | |
| 17 | = link_to root_path, class: "pull-right signup" do | |
| 18 | 会員登録する | |
| 19 | .clear | |
| @@ -1,13 +1,19 @@ |
プログラムコードを全て表示
view on GitHub
出典: アップロードされた画像
4 ユーザー一覧とプロフィール
所要時間：未設定
scaffoldコマンドなのでModel, View, Controllerをそれぞれ自動で生成しますが、サインアップ・サインイン機能を作るときにユーザーを表すModelはすでに作成されており、勝手に上書きされては困ります。
-sは生成ファイルの上書きを回避するオプション、--no-stylesheetsはscaffold.css.sassという余計な定義の含まれたcssファイルの生成を回避するオプション、--skip-migrationはマイグレーションファイルの生成を回避するオプションです。これらを指定して、今まで書いたコードが失われないようにしましょう。
-sは生成ファイルの上書きを回避するオプション、--no-stylesheetsはscaffold.css.sassという余計な定義の含まれたcssファイルの生成を回避するオプション、--skip-migrationはマイグレーションファイルの生成を回避するオプションです。これらを指定して、今まで書いたコードが失われないようにしましょう。
$ rails g scaffold user -s --no-stylesheets --skip-migration 
出典: アップロードされた画像
Routing定義
config/routes.rb
resource :registrations, only: [:new, :create]
resource :sessions, only: [:new, :create, :destroy]
resources :users, only: [:index, :show] Controller(アクション)定義
| 1 | 1 | class UsersController < ApplicationController |
| 2 | before_action :set_user, only: [:show, :edit, :update, :destroy] | |
| 3 | ||
| 4 | 2 | # GET /users |
| 5 | 3 | # GET /users.json |
| 6 | 4 | def index |
| @@ -1,6 +1,4 @@ | ||
| 10 | 8 | # GET /users/1 |
| 11 | 9 | # GET /users/1.json |
| 12 | 10 | def show |
| 11 | @user = User.find(params[:id]) | |
| 13 | 12 | end |
| 14 | 13 | end |
| @@ -10,5 +8,6 @@ def index |
プログラムコードを全て表示
view on GitHubUsers#indexのTemplate(View)を書く
%h1 Listing users
%table
%tr
%th
- @users.each do |user|
%tr
%td= link_to user.name, user 
出典: アップロードされた画像
Users#showのTemplate(View)を書く
| 1 | 1 | %p#notice= notice |
| 2 | 2 | |
| 3 | ||
| 4 | = link_to 'Edit', edit_user_path(@user) | |
| 5 | \| | |
| 6 | 3 | = link_to 'Back', users_path |
| @@ -1,6 +1,3 @@ |
プログラムコードを全て表示
view on GitHub
出典: アップロードされた画像
Users#indexを調整する
| 22 | 22 | |
| 23 | 23 | .clear |
| 24 | 24 | clear: both |
| 25 | ||
| 26 | #users-content | |
| 27 | float: none | |
| 28 | margin: 0 auto 35px | |
| 29 | padding: 0px | |
| 30 | background-color: #fff | |
| 31 | border: 1px solid #ddd | |
| 32 | border-radius: 6px | |
| 33 | border-bottom-width: 3px | |
| 34 | .list-group | |
| 35 | margin-bottom: -1px | |
| 36 | .list-group-item | |
| 37 | border: none | |
| 38 | border-bottom: 1px solid #ddd | |
| 39 | margin-bottom: 0px | |
| 40 | &:last-child | |
| 41 | .user | |
| 42 | .user-name | |
| 43 | a | |
| 44 | color: #555 | |
| 45 | .user-id | |
| 46 | font-size: 14px | |
| 47 | color: #aaa | |
| 48 | font-weight: 400 | |
| 49 | .time | |
| 50 | font-size: 12px | |
| 51 | color: #aaa | |
| 52 | font-weight: 400 | |
| 53 | .user-list | |
| 54 | border-bottom-width: 2px | |
| 55 | h2 | |
| 56 | font-size: 20px | |
| 57 | margin: 0px | |
| @@ -22,3 +22,36 @@ html, body |
| 1 | %h1 Listing users | |
| 2 | ||
| 3 | %table | |
| 4 | %tr | |
| 5 | %th | |
| 6 | ||
| 7 | - @users.each do |user| | |
| 8 | %tr | |
| 9 | %td= link_to 'Show', user | |
| 1 | .col-xs-8#users-content | |
| 2 | .list-group | |
| 3 | .list-group-item.user-list | |
| 4 | %h2 ユーザー一覧 | |
| 5 | = div_for @users, class: "list-group-item" do |u| | |
| 6 | %h4.user | |
| 7 | %span.user-name | |
| 8 | = link_to u.name, user_path(u) | |
| 9 | %span.user-id | |
| 10 | @#{u.name} | |
| 11 | .bio | |
| 12 | = u.bio | |
| @@ -1,9 +1,12 @@ |
プログラムコードを全て表示
view on GitHub
出典: アップロードされた画像
Users#showを調整する
| 1 | %p#notice= notice | |
| 2 | ||
| 3 | = link_to 'Back', users_path | |
| 1 | .col-xs-8#users-content | |
| 2 | .user-info | |
| 3 | %span.user-name | |
| 4 | = @user.name | |
| 5 | %span.user-id | |
| 6 | @#{@user.name} | |
| 7 | .bio | |
| 8 | = @user.bio | |
| @@ -1,3 +1,8 @@ |
プログラムコードを全て表示
view on GitHub| 55 | 55 | h2 |
| 56 | 56 | font-size: 20px |
| 57 | 57 | margin: 0px |
| 58 | .user-info | |
| 59 | padding: 20px 35px | |
| 60 | .user-name | |
| 61 | font-size: 28px | |
| 62 | font-weight: 600 | |
| 63 | .user-id | |
| 64 | font-size: 18px | |
| 65 | color: #aaa | |
| 66 | .bio | |
| 67 | margin-top: 5px | |
| 68 | .nav.nav-tabs | |
| 69 | border-top: 1px solid #ddd | |
| 70 | border-bottom: 2px solid #ddd | |
| 71 | li | |
| 72 | a | |
| 73 | border: none | |
| 74 | &:hover | |
| 75 | background-color: #fff | |
| 76 | .text | |
| 77 | .num | |
| 78 | font-size: 28px | |
| @@ -55,3 +55,24 @@ html, body |
プログラムコードを全て表示
view on GitHub
出典: アップロードされた画像
ヘッダーのPartial(View)の書く
| 1 | .navbar.navbar-default | |
| 2 | .container | |
| 3 | .navbar-header | |
| 4 | = link_to '#Tsubuyaki', root_url, class: "navbar-brand" | |
| 5 | - if logged_in? | |
| 6 | %ul.nav.navbar-nav | |
| 7 | %li= link_to "ユーザー一覧", users_path | |
| 8 | %ul.nav.navbar-nav.navbar-right | |
| 9 | %li= link_to current_user.name, current_user | |
| 10 | %li= link_to "ログアウト", sessions_path, method: :delete | |
| 11 | - else | |
| 12 | %ul.nav.navbar-nav.navbar-right | |
| 13 | %li= link_to "会員登録", new_registrations_path | |
| 14 | %li= link_to "ログイン", new_sessions_path | |
| @@ -0,0 +1,14 @@ |
プログラムコードを全て表示
view on GitHub| 9 | 9 | <body id="application"> |
| 10 | 10 | |
| 11 | 11 | <div> |
| 12 | <%= render partial: "layouts/header" %> | |
| 12 | 13 | <%= yield %> |
| 13 | 14 | </div> |
| 14 | 15 | |
| @@ -9,6 +9,7 @@ |
プログラムコードを全て表示
view on GitHub
Users#index
Users#show
Railsの3種類のViewについて - LayoutとTemplateとPartial
・Layout
・Template
・Partial
・Template
・Partial
5 ユーザー設定とログアウト機能
所要時間：未設定
プロフィール設定
Console
$ rails g controller settings edit 
出典: アップロードされた画像
Routingを定義する
| 1 | 1 | Rails.application.routes.draw do |
| 2 | 2 | |
| 3 | get 'settings/edit' | |
| 4 | ||
| 5 | 3 | resource :registrations, only: [:new, :create] |
| 6 | 4 | resource :sessions, only: [:new, :create, :destroy] |
| 5 | resource :settings, only: [:edit, :update] | |
| 7 | 6 | resources :users, only: [:index, :show] |
| 8 | 7 | |
| 9 | 8 | root to: 'registrations#new' |
| @@ -1,9 +1,8 @@ |
プログラムコードを全て表示
view on GitHubControllerを定義する
| 1 | 1 | class SettingsController < ApplicationController |
| 2 | 2 | def edit |
| 3 | @user = current_user | |
| 3 | 4 | end |
| 4 | 5 | end |
| @@ -1,4 +1,5 @@ |
プログラムコードを全て表示
view on GitHub| 2 | 2 | def edit |
| 3 | 3 | @user = current_user |
| 4 | 4 | end |
| 5 | ||
| 6 | def update | |
| 7 | @user = current_user | |
| 8 | @user.update_attributes(params_user) | |
| 9 | redirect_to user_url(@user) | |
| 10 | end | |
| 11 | ||
| 12 | private | |
| 13 | ||
| 14 | def params_user | |
| 15 | params.require(:user).permit(:name, :screen_name, :bio) | |
| 16 | end | |
| 5 | 17 | end |
| @@ -2,4 +2,16 @@ class SettingsController < ApplicationController |
プログラムコードを全て表示
view on GitHubViewを定義する
| 1 | 1 | %h1 Settings#edit |
| 2 | 2 | %p Find me in app/views/settings/edit.html.haml |
| 3 | ||
| 4 | = form_for @user, url: settings_path, method: :put do |f| | |
| 5 | = f.label :name | |
| 6 | = f.text_field :name | |
| 7 | = f.label :screen_name | |
| 8 | = f.text_field :screen_name | |
| 9 | = f.label :bio | |
| 10 | = f.text_area :bio | |
| 11 | = f.submit | |
| @@ -1,2 +1,11 @@ |
プログラムコードを全て表示
view on GitHub| 7 | 7 | %li= link_to "ユーザー一覧", users_path |
| 8 | 8 | %ul.nav.navbar-nav.navbar-right |
| 9 | 9 | %li= link_to current_user.name, current_user |
| 10 | %li= link_to "設定", edit_settings_path | |
| 10 | 11 | %li= link_to "ログアウト", sessions_path, method: :delete |
| 11 | 12 | - else |
| 12 | 13 | %ul.nav.navbar-nav.navbar-right |
| @@ -7,6 +7,7 @@ |
プログラムコードを全て表示
view on GitHub
出典: アップロードされた画像
helperを使う
| 1 | 1 | module UsersHelper |
| 2 | def render_user_screen_name user | |
| 3 | if user.screen_name.blank? | |
| 4 | user.name | |
| 5 | else | |
| 6 | user.screen_name | |
| 7 | end | |
| 8 | end | |
| 2 | 9 | end |
| @@ -1,2 +1,9 @@ |
プログラムコードを全て表示
view on GitHub| 5 | 5 | = div_for @users, class: "list-group-item" do |u| |
| 6 | 6 | %h4.user |
| 7 | 7 | %span.user-name |
| 8 | = link_to u.name, user_path(u) | |
| 8 | = link_to render_user_screen_name(u), user_path(u) | |
| 9 | 9 | %span.user-id |
| 10 | 10 | @#{u.name} |
| 11 | 11 | .bio |
| @@ -5,7 +5,7 @@ |
| 1 | 1 | .col-xs-8#users-content |
| 2 | 2 | .user-info |
| 3 | 3 | %span.user-name |
| 4 | = @user.name | |
| 4 | = render_user_screen_name(@user) | |
| 5 | 5 | %span.user-id |
| 6 | 6 | @#{@user.name} |
| 7 | 7 | .bio |
| @@ -1,7 +1,7 @@ |
プログラムコードを全て表示
view on GitHubSettings#editを調整する
| 1 | %h1 Settings#edit | |
| 2 | %p Find me in app/views/settings/edit.html.haml | |
| 3 | ||
| 4 | = form_for @user, url: settings_path, method: :put do |f| | |
| 5 | = f.label :name | |
| 6 | = f.text_field :name | |
| 7 | = f.label :screen_name | |
| 8 | = f.text_field :screen_name | |
| 9 | = f.label :bio | |
| 10 | = f.text_area :bio | |
| 11 | = f.submit | |
| 1 | #settings-edit | |
| 2 | .col-xs-6.settings-content | |
| 3 | = form_for @user, url: settings_path, method: :put do |f| | |
| 4 | %h2 | |
| 5 | 設定 | |
| 6 | .form-body | |
| 7 | .form-group | |
| 8 | = f.label :name, "ユーザーID: @cyllabus_jp", class: "control-label" | |
| 9 | = f.text_field :name, class: "form-control" | |
| 10 | .form-group | |
| 11 | = f.label :screen_name, "表示名: シラバス", class: "control-label" | |
| 12 | = f.text_field :screen_name, class: "form-control" | |
| 13 | .form-group | |
| 14 | = f.label :bio, "プロフィール(200文字)", class: "control-label" | |
| 15 | = f.text_area :bio, class: "form-control" | |
| 16 | = f.submit "送信する", class: "btn btn-success" | |
| @@ -1,11 +1,16 @@ |
プログラムコードを全て表示
view on GitHub
出典: アップロードされた画像
Settings#editのスタイル設定
| 1 | 1 | // Place all the styles related to the settings controller here. |
| 2 | 2 | // They will automatically be included in application.css. |
| 3 | 3 | // You can use Sass here: http://sass-lang.com/ |
| 4 | ||
| 5 | #settings-edit | |
| 6 | .settings-content | |
| 7 | float: none | |
| 8 | margin: 0 auto 35px | |
| 9 | form | |
| 10 | border: 1px solid #ddd | |
| 11 | border-bottom-width: 3px | |
| 12 | border-radius: 6px | |
| 13 | background-color: #fff | |
| 14 | h2 | |
| 15 | margin: 0px | |
| 16 | padding: 12px | |
| 17 | text-align: center | |
| 18 | border-bottom: 2px solid #ddd | |
| 19 | font-size: 18px | |
| 20 | font-weight: 600 | |
| 21 | .form-body | |
| 22 | padding: 25px 30px | |
| 23 | .control-label | |
| 24 | font-weight: 400 | |
| 25 | textarea | |
| 26 | height: 100px | |
| 27 | .btn | |
| 28 | width: 100% | |
| 29 | margin: 10px 0px | |
| @@ -1,3 +1,29 @@ |
プログラムコードを全て表示
view on GitHub
出典: アップロードされた画像
validationの設定
| 5 | 5 | |
| 6 | 6 | def update |
| 7 | 7 | @user = current_user |
| 8 | @user.update_attributes(params_user) | |
| 9 | redirect_to user_url(@user) | |
| 8 | if @user.update_attributes(params_user) | |
| 9 | redirect_to user_url(@user) | |
| 10 | else | |
| 11 | render :edit | |
| 12 | end | |
| 10 | 13 | end |
| 11 | 14 | |
| 12 | 15 | private |
| @@ -5,8 +5,11 @@ def edit |
プログラムコードを全て表示
view on GitHub| 1 | 1 | #settings-edit |
| 2 | 2 | .col-xs-6.settings-content |
| 3 | - @user.errors.each do |attr, message| | |
| 4 | .alert.alert-danger= message | |
| 3 | 5 | = form_for @user, url: settings_path, method: :put do |f| |
| 4 | 6 | %h2 |
| 5 | 7 | 設定 |
| @@ -1,5 +1,7 @@ |
プログラムコードを全て表示
view on GitHub
出典: アップロードされた画像
背景色の設定
| 20 | 20 | width: 100% |
| 21 | 21 | height: 100% |
| 22 | 22 | |
| 23 | #application | |
| 24 | background-color: #f5f5f5 | |
| 25 | ||
| 23 | 26 | .clear |
| 24 | 27 | clear: both |
| 25 | 28 | |
| @@ -20,6 +20,9 @@ html, body |
プログラムコードを全て表示
view on GitHub
出典: アップロードされた画像
ログアウト機能
| 15 | 15 | end |
| 16 | 16 | end |
| 17 | 17 | |
| 18 | def destroy | |
| 19 | logout | |
| 20 | redirect_to root_url | |
| 21 | end | |
| 22 | ||
| 18 | 23 | private |
| 19 | 24 | |
| 20 | 25 | def params_user |
| @@ -15,6 +15,11 @@ def create |
プログラムコードを全て表示
view on GitHubUsers#index, showをログインしていないと入れないようにする
| 1 | 1 | class UsersController < ApplicationController |
| 2 | before_filter :require_login | |
| 3 | ||
| 2 | 4 | # GET /users |
| 3 | 5 | # GET /users.json |
| 4 | 6 | def index |
| @@ -1,4 +1,6 @@ |
プログラムコードを全て表示
view on GitHubnoticeの表示
Settings#editのnotice
| 6 | 6 | def update |
| 7 | 7 | @user = current_user |
| 8 | 8 | if @user.update_attributes(params_user) |
| 9 | redirect_to user_url(@user) | |
| 9 | redirect_to user_url(@user), notice: "プロフィールを更新しました" | |
| 10 | 10 | else |
| 11 | 11 | render :edit |
| 12 | 12 | end |
| @@ -6,7 +6,7 @@ def edit |
| 1 | 1 | .col-xs-8#users-content |
| 2 | 2 | .user-info |
| 3 | - if notice | |
| 4 | .alert.alert-info= notice | |
| 3 | 5 | %span.user-name |
| 4 | 6 | = render_user_screen_name(@user) |
| 5 | 7 | %span.user-id |
| @@ -1,5 +1,7 @@ |
プログラムコードを全て表示
view on GitHub
出典: アップロードされた画像
Sessions#newのnotice
| 8 | 8 | password = params_user[:password] |
| 9 | 9 | |
| 10 | 10 | if login(email, password) |
| 11 | redirect_to root_url, notice: "successfully logged in." | |
| 11 | redirect_to root_url, notice: "サインインしました" | |
| 12 | 12 | else |
| 13 | 13 | @user = User.new(email: email) |
| 14 | 14 | render :new |
| @@ -8,7 +8,7 @@ def create |
プログラムコードを全て表示
view on GitHub| 17 | 17 | |
| 18 | 18 | def destroy |
| 19 | 19 | logout |
| 20 | redirect_to root_url | |
| 20 | redirect_to root_url, notice: "サインアウトしました" | |
| 21 | 21 | end |
| 22 | 22 | |
| 23 | 23 | private |
| @@ -17,7 +17,7 @@ def create |
| 5 | 5 | このサイトは、シラバスのRails学習コースの完成形サンプルアプリです。Microsoft Azure上で運用されています。 |
| 6 | 6 | %p.by |
| 7 | 7 | 開発者: @ohataken デザイン: @keito0904 企画: @saiwaki14 |
| 8 | - if notice | |
| 9 | %p | |
| 10 | .alert.alert-info= notice | |
| 8 | 11 | .col-xs-6.right-content |
| 9 | 12 | = form_for @user, url: registrations_path, method: :post do |f| |
| 10 | 13 | %h2 |
| @@ -5,6 +5,9 @@ |
プログラムコードを全て表示
view on GitHub
出典: アップロードされた画像
出典: アップロードされた画像
6 つぶやき機能
所要時間：未設定
tweet機能のコード生成
ツイート機能を書きます。ここはscaffoldを利用します。
$ rails g scaffold tweet user_id:integer content:string --no-stylesheets 
出典: アップロードされた画像
tweetsテーブルにインデックスをはる
インデックスを追加して、読み取り、並べ替えを高速化します。tweetsテーブルはuser_idから参照されることが考えられるので、DBにインデックスをはっておきます。
| 5 | 5 | t.string :content |
| 6 | 6 | |
| 7 | 7 | t.timestamps |
| 8 | ||
| 9 | t.index :user_id | |
| 10 | t.index :created_at | |
| 8 | 11 | end |
| 9 | 12 | end |
| 10 | 13 | end |
| @@ -5,6 +5,9 @@ def change |
プログラムコードを全て表示
view on GitHubConsole
$ rake db:migrate 
出典: アップロードされた画像
ヘッダーにtweets#indexへのリンクを置く
| 4 | 4 | = link_to '#Tsubuyaki', root_url, class: "navbar-brand" |
| 5 | 5 | - if logged_in? |
| 6 | 6 | %ul.nav.navbar-nav |
| 7 | %li= link_to "全ツイート一覧", tweets_path | |
| 7 | 8 | %li= link_to "ユーザー一覧", users_path |
| 8 | 9 | %ul.nav.navbar-nav.navbar-right |
| 9 | 10 | %li= link_to current_user.name, current_user |
| @@ -4,6 +4,7 @@ |
プログラムコードを全て表示
view on GitHub
出典: アップロードされた画像
サインアップ後にログインするようにする
| 7 | 7 | @user = User.new(params_user) |
| 8 | 8 | |
| 9 | 9 | if @user.save |
| 10 | login(@user.email, @user.password) | |
| 10 | 11 | redirect_to root_url |
| 11 | 12 | else |
| 12 | 13 | render :new |
| @@ -7,6 +7,7 @@ def create |
プログラムコードを全て表示
view on GitHubRoute定義の順序の変更
挙動に変更はありませんが、優先順位の最上位に認証系の機能をもっていきたい気持ちがあるのと、あとは文法上の見た目を考えてこのようにしました。
| 1 | 1 | Rails.application.routes.draw do |
| 2 | 2 | |
| 3 | resources :tweets | |
| 4 | ||
| 5 | 3 | resource :registrations, only: [:new, :create] |
| 6 | 4 | resource :sessions, only: [:new, :create, :destroy] |
| 7 | 5 | resource :settings, only: [:edit, :update] |
| 8 | 6 | resources :users, only: [:index, :show] |
| 7 | resources :tweets | |
| 9 | 8 | |
| 10 | 9 | root to: 'registrations#new' |
| 11 | 10 | |
| @@ -1,11 +1,10 @@ |
プログラムコードを全て表示
view on GitHubController変更
scaffoldで生成されたコードから変更を加えます。Tweetは必ずuserと関連付けられていなければならない、というバリデーションを書いたので、userにcurrent_userをセットします。また、クライアントから送られてくるパラメーターのうち、user_idはcurrent_userから取ってこれるので、こちらは不要になります。
| 25 | 25 | # POST /tweets.json |
| 26 | 26 | def create |
| 27 | 27 | @tweet = Tweet.new(tweet_params) |
| 28 | @tweet.user = current_user | |
| 28 | 29 | |
| 29 | 30 | respond_to do |format| |
| 30 | 31 | if @tweet.save |
| @@ -25,6 +25,7 @@ def edit | ||
| 69 | 70 | |
| 70 | 71 | # Never trust parameters from the scary internet, only allow the white list through. |
| 71 | 72 | def tweet_params |
| 72 | params.require(:tweet).permit(:user_id, :content) | |
| 73 | params.require(:tweet).permit(:content) | |
| 73 | 74 | end |
| 74 | 75 | end |
| @@ -69,6 +70,6 @@ def set_tweet |
プログラムコードを全て表示
view on GitHubログインしていないと見れないようにする
ログインしていないと見れないようにするのですが、ただしindex(全ツイート一覧画面)はログインしていなくても見れるようにしたいので、exceptオプションで指定します。
| 1 | 1 | class TweetsController < ApplicationController |
| 2 | before_filter :require_login, except: [:index] | |
| 2 | 3 | before_action :set_tweet, only: [:show, :edit, :update, :destroy] |
| 3 | 4 | |
| 4 | 5 | # GET /tweets |
| @@ -1,4 +1,5 @@ |
プログラムコードを全て表示
view on GitHubTweetモデルとUserモデルの関連付け(one to many関連)
| 1 | 1 | class Tweet < ActiveRecord::Base |
| 2 | belongs_to :user | |
| 2 | 3 | end |
| @@ -1,2 +1,3 @@ |
| 1 | 1 | class User < ActiveRecord::Base |
| 2 | 2 | authenticates_with_sorcery! |
| 3 | 3 | |
| 4 | has_many :tweets, dependent: :destroy | |
| 5 | ||
| 4 | 6 | validates :name, presence: true, uniqueness: { case_sensitive: false }, format: { with: /\A[a-z][a-z0-9]+\z/ }, length: { in: 4..24 } |
| 5 | 7 | validates :screen_name, length: { maximum: 140 } |
| 6 | 8 | validates :bio, length: { maximum: 200 } |
| @@ -1,6 +1,8 @@ |
プログラムコードを全て表示
view on GitHubTweetのValidation定義
app/models/tweet.rb
class Tweet < ActiveRecord::Base
belongs_to :user
validates :user, presence: true
validates :content, presence: true, length: { in: 1..140}
end
View(テンプレート)実装
抜本的に書き換えるので、まず全部消します
| 1 | %h1 Listing tweets | |
| 2 | ||
| 3 | %table | |
| 4 | %tr | |
| 5 | %th User | |
| 6 | %th Content | |
| 7 | %th | |
| 8 | %th | |
| 9 | %th | |
| 10 | ||
| 11 | - @tweets.each do |tweet| | |
| 12 | %tr | |
| 13 | %td= tweet.user_id | |
| 14 | %td= tweet.content | |
| 15 | %td= link_to 'Show', tweet | |
| 16 | %td= link_to 'Edit', edit_tweet_path(tweet) | |
| 17 | %td= link_to 'Destroy', tweet, :method => :delete, :data => { :confirm => 'Are you sure?' } | |
| 18 | ||
| 19 | %br | |
| 20 | ||
| 21 | = link_to 'New Tweet', new_tweet_path | |
| @@ -1,21 +0,0 @@ |
プログラムコードを全て表示
view on GitHub| 1 | #tweets-content | |
| 2 | .container | |
| 3 | .row | |
| 4 | .col-xs-4.left-content | |
| 5 | - if logged_in? | |
| 6 | .panel.panel-default | |
| 7 | .panel-body | |
| 8 | = link_to user_path(current_user), class: "user" do | |
| 9 | %span.user-name | |
| 10 | = render_user_screen_name current_user | |
| 11 | %span.user-id | |
| 12 | @#{current_user.name} | |
| 13 | .user-activity | |
| 14 | .row | |
| 15 | .col-xs-4.tweets-num | |
| 16 | .text | |
| 17 | つぶやき | |
| 18 | .num | |
| 19 | = link_to current_user.tweets.count, user_path(current_user) | |
| 20 | .col-xs-4.follow-num | |
| 21 | .text | |
| 22 | フォロー | |
| 23 | .num | |
| 24 | 0 | |
| 25 | .col-xs-4.follower-num | |
| 26 | .text | |
| 27 | フォロワー | |
| 28 | .num | |
| 29 | 0 | |
| 30 | .col-xs-8.right-content | |
| 31 | .list-group | |
| 32 | = div_for @tweets, class: "list-group-item" do |t| | |
| 33 | %h4.user | |
| 34 | %span.user-name | |
| 35 | = link_to render_user_screen_name(t.user), user_path(t.user) | |
| 36 | %span.user-id | |
| 37 | @#{t.user.name} | |
| 38 | %span.time.pull-right | |
| 39 | = distance_of_time_in_words_to_now(t.created_at) | |
| 40 | .clear | |
| 41 | .tweet-content | |
| 42 | %p | |
| 43 | = t.content | |
| @@ -0,0 +1,43 @@ |
プログラムコードを全て表示
view on GitHub
出典: アップロードされた画像
スタイルを書く
| 79 | 79 | .text |
| 80 | 80 | .num |
| 81 | 81 | font-size: 28px |
| 82 | ||
| 83 | #tweets-content | |
| 84 | .left-content | |
| 85 | .panel | |
| 86 | box-shadow: none | |
| 87 | border-bottom-width: 3px | |
| 88 | .user | |
| 89 | .user-name | |
| 90 | font-size: 20px | |
| 91 | font-weight: 600 | |
| 92 | color: #555 | |
| 93 | .user-id | |
| 94 | color: #aaa | |
| 95 | &:hover | |
| 96 | text-decoration: none | |
| 97 | border-bottom: 1px solid #555 | |
| 98 | .user-activity | |
| 99 | text-align: center | |
| 100 | .row | |
| 101 | border-bottom: 1px solid #ddd | |
| 102 | padding: 10px 0px | |
| 103 | .text | |
| 104 | font-size: 12px | |
| 105 | color: #777 | |
| 106 | .num | |
| 107 | font-size: 18px | |
| 108 | .right-content | |
| 109 | .list-group-item:last-child | |
| 110 | border-bottom-width: 3px | |
| 111 | .list-group-item | |
| 112 | .user | |
| 113 | .user-name | |
| 114 | a | |
| 115 | color: #555 | |
| 116 | .user-id | |
| 117 | font-size: 14px | |
| 118 | color: #aaa | |
| 119 | font-weight: 400 | |
| 120 | .time | |
| 121 | font-size: 12px | |
| 122 | color: #aaa | |
| 123 | font-weight: 400 | |
| 124 | .tweet-content | |
| 125 | font-size: 16px | |
| 126 | .content-footer | |
| 127 | a | |
| 128 | font-size: 12px | |
| 129 | margin-right: 10px | |
| @@ -79,3 +79,51 @@ html, body |
プログラムコードを全て表示
view on GitHub
出典: アップロードされた画像
つぶやきの作成時間を修整する
ツイート作成時間の表示の「1分前」とか「1時間前」とかの部分がおかしいので、修正していきます。時刻の表現は、日本語や英語などのユーザーの(自然)言語により変化させなくてはならないので、このために地域毎に別々に定義して、それを呼び出します。このためのファイルをロケールファイルと読んでいます。
ロケールファイルのテンプレートが公開されているので、ダウンロードして使いたいところですが、現在すでにロケールファイルに書き込んでしまっているので、そのまま上書き保存ができません。必要な部分だけコピーして持ってきます。
ロケールファイルのテンプレートが公開されているので、ダウンロードして使いたいところですが、現在すでにロケールファイルに書き込んでしまっているので、そのまま上書き保存ができません。必要な部分だけコピーして持ってきます。
出典: アップロードされた画像
出典: アップロードされた画像
念のため、このような変更になります。
| 22 | 22 | confirmation: 確認用パスワードが一致しません |
| 23 | 23 | bio: |
| 24 | 24 | too_long: プロフィールは200文字以内でなければなりません |
| 25 | date: | |
| 26 | abbr_day_names: | |
| 27 | - 日 | |
| 28 | - 月 | |
| 29 | - 火 | |
| 30 | - 水 | |
| 31 | - 木 | |
| 32 | - 金 | |
| 33 | - 土 | |
| 34 | abbr_month_names: | |
| 35 | - | |
| 36 | - 1月 | |
| 37 | - 2月 | |
| 38 | - 3月 | |
| 39 | - 4月 | |
| 40 | - 5月 | |
| 41 | - 6月 | |
| 42 | - 7月 | |
| 43 | - 8月 | |
| 44 | - 9月 | |
| 45 | - 10月 | |
| 46 | - 11月 | |
| 47 | - 12月 | |
| 48 | day_names: | |
| 49 | - 日曜日 | |
| 50 | - 月曜日 | |
| 51 | - 火曜日 | |
| 52 | - 水曜日 | |
| 53 | - 木曜日 | |
| 54 | - 金曜日 | |
| 55 | - 土曜日 | |
| 56 | formats: | |
| 57 | default: ! '%Y/%m/%d' | |
| 58 | long: ! '%Y年%m月%d日(%a)' | |
| 59 | short: ! '%m/%d' | |
| 60 | month_names: | |
| 61 | - | |
| 62 | - 1月 | |
| 63 | - 2月 | |
| 64 | - 3月 | |
| 65 | - 4月 | |
| 66 | - 5月 | |
| 67 | - 6月 | |
| 68 | - 7月 | |
| 69 | - 8月 | |
| 70 | - 9月 | |
| 71 | - 10月 | |
| 72 | - 11月 | |
| 73 | - 12月 | |
| 74 | order: | |
| 75 | - :year | |
| 76 | - :month | |
| 77 | - :day | |
| 78 | datetime: | |
| 79 | distance_in_words: | |
| 80 | about_x_hours: | |
| 81 | one: 約1時間 | |
| 82 | other: 約%{count}時間 | |
| 83 | about_x_months: | |
| 84 | one: 約1ヶ月 | |
| 85 | other: 約%{count}ヶ月 | |
| 86 | about_x_years: | |
| 87 | one: 約1年 | |
| 88 | other: 約%{count}年 | |
| 89 | almost_x_years: | |
| 90 | one: 1年弱 | |
| 91 | other: ! '%{count}年弱' | |
| 92 | half_a_minute: 30秒前後 | |
| 93 | less_than_x_minutes: | |
| 94 | one: 1分以内 | |
| 95 | other: ! '%{count}分未満' | |
| 96 | less_than_x_seconds: | |
| 97 | one: 1秒以内 | |
| 98 | other: ! '%{count}秒未満' | |
| 99 | over_x_years: | |
| 100 | one: 1年以上 | |
| 101 | other: ! '%{count}年以上' | |
| 102 | x_days: | |
| 103 | one: 1日 | |
| 104 | other: ! '%{count}日' | |
| 105 | x_minutes: | |
| 106 | one: 1分 | |
| 107 | other: ! '%{count}分' | |
| 108 | x_months: | |
| 109 | one: 1ヶ月 | |
| 110 | other: ! '%{count}ヶ月' | |
| 111 | x_seconds: | |
| 112 | one: 1秒 | |
| 113 | other: ! '%{count}秒' | |
| 114 | prompts: | |
| 115 | day: 日 | |
| 116 | hour: 時 | |
| 117 | minute: 分 | |
| 118 | month: 月 | |
| 119 | second: 秒 | |
| 120 | year: 年 | |
| 121 | errors: | |
| 122 | format: ! '%{attribute}%{message}' | |
| 123 | messages: | |
| 124 | accepted: を受諾してください。 | |
| 125 | blank: を入力してください。 | |
| 126 | present: は入力しないでください。 | |
| 127 | confirmation: と%{attribute}の入力が一致しません。 | |
| 128 | empty: を入力してください。 | |
| 129 | equal_to: は%{count}にしてください。 | |
| 130 | even: は偶数にしてください。 | |
| 131 | exclusion: は予約されています。 | |
| 132 | greater_than: は%{count}より大きい値にしてください。 | |
| 133 | greater_than_or_equal_to: は%{count}以上の値にしてください。 | |
| 134 | inclusion: は一覧にありません。 | |
| 135 | invalid: は不正な値です。 | |
| 136 | less_than: は%{count}より小さい値にしてください。 | |
| 137 | less_than_or_equal_to: は%{count}以下の値にしてください。 | |
| 138 | not_a_number: は数値で入力してください。 | |
| 139 | not_an_integer: は整数で入力してください。 | |
| 140 | odd: は奇数にしてください。 | |
| 141 | record_invalid: バリデーションに失敗しました。 %{errors} | |
| 142 | restrict_dependent_destroy: ! '%{record}が存在しているので削除できません。' | |
| 143 | taken: はすでに存在します。 | |
| 144 | too_long: は%{count}文字以内で入力してください。 | |
| 145 | too_short: は%{count}文字以上で入力してください。 | |
| 146 | wrong_length: は%{count}文字で入力してください。 | |
| 147 | other_than: "は%{count}以外の値にしてください。" | |
| 148 | template: | |
| 149 | body: 次の項目を確認してください。 | |
| 150 | header: | |
| 151 | one: ! '%{model}にエラーが発生しました。' | |
| 152 | other: ! '%{model}に%{count}個のエラーが発生しました。' | |
| 153 | helpers: | |
| 154 | select: | |
| 155 | prompt: 選択してください。 | |
| 156 | submit: | |
| 157 | create: 登録する | |
| 158 | submit: 保存する | |
| 159 | update: 更新する | |
| 160 | number: | |
| 161 | currency: | |
| 162 | format: | |
| 163 | delimiter: ! ',' | |
| 164 | format: ! '%n%u' | |
| 165 | precision: 0 | |
| 166 | separator: . | |
| 167 | significant: false | |
| 168 | strip_insignificant_zeros: false | |
| 169 | unit: 円 | |
| 170 | format: | |
| 171 | delimiter: ! ',' | |
| 172 | precision: 3 | |
| 173 | separator: . | |
| 174 | significant: false | |
| 175 | strip_insignificant_zeros: false | |
| 176 | human: | |
| 177 | decimal_units: | |
| 178 | format: ! '%n %u' | |
| 179 | units: | |
| 180 | billion: 十億 | |
| 181 | million: 百万 | |
| 182 | quadrillion: 千兆 | |
| 183 | thousand: 千 | |
| 184 | trillion: 兆 | |
| 185 | unit: '' | |
| 186 | format: | |
| 187 | delimiter: '' | |
| 188 | precision: 3 | |
| 189 | significant: true | |
| 190 | strip_insignificant_zeros: true | |
| 191 | storage_units: | |
| 192 | format: ! '%n%u' | |
| 193 | units: | |
| 194 | byte: バイト | |
| 195 | gb: ギガバイト | |
| 196 | kb: キロバイト | |
| 197 | mb: メガバイト | |
| 198 | tb: テラバイト | |
| 199 | percentage: | |
| 200 | format: | |
| 201 | delimiter: '' | |
| 202 | format: "%n%" | |
| 203 | precision: | |
| 204 | format: | |
| 205 | delimiter: '' | |
| 206 | support: | |
| 207 | array: | |
| 208 | last_word_connector: と | |
| 209 | two_words_connector: と | |
| 210 | words_connector: と | |
| 211 | time: | |
| 212 | am: 午前 | |
| 213 | formats: | |
| 214 | default: ! '%Y/%m/%d %H:%M:%S' | |
| 215 | long: ! '%Y年%m月%d日(%a) %H時%M分%S秒 %z' | |
| 216 | short: ! '%y/%m/%d %H:%M' | |
| 217 | pm: 午後 | |
| @@ -22,3 +22,196 @@ ja: |
プログラムコードを全て表示
view on GitHubツイート一覧画面から、ツイートを投稿できるようにする
| 6 | 6 | # GET /tweets.json |
| 7 | 7 | def index |
| 8 | 8 | @tweets = Tweet.all |
| 9 | @tweet = Tweet.new | |
| 9 | 10 | end |
| 10 | 11 | |
| 11 | 12 | # GET /tweets/1 |
| @@ -6,6 +6,7 @@ class TweetsController < ApplicationController |
プログラムコードを全て表示
view on GitHub| 27 | 27 | フォロワー |
| 28 | 28 | .num |
| 29 | 29 | 0 |
| 30 | = form_for @tweet do |f| | |
| 31 | .form-group | |
| 32 | = f.text_area :content, class: "form-control" | |
| 33 | = f.submit "つぶやく", class: "btn btn-success" | |
| 30 | 34 | .col-xs-8.right-content |
| 31 | 35 | .list-group |
| 32 | 36 | = div_for @tweets, class: "list-group-item" do |t| |
| @@ -27,6 +27,10 @@ |
プログラムコードを全て表示
view on GitHub
出典: アップロードされた画像
| 105 | 105 | color: #777 |
| 106 | 106 | .num |
| 107 | 107 | font-size: 18px |
| 108 | .new_tweet | |
| 109 | margin-top: 20px | |
| 110 | textarea | |
| 111 | width: 100% !important | |
| 112 | .btn | |
| 113 | width: 100% | |
| 108 | 114 | .right-content |
| 109 | 115 | .list-group-item:last-child |
| 110 | 116 | border-bottom-width: 3px |
| @@ -105,6 +105,12 @@ html, body |
プログラムコードを全て表示
view on GitHub
出典: アップロードされた画像
投稿後は、ツイート一覧画面にリダイレクトする
| 31 | 31 | |
| 32 | 32 | respond_to do |format| |
| 33 | 33 | if @tweet.save |
| 34 | format.html { redirect_to @tweet, notice: 'Tweet was successfully created.' } | |
| 34 | format.html { redirect_to tweets_url, notice: 'Tweet was successfully created.' } | |
| 35 | 35 | format.json { render :show, status: :created, location: @tweet } |
| 36 | 36 | else |
| 37 | 37 | format.html { render :new } |
| @@ -31,7 +31,7 @@ def create |
プログラムコードを全て表示
view on GitHub
出典: アップロードされた画像
ツイート投稿失敗した場合のメッセージ表示
| 34 | 34 | format.html { redirect_to tweets_url, notice: 'Tweet was successfully created.' } |
| 35 | 35 | format.json { render :show, status: :created, location: @tweet } |
| 36 | 36 | else |
| 37 | format.html { render :new } | |
| 37 | @tweets = Tweet.all | |
| 38 | format.html { render :index } | |
| 38 | 39 | format.json { render json: @tweet.errors, status: :unprocessable_entity } |
| 39 | 40 | end |
| 40 | 41 | end |
| @@ -34,7 +34,8 @@ def create |
プログラムコードを全て表示
view on GitHub| 27 | 27 | フォロワー |
| 28 | 28 | .num |
| 29 | 29 | 0 |
| 30 | - @tweet.errors.full_messages.each do |message| | |
| 31 | .alert.alert-danger= message | |
| 30 | 32 | = form_for @tweet do |f| |
| 31 | 33 | .form-group |
| 32 | 34 | = f.text_area :content, class: "form-control" |
| @@ -27,6 +27,8 @@ |
プログラムコードを全て表示
view on GitHub
出典: アップロードされた画像
Tweetを新しい順で並べ替える
| 3 | 3 | |
| 4 | 4 | validates :user, presence: true |
| 5 | 5 | validates :content, presence: true, length: { in: 1..140 } |
| 6 | ||
| 7 | default_scope -> { order(created_at: :desc) } | |
| 6 | 8 | end |
| @@ -3,4 +3,6 @@ class Tweet < ActiveRecord::Base |
プログラムコードを全て表示
view on GitHub| 34 | 34 | = f.text_area :content, class: "form-control" |
| 35 | 35 | = f.submit "つぶやく", class: "btn btn-success" |
| 36 | 36 | .col-xs-8.right-content |
| 37 | - if notice | |
| 38 | .alert.alert-info= notice | |
| 37 | 39 | .list-group |
| 38 | 40 | = div_for @tweets, class: "list-group-item" do |t| |
| 39 | 41 | %h4.user |
| @@ -34,6 +34,8 @@ |
プログラムコードを全て表示
view on GitHub
出典: アップロードされた画像
Users#showの内容を調整
| 8 | 8 | @#{@user.name} |
| 9 | 9 | .bio |
| 10 | 10 | = @user.bio |
| 11 | ||
| 12 | %ul.nav.nav-tabs.nav-justified | |
| 13 | %li.active | |
| 14 | = link_to user_path(@user) do | |
| 15 | .text | |
| 16 | つぶやき | |
| 17 | .num | |
| 18 | #{@user.tweets.count} | |
| 19 | %li | |
| 20 | = link_to nil do | |
| 21 | .text | |
| 22 | フォロー | |
| 23 | .num | |
| 24 | 0 | |
| 25 | %li | |
| 26 | = link_to nil do | |
| 27 | .text | |
| 28 | フォロワー | |
| 29 | .num | |
| 30 | 0 | |
| 31 | %li | |
| 32 | = link_to nil do | |
| 33 | .text | |
| 34 | お気に入り | |
| 35 | .num | |
| 36 | 0 | |
| 37 | ||
| 38 | .list-group | |
| 39 | - if @user.tweets.empty? | |
| 40 | .list-group-item | |
| 41 | まだツイートはありません | |
| 42 | = div_for @user.tweets, class: "list-group-item" do |t| | |
| 43 | %h4.user | |
| 44 | %span.user-name | |
| 45 | = link_to t.user.name, user_path(t.user) | |
| 46 | %span.user-id | |
| 47 | @#{t.user.name} | |
| 48 | %span.time.pull-right | |
| 49 | = distance_of_time_in_words_to_now(t.created_at) | |
| 50 | .clear | |
| 51 | .tweet-content | |
| 52 | %p | |
| 53 | = t.content | |
| @@ -8,3 +8,46 @@ |
プログラムコードを全て表示
view on GitHub
出典: アップロードされた画像
ログインしている場合はタイムラインを表示する
| 1 | 1 | class RegistrationsController < ApplicationController |
| 2 | 2 | def new |
| 3 | 3 | @user = User.new |
| 4 | redirect_to tweets_url if logged_in? | |
| 4 | 5 | end |
| 5 | 6 | |
| 6 | 7 | def create |
| @@ -1,6 +1,7 @@ |
| 1 | 1 | class SessionsController < ApplicationController |
| 2 | 2 | def new |
| 3 | 3 | @user = User.new |
| 4 | redirect_to tweets_url if logged_in? | |
| 4 | 5 | end |
| 5 | 6 | |
| 6 | 7 | def create |
| @@ -1,6 +1,7 @@ |
プログラムコードを全て表示
view on GitHub会員登録後タイムラインを表示
| 8 | 8 | |
| 9 | 9 | if @user.save |
| 10 | 10 | login(@user.email, @user.password) |
| 11 | redirect_to root_url | |
| 11 | redirect_to tweets_url | |
| 12 | 12 | else |
| 13 | 13 | render :new |
| 14 | 14 | end |
| @@ -8,7 +8,7 @@ def create |
プログラムコードを全て表示
view on GitHubログイン後タイムラインを表示
認証機能を書いた段階で、サインアップ、サインイン後はタイムライン(すなわちtweets#index)にリダイレクトしたかったのですが、その時にはtweetsコントローラーは無かったので、いまやります
認証機能を書いた段階で、サインアップ、サインイン後はタイムライン(すなわちtweets#index)にリダイレクトしたかったのですが、その時にはtweetsコントローラーは無かったので、いまやります
これはregistrations#createを書いていた時にやってもよかったのですが、その時にはサインイン機能を書いていなかったので、後回ししていました。
auto_loginというこのメソッドもやはり認証gemのsorceryが提供してくれているもので、loginメソッドと比較すると引数がuserだけ、という点で異なります。パスワードを要求せず、ログインを認める時に使います。
auto_loginというこのメソッドもやはり認証gemのsorceryが提供してくれているもので、loginメソッドと比較すると引数がuserだけ、という点で異なります。パスワードを要求せず、ログインを認める時に使います。
| 8 | 8 | password = params_user[:password] |
| 9 | 9 | |
| 10 | 10 | if login(email, password) |
| 11 | redirect_to root_url, notice: "サインインしました" | |
| 11 | redirect_to tweets_url, notice: "サインインしました" | |
| 12 | 12 | else |
| 13 | 13 | @user = User.new(email: email) |
| 14 | 14 | render :new |
| @@ -8,7 +8,7 @@ def create |
プログラムコードを全て表示
view on GitHub 7 お気に入り機能
所要時間：未設定
これから、お気に入り機能を書いていきます。あたらしい関連付けの書き方を学びます。まずはモデルを生成します。
many to many連携のための中間テーブルを生成する
tweet機能のhas_many, belongs_to連携は、「1 to many (1対多)」とも呼ばれます。ひとりのユーザーが複数のツイートを持っており、ツイートは唯一のユーザーに関連付けられているからです。
今回のお気に入り機能で使う連携は「many to many (多対多)」と呼ばれるものです。1人のユーザーは複数のツイートをお気に入りにすることが出来、ツイートもまたお気に入りに登録した複数ユーザーに関連付けられています。
many to many連携の際は、2者への参照(プライマリキー)を持つテーブルを作成し、このテーブルを「中間テーブル」と呼びます。今回ではfavoritesテーブルが中間テーブルです。
今回のお気に入り機能で使う連携は「many to many (多対多)」と呼ばれるものです。1人のユーザーは複数のツイートをお気に入りにすることが出来、ツイートもまたお気に入りに登録した複数ユーザーに関連付けられています。
many to many連携の際は、2者への参照(プライマリキー)を持つテーブルを作成し、このテーブルを「中間テーブル」と呼びます。今回ではfavoritesテーブルが中間テーブルです。
$ rails g model favorite user_id:integer tweet_id:integer 
出典: アップロードされた画像
インデックスを追加して高速化する
user_idからもtweet_idからも参照される可能性があるので、インデックスを貼ります
| 5 | 5 | t.integer :tweet_id |
| 6 | 6 | |
| 7 | 7 | t.timestamps |
| 8 | ||
| 9 | t.index :user_id | |
| 10 | t.index :tweet_id | |
| 11 | t.index :created_at | |
| 8 | 12 | end |
| 9 | 13 | end |
| 10 | 14 | end |
| @@ -5,6 +5,10 @@ def change |
プログラムコードを全て表示
view on GitHubマイグレーション(migration)を実行する
Console
$ rake db:migrate 
出典: アップロードされた画像
ルーティング(Routing)を定義する
Favoriteのmany to many連携のうち、片方はユーザーで、なおかつアクセスしてきた人のアカウント(current_user)なので、プライマリキーをurlに含めて受け取る必要がありません。ですから入れ子にしたresourceメソッドを使います。
| 4 | 4 | resource :sessions, only: [:new, :create, :destroy] |
| 5 | 5 | resource :settings, only: [:edit, :update] |
| 6 | 6 | resources :users, only: [:index, :show] |
| 7 | resources :tweets | |
| 7 | resources :tweets do | |
| 8 | resource :favorites, only: [:create, :destroy] | |
| 9 | end | |
| 8 | 10 | |
| 9 | 11 | root to: 'registrations#new' |
| 10 | 12 | |
| @@ -4,7 +4,9 @@ |
プログラムコードを全て表示
view on GitHub| 3 | 3 | resource :registrations, only: [:new, :create] |
| 4 | 4 | resource :sessions, only: [:new, :create, :destroy] |
| 5 | 5 | resource :settings, only: [:edit, :update] |
| 6 | resources :users, only: [:index, :show] | |
| 6 | ||
| 7 | resources :users, only: [:index, :show] do | |
| 8 | get :favorites, on: :member | |
| 9 | end | |
| 10 | ||
| 7 | 11 | resources :tweets do |
| 8 | 12 | resource :favorites, only: [:create, :destroy] |
| 9 | 13 | end |
| @@ -3,7 +3,11 @@ |
プログラムコードを全て表示
view on GitHubコントローラー(Controller)を作成する
今回はコントローラーを手動で作成してみます。
| 1 | class FavoritesController < ApplicationController | |
| 2 | end | |
| @@ -0,0 +1,2 @@ |
プログラムコードを全て表示
view on GitHubbefore_filter :require_loginで、ログインしていなければリダイレクトさせます。ログインしていなければcreateメソッドの本体が実行されない、という前提があることによって、current_userが必ず存在することになります。
お気に入りモデルのインスタンスをbuildメソッドで生成して、それの保存を試みます。
お気に入りモデルのインスタンスをbuildメソッドで生成して、それの保存を試みます。
| 1 | 1 | class FavoritesController < ApplicationController |
| 2 | before_filter :require_login | |
| 3 | ||
| 4 | def create | |
| 5 | @tweet = Tweet.find(params[:tweet_id]) | |
| 6 | @favorite = current_user.favorites.build(tweet: @tweet) | |
| 7 | ||
| 8 | if @favorite.save | |
| 9 | redirect_to tweets_url, notice: "お気に入りに登録しました" | |
| 10 | else | |
| 11 | redirect_to tweets_url, alert: "このツイートはお気に入りに登録できません" | |
| 12 | end | |
| 13 | end | |
| 2 | 14 | end |
| @@ -1,2 +1,14 @@ |
プログラムコードを全て表示
view on GitHubfind_by/find_by!メソッドはプライマリキーではないカラムで1件取得するメソッドで、!が付いていると該当レコードが無かった場合に例外が飛びます。この例外はRecordNotFoundという例外で、最終的にはHTTPステータスコード404の「Not Found」になります。
| 11 | 11 | redirect_to tweets_url, alert: "このツイートはお気に入りに登録できません" |
| 12 | 12 | end |
| 13 | 13 | end |
| 14 | ||
| 15 | def destroy | |
| 16 | @favorite = current_user.favorites.find_by!(tweet_id: params[:tweet_id]) | |
| 17 | @favorite.destroy | |
| 18 | redirect_to tweets_url, notice: "お気に入りを解除しました" | |
| 19 | end | |
| 14 | 20 | end |
| @@ -11,4 +11,10 @@ def create |
プログラムコードを全て表示
view on GitHubUsers#showにお気に入り一覧を表示する。
| 12 | 12 | def show |
| 13 | 13 | @user = User.find(params[:id]) |
| 14 | 14 | end |
| 15 | ||
| 16 | def favorites | |
| 17 | @user = User.find(params[:id]) | |
| 18 | end | |
| 15 | 19 | end |
| @@ -12,4 +12,8 @@ def index |
プログラムコードを全て表示
view on GitHubモデル(Model)を記述
User, Tweet, Favoriteの関連付け
ここでmany to many連携の実際の定義をします。TweetもUserも、Favoriteを複数持っていて、Favoriteから見ると1つのUser, 1つのTweetに属しています。
| 1 | 1 | class Favorite < ActiveRecord::Base |
| 2 | belongs_to :user | |
| 3 | belongs_to :tweet | |
| 2 | 4 | end |
| @@ -1,2 +1,4 @@ |
| 1 | 1 | class Tweet < ActiveRecord::Base |
| 2 | 2 | belongs_to :user |
| 3 | has_many :favorites, dependent: :destroy | |
| 3 | 4 | |
| 4 | 5 | validates :user, presence: true |
| 5 | 6 | validates :content, presence: true, length: { in: 1..140 } |
| @@ -1,5 +1,6 @@ |
| 2 | 2 | authenticates_with_sorcery! |
| 3 | 3 | |
| 4 | 4 | has_many :tweets, dependent: :destroy |
| 5 | has_many :favorites, dependent: :destroy | |
| 5 | 6 | |
| 6 | 7 | validates :name, presence: true, uniqueness: { case_sensitive: false }, format: { with: /\A[a-z][a-z0-9]+\z/ }, length: { in: 4..24 } |
| 7 | 8 | validates :screen_name, length: { maximum: 140 } |
| @@ -2,6 +2,7 @@ class User < ActiveRecord::Base |
プログラムコードを全て表示
view on GitHubValidationを定義する
バリデーション定義をします。userとtweetを持っている事は必要ですが、お気に入りの場合は同じ人が同じツイートを複数ふぁぼる事ができませんから、scope付きのuniqueness制約を与えます。
| 1 | 1 | class Favorite < ActiveRecord::Base |
| 2 | 2 | belongs_to :user |
| 3 | 3 | belongs_to :tweet |
| 4 | ||
| 5 | validates :user, presence: true | |
| 6 | validates :user_id, uniqueness: { scope: :tweet_id } | |
| 7 | validates :tweet, presence: true | |
| 4 | 8 | end |
| @@ -1,4 +1,8 @@ |
プログラムコードを全て表示
view on GitHubお気に入りに登録しているかどうか、を返すメソッドを定義
お気に入りしているかどうか、によって表示するボタンを変えたいので、そのtrue, falseを返すメソッドをモデルに実装します。モデルはDBのレコード、カラムの状態を管理・表現するのが一番の仕事なので、このような仕事はまさにうってつけです
| 4 | 4 | |
| 5 | 5 | validates :user, presence: true |
| 6 | 6 | validates :content, presence: true, length: { in: 1..140 } |
| 7 | ||
| 8 | def favorited_by? user | |
| 9 | favorites.where(user_id: user.id).exists? | |
| 10 | end | |
| 7 | 11 | end |
| @@ -4,4 +4,8 @@ class Tweet < ActiveRecord::Base |
プログラムコードを全て表示
view on GitHubちなみにモデルの定義ファイル内ではcurrent_userは使えません。モデルはDBのレコードに対応する概念であって、通信相手のブラウザがログイン中かどうか、というような通信に関わる情報とは関係を持たないからです。
Viewを調整する
つぶやき一覧にお気に入りリンクを設置
お気に入りに登録ボタンを書きました。
| 49 | 49 | .tweet-content |
| 50 | 50 | %p |
| 51 | 51 | = t.content |
| 52 | .content-footer | |
| 53 | = link_to "お気に入りに登録", tweet_favorites_path(t), method: :post | |
| @@ -49,3 +49,5 @@ |
プログラムコードを全て表示
view on GitHub| 50 | 50 | %p |
| 51 | 51 | = t.content |
| 52 | 52 | .content-footer |
| 53 | = link_to "お気に入りに登録", tweet_favorites_path(t), method: :post | |
| 53 | - if t.favorited_by? current_user | |
| 54 | = link_to "お気に入りの解除", tweet_favorites_path(t), method: :delete | |
| 55 | - else | |
| 56 | = link_to "お気に入りに登録", tweet_favorites_path(t), method: :post | |
| @@ -50,4 +50,7 @@ |
プログラムコードを全て表示
view on GitHub
出典: アップロードされた画像
users/_headerパーシャルの作成
app/views/users/show.html.hamlの内容をapp/views/users/_header.html.hamlにコピペします。
| 1 | _header.html.haml | |
| 2 | .user-info | |
| 3 | - if notice | |
| 4 | .alert.alert-info= notice | |
| 5 | %span.user-name | |
| 6 | = render_user_screen_name(@user) | |
| 7 | %span.user-id | |
| 8 | @#{@user.name} | |
| 9 | .bio | |
| 10 | = @user.bio | |
| 11 | ||
| 12 | %ul.nav.nav-tabs.nav-justified | |
| 13 | %li.active | |
| 14 | = link_to user_path(@user) do | |
| 15 | .text | |
| 16 | つぶやき | |
| 17 | .num | |
| 18 | #{@user.tweets.count} | |
| 19 | %li | |
| 20 | = link_to nil do | |
| 21 | .text | |
| 22 | フォロー | |
| 23 | .num | |
| 24 | 0 | |
| 25 | %li | |
| 26 | = link_to nil do | |
| 27 | .text | |
| 28 | フォロワー | |
| 29 | .num | |
| 30 | 0 | |
| 31 | %li | |
| 32 | = link_to nil do | |
| 33 | .text | |
| 34 | お気に入り | |
| 35 | .num | |
| 36 | 0 | |
| @@ -1,0 +1,35 @@ |
| 1 | 1 | .col-xs-8#users-content |
| 2 | .user-info | |
| 3 | - if notice | |
| 4 | .alert.alert-info= notice | |
| 5 | %span.user-name | |
| 6 | = render_user_screen_name(@user) | |
| 7 | %span.user-id | |
| 8 | @#{@user.name} | |
| 9 | .bio | |
| 10 | = @user.bio | |
| 11 | ||
| 12 | %ul.nav.nav-tabs.nav-justified | |
| 13 | %li.active | |
| 14 | = link_to user_path(@user) do | |
| 15 | .text | |
| 16 | つぶやき | |
| 17 | .num | |
| 18 | #{@user.tweets.count} | |
| 19 | %li | |
| 20 | = link_to nil do | |
| 21 | .text | |
| 22 | フォロー | |
| 23 | .num | |
| 24 | 0 | |
| 25 | %li | |
| 26 | = link_to nil do | |
| 27 | .text | |
| 28 | フォロワー | |
| 29 | .num | |
| 30 | 0 | |
| 31 | %li | |
| 32 | = link_to nil do | |
| 33 | .text | |
| 34 | お気に入り | |
| 35 | .num | |
| 36 | 0 | |
| 37 | 2 | |
| 38 | 3 | .list-group |
| 39 | 4 | - if @user.tweets.empty? |
| @@ -1,39 +1,4 @@ |
プログラムコードを全て表示
view on GitHubリンク先を設定
| 28 | 28 | .num |
| 29 | 29 | 0 |
| 30 | 30 | %li |
| 31 | = link_to nil do | |
| 31 | = link_to favorites_user_path(@user) do | |
| 32 | 32 | .text |
| 33 | 33 | お気に入り |
| 34 | 34 | .num |
| @@ -28,7 +28,7 @@ |
プログラムコードを全て表示
view on GitHubパーシャルを読み込む。
| 1 | 1 | .col-xs-8#users-content |
| 2 | ||
| 2 | = render partial: "users/header" | |
| 3 | 3 | .list-group |
| 4 | 4 | - if @user.tweets.empty? |
| 5 | 5 | .list-group-item |
| @@ -1,5 +1,5 @@ |
プログラムコードを全て表示
view on GitHubアクティブ表示
| 9 | 9 | = @user.bio |
| 10 | 10 | |
| 11 | 11 | %ul.nav.nav-tabs.nav-justified |
| 12 | %li.active | |
| 12 | %li{ class: action_name == "show" ? "active" : nil } | |
| 13 | 13 | = link_to user_path(@user) do |
| 14 | 14 | .text |
| 15 | 15 | つぶやき |
| @@ -9,7 +9,7 @@ | ||
| 27 | 27 | フォロワー |
| 28 | 28 | .num |
| 29 | 29 | 0 |
| 30 | %li | |
| 30 | %li{ class: action_name == "favorites" ? "active" : nil } | |
| 31 | 31 | = link_to favorites_user_path(@user) do |
| 32 | 32 | .text |
| 33 | 33 | お気に入り |
| @@ -27,7 +27,7 @@ |
プログラムコードを全て表示
view on GitHubusers/_tweetパーシャルの作成
users/showからusers/_tweetにコピペ
| 1 | _tweet.html.haml | |
| 1 | = div_for @user.tweets, class: "list-group-item" do |t| | |
| 2 | %h4.user | |
| 3 | %span.user-name | |
| 4 | = link_to t.user.name, user_path(t.user) | |
| 5 | %span.user-id | |
| 6 | @#{t.user.name} | |
| 7 | %span.time.pull-right | |
| 8 | = distance_of_time_in_words_to_now(t.created_at) | |
| 9 | .clear | |
| 10 | .tweet-content | |
| 11 | %p | |
| 12 | = t.content | |
| @@ -1,0 +1,12 @@ |
| 4 | 4 | - if @user.tweets.empty? |
| 5 | 5 | .list-group-item |
| 6 | 6 | まだツイートはありません |
| 7 | = div_for @user.tweets, class: "list-group-item" do |t| | |
| 8 | %h4.user | |
| 9 | %span.user-name | |
| 10 | = link_to t.user.name, user_path(t.user) | |
| 11 | %span.user-id | |
| 12 | @#{t.user.name} | |
| 13 | %span.time.pull-right | |
| 14 | = distance_of_time_in_words_to_now(t.created_at) | |
| 15 | .clear | |
| 16 | .tweet-content | |
| 17 | %p | |
| 18 | = t.content | |
| @@ -4,15 +4,3 @@ |
プログラムコードを全て表示
view on GitHub| 1 | = div_for @user.tweets, class: "list-group-item" do |t| | |
| 1 | = div_for tweet, class: "list-group-item" do |t| | |
| 2 | 2 | %h4.user |
| 3 | 3 | %span.user-name |
| 4 | 4 | = link_to t.user.name, user_path(t.user) |
| @@ -1,4 +1,4 @@ |
プログラムコードを全て表示
view on GitHub| 4 | 4 | - if @user.tweets.empty? |
| 5 | 5 | .list-group-item |
| 6 | 6 | まだツイートはありません |
| 7 | - @user.tweets.each do |tweet| | |
| 8 | = render partial: "users/tweet", object: tweet | |
| 7 | = render partial: "users/tweet", collection: @user.tweets | |
| @@ -4,5 +4,4 @@ |
プログラムコードを全て表示
view on GitHubお気に入り一覧ビューを作成
app/views/users/favorites.html.haml
.col-xs-8#users-content
= render partial: "users/header"
.list-group
- if @user.favorites.empty?
.list-group-item
まだお気に入りに登録されたツイートはありません
= render partial: "users/tweet", collection: @user.favorites.map{|f| f.tweet} 
出典: アップロードされた画像
8 フォロー機能
所要時間：未設定
ここでは、以下の3つの実装を行ないます。
・フォローする/フォローを解除するの実装
・フォロー一覧/フォロワー一覧を表示(Users#showと同じ画面)
・フォローしている人のみのタイムラインを作成
・フォローする/フォローを解除するの実装
・フォロー一覧/フォロワー一覧を表示(Users#showと同じ画面)
・フォローしている人のみのタイムラインを作成
many to many連携のための中間テーブル生成
many to many連携のパート2で、「フォロー機能」を書いていきます。フォローの場合は「ユーザーがユーザーをフォローする」ので、中間テーブルがbelongs_toする先がどちらもUserモデルになってしまいます。その場合は名前が衝突してしまうので、userではない別の名前を与えなければなりません。ここがややこしいので注意していきましょう
Console
$ rails g model follow follower_id:integer inverse_follower_id:integer インデックスを追加して高速化する
忘れずにindexをはります
| 5 | 5 | t.integer :inverse_follower_id |
| 6 | 6 | |
| 7 | 7 | t.timestamps |
| 8 | ||
| 9 | t.index :follower_id | |
| 10 | t.index :inverse_follower_id | |
| 8 | 11 | end |
| 9 | 12 | end |
| 10 | 13 | end |
| @@ -5,6 +5,9 @@ def change |
プログラムコードを全て表示
view on GitHubマイグレーション(migration)を実行する
Console
$ rake db:migrate ルーティング(Routing)を定義する
お気に入り機能と同様のルーティング定義です。今回もbelongs_to先の2つのうち片方がcurrent_userなので、resourceメソッドで事足ります
follow機能を実装
| 5 | 5 | resource :settings, only: [:edit, :update] |
| 6 | 6 | |
| 7 | 7 | resources :users, only: [:index, :show] do |
| 8 | resource :follows, only: [:create, :destroy] | |
| 8 | 9 | get :favorites, on: :member |
| 9 | 10 | end |
| 10 | 11 | |
| @@ -5,6 +5,7 @@ |
プログラムコードを全て表示
view on GitHubフォロー一覧 & フォロワー一覧を表示
| 7 | 7 | resources :users, only: [:index, :show] do |
| 8 | 8 | resource :follows, only: [:create, :destroy] |
| 9 | 9 | get :favorites, on: :member |
| 10 | get :follows, on: :member | |
| 10 | 11 | end |
| 11 | 12 | |
| 12 | 13 | resources :tweets do |
| @@ -7,6 +7,7 @@ |
プログラムコードを全て表示
view on GitHub| 8 | 8 | resource :follows, only: [:create, :destroy] |
| 9 | 9 | get :favorites, on: :member |
| 10 | 10 | get :follows, on: :member |
| 11 | get :followers, on: :member | |
| 11 | 12 | end |
| 12 | 13 | |
| 13 | 14 | resources :tweets do |
| @@ -8,6 +8,7 @@ |
プログラムコードを全て表示
view on GitHubフォロワーのみのタイムラインを作成
| 13 | 13 | |
| 14 | 14 | resources :tweets do |
| 15 | 15 | resource :favorites, only: [:create, :destroy] |
| 16 | get :timeline, on: :collection | |
| 16 | 17 | end |
| 17 | 18 | |
| 18 | 19 | root to: 'registrations#new' |
| @@ -13,6 +13,7 @@ |
プログラムコードを全て表示
view on GitHubコントローラー(Controller)を作成する
follow機能を実装
手動でfollows_controller.rbを作成して、以下のように書きます
| 1 | class FollowsController < ApplicationController | |
| 2 | end | |
| @@ -0,0 +1,2 @@ |
プログラムコードを全て表示
view on GitHubfollowsとかfollowerとか名前がややこしいですが、落ち着いて確実に書いていきましょう。
| 1 | 1 | class FollowsController < ApplicationController |
| 2 | before_filter :require_login | |
| 3 | ||
| 4 | def create | |
| 5 | @user = User.find(params[:user_id]) | |
| 6 | ||
| 7 | if @user.inverse_follows.create(follower: current_user) | |
| 8 | redirect_to tweets_url, notice: "フォローしました" | |
| 9 | else | |
| 10 | redirect_to tweets_url, alert: "フォローできません" | |
| 11 | end | |
| 12 | end | |
| 2 | 13 | end |
| @@ -1,2 +1,13 @@ |
プログラムコードを全て表示
view on GitHubこちらも同様にややこしいですががんばりどころです。
| 10 | 10 | redirect_to tweets_url, alert: "フォローできません" |
| 11 | 11 | end |
| 12 | 12 | end |
| 13 | ||
| 14 | def destroy | |
| 15 | @user = User.find(params[:user_id]) | |
| 16 | follow = @user.inverse_follows.find_by(follower: current_user.id) | |
| 17 | follow.destroy | |
| 18 | redirect_to tweets_url, notice: "フォローを解除しました" | |
| 19 | end | |
| 13 | 20 | end |
| @@ -10,4 +10,11 @@ def create |
プログラムコードを全て表示
view on GitHubフォロー一覧 & フォロワー一覧を表示
| 16 | 16 | def favorites |
| 17 | 17 | @user = User.find(params[:id]) |
| 18 | 18 | end |
| 19 | ||
| 20 | def follows | |
| 21 | @user = User.find(params[:id]) | |
| 22 | end | |
| 19 | 23 | end |
| @@ -16,4 +16,8 @@ def show |
プログラムコードを全て表示
view on GitHub| 20 | 20 | def follows |
| 21 | 21 | @user = User.find(params[:id]) |
| 22 | 22 | end |
| 23 | ||
| 24 | def followers | |
| 25 | @user = User.find(params[:id]) | |
| 26 | end | |
| 23 | 27 | end |
| @@ -20,4 +20,8 @@ def favorites |
プログラムコードを全て表示
view on GitHubフォロワーのみのタイムラインを作成
| 9 | 9 | @tweet = Tweet.new |
| 10 | 10 | end |
| 11 | 11 | |
| 12 | def timeline | |
| 13 | @tweets = Tweet.eager_load(user: :inverse_follows).where(follows: { follower_id: current_user.id }) | |
| 14 | @tweet = Tweet.new | |
| 15 | end | |
| 16 | ||
| 12 | 17 | # GET /tweets/1 |
| 13 | 18 | # GET /tweets/1.json |
| 14 | 19 | def show |
| @@ -9,6 +9,11 @@ def index |
プログラムコードを全て表示
view on GitHubモデル(Model)を記述
User, Followの関連付け
followerはフォローした人、inverse_followerはフォローされた人、という意味付けでこの名前にしています。
関連するモデル名(User)と、belongs_toする名前(follower, inverse_follower)が異なっているので、どのモデルなのか、を示すために、class_nameオプションを指定する必要があります
関連するモデル名(User)と、belongs_toする名前(follower, inverse_follower)が異なっているので、どのモデルなのか、を示すために、class_nameオプションを指定する必要があります
| 1 | 1 | class Follow < ActiveRecord::Base |
| 2 | belongs_to :follower, class_name: User | |
| 3 | belongs_to :inverse_follower, class_name: User | |
| 2 | 4 | end |
| @@ -1,2 +1,4 @@ |
| 4 | 4 | has_many :tweets, dependent: :destroy |
| 5 | 5 | has_many :favorites, dependent: :destroy |
| 6 | 6 | |
| 7 | has_many :follows, foreign_key: :follower_id | |
| 8 | has_many :inverse_followers, through: :follows | |
| 9 | has_many :inverse_follows, foreign_key: :inverse_follower_id, class_name: Follow | |
| 10 | has_many :followers, through: :inverse_follows | |
| 11 | ||
| 7 | 12 | validates :name, presence: true, uniqueness: { case_sensitive: false }, format: { with: /\A[a-z][a-z0-9]+\z/ }, length: { in: 4..24 } |
| 8 | 13 | validates :screen_name, length: { maximum: 140 } |
| 9 | 14 | validates :bio, length: { maximum: 200 } |
| @@ -4,6 +4,11 @@ class User < ActiveRecord::Base |
プログラムコードを全て表示
view on GitHubValidationを定義する
お気に入り機能と同様に、belongs_toする先の2つはかならず必要で、フォローを重複させることは出来ないので、uniquenessをscopeで指定しています
| 1 | 1 | class Follow < ActiveRecord::Base |
| 2 | 2 | belongs_to :follower, class_name: User |
| 3 | 3 | belongs_to :inverse_follower, class_name: User |
| 4 | ||
| 5 | validates :follower, presence: true | |
| 6 | validates :inverse_follower, presence: true | |
| 7 | validates :inverse_follower_id, uniqueness: { scope: :follower_id } | |
| 4 | 8 | end |
| @@ -1,4 +1,8 @@ |
プログラムコードを全て表示
view on GitHubフォロー済みかどうか、を返すメソッドを定義
フォロー済みかどうか、のメソッドをUserモデルに定義します。さっきもやりましたね。
| 15 | 15 | validates :email, presence: true, uniqueness: { case_sensitive: false } |
| 16 | 16 | validates :password, confirmation: true, length: { in: 6..24 }, if: :password |
| 17 | 17 | validates :password_confirmation, presence: true, if: :password |
| 18 | ||
| 19 | def followed_by? user | |
| 20 | inverse_follows.where(follower_id: user.id).exists? | |
| 21 | end | |
| 18 | 22 | end |
| @@ -15,4 +15,8 @@ class User < ActiveRecord::Base |
プログラムコードを全て表示
view on GitHubViewを調整する
follow機能を実装
| 54 | 54 | = link_to "お気に入りの解除", tweet_favorites_path(t), method: :delete |
| 55 | 55 | - else |
| 56 | 56 | = link_to "お気に入りに登録", tweet_favorites_path(t), method: :post |
| 57 | - if t.user.followed_by? current_user | |
| 58 | = link_to "フォロー解除", user_follows_path(t.user), method: :delete | |
| 59 | - else | |
| 60 | = link_to "フォロー", user_follows_path(t.user), method: :post | |
| @@ -54,3 +54,7 @@ |
プログラムコードを全て表示
view on GitHubフォロー一覧 & フォロワー一覧を表示
| 16 | 16 | .num |
| 17 | 17 | #{@user.tweets.count} |
| 18 | 18 | %li |
| 19 | = link_to nil do | |
| 19 | = link_to follows_user_path(@user) do | |
| 20 | 20 | .text |
| 21 | 21 | フォロー |
| 22 | 22 | .num |
| @@ -16,7 +16,7 @@ |
プログラムコードを全て表示
view on GitHub| 1 | .col-xs-8#users-content | |
| 2 | = render partial: "users/header" | |
| 3 | .list-group | |
| @@ -0,0 +1,3 @@ |
プログラムコードを全て表示
view on GitHub| 1 | = div_for user, class: "list-group-item" do |u| | |
| 2 | %h4.user | |
| 3 | %span.user-name | |
| 4 | = link_to u.name, user_path(u) | |
| 5 | %span.user-id | |
| 6 | @#{u.name} | |
| 7 | .bio | |
| 8 | = u.bio | |
| 9 | .follow-unfollow | |
| 10 | - if u.followed_by? current_user | |
| 11 | = link_to "フォロー解除", user_follows_path(u), method: :delete | |
| 12 | - else | |
| 13 | = link_to "フォロー", user_follows_path(u), method: :post | |
| @@ -0,0 +1,13 @@ |
プログラムコードを全て表示
view on GitHub| 1 | 1 | .col-xs-8#users-content |
| 2 | 2 | = render partial: "users/header" |
| 3 | 3 | .list-group |
| 4 | = render @user.inverse_followers | |
| @@ -1,3 +1,4 @@ |
プログラムコードを全て表示
view on GitHub| 22 | 22 | .num |
| 23 | 23 | 0 |
| 24 | 24 | %li |
| 25 | = link_to nil do | |
| 25 | = link_to followers_user_path(@user) do | |
| 26 | 26 | .text |
| 27 | 27 | フォロワー |
| 28 | 28 | .num |
| @@ -22,7 +22,7 @@ |
プログラムコードを全て表示
view on GitHubfollows.html.hamlからコピペ
| 1 | .col-xs-8#users-content | |
| 2 | = render partial: "users/header" | |
| 3 | .list-group | |
| 4 | = render @user.inverse_followers | |
| @@ -0,0 +1,4 @@ |
プログラムコードを全て表示
view on GitHub| 1 | 1 | .col-xs-8#users-content |
| 2 | 2 | = render partial: "users/header" |
| 3 | 3 | .list-group |
| 4 | = render @user.inverse_followers | |
| 4 | = render @user.followers | |
| @@ -1,4 +1,4 @@ |
プログラムコードを全て表示
view on GitHub| 15 | 15 | つぶやき |
| 16 | 16 | .num |
| 17 | 17 | #{@user.tweets.count} |
| 18 | %li | |
| 18 | %li{ class: action_name == "follows" ? "active" : nil } | |
| 19 | 19 | = link_to follows_user_path(@user) do |
| 20 | 20 | .text |
| 21 | 21 | フォロー |
| 22 | 22 | .num |
| 23 | 23 | 0 |
| 24 | %li | |
| 24 | %li{ class: action_name == "followers" ? "active" : nil } | |
| 25 | 25 | = link_to followers_user_path(@user) do |
| 26 | 26 | .text |
| 27 | 27 | フォロワー |
| @@ -15,13 +15,13 @@ |
プログラムコードを全て表示
view on GitHub| 20 | 20 | .text |
| 21 | 21 | フォロー |
| 22 | 22 | .num |
| 23 | 0 | |
| 23 | #{@user.inverse_followers.count} | |
| 24 | 24 | %li{ class: action_name == "followers" ? "active" : nil } |
| 25 | 25 | = link_to followers_user_path(@user) do |
| 26 | 26 | .text |
| 27 | 27 | フォロワー |
| 28 | 28 | .num |
| 29 | 0 | |
| 29 | #{@user.followers.count} | |
| 30 | 30 | %li{ class: action_name == "favorites" ? "active" : nil } |
| 31 | 31 | = link_to favorites_user_path(@user) do |
| 32 | 32 | .text |
| 33 | 33 | お気に入り |
| 34 | 34 | .num |
| 35 | 0 | |
| 35 | #{@user.favorites.count} | |
| @@ -20,16 +20,16 @@ |
プログラムコードを全て表示
view on GitHub| 2 | 2 | .list-group |
| 3 | 3 | .list-group-item.user-list |
| 4 | 4 | %h2 ユーザー一覧 |
| 5 | = div_for @users, class: "list-group-item" do |u| | |
| 6 | %h4.user | |
| 7 | %span.user-name | |
| 8 | = link_to render_user_screen_name(u), user_path(u) | |
| 9 | %span.user-id | |
| 10 | @#{u.name} | |
| 11 | .bio | |
| 12 | = u.bio | |
| 5 | = render partial: "users/user", collection: @users | |
| @@ -2,11 +2,4 @@ |
プログラムコードを全て表示
view on GitHub| 21 | 21 | .text |
| 22 | 22 | フォロー |
| 23 | 23 | .num |
| 24 | 0 | |
| 24 | = link_to current_user.inverse_followers.count, follows_user_path(current_user) | |
| 25 | 25 | .col-xs-4.follower-num |
| 26 | 26 | .text |
| 27 | 27 | フォロワー |
| 28 | 28 | .num |
| 29 | 0 | |
| 29 | = link_to current_user.followers.count, followers_user_path(current_user) | |
| 30 | 30 | - @tweet.errors.full_messages.each do |message| |
| 31 | 31 | .alert.alert-danger= message |
| 32 | 32 | = form_for @tweet do |f| |
| @@ -21,12 +21,12 @@ |
プログラムコードを全て表示
view on GitHubtweets/indexからtweets/_panelにコピペ
| 1 | _panel.html.haml | |
| 1 | - if logged_in? | |
| 2 | .panel.panel-default | |
| 3 | .panel-body | |
| 4 | = link_to user_path(current_user), class: "user" do | |
| 5 | %span.user-name | |
| 6 | = render_user_screen_name current_user | |
| 7 | %span.user-id | |
| 8 | @#{current_user.name} | |
| 9 | .user-activity | |
| 10 | .row | |
| 11 | .col-xs-4.tweets-num | |
| 12 | .text | |
| 13 | つぶやき | |
| 14 | .num | |
| 15 | = link_to current_user.tweets.count, user_path(current_user) | |
| 16 | .col-xs-4.follow-num | |
| 17 | .text | |
| 18 | フォロー | |
| 19 | .num | |
| 20 | = link_to current_user.inverse_followers.count, follows_user_path(current_user) | |
| 21 | .col-xs-4.follower-num | |
| 22 | .text | |
| 23 | フォロワー | |
| 24 | .num | |
| 25 | = link_to current_user.followers.count, followers_user_path(current_user) | |
| 26 | - @tweet.errors.full_messages.each do |message| | |
| 27 | .alert.alert-danger= message | |
| 28 | = form_for @tweet do |f| | |
| 29 | .form-group | |
| 30 | = f.text_area :content, class: "form-control" | |
| 31 | = f.submit "つぶやく", class: "btn btn-success" | |
| @@ -1,0 +1,31 @@ |
| 2 | 2 | .container |
| 3 | 3 | .row |
| 4 | 4 | .col-xs-4.left-content |
| 5 | - if logged_in? | |
| 6 | .panel.panel-default | |
| 7 | .panel-body | |
| 8 | = link_to user_path(current_user), class: "user" do | |
| 9 | %span.user-name | |
| 10 | = render_user_screen_name current_user | |
| 11 | %span.user-id | |
| 12 | @#{current_user.name} | |
| 13 | .user-activity | |
| 14 | .row | |
| 15 | .col-xs-4.tweets-num | |
| 16 | .text | |
| 17 | つぶやき | |
| 18 | .num | |
| 19 | = link_to current_user.tweets.count, user_path(current_user) | |
| 20 | .col-xs-4.follow-num | |
| 21 | .text | |
| 22 | フォロー | |
| 23 | .num | |
| 24 | = link_to current_user.inverse_followers.count, follows_user_path(current_user) | |
| 25 | .col-xs-4.follower-num | |
| 26 | .text | |
| 27 | フォロワー | |
| 28 | .num | |
| 29 | = link_to current_user.followers.count, followers_user_path(current_user) | |
| 30 | - @tweet.errors.full_messages.each do |message| | |
| 31 | .alert.alert-danger= message | |
| 32 | = form_for @tweet do |f| | |
| 33 | .form-group | |
| 34 | = f.text_area :content, class: "form-control" | |
| 35 | = f.submit "つぶやく", class: "btn btn-success" | |
| 36 | 5 | .col-xs-8.right-content |
| 37 | 6 | - if notice |
| 38 | 7 | .alert.alert-info= notice |
| @@ -2,37 +2,6 @@ |
プログラムコードを全て表示
view on GitHub| 2 | 2 | .container |
| 3 | 3 | .row |
| 4 | 4 | .col-xs-4.left-content |
| 5 | = render partial: "panel" | |
| 5 | 6 | .col-xs-8.right-content |
| 6 | 7 | - if notice |
| 7 | 8 | .alert.alert-info= notice |
| @@ -2,6 +2,7 @@ |
プログラムコードを全て表示
view on GitHubtweets/indexからtweets/_tweetにコピペ
| 19 | 19 | .tweet-content |
| 20 | 20 | %p |
| 21 | 21 | = t.content |
| 22 | .content-footer | |
| 23 | - if t.favorited_by? current_user | |
| 24 | = link_to "お気に入りの解除", tweet_favorites_path(t), method: :delete | |
| 25 | - else | |
| 26 | = link_to "お気に入りに登録", tweet_favorites_path(t), method: :post | |
| 27 | - if t.user.followed_by? current_user | |
| 28 | = link_to "フォロー解除", user_follows_path(t.user), method: :delete | |
| 29 | - else | |
| 30 | = link_to "フォロー", user_follows_path(t.user), method: :post | |
| @@ -19,12 +19,3 @@ |
| 10 | 10 | .tweet-content |
| 11 | 11 | %p |
| 12 | 12 | = t.content |
| 13 | .content-footer | |
| 14 | - if t.favorited_by? current_user | |
| 15 | = link_to "お気に入りの解除", tweet_favorites_path(t), method: :delete | |
| 16 | - else | |
| 17 | = link_to "お気に入りに登録", tweet_favorites_path(t), method: :post | |
| 18 | - if t.user.followed_by? current_user | |
| 19 | = link_to "フォロー解除", user_follows_path(t.user), method: :delete | |
| 20 | - else | |
| 21 | = link_to "フォロー", user_follows_path(t.user), method: :post | |
| @@ -10,3 +10,12 @@ |
プログラムコードを全て表示
view on GitHubフォロワーのみのタイムラインを作成
tweets/indexからtweets/timelineにコピペ
| 7 | 7 | - if notice |
| 8 | 8 | .alert.alert-info= notice |
| 9 | 9 | .list-group |
| 10 | = div_for @tweets, class: "list-group-item" do |t| | |
| 11 | %h4.user | |
| 12 | %span.user-name | |
| 13 | = link_to render_user_screen_name(t.user), user_path(t.user) | |
| 14 | %span.user-id | |
| 15 | @#{t.user.name} | |
| 16 | %span.time.pull-right | |
| 17 | = distance_of_time_in_words_to_now(t.created_at) | |
| 18 | .clear | |
| 19 | .tweet-content | |
| 20 | %p | |
| 21 | = t.content | |
| 10 | = render partial: "users/tweet", collection: @tweets | |
| @@ -7,15 +7,4 @@ |
プログラムコードを全て表示
view on GitHub| 1 | #tweets-content | |
| 2 | .container | |
| 3 | .row | |
| 4 | .col-xs-4.left-content | |
| 5 | = render partial: "panel" | |
| 6 | .col-xs-8.right-content | |
| 7 | - if notice | |
| 8 | .alert.alert-info= notice | |
| 9 | .list-group | |
| 10 | = render partial: "users/tweet", collection: @tweets | |
| @@ -0,0 +1,10 @@ |
プログラムコードを全て表示
view on GitHub| 7 | 7 | - if notice |
| 8 | 8 | .alert.alert-info= notice |
| 9 | 9 | .list-group |
| 10 | .list-group-item | |
| 11 | .btn-group | |
| 12 | = link_to "すべてのつぶやき", tweets_path, class: "active btn btn-primary" | |
| 13 | = link_to "フォローしている人のつぶやき", timeline_tweets_path, class: "btn btn-default" | |
| 10 | 14 | = render partial: "users/tweet", collection: @tweets |
| @@ -7,4 +7,8 @@ |
プログラムコードを全て表示
view on GitHub| 7 | 7 | - if notice |
| 8 | 8 | .alert.alert-info= notice |
| 9 | 9 | .list-group |
| 10 | .list-group-item | |
| 11 | .btn-group | |
| 12 | = link_to "すべてのつぶやき", tweets_path, class: "active btn btn-primary" | |
| 13 | = link_to "フォローしている人のつぶやき", timeline_tweets_path, class: "btn btn-default" | |
| 10 | 14 | = render partial: "users/tweet", collection: @tweets |
| @@ -7,4 +7,8 @@ |
プログラムコードを全て表示
view on GitHubお気に入り/フォローしたとき、リファラを使って同じ画面を表示する
| 6 | 6 | @favorite = current_user.favorites.build(tweet: @tweet) |
| 7 | 7 | |
| 8 | 8 | if @favorite.save |
| 9 | redirect_to tweets_url, notice: "お気に入りに登録しました" | |
| 9 | redirect_to request.referer, notice: "お気に入りに登録しました" | |
| 10 | 10 | else |
| 11 | redirect_to tweets_url, alert: "このツイートはお気に入りに登録できません" | |
| 11 | redirect_to request.referer, alert: "このツイートはお気に入りに登録できません" | |
| 12 | 12 | end |
| 13 | 13 | end |
| 14 | 14 | |
| 15 | 15 | def destroy |
| 16 | 16 | @favorite = current_user.favorites.find_by!(tweet_id: params[:tweet_id]) |
| 17 | 17 | @favorite.destroy |
| 18 | redirect_to tweets_url, notice: "お気に入りを解除しました" | |
| 18 | redirect_to request.referer, notice: "お気に入りを解除しました" | |
| 19 | 19 | end |
| 20 | 20 | end |
| @@ -6,15 +6,15 @@ def create |
| 5 | 5 | @user = User.find(params[:user_id]) |
| 6 | 6 | |
| 7 | 7 | if @user.inverse_follows.create(follower: current_user) |
| 8 | redirect_to tweets_url, notice: "フォローしました" | |
| 8 | redirect_to request.referer, notice: "フォローしました" | |
| 9 | 9 | else |
| 10 | redirect_to tweets_url, alert: "フォローできません" | |
| 10 | redirect_to request.referer, alert: "フォローできません" | |
| 11 | 11 | end |
| 12 | 12 | end |
| 13 | 13 | |
| @@ -5,9 +5,9 @@ def create | ||
| 15 | 15 | @user = User.find(params[:user_id]) |
| 16 | 16 | follow = @user.inverse_follows.find_by(follower: current_user.id) |
| 17 | 17 | follow.destroy |
| 18 | redirect_to tweets_url, notice: "フォローを解除しました" | |
| 18 | redirect_to request.referer, notice: "フォローを解除しました" | |
| 19 | 19 | end |
| 20 | 20 | end |
| @@ -15,6 +15,6 @@ def destroy |
プログラムコードを全て表示
view on GitHub 
