Railsで簡単にブログを作る1(初心者向け)

      2017/04/09

友人がプログラミングの勉強も兼ねてブログを作りたいとのことなので、
簡単に作ってみたいと思います
エラーだったり、間違いなどがあればお気軽にコメントしてください!

ちなみに今回はactive adminというgemを使ってCMS的な機能をつけていきます

管理画面を作る

まずは土台を作ります
データベースはMysqlを使います

Gemfileに色々とgemを追加したのでまずはbundle installします

準備も整ったので、最初に管理画面を作ります

こんな感じになったらOKです

次にマイグレーションファイルを実行します

active_adminをインストールすると管理者権限のユーザー情報がdb/seeds.rbに記載されるので、それをデータベースに入れましょう!
メールアドレスやパスワードは任意で変更できるので、変えたい方は変えてください

サーバーを起動してちゃんと動いているか確認しましょう

localhost:3000/adminで以下のような画面が出てきたらちゃんと動いている証拠です


ログインするには

  • email: admin@example.com
  • password: password

と入力すればこんな画面になります

さて、ログイン機能ができたところで、次は日本語に対応していきたいと思います
config/application.rbを以下のように変更してください
ついでにtime_zomeも東京に合わせておきましょう

次は日本語に対応できるように翻訳ファイルをconfig/localesに追加します
以下のリンクに翻訳ファイルがあるのでコピーしてきてください
yhara/devise.ja.yml

config/locales/にある devise.en.yml は devise.ja.yml に名前を変更してコピーした中身をdevise.ja.ymlにペーストします

devise.ja.yml だけではなくて en.yml の方も日本語に対応させましょう
svenfuchs/rails-i18n

こちらも先程と同様、en.yml から ja.yml に変更します
もちろんリンク先からコピーした中身をペーストします

サーバーを落としてもう一回起動します
起動しないとこんな画面になっちゃうので、気をつけてくださいね!

サーバーを再起動すると、ちゃんと日本語化されてます!
すごい!

投稿用のpost modelと画像アップロード用のpost_image modelを作る

さて、次は post model と post_image modelを作っていきます!
post modelは

  • title(タイトル)
  • brief(記事の要約)
  • body(本文)

post_image modelは

  • image(画像)
  • post_id(どの記事に属しているか)

のかラムをそれぞれに作ります

まずはpost model

コントローラーを見てみるとストロングパラメータ以外のメソッドがありません

config/application.rbに以下のコードを入れておくといつも通りのコントローラーになるようです

ActiveAdminを入れたら一緒にinherited resourcesも入ってscaffoldテンプレートが上書きされてしまう

次にpost model と posts_controllerを修正します

accepts_nested_attributes_for メソッドを使うとpost_controllerからpost_imageに画像を投稿することができるようになります

ですので、post_image modelはコントローラーが必要ないので、モデルだけを作成します

エラー発生

実行しようとしたらこんなエラーが出てしまいました

翻訳ファイルを削除した後のキャッシュが原因でエラーが起こるっぽいので

springを再起動したら治りました!

can not load translations from (already deleted file) #301
Rails: if validation fail, shows error “I18n::InvalidLocaleData – can not load translations from simple_form.en.yml”

もう一回実行したらできました!

post はたくさんの画像を持っているので、 belongs_to を加えてアソシエーションを作ります

次に画像を投稿できるように carrierwave というgemを使います
このgemを使うと、ものすごく簡単に画像を投稿することができます!
また rmagick というgemも併用することで、画像をリサイズできたりもします

carrierwaveを使えるようにするために、まずはuploaderをgenerateします

次は設定をしていきます

こんな感じにしてください

次は画像を投稿できるように、post_image modelにコードを追加します

これで画像をpost_image modelに追加できるようになります

管理画面で作業できるようにする

ここからは管理画面で作業をできるようにしていきます
まずは管理画面でpost model と post_image modelを操作できるようにしていきます
ついでにmigrateもしましょう

上記のコードを実行すると、actice_adminのメニューにpost と post_imageが追加されます
※例えば、タグなどの機能をつけた場合、上記の resource 以降をモデル名でターミナルに打ち込めば
そのモデルの操作をactive adminで行えるようになります

まずはPostsをクリックして見てください
今のままじゃpost_imageに画像を投稿できないので、ファイルをいじっていきます!
まずは post.rb からいきます

これで動くはずなので、記事を作ってみましょう!

postは

こんな感じです

title, brief, body しっかり投稿できてます

post_imageも

投稿できているようです

ただ、このままだとかなりわかりづらいので、画像も表示して見ましょう

修正後はこのような画面になっているはずです
index

show

viewについては別の記事でまとめていきます

とりあえずは管理画面+投稿機能はできました!
次はviewを作っていきます!
多分明日書くと思いますε3□ヽ(´∀`●)

こちらが次の記事です!
Railsで簡単にブログを作る2(初心者向け)

 - Rails , , , , , , , ,