ダッシュで奪取

レガシーSIer → webエンジニア(見習い) 新しく知ったことのメモを書いています。

【Rails】ミニブログを(結構前に)作った

結構(約一ヶ月?)前になりますが、最低限の投稿・編集・削除機能を持つブログ的なものを作りました。
忙しくてなかなか文章を書けなかったため、今更ですが記録しておきます。

1. 画面イメージ

トップページ

f:id:kyoruni:20190823173355p:plain 見た目を作るのが苦手なので、「自分にできる範囲で可愛くする」を目標に取り組みました。あと「可能な限りbootstrap臭を消す」も…(でもやっぱり臭いますね)。

ログイン画面

f:id:kyoruni:20190823173502p:plain 丸いボタンにアイコン乗せると可愛いことが分かりました。

新規投稿

f:id:kyoruni:20190823173636p:plain 上からふわっとメッセージが降りてくるようにしました。
チェックマークのアイコンが好きなので、多用。

後で思いましたが、左側を決定ボタンにした方が良かったですね…!

一覧画面

f:id:kyoruni:20190823173729p:plain 自分の投稿にのみ、編集ボタン及び削除ボタンを表示。

削除

f:id:kyoruni:20190823173812p:plain 新規登録と同じフォームを無理矢理使い回しています。後述。

ページネーション

f:id:kyoruni:20190823173937p:plain デフォルトのものから、色変えるだけで結構可愛くなる…

おまけ
app/assets/stylesheets/config/_color.scss
$mainColor: #5cd5e3; // 全体のテーマ色

↑の、「全体のテーマ色」を変えると全体の配色に適用されます。
f:id:kyoruni:20190823184944p:plain ブログの着せ替えテーマみたいなものをイメージしました!

2. 使用Gem

bootstrap

→ またそれか、となりそうですが使いやすくて好きなので…

devise、devise-i18n、devise-i18n-views

→ deviseを日本語化したかったので、専用のGemを導入。

kaminari、kaminari-bootstrap

→ ページネーションと、ページネーション部分へ簡単にcssを当てるため使用。

3. 中身について

フォーム使い回し

app/views/articles/new.html.erb
<%= render partial: "form", locals: { article: @article, formFlg: "new" } %>
app/views/articles/edit.html.erb
<%= render partial: "form", locals: { article: @article, formFlg: "edit" } %>
app/views/articles/_form.html.erb
        <!-- 省略〜 -->
        <h5 class="card-title">
          <% if formFlg == "new" %>
            新規投稿
          <% elsif formFlg == "edit" %>
            記事編集
          <% end %>
          <!-- 〜以下省略〜 -->
        <%= button_tag type: "button", class: "btn bg-mainColor rounded-circle p-0 btn-round", "data-toggle": "modal", "data-target": "#infoWindow" do %>
          <% if formFlg == "new" %>
            <%= fa_icon("plus") %>
          <% elsif formFlg == "edit" %>
            <%= fa_icon("check") %>
          <% end %>
        <% end %>
        <%= render partial: "./layouts/infoWindow", locals: { article: @article, infoMessage: formFlg } %>
      </div>
    </div>
  </div>
<% end %>

newとeditで、どちらの画面から来たのか変数で渡して、ビュー側でタイトルとボタンの表示を分岐させて 無理矢理使い回しています。
共通部分だけ取り出して使った方が絶対見やすいのは分かっているのですが、とにかく早く終わらせたかったのでこうなりました…

ページネーション部分

config/application.rb
# デフォルト言語を日本語にする
config.i18n.default_locale = :ja

module 〜 endの中に上記を記載して、言語を日本語設定にします。

config/locales内にkaminari_ja.ymlファイルを作成して、下記のように記載。

config/locals/kaminari_ja.yml
ja:
  views:
    pagination:
      first: <i class="fa fa-angle-double-left"></i>
      last: <i class="fa fa-angle-double-right"></i>
      previous: <i class="fa fa-angle-left"></i>
      next: <i class="fa fa-angle-right"></i>
      truncate: "..."

nextとかprevとか表示されている部分にfontawesomeのアイコンをねじ込んでいます。これすごい可愛いと思います…

4. 参考URL

5. 作ってみて

ある程度お題が決まっているものではありましたが、自分のやりたいことをどうすればできるのか?考えるのめちゃくちゃ楽しかったです。

同期の方の発表では、最低限の機能に加えて位置情報とか、画像投稿とか入れている方もいらっしゃって面白かったです!同じものを作っていたはずなのに、人によってこうも違う成果物になるんだなと…