おぴよの気まぐれ日記

おぴよの気まぐれ日記

岡山やプログラミング、ファッションのこと、子育てや人生、生き方についての備忘録。

30歳まで残り2年の僕は人生を変えるためにRailsチュートリアルを始めようと思う(番外編:シェア=リツイート機能の拡張)

こんにちは。opiyoです。

今回は、番外編:シェア=リツイート機能の拡張をやっていきます。

マイクロポストにリツイートアイコンを表示して、「シェア=リツイート」できるようにします。

ではでは、早速行ってみましょう。

やること

仕様

【できたこと】 - リツイートアイコンを表示する - リツイートされた数を表示する - リツイートしたポストがタイムラインにも表示される

【できてないこと】 - 自分のタイムラインにてリツイートしたポストを考慮してソートできてない - フォローしている人がリツイートしたポストがトップページにも表示される - 誰がリツイートしたのかポストに表示する

対象画面とイメージ

f:id:opiyotan:20170922135854p:plain

完成形(まだ途中だけど)

【view】

# app/views/microposts/_micropost.html.erb
<li id="micropost-<%= micropost.id %>">
  <% if micropost.retweet_user(current_user) %>
    <p><%= fa_icon("retweet green", text: "自分がリツイート") %></p>
  <% end %>
  <%= link_to gravatar_for(micropost.user, size: 50), micropost.user %>
  <span class="user"><%= link_to micropost.user.name, micropost.user %></span>
  <span class="content">
    <%= micropost.content %>
    <%= image_tag micropost.picture.url if micropost.picture? %>
  </span>
  <span class="timestamp">
    Posted <%= time_ago_in_words(micropost.created_at) %> ago.
  </span>
  <span class="action">
    <span id="like">
      <%= render "microposts/hart", micropost: micropost %>
    </span>
    <% if micropost.retweet_user(current_user) %>
      <%= link_to fa_icon("retweet green", text: micropost.retweets.count), retwwets_destroy_path(micropost_id: micropost.id) %>
    <% else %>
      <%= link_to fa_icon("retweet", text: micropost.retweets.count), retwwets_create_path(micropost_id: micropost.id) %>
    <% end %>
    <% if current_user?(micropost.user) %>
      <%= link_to fa_icon("trash"), micropost, method: :delete, data: {confirm: "You sure?"}, micropost_id: micropost.id  %>
    <% end %>
  </span>
</li>

【controller】

# app/controllers/retwwets_controller.rb
class RetwwetsController < ApplicationController
  before_action :correct_user, only: [:edit, :update]

  def create
    micropost = Micropost.find(params[:micropost_id])
    Retweet.create(user_id: current_user.id, micropost_id: micropost.id)

    # 対象のマイクロポストのupdate_atを現在時刻にする
    Micropost.find(micropost.id).update_attribute(:updated_at, Time.now)

    redirect_to root_path
  end

  def destroy
    micropost = Micropost.find(params[:micropost_id])
    Retweet.find_by(user_id: current_user.id, micropost_id: micropost.id).destroy

    # 対象のマイクロポストのupdate_atを現在時刻にする
    Micropost.find(micropost.id).update_attribute(:updated_at, Time.now)

    redirect_to root_path
  end
end
# app/controllers/users_controller.rb
  def show
    @user = User.find(params[:id])
    @microposts = @user.myfeed.paginate(page: params[:page])
      .where('content LIKE ?', "%#{params[:search]}%")
      .reorder(updated_at: :DESC)
  end

【model】

# app/models/micropost.rb
  has_many :retweets, dependent: :destroy

  # シェア=リツイートしたかしてないか確認する
  def retweet_user(user_id)
    self.retweets.find_by(user_id: user_id)
  end
# app/models/retweet.rb
class Retweet < ApplicationRecord
  belongs_to :micropost, counter_cache: :retweets_count
  belongs_to :user
end
# app/models/user.rb
  # マイクロポストを取得する
   # 自分と自分がフォローしているユーザー
   # 自分がリツイート
   # フォローしているユーザーがリツイート(未実装)
  def feed
    following_ids = "SELECT followed_id FROM relationships
      WHERE follower_id = :user_id"
    retweet_ids = "SELECT micropost_id FROM retweets
      WHERE user_id = :user_id"

    Micropost.where("id IN (#{retweet_ids}) OR user_id IN (#{following_ids})
      OR user_id = :user_id", user_id: id)
  end

  # 自分が投稿、リツイートしたマイクロポストを取得する
  def myfeed
    retweet_ids = "SELECT micropost_id FROM retweets
      WHERE user_id = :user_id"
    Micropost.where("id IN (#{retweet_ids}) OR user_id = :user_id", user_id: self.id).order(:updated_at)
  end

【その他】

# config/routes.rb
get 'retwwets/create'
get 'retwwets/destroy'
# db/migrate/20170912225854_create_retweets.rb
class CreateRetweets < ActiveRecord::Migration[5.0]
  def change
    create_table :retweets do |t|
      t.integer :user_id
      t.integer :micropost_id

      t.timestamps
    end
  end
end
# db/migrate/20170919223052_add_retweets_count_to_microposts.rb
class AddRetweetsCountToMicroposts < ActiveRecord::Migration[5.0]
  def change
    add_column :microposts, :retweets_count, :integer
  end
end

ハマった/気づきポイント

orderを指定してもソート順が変化しない?

自分のタイムラインに表示するポストを更新日順の降順=新しい投稿を上にするをしたくて、最初はこう書いていた。

  def show
    @user = User.find(params[:id])
    @microposts = @user.myfeed.paginate(page: params[:page])
      .where('content LIKE ?', "%#{params[:search]}%")
      .order(updated_at: :DESC)
  end

だけど、なんだか上手くいかないなーと思っていたら犯人を見つけた!

# app/models/micropost.rb
default_scope -> { order(created_at: :desc) }

これが定義されていることで、micropost へのデータ取得はこれが絶対に設定されてしまう。

だから違う設定を反映したい場合は再定義してやる必要があるのだが、解決方法はすごーくシンプル。orderreorderにすればOK

  def show
    @user = User.find(params[:id])
    @microposts = @user.myfeed.paginate(page: params[:page])
      .where('content LIKE ?', "%#{params[:search]}%")
      .reorder(updated_at: :DESC)
  end

リツイートしたポストを表示する

やり方あってるか分からないけど、リツイートしたポストはリツイートテーブルに登録されるのでログインユーザーで引っ掛けて取得。

それをin句を使って取得って感じでやった。

  def myfeed
    retweet_ids = "SELECT micropost_id FROM retweets
      WHERE user_id = :user_id"
    Micropost.where("id IN (#{retweet_ids}) OR user_id = :user_id", user_id: self.id).order(:updated_at)
  end

最初where句の書き方を反対に書いていたのだけど、それだと上手くいかなかったんだが良く分かってない。

これは引き続き調べよう。

自分が投稿、リツイートしたポストで更新順に並べる(未解決)

今そうなっているのだが、リツイートしたタイミングでポストの更新日を更新すれば良いじゃね?と思って実装したのだが複数人が同じポストをリツイートすると当然毎回更新がかかっておかしくなる。

こんな感じでデータが取ってくれれば良いのだろうけど、SQLが分からない。

  • マイクロポストのID
  • マイクロポストのコンテンツ
  • マイクロポストの作成日
  • リツイートの作成日

トップページのタイムラインにフォローしているユーザーがリツイートしたポストを表示する(未解決)

やり方としてはこんな感じなのかなぁ

  • ログインユーザーがフォローしているユーザーを取得する
  • ↑を使ってリツイートテーブルからマイクロポストのIDを取得する
  • ↑を使ってマイクロポストテーブルからデータを取得する

自分とフォローしているユーザー、自分とフォローしているユーザーがリツイートしているデータをin句で書けば良いのかなと思ったのだが上手くいかないぁ

まとめ

リツイートアイコンの表示やリツイートした数の表示は、いいね機能とほとんど同じなので比較的素直に実装できた。

が、やはりSQL力が全然無い。

複数テーブルを参照しながらデータを取得しないといけないとなると途端に分からなくなる。

以前お世話になった現場の先輩が「プログラムの仕事は7割くらいSQL力」のような事を言っていた事を思い出した。

少し大げさな気がするが、SQL力が大事なことは改めて実感した。

プログラマーは本当に次から次へと覚えることが多いから大変だけど、一つ一つしっかり学んで「こういう時はこーする」みたいな感覚がしっかり掴むことが大事なのかなとも思う。

だからとにかく手を止めずに頑張ろう。

30歳まで残り2年の僕は人生を変えるためにRailsチュートリアルを始めようと思う(番外編:いいね機能の拡張)

こんにちは。opiyoです。

今回は、番外編:いいね機能の拡張をやっていきます。

マイクロポストにハートアイコンを表示して、「いいね」できるようにします。

ではでは、早速行ってみましょう。

やること

仕様

「いいね」機能を実装するに当たって、ざっくりだけど仕様を明確にしてみようと思う。

  • 一つ一つのマイクロポストに「いいね」することができる
  • 「いいね」は一つのマイクロポストに対して一人一回まで
  • 「いいね」表示場所は、投稿日下にアイコンを使って表示する(いいね:ハート、削除:ゴミ箱)
  • 「いいね」されたら赤いハート、取り消されたら白いハートにする
  • 「いいね」された数を表示する(実装中)
  • 「いいね」ボタンはajaxで処理する(困ってる)

こんな感じだろうか。一人一回までって制御が出来れば色々サンプルはありそうだし出来そうかな?

対象画面とイメージ

対象になる画面は2つ

【トップページ:app/views/static_pages/home.html.erb】 f:id:opiyotan:20170908180203p:plain

【ユーザー詳細ページ:app/views/users/show.html.erb】 f:id:opiyotan:20170908180300p:plain

完成形(まだ途中だけど)

全部乗っけると数が多くなるので、主要な部分を載せます。

【view】

# app/views/likes/create.js.erb
$(".micropost<%= @micropost.id %> i").addClass("fa-heart");
$(".micropost<%= @micropost.id %> i").removeClass("fa-heart-o");
// $(".micropost<%= @micropost.id %>").text("<%= @micropost.likes_count %>"); # これやるとアイコンが消えちゃう
# app/views/likes/destroy.js.erb
$(".micropost<%= @micropost.id %> i").addClass("fa-heart-o");
$(".micropost<%= @micropost.id %> i").removeClass("fa-heart");
// $(".micropost<%= @micropost.id %>").text("<%= @micropost.likes_count %>"); # これやるとアイコンが消えちゃう
# app/views/microposts/_micropost.html.erb
<li id="micropost-<%= micropost.id %>">
  <%= link_to gravatar_for(micropost.user, size: 50), micropost.user %>
  <span class="user"><%= link_to micropost.user.name, micropost.user %></span>
  <span class="content">
    <%= micropost.content %>
    <%= image_tag micropost.picture.url if micropost.picture? %>
  </span>
  <span class="timestamp">
    Posted <%= time_ago_in_words(micropost.created_at) %> ago.
  </span>
  <span class="action">
    <% if micropost.like_user(current_user.id) %> # ----- ここから -----
      <%= link_to fa_icon("heart", text: micropost.likes_count), likes_destroy_path(micropost_id: micropost.id), remote: true, class: "micropost#{micropost.id}" %>
    <% else %>
      <%= link_to fa_icon("heart-o", text: micropost.likes_count), likes_create_path(micropost_id: micropost.id), remote: true, class: "micropost#{micropost.id}"  %>
    <% end %>
    <% if current_user?(micropost.user) %>
      <%= link_to fa_icon("trash"), micropost, method: :delete, data: {confirm: "You sure?"}, micropost_id: micropost.id  %>
    <% end %>  # ----- ここまで -----
  </span>
</li>

【controller】

# app/controllers/likes_controller.rb
class LikesController < ApplicationController
  def create
    micropost = Micropost.find(params[:micropost_id])
    Like.create(user_id: current_user.id, micropost_id: micropost.id)
    @micropost = Micropost.find(params[:micropost_id])

    respond_to do |format|
      format.html { redirect_to root_path}
      format.js
    end
  end

  def destroy
    micropost = Micropost.find(params[:micropost_id])
    Like.find_by(user_id: current_user.id, micropost_id: micropost.id).destroy
    @micropost = Micropost.find(params[:micropost_id])

    respond_to do |format|
      format.html { redirect_to root_path}
      format.js
    end
  end
end

【model】

# app/models/like.rb
class Like < ApplicationRecord
  belongs_to :micropost, counter_cache: :likes_count
  belongs_to :user
end
# app/models/micropost.rb
class Micropost < ApplicationRecord
  has_many :likes, dependent: :destroy
end

【routes】

# config/routes.rb
  get 'likes/create'
  get 'likes/destroy'

【migration】

class CreateLikes < ActiveRecord::Migration[5.0]
  def change
    create_table :likes do |t|
      t.integer :user_id
      t.integer :micropost_id

      t.timestamps
    end
  end
end
class AddIndexToLikesUserIdAndMicropostId < ActiveRecord::Migration[5.0]
  def change
    add_index :likes, [:user_id, :micropost_id], unique: true
  end
end
class AddlikesCountToMicroposts < ActiveRecord::Migration[5.0]
  def change
    add_column :microposts, :likes_count, :integer
  end
end

githubにpushしています。

色々と試行錯誤している跡がコミット追うと分かりますね。

ハマった/気づきポイント

いいねの数が変わらない

ハートのアイコンを押したらいいねの数がカウントアップするって処理をしたいのだけど、数が変わらない。

DB見ると間違いなく登録されている。何が問題なのかなーと思っていたら…馬鹿やろうだった。

# app/controllers/likes_controller.rb
  def create
    micropost = Micropost.find(params[:micropost_id])
    Like.create(user_id: micropost.user_id, micropost_id: micropost.id)
    @micropost = Micropost.find(params[:micropost_id]) # これしてなかった

    respond_to do |format|
      format.html { redirect_to root_path}
      format.js
    end
  end

createした後にデータを再取得する処理をしてなかったので、viewに返しているデータはcreateする前のオブジェクト。

そりゃー変わらないわ

未解決問題

いいねボタンの連続で押せない

今の段階だとajaxでアイコンといいねの数だけ切り替えてしまっている。 これだと切り替えたあと、link_toのパスとかが変わらないからおかしな状況になる。

だからきっと、その部分だけを別ファイルにしてrender hogeみたいにしてやればいいのかなって思ってる。

いいねの数を書き換えるとアイコンが消える!

やりたいことは、いいねの数を更新させたいだけなのだけど、単純に.text("hoge")ってやると子階層にあるタグが消えちゃう。

<div id="parent">
    親要素
  <p>子要素</p>
</div>
<button id="button">変更する</button>

$("#button").on("click", function(){
  $("#parent").text("変更後の文章");
});

<div id="parent">
    変更後の文章
</div>

こんな状況の時、pタグは消えます!

これはどうすればいいじゃろうか。多分根本的には上で書いたようにviewrenderするってのが正しいアプローチなんだとは思う。

最後に

まだ完成してないのだが、どうにかこうにか形になってきたので一先ずまとめてみました。

実装時間が長くなってしまったので当時ハマったことが少し思い出せない所もあり、もったい無いなと感じております。

解決できた時は嬉しくて先へ先へ進んじゃいがちだけど、一度立ち止まって何がダメだったのかをしっかり考える→まとめてみるってのは今後やっていこうと思いました。きっとそこが一番成長できる所だと思うので次回出会った時に「あーこの前のあれねって」思えるように。

まだまだ解決できてない部分もあるし、Likeモデルのcounter_cacheの機能もいまいち良く分かって無いので引き続き頑張ろうと思います。

未解決問題のajaxでの処理を追記

上で書いた2つの問題点を解決することに成功しましたので、追記でまとめます!

問題点

上に書いてある通りですが、大きく二つ

  • クラスの付けかけだけしてるので、link_toのパスが変わらない
  • いいねの数が消える

これに対するアプローチは、やはり

更新したい場所のみを再度renderする

うん。アプローチはやはり間違ってなかった!

解決したソース

とりあえずソースを貼ります!

【「いいね」前】 f:id:opiyotan:20170912074005p:plain

【「いいね」後】 f:id:opiyotan:20170912074034p:plain

# app/views/microposts/_micropost.html.erb
  <span class="action">
    <span id="like"> # ajaxで処理する時に「どこを差し替える」が必要なので、それを追加
      <%= render "microposts/hart", micropost: micropost %> # この部分を`_hart`としてテンプレート化する!
    </span>
    <% if current_user?(micropost.user) %>
      <%= link_to fa_icon("trash"), micropost, method: :delete, data: {confirm: "You sure?"}, micropost_id: micropost.id  %>
    <% end %>
  </span>
# app/views/microposts/_hart.html.erb
<% if micropost.like_user(current_user.id) %>
  <%= link_to fa_icon("heart", text: micropost.likes_count), likes_destroy_path(micropost_id: micropost.id), remote: true, class: "micropost#{micropost.id}" %>
<% else %>
  <%= link_to fa_icon("heart-o", text: micropost.likes_count), likes_create_path(micropost_id: micropost.id), remote: true, class: "micropost#{micropost.id}"  %>
<% end %>
# app/views/likes/create.js.erb
$("#like").html("<%= escape_javascript(render 'microposts/hart', micropost: @micropost) %>");
console.log("ajaxで処理")
# app/views/likes/destroy.js.erb
$("#like").html("<%= escape_javascript(render 'microposts/hart', micropost: @micropost) %>");
console.log("ajaxで処理")

解決のポイント

アプローチの仕方は間違ってなかった。ようはhartの部分だけ再度描画させたかったので、その部分を外出ししてそこだけ描画させる。

描画のやり方がjsのファイルで書いてあるやつだ。

likeクラスを持ったspanタグの中身をhtmlメソッドで全て置き換えているイメージ。

<%= escape_javascript(render 'microposts/hart', micropost: @micropost) %>の部分は極端に言うと展開されたhtmlになるようなイメージ。

だからこんな感じなのかな。

$("#like").html(<a class="micropost301" data-remote="true" href="/likes/create?micropost_id=301">
  <i class="fa fa-heart-o"></i> 0
</a>)


やっていく中でハマったポイントはmicropostインスタンスの渡し方。

最初jsのファイルにはmicropost: @micropostを書いて無くてずっとエラーになっていた。

Completed 500 Internal Server Error in 181ms (ActiveRecord: 2.7ms)

ActionView::Template::Error (undefined local variable or method `micropost' for #<#<Class:0x007fe0a1a1a368>:0x007fe0a6dc1110>
Did you mean?  @micropost):

micropostがねーよってことですね。だからコントローラーで取得したインスタンスを渡してあげて解決!

もっかいまとめ

ajaxの処理にめちゃくちゃハマって、すげー時間を使ってしまった。

最終的には教えてもらう形で解決出来たのだが、本当に感謝感謝感謝ですね。

よく未経験エンジニアからエンジニアへっていう記事がありますが、そこに絶対書かれているのが

メンターを見るけること

これは絶対そー思います。僕が3日くらい悩んでいたものが30分で解決出来てしまうのですから間違い無いです。

いつでも相談出来るちゃうものや無料でプログラミグを教えてくれて転職支援までしてくれるサービスなど本当にいっぱいあるので一度覗いてみてください。

オンラインプログラミング研修のCodeCamp

プログラミングのオンラインスクールCodeCamp

【未経験からプログラマ】完全無料であなたの就職をサポート


ちなみに、今回ajax処理を頑張って実装しましたが、別に無くても良いんじゃ無い?という話もありました。

普通にhtmlで返しても全く動きは同じだし、このぐらいのレベルならば正直あまりメリットは無い。だからスピードが遅くてダメだーってなってから対策するってアプローチの方で問題無いって。

一つのことにこだわることも大事だけど、別の事もやりたいとか全体が終わってないとかなるぐらいならば思い切って後回しってのは良いアプローチなのかもしれないですね。

ってな感じでした。

30歳まで残り2年の僕は人生を変えるためにRailsチュートリアルを始めようと思う(番外編:検索機能の拡張)

こんにちは。opiyoです。

今回は、番外編:検索機能の拡張をやっていきます。

ユーザーとマイクロポストをあいまい検索できるような機能を各画面に追加します。

ではでは、早速行ってみましょう。

ユーザー一覧に名前をあいまい検索できる

f:id:opiyotan:20170905090515p:plain

# app/views/users/index.html.erb
<% provide(:title, 'All users') %>
<h1>All users</h1>

<%= will_paginate %>

<%= form_tag users_path, method: :get do %>
  <p>
    <%= text_field_tag :search %>
    <%= submit_tag "検索" %>
  </p>
<% end %>

<ul class="users">
  <%= render @users %>
</ul>

<%= will_paginate %>
# app/controllers/users_controller.rb
  def index
    @user_form = User.new

    @users = User.paginate(page: params[:page]).search(params[:search])
  end
# app/models/user.rb
  def self.search(search)
    if search
      where('name LIKE ?', "%#{sanitize_sql_like(search)}%") # Likeインジェクション対策をしてみた
    else
      all
    end
  end

ユーザー詳細のマイクロポストのコンテンツをあいまい検索できる

【検索前】

f:id:opiyotan:20170905090343p:plain

【検索後】

f:id:opiyotan:20170905090442p:plain

# app/views/users/show.html.erb
<% provide(:title, @user.name) %>
<div class="row">
  <aside class="col-md-4">
    <section class="user_info">
      <h1>
        <%= gravatar_for @user %>
        <%= @user.name %>
      </h1>
    </section>
    <section class="stats">
      <%= render 'shared/stats' %>
    </section>
  </aside>
  <div class="col-md-8">
    <%= render 'follow_form' if logged_in? %>
    <% if @microposts.any? %>
      <h3>MicroPosts (<%= @microposts.count %>)</h3> # 検索結果のマイクロポストの数を表示させる
      <%= form_tag user_path, method: :get do %> # ----- ここから追加した検索フォーム -----
        <p>
          <%= text_field_tag :search %>
          <%= submit_tag "検索" %>
        </p>
      <% end %> # ----- ここまで -----
      <ol class="microposts">
        <%= render @microposts %>
      </ol>
      <%= will_paginate @microposts %>
    <% end %>
  </div>
</div>
# app/controllers/users_controller.rb
  def show
    @user = User.find(params[:id])

    @microposts = @user.microposts.paginate(page: params[:page]).where('content LIKE ?', "%#{params[:search]}%") # 何も入力せず検索しても「""」で渡ってくるので、エラーにはならない
    # @microposts = @user.microposts.paginate(page: params[:page]).search(params[:search]) # こう書いてモデル側でSQL組み立てたいのだが...
  end

トップページのマイクロポストのコンテンツをあいまい検索できる

f:id:opiyotan:20170905085817p:plain

# app/views/static_pages/home.html.erb
<% if logged_in? %>
  <div class="row">
    <aside class="col-md-4">
      <section class="user_info">
        <%= render 'shared/user_info' %>
      </section>
      <section class="stats">
        <%= render 'shared/stats' %>
      </section>
      <section class="micropost_form">
        <%= render 'shared/micropost_form' %>
      </section>
    </aside>
    <div class="col-md-8">
      <h3>Micropost Feed</h3>
      <%= form_tag root_path, method: :get do %> # ----- ここからformの追加 -----
        <p>
          <%= text_field_tag :search %>
          <%= submit_tag "検索" %>
        </p>
      <% end %> # ----- ここまで -----
      <%= render 'shared/feed' %>
    </div>
  </div>
<% else %>
  <% provide(:title, "Home") %>
  <div class="center jumbotron">
    <h1>Welcome to the Sample App</h1>

    <h2>
      This is the home page for the
      <a href="http://railstutorial.jp/">Ruby on Rails Tutorial</a>
      sample application.
    </h2>

    <%= link_to "Sign up now!", signup_path, class: "btn btn-lg btn-primary" %>
  </div>

  <%= link_to image_tag("rails.png", alt: "Rails logo"), "https://rubyonrails.org/" %>
<% end %>
# app/controllers/static_pages_controller.rb
  def home
    if logged_in?
      @micropost = current_user.microposts.build if logged_in?
      @feed_items = current_user.feed.paginate(page: params[:page]).where('content LIKE ?', "%#{params[:search]}%") # 何も入力せず検索しても「""」で渡ってくるので、エラーにはならない
    end
  end

ハマった/気づきポイント

form_forは難しい

# index.html.erb
<%= form_for @user_form, url: users_path, method: :get do |f| %>
  <%= f.text_field :name %>
  <%= f.submit "Serach", class: "btn btn-primary" %>
<% end %>

オブジェクトを指定するときはコントローラー側で必ずnewすべし。検索結果があるから大丈夫って思ってたんだけど何故かエラーになる。 だからとりあえず、form_forで使うオブジェクトは検索結果を格納したオブジェクトとは別にnewしたオブジェクトを作って指定した。

あとは、f.text_field :nameで渡すシンボルの部分がform_forで使ったモデルにあるカラム名と同じじゃないとエラーになる。

paginateの後にwhereしてもいける!

@user.microposts.where("content LIKE ?", "%#{params[:search]}%").paginate(page: params[:page])

@user.microposts.paginate(page: params[:page]).where("content LIKE ?", "%#{params[:search]}%") # whereを後ろに持ってこれる。

これ見てもらった方が分かりやすいと思うのだけど、検索結果にはpaginateメソッドを使ってページネーションができるようにしてます。 だから、paginateメソッドの前にしかwhereできないと思ってたのだけどそんなことなかった。

あいまい検索

where("検索したい項目 LIKE ?", "%#{sanitize_sql_like(hogehoge)}%")

基本的にはwhereの第一引数に文字列を渡して、第二引数に?に入る値を渡してやればOK

SQL文の組み立てはモデルで

コントローラーでやる場合
# users_controller.rb
  def index
    @user_form = User.new

    @users = User.where("name like ?", "%#{params[:user][:name]}%").paginate(page: params[:page]) # かっこ悪い。
  end
モデルでやる場合
# users_controller.rb
  def index
    @user_form = User.new
    @users = User.paginate(page: params[:page]).search(params[:search]) # Userモデルの`search`メソッドを読んでUserモデル側で処理する
  end
# user.rb
  def self.search(search)
    if search
      where('name LIKE ?', "%#{search}%")
    else
      all
    end
  end

最初コントローラーでやってたんだけど、Railsチュートリアルにある例を見るとSQL文はモデルで組み立てる。

ユーザーモデルの方は何も問題なかったのだが、マイクロポストモデルの方では戻り値がマイクロポストじゃないから上手くモデル側で処理できなかった。 こういう場合は

# ユーザーの検索処理の場合
(byebug) User.paginate(page: params[:page]).class
User::ActiveRecord_Relation

(byebug) User.paginate(page: params[:page]).search("User") # Userモデルに定義した`search`メソッドが呼べる。
  User Load (0.7ms)  SELECT  "users".* FROM "users" WHERE (name LIKE '%User%') LIMIT ? OFFSET ?  [["LIMIT", 30], ["OFFSET", 0]]
#<ActiveRecord::Relation [#<User id: 1, name: "Example User", email: "example@railstutorial.org", created_at: "2017-08-31 03:24:43", updated_at: "2017-08-31 04:05:36", password_digest: "$2a$10$c6SeUXq5hRG9FLJqNIM3EOUBiRuv/CXa3C3u6vEgRky...", remember_digest: "$2a$10$FPWHJckDrGrMyR7wTT.RjeybzbZjmR2uHBVtPPoYwGm...", admin: true, activation_digest: "$2a$10$Ww6ud8vjul5IqocU7vvQTecZYH4dqaBS0MuPAvQNDcQ...", activated: true, activated_at: "2017-08-31 03:24:43", reset_digest: nil, reset_sent_at: nil>]>

# マイクロポストの検索処理の場合
(byebug) @user.microposts.paginate(page: params[:page]).search(params[:search]) # そんなメソッドねーよってなっちゃう
*** NoMethodError Exception: undefined method `search' for #<Micropost::ActiveRecord_AssociationRelation:0x007fb506959698>
Did you mean?  each

(byebug) @user.microposts.paginate(page: params[:page]).class
Micropost::ActiveRecord_AssociationRelation

うーん。普通にMicropostモデルのsearchメソッドが呼べそうだけど、何がダメなんだろうか。

最後に

当たり前だけど新しい機能を実装していくと全て考えて試行錯誤しながらやらないといけない。

Railsチュートリアルをやっていると訳分からずでも同じようにコピーすれば、とりあえず動く。だけどそうはいかない。エラーしか出てこない。

だけどこうやって頭使ってやっていくことが一番成長するのだろうと思う。

まだまだ全然思い通りにならない。今回の場合はお手本もあり何とか動くところまで持っていけた。

だけどきっと少しずつ出来るようにはなっているはずだから、手を止めずに前向いて頑張っていこう!

追記

Nfm4yxnW8さんご指摘いただきました。

入門者に無粋な指摘で申し訳ないけどLIKE injectionを実行できちゃうよ。ここでは大きな問題にならないけど、他の場所では致命傷になるかも。 http://euglena1215.hatenablog.jp/entry/2016/09/22/171850 https://githubengineering.com/like-injection/

僕が書いたコードだと、「Likeインジェクション」っていう脆弱性がある。ユーザーが入力された文字をそのままSQLの条件にしてしまっているからだ。

教えていただいたサイトと同じようにやってみる

# params[:search]に「');--」が入ってくると...
(byebug) params[:search]
"');--"
(byebug) @user.microposts.paginate(page: params[:page]).where('content LIKE ?', "%#{params[:search]}%").count
   (0.2ms)  SELECT COUNT(*) FROM "microposts" WHERE "microposts"."user_id" = ? AND (content LIKE '%'');--%')  [["user_id", 1]]
0
# params[:search]に「’ AND password LIKE ‘password’);—」が入ってくると...
(byebug) params[:search]
"’ AND password LIKE ‘password’);—"
(byebug) @user.microposts.paginate(page: params[:page]).where('content LIKE ?', "%#{params[:search]}%").count
   (0.3ms)  SELECT COUNT(*) FROM "microposts" WHERE "microposts"."user_id" = ? AND (content LIKE '%’ AND password LIKE ‘password’);—%')  [["user_id", 1]]
0

ごめんなさい。SQL力が低すぎてどうやったらダメなのか分からなかったから、例題通りやってみたのだけど上手くいかなかった。改めて勉強します。

とはいえ、何か上手くやれば攻撃されちゃうってことなので、こういった記号はエスケープされるように処理する。

# あー多分コントローラーじゃ使えないんだなー後で直す
@user.microposts.paginate(page: params[:page]).where('content LIKE ?', "%#{sanitize_sql_like(params[:search])}%")
NoMethodError (undefined method `sanitize_sql_like' for #<UsersController:0x007ffcddb73ce8>):
# userモデル
  def self.search(search)
    if search
      where('name LIKE ?', "%#{sanitize_sql_like(search)}%")
    else
      all
    end
  end

# コンソール
(byebug) params[:search]
"');--"
(byebug) User.paginate(page: params[:page]).search(params[:search])
  User Load (0.3ms)  SELECT  "users".* FROM "users" WHERE (name LIKE '%'');--%') LIMIT ? OFFSET ?  [["LIMIT", 30], ["OFFSET", 0]]
#<ActiveRecord::Relation []>

うーん。エラーにはならなかったけどエスケープされているようには見えない。 うーん。よくわからないな。

とりあえずタイムアップ。また調べてみよう。

プログラミング初心者でも出来た!ビットコイン自動売買システムをRubyで作る

こんにちは。opiyoです。

今日は私が入会している人生逃げ切りサロンのメンバーである迫 佑樹さんが

Rubyで作る! ビットコイン自動売買システム

の作り方を解説した動画について紹介させてもらいます。


この動画の最大の魅力はプログラミング経験が全くない人でもPCさえあれば誰でも作れてしまうところです!

私は、この動画で学んだことをフル活用して自分でも簡単なRailsアプリを作って見ました。

これについても最後に簡単に紹介できればと思います。


皆さん。プログラミングを学べば誰でも金持ちになれるそうですよ?

そのきっかけを迫 佑樹さんから学ばせてもらいましょう。

迫 佑樹(さこ ゆうき)さんって何者?

f:id:opiyotan:20170903020123p:plain

先ずは簡単ではありますが迫さんの紹介です。

  • 現役の大学生
  • Web、iPhoneアプリのフリーランスエンジニア
  • プログラミングスクールの現役講師
  • 月間12万PVのブログ「ロボット・IT雑食日記」を運営(はてなブログで良くホットエントリーしてますよね)
  • ブログの中の大人気記事「暗記しない数学」が書籍化

とんでもなくスゲー人ってことが伝わると思います。

今回紹介する動画は、現役のプログラミングスクール講師である迫さんが作っているってのが僕はポイントだと思っていて本当に分かりやすいです。

ブログの中にもプログラミング勉強法についての記事があったり、色々な言語の入門記事があったりと見ているだけでプログラミング力が上がります。

動画の内容

では、本題。

このRubyで作る! ビットコイン自動売買システムの動画で何が学べるのか。大きくは2つです。

1. Rubyの基礎

正直これだけでもめちゃくちゃ勉強になりますし、くどいですがとんでもなく分かりやすい。さすが先生です。


例えば、「配列」

話の流れとしては、各教科のテストの点数の平均を出したい。 その場合は以下のように解くことが出来ます。

japanese = 80
math = 60
science = 30
history = 60
english = 70

(japanese + math + science + history + english) / 5

だけどこれが100人分ってなると、この組み合わせが100個準備しないといけない → これは大変。じゃーどうするのか。

見ないな形で、何故この仕組み/工夫が必要なのかが順を追って説明してくれるのでイメージしやすいのです。(あー俺の説明が逆に分かりづらくしてしまっている気がしますが、是非動画を。動画を見てください。)


その他の内容としては、こんな感じです。

  • 条件分岐(if …)
  • 繰り返し文(while …)
  • 変数(hoge = 80)
  • 配列(score = [80,30,60,50,20])
  • ハッシュ(score = “japanese” => 80, “math” => 60 …)
  • メソッド(def hoge …. end)

この基礎の部分が理解できれば色々出来ることが一気に広がると思います。その基礎固めに、この動画完璧な内容だと僕は感じました。

2. bitFlyerAPIの基礎

bitFlyerってのは今流行りの仮想通貨ビットコインの取引所になります。

このビットコイン取引所とのやり取りをAPIと呼ばれる仕組みを使ってプログラミングを学んでいきます。

最後までやり切ると、自動でビットコインの購入/売却が可能になっちゃいます。


僕は全然こういう知識が無いのですが、きっとここまでのことが出来てしまうと更に応用を効かせて本当に自動で何もせずとも稼ぐ人が現るのでは無いでしょうか。

動画を見て作ったサービスの紹介

お見せする程のものではありませんが、今回動画で学んだ経験を生かして現在の各仮想通貨の値段が幾らなのかを表示するWebアプリをRuby on Railsを使って作成してみました。

実際のソースコードとサイトURLを以下になります。

このソースコードの紹介は改めてできればと思います。

最後に

数多くあるRubyの基礎勉強ページですが、これを見てしまうと全部無駄に感じてしまいます。 それくらい価値ある動画だと感じました。

何かサービス/アプリを作るのに最低限の知識を、これでもかってくらい分かりやすく解説されています。


プログラミングの本って入門本を一冊やり切るだけで大変で、当初思い描いていた「こんなの作りたい!」って気持ちを忘れてしまうこと多くあると思います。

ですが、このRubyで作る! ビットコイン自動売買システムであれば1時間くらいで基礎についてはバッチリ学ぶことが出来ますし動画なのでつまづくことが無いのも素敵なポイントです。


プログラミングが出来ると人生は変わると多くの人が言っていますし、これを実現している人もいっぱいいます。

そのきっかけをこの動画からってのは大いにある話だと思いますので、皆さんも是非楽しんでプログラミングを学び明るい未来を切り開きましょう!

Railsチュートリアルの環境はCloud9で決まり!

こんにちは。opiyoです。

Webアプリケーションの勉強をする際に先ず引っかかるので環境構築ではないでしょうか。

  1. 参考書や記事の通りやってるのにエラーになる。
  2. ググって色々やってみる
  3. 解決できない
  4. 辞める

これ凄いもったいないですよね。せっかく何かを学びたいと思ってもその手前で諦めてしまう。

近くに分かる人が入れば良いですが、中々そんな状況もない。私も何度も経験があります。

ですがそんな悩みは昔のこと。既に出来上がった環境を使えるサービスがあるそうです。それが

Cloud9


無料だよ!

Cloud9とは

クラウド上に構築された開発環境を私たちが使えるようにしたサービスです。

Cloud9へユーザー登録する

先ずはユーザー登録していきます。この際に一点だけ注意点はクレジットカードが必要になります。 普通に使う分には料金は発生しないので、ご安心ください。

  1. 「メールアドレス」を登録してNEXTボタンをクリック
  2. 「名前」を入力してNEXTボタンをクリック
  3. 「develloer(開発なのか趣味なのか」と「なぜ使うのか(仕事なのか趣味なのか」を洗濯してNEXTボタンをクリック
  4. 1.2.3の内容を確認してNEXTボタンをクリック
  5. クレジットカードの情報を入力してNEXTボタンをクリック(無料なので安心を)
  6. ロボットじゃなければCreate accountボタンをクリック

ユーザー登録が完了するとこんな感じの画面が表示されるよ。 f:id:opiyotan:20170901175711p:plain

Cloud9でプロジェクトを作成する

では実際にプロジェクトを作っていこうと思います。

今回は、Railsチュートリアルをやるための設定を行っていきます。

  1. 「Create a new workspace」をクリック
  2. 「Workspace name:rails-tutorial」「Description:Railsチュートリアル」「Choose a template:Railsチュートリアルのアイコン」を入力、選択します。 f:id:opiyotan:20170901180246p:plain

そうするとCloud9の環境が立ち上がります! f:id:opiyotan:20170901180503p:plain

すげー多分これで、もー出来た。ここまできっと10分ですよ!

奥さんどうですか?

Cloud9の使い方

Railsプロジェクトを作成するところまでを進めて行こうと思います。

先ず最初に使う所が一番見慣れない下側にあるコマンドラインです。

Windowsだとコマンドプロンプトに当たるのかな。Macだとターミナルですね。

これらは普段全く使わない部分だと思うのですが、Railsプロジェクトを作っていく際は多くのコマンドを使ってプロジェクトを作っていきます。

ではRailsプロジェクトを作ってみましょう。

以下の通りにコマンドを入力し実際にRailsアプリケーションを作ってみましょう!

$ gem install rails -v 5.0.3
$ rails _5.0.3_ new hello_app
$ cd hello_app/
$ bundle install
$ rails s -b $IP -p $PORT 

f:id:opiyotan:20170901183736p:plain

f:id:opiyotan:20170901183802p:plain


ここまで表示されれば一先ずOKですかね。

今後、実際にRailsチュートリアルを進めていく場合は、こちらの記事を参考にしてください。 opiyotan.hatenablog.com


では、本日はここまで。 Cloud9を使うとあっという間に開発環境が整います。Macがあればローカルに環境作るのも良いですが、上手くいかずやらなくなってしまうぐらいならCloud9を使ってみるのも良いと思います。