【week 3】オリジナルブログアプリを作りました!

こんにちは、Manamiです!

3週目
になります今週は、これまでの復習を兼ねてオリジナルブログアプリを作成するという課題がありました。

そこで作成したアプリと開発を通した学びについて書きたいと思います。


作成したもの


mirai-blog 
という名前のアプリです!

https://i.gyazo.com/662df9ac2478fe93cf43d24df82e8feb.jpg

https://i.gyazo.com/ce9aa555e6e0ea9c1ed319dfa7b0789b.jpg


コンセプト

  •  未来の日付を設定して「夢が叶った」「目標が達成した」という体でブログを書く
  •  目標が達成した時のことを具体的にイメージすることで、モチベーションを上げる!目標に近く!


開発環境

- ruby 2.3.1
- Rails 5.0.7
- MySQL 5.6.41

 

実装した機能

- ユーザー機能:サインアップ、ログイン、ログアウト
-
ブログ機能:テキストと画像ファイルの投稿・編集・削除、任意の未来の日付を選択

利用したgem、フレームワーク

 - devise  (github)

ユーザー機能の実装に利用しました。


- materialize-sass  (github)  

Materializeは、マテリアライズデザインに基づいたデザインが簡単に作成できるCSSフレームワークです。今回はそのgemを利用して、ビューの実装を行いました。

こちらの記事を参考にさせていただきました。

liruu.com

 

- font-awesome-sass  (github)

Font Awesomeは、Webアイコンフォントを利用できるサービスです。最新のFontAwesome5に対応しているこちらのgemを利用しました。


- carrierwave  (github)

ファイルアップロード用のgemです。画像の投稿機能を実装するために利用しました。

こちらの記事を参考にさせていただきました。


- mini_magick  (github)

こちらは画像ファイルの処理(リサイズ等)ができるgemです。

- Unsplash

投稿用のサンプル画像はこちらからお借りしました。どれも素敵な写真ばかりのフリー素材のサイトです。

unsplash.com

 

 

工夫した点


●フロントのデザイン

モチベーションが上がるような明るい見た目にしたかったので、MaterializeFontAwesomeをフル活用してビューを実装しました。
Materializeは要素のクラスに”text-blue”や”center”と指定するだけで簡単にCSSを利用できました。FontAwesomeは無料で利用できるアイコンが豊富にあり、マテリアルデザインとの相性も抜群でした。

リンクをアイコンで表示したい場合、下記のようにブロックを使ってlink_toに埋め込む書き方を学びました。

```
<%= link_to edit_post_path(post) do %>
  <%= icon('fas', 'edit', class: "grey-text") %>
<% end %>
```

(※ Materializeにもアイコンが用意されているのですが、勉強のためにあえてFontAwesomeを利用しました。)

 

●日付選択の機能

このアプリのメインコンセプトにつながる部分なのですが、これはフォームヘルパーのdate_fieldメソッドを使って実装しました。そこにMaterializeで用意されているDatePickerというコンポーネントを利用して、カレンダーのポップアップから日付を選択できるようにしました。
Materializeを利用しなくても、date_fieldメソッドだけでセレクトボックスorカレンダー形式で日付を選択するフォームを実装することができます。

 

https://i.gyazo.com/12d1122da4214562bb732a70ba95dd0d.gif


今後さらに追加実装したい機能

- コメント機能(勉強中の非同期通信を使ってみる)
-
いいねボタン・応援ボタン
-
「目標達成まであと何日」のようなカウントダウンの表示
-
実際に達成したときに「おめでとう!」のような表示をしたり、達成した後の投稿を追加できたり(考え中)
など


学んだこと・気づき

自分のアイディアを実際に形にする作業が単純にすごく楽しかったです。今までやってきたRailsのカリキュラム・チュートリアルは全て「お手本」と「ゴール」があり、それと同じものを作るという経験だったので、ゼロから自分の自由に開発するという経験は純粋に初めてでした。やればやるほど「こうしたい!」というアイディアが湧いてきて、アドレナリンが出まくっていました。そして、アプリにすごく愛着が湧きました。(ピンクがかわいい。)今はまだ簡単なものですが、今後どんどん育てていきたいと思います。


また、自分の現在のスキルを客観的に把握する機会にもなりました。特に実装のスピードという面で、自分の見積もりより実際の作業は2倍くらい時間がかかってしまいました。頭では分かっているつもりでも、実際にコードを書いてみると望みと違う動きになったりエラーになったり…。与えられた期間のなかで、自分は今これ位のことができる(&これ位しかできない)んだなということが分かりました。

上述のアイディアの話にも繋がりますが、作業をしているうちにどんどん新しいことを思いついて→書き直して、というように思いつきで作業をすすめてしまっていたことも非効率的だったと思います。それも「お手本」と「ゴール」があるなかでは気づけないことなので、今回よい学びになりました。

開発最終日にはアプリの発表会を行いましたが、そこで同期の作品を知ることができたのも大きな刺激になりました。旅ブログ、俳句ブログ、スタ◯ウォーズブログ、「ロック様」ブログ、合言葉が必要なブログなど、個性豊かなアイディアに溢れていました! ブログアプリという同じテーマのなかでも完成形はひとつずつ全く異なっていた様子を見て、その自由度の高さというおもしろさを感じつつ、だからこそアプリのコアになるアイディアが重要になるんだなと思いました。

 

 

来週からはチーム開発の第1弾がはじまります。今回の学びを生かして、引き続きがんばっていきたいと思います!