Ruby on Railsでメッセンジャーライクな簡易2chビューアを作成してみる Part3

前回の続きです。
前回は特定の板からスレッド一覧を取得するところと、その板のスレッドを開くところまで所までやりました。
今回は板一覧を取得してトップページに表示させようと思います。(:D)rz

掲示板のコントローラ・ビューを作成

$ rails g controller boards index

ルーティングを編集

routes.rb

Rails.application.routes.draw do
  root 'boards#index'

  get 'subbacks/:subback_server/:subback_id' => 'subbacks#index', constraints: { subback_server: /[^\/]+/ }
  get 'threads/:subback_server/:subback_id/:thread_id' => 'threads#index', constraints: { subback_server: /[^\/]+/ }
end

今回から、:subback_serverもパラメータに入れました。(例: ikura.2ch.sc)
パラメータにドット(.)を使うと、通常のままだとエラーが出るのでconstraintsオプションを付けます。
constraintsの中身は、{パラメータ名: 許可する文字列を正規表現で}です。
この場合は、スラッシュ以外を許容することでドットが通るようにしています。

掲示板のコントローラを編集

boards_controller.rb

class BoardsController < ApplicationController
  def index
    agent = Mechanize.new
    url = 'http://2ch.sc/bbsmenu.html'
    page = agent.get(url)
    html = Nokogiri::HTML(page.body)
    @subbacks = []
    html.css('small a').each do |subback_title|      
      subback_url = subback_title['href'].match('http(s)?://[a-z0-9.]*.2ch.sc/[a-z0-9]+').to_s
      case subback_url
      when '' then
      when 'http://info.2ch.sc/guide' then # 2ch総合案内
      when 'http://sweet.2ch.sc/headline' then # 新着ヘッドライン
      else
        subback_title['href'] = subback_title['href'].sub('http://', '').insert(0, 'subbacks/')
        title = subback_title.to_html
        subback = {title: title}
        @subbacks << subback
      end
    end
  end
end

板一覧を取得して、配列@subbacksに板を格納するのですが、
総合案内など板じゃないURLも混ざっているので、一旦subback_urlに正規表現で板形式のURLだけ代入されるようにして、そのURLが板のURLか、または空白かどうかを確認するフィルターをcase文で書いてあります。
ここにwhen [URL] thenで付け足していくと、今後板じゃない不要なURLが出てきた時もフィルターできます。

板のパーシャルを作成

_subback.html.haml

.subback
  .subback-title
    = simple_format(subback[:title])

掲示板のビューを作成

index.html.haml

.board-header
  %span
    = 'logsock'
.subback-box
  - @subbacks.each do |subback|
    = render 'subback', subback: subback

掲示板のcssを整える

boards.scss

.board-header {
  height: 2rem;
  background-color: #777;
  color: #FFF;
  text-align: center;
  line-height: 31px;
  font-weight: bold;
  a {
    font-size: 17px;
  }
}

.subback-box {
  margin: 10px 30px 0;
  padding-bottom: 20px;
  a {
    color: #FFF;
    text-decoration: none;
    &:hover{
      color: #CCC;
    }
  }
}

@media screen and (max-width:1024px){
  .board-header {
    font-size: 13px;
  }
  .subback-box {
    font-size: 12px;
    margin: 0 3px;
    padding-bottom: 0;
  }
}

これで掲示板と板とスレッドを閲覧できるようになり、基本的な機能は完成しました！👏
本文内のレスIDへのリンクについては、こちらを見てみてください。
あとはHerokuを使ってデプロイするのですが、そこはHerokuのデプロイの記事として別で上げようと思います。

PC版

スマホ版