スクールの課題でアプリケーションを作りましたので、
その振り返りをしていきたいと思います。
まずアプリケーションについてですが、ブログを作成しました。
今回与えられた期間が２週間という期間でしたので、
その期間内で実現できる、または優先して作成したいアプリケーションを考えて作成しました。
設計
見よう見真似ですが、自分流に設計図を作りました。
自分の中でどういうイメージで作るのかということをはっきりさせたかったので、作成しました。
すごくクオリティは低いです、、、w
最終的には見た目は全然違うものが出来上がることになるのですが笑
これを作ることによってどんな機能を実装していくのか、
どこを優先するのかが考えやすかったです！
フロント部分の実装
今回は初めての自作アプリということもあり、
いろんなことに挑戦してみようということでbootstrapを使ってtopページを作りました。
↓完成形
すでに設計図と全然違いますねw
反省してます。。
今回このページで実装したかったポイントは、
・投稿した画像とタイトルを一つのカードとして、並べて表示すること
・bootstrapを使う
今回はcdnで実装してみます
...
<div class="content">
<%= yield %>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
bodyの要素が全て読み込まれた後に反映するようにします。
bootstrapではクラス名によって、cssを反映していく仕組みになっています。
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img src="<%= blog.image %>" class="bd-placeholder-img card-img-top" >
<div class="card-body">
<p class="card-text"><%= blog.title %></p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary" href="/blogs/#{blog.id}">
<%= link_to 'View details »',"/blogs/#{blog.id}",method: :get %>
</button>
</div>
<small class="text-muted"><%= blog.user.nickname %></small>
</div>
</div>
</div>
</div>
詳細
col ... カラム
md-4 ... デバイスごとのグリッドシステムの単位
mb-4 ... margin-bottom:1.5rem;
など
リアルタイムレビュー & マークダウン記法
ここまで見ていただくと、もうわかりますよね
本当に見た目のセンスがない！！w
こちらは頑張って設計図に近づけたつもり、、、
こちらを実装するのに使ったのは
・gem 'redcarpet'
・marked.js
・vue.js
下記ソースコードです。
本文投稿フォームとリアルタイムレビューの部分になります。
...
<div>
<%= f.label :column %>
</div>
<div class = "column-preview">
<%= f.text_area :column,id: :column,rows: 20,cols: 60, "v-model": "input" ,html: {class: "column-form"} %>
<div class = "column-preview__is_active" v-html='input | marked'></div>
</div>
</div>
<div><%= f.submit "投稿" %></div>
<% end %>
<script type="text/javascript">
window.onload = function() {
new Vue({
el: '.column-preview',
data: {
input: '<%== j @blog.column %>',
},
filters: {
marked: marked,
},
});
};
</script>
vue.js
el: '.column-preview',
data: {
input: '<%== j @blog.column %>',
}
elはアクションを反映させたい範囲のセレクタを指定します。
dataでは、指定したクラス名に値を反映させる。
filters: {
marked: marked,
},
filter内でどのように変化を加えたいかを定義する。
ここで指定されているmarkedは、
<div class = "column-preview__is_active" v-html='input | marked'></div>
レビューを表示する要素にv-html属性内で｜（パイプ）記号で末尾に指定する。
v-model ...この属性を設定した要素内に書き込まれた値を、指定した要素に同内容で反映する。
実際のソースコードで説明すると、v-modelでinputを指定、
レビューを表示したい要素にv-htmlにinputをの値を入れることで、
リアルタイムレビューの機能を作っています。
<%= f.text_area :column,id: :column,rows: 20,cols: 60, "v-model": "input" ,html: {class: "column-form"} %>
<div class = "column-preview__is_active" v-html='input | marked'></div>
v-html ...{{input}}と同じような使い方。
marked.js
marked ...要素をマークダウン記法にする。
以上がメインの機能になります。
最後に
初めて自分でアプリを機能から考えて作ってみましたが、
すごく楽しかったと同時にエラーなどでかなり苦労しました。
改めて、ブログでアウトプットされている方の記事のありがたみを感じました笑
自分もどんどんアウトプットしていこうと思いました。
以上！
参考記事
・Bootstrap4のグリッドシステム v3からの変更点
https://webnetamemo.com/coding/bootstrap4/201710015697#v4-grid
・Bootstrap4に用意されているクラス
https://webnetamemo.com/coding/bootstrap4/201710065870