一週間のカリキュラム １週間で、Ruby 〜 Ruby on Railsまでを学ぶ
シリーズの４日目、会員機能がある簡単なブログを作成するようにします。
４日目
- Ruby on Rails でのアプリケーション・サービスの作成
会員機能がある簡単なブログを作成する。
前回までCRUD操作を含めてある程度の機能を実装しました。 今回からは、完璧では無いにしても、ある程度の機能と見た目を持ったブログを作成して行きたいと思います。
ブログという物がどんな物かは、今の時代言うまでもありませんが、そういった物ほど実は色々な機能が実装されている物です。
前回CRUDで作成したソースコードに肉付けする形で作業を進めましょう
今回は
- 1 簡易的なSEO対策
- 2 ライブラリとしてwysiwygの導入
- 3 ページ内リンク、権限、表示の補完
などです。
1 簡易的なSEO対策
ブログでのSEOの基本中の基本である、タイトルが今はBlogとだけ表示されています。 ここに 「記事のタイトル」+「ブログ名」で表示できるようにしてきます。
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Blog</title>
↑この部分
1-1 記事のタイトルを入れる。
<title><%= (defined? @article)? @article.title : "" %></title>
タイトル部分に、記事タイトルを入れるようにしました。 全てのページで@articleが設定されてるわけではない為、その変数が存在するかどうかを defined? で確認してます。 そこに三項演算子を加えて、ある場合はタイトルを、無い場合は何も出力しないとしています。
1-2 ブログ名を入れる。
次にブログ名を入れて行きたいですが、この部分は使う環境によって変わるように。「環境変数」という物を利用してみたいと思います。
環境変数とはOSレベルで存在する物もありますが、今回はこのプロジェクトの中で環境変数を利用します。
1-2-1 .envを使えるようにする
将来どのサーバーで動かすかの、状況によりますが、下記のgemファイルをgroup外で設定します。
gem 'dotenv-rails'
bundle install コマンドでパッケージを追加しましょう。
1-2-2 .envを設定する
次に設定用の.envファイルを作成します。
$ vi .env
中身は下記の通りです。
BLOG_NAME='ブログタイトルです'
1-2-3 .envの中身を表示する
さきほどのタイトル部分を書き換えましょう
<title><%= (defined? @article)? @article.title : "" %><%= ENV['BLOG_NAME'] %>
ENV['BLOG_NAME'] で.envファイルに設定した定数を取り出せます。
1-2-4 .envはバージョン管理から外す
.gitignore に下記を追加しておきましょう。
# 環境設定ファイル
/.env
これでリストページではブログ名だけ、記事ページでは タイトル＋ブログ名が表示されるようになりました。
2 ライブラリとしてwysiwygの導入
さて、次に入力部分にWYSIWYG(ウィジウィグ)という物を入れます。 これは文字を装飾したりするのに利用します。
この部分はイチから開発するには非常に重いので、ライブラリを利用します。
今回昔からある CLEditor を入れてみます。
2-1
コチラ の右上にある「DOWNLOAD CLEDITOR 1.4.5」をダウンロードして、ZIPファイルを解凍しましょう。 出てきたディレクトリを CLEditor1_4_5 > cleditor と名前を変えて、自分のプロジェクトの ./public ディレクトリの下に追加しましょう。
2-2
app/views/articles/_form.html.erb の一番下に下記のように追加します
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/cleditor/jquery.cleditor.css" />
<script src="/cleditor/jquery.cleditor.min.js"></script>
<script data-no-turbolink>
$(document).ready(function () { $("#article_body").cleditor(); });
</script>
フォームヘルパーによって予め article_bodyというIDが記事本文の所に割り当てられてるので、これでWYSIWYGで入力できるようになってるはずです。
※ 今回画像のUPLOADなどの機能は追加しません。
2-3 表示方法を買える。
WYSIWYGの画面上で文字の大きさや太さを変えて保存してみましょう。 すると 記事詳細のページではそのままhtmlタグが出力されてると思います。
<p><%= @article.body %></p>
↓ 下記のように html_safeを足してhtmlを出力しましょう。
<p><%= @article.body.html_safe %></p>
3 ページ内リンク、権限、表示の補完
ここまで作成したブログっぽい物ですが、まだまだ 色々と問題があります。
3-1 ログイン権限や表示を切り分ける。
現状記事の作成編集にログインは必要ありません。 ログインしないと記事の編集はできないようにします。
app/controllers/articles_controller.rb
class ArticlesController < ApplicationController
#こちらを追加
before_action :authenticate_user!, only: %i[new create edit update destroy]
onlyの表記にあるように、リスト表示と単記事表示以外はログインした権限が必要となります。
※ %記法を利用してます。詳細は参照
これで、リスト、表示はゲストでもできますが、記事の作成をしようとするとログイン画面に飛びます。
3-2 ログインしてない場合は表示したくない場所は表示しない。
ログイン状態、ログインしてない状態で色々気になる部分があると思うので、切り分けをしましょう。
例えばゲストであれば、編集や新規作成リンクは必要無いでしょう。
<% if user_signed_in? %>
ログインしてる時に表示
<% else %>
ログインしてない時に表示
<% end %>
3-3 ページ内リンクの整理
ホームへのリンク追加 app/views/layouts/application.html.erb
<h1><%= link_to ENV["BLOG_NAME"],root_path %></h1>
次回に続きます。