読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

文系プログラマーがRailsでロシア語アプリケーションをつくる⑧ ~kaminariを使ったペジネーションの実装~

Rails

どうも!chuckです。

引き続きRailsでロシア語の単語帳を作っていきます。

 

chuckwebtips.hatenablog.com

 

 

カンタンな追加点ですが、今回はペジネーション機能を追加しました!

 

ペジネーションとは? 

ページ送りのことです。こういうやつ↓↓

f:id:chuck0523:20150719235608j:plain

(Bootstrapのペジネーション)

 

実装の仕方

Rails ペジネーション」とググってみたところ、どうやらKaminariという便利なGemがあるようです(´ω`)

f:id:chuck0523:20150719235736p:plain

gemとは、JSで言うところのプラグイン的なやつですよね!便利な部品という理解をしてますw

 

いざ実装

gemを追加したい場合はGemfileに追記します。

f:id:chuck0523:20150719235906p:plain

(Gemfile)

 

bundle installコマンドを実行してgemをインストール。

f:id:chuck0523:20150719235957p:plain

 

コントローラに追記します。ペジネーションを実装するのは単語一覧を表示する画面なので、wordアクションに追記します。 

以下のファイルを、

f:id:chuck0523:20150720000017p:plain

(app/controllers/russian_words_controller.rb)

 

このように変更。

f:id:chuck0523:20150720000322p:plain

 

ビュー側にも変更を加えます。

f:id:chuck0523:20150720000457p:plain

(app/views/russian_words/words.html.erb)

変更を加えたのは3行目と26行目です。

 

3行目ではペジネーションに関する表示を行っています。「今○○ページ目です」的なアレです。

f:id:chuck0523:20150720000551p:plain

 

26行目は肝心なペジネーションリンクになります。

f:id:chuck0523:20150720000641p:plain

 

ブラウザで確認

rails sでサーバを立ち上げ、ブラウザで確認してみます。

こちらがペジネーションに関する表示。

f:id:chuck0523:20150720000719p:plain

 

こちらがペジネーションリンクになります。

f:id:chuck0523:20150720000802p:plain

(なぜか選択状態でスクショしてしまいました…ヽ(´Д`;)ノ)

 

まとめ的な

以上でおしまいです!

これちょっとカンタンすぎませんか???笑RailsというかGemの威力を思い知りました(;・∀・)

 

参考にしたサイト様

ruby-rails.hatenadiary.com

qiita.com