作品：フェイスブックの複製（Facebook Replica）

#概要

Odin Projectレッスンによって作ったSNS。

レッスンURL: https://www.theodinproject.com/paths/full-stack-ruby-on-rails/courses/ruby-on-rails/lessons/rails-final-project

Github: https://github.com/RistoLibera/Facebook_Replica

作品URL: https://a-facebook-replica.herokuapp.com/

#使用技術
・HTML、CSS、Bulma
・Javascript
・Ruby、Ruby on Rails
・Heroku
・Git
・GitHub
・Oracle VM VirtualBox

#機能一覧
##ユーザー登録機能

Create New Accountボタンをクリックしてから登録画面へ進みます。

必要なところに入力し、Sign Upボタンを押してメインページへ進んでいきます。

登録成功！

##ログイン機能

サインアウトしてログインに試してみましょう！

ログイン成功！

##メールでパスワード変更機能（ローカル）

HerokuのTwilio SendGrid拡張機能はクレジットカードが必要ですから…

ローカルでメールアドレスを入力し、Sendボタンをクリックして仮メールを届きます。

リンクでパスワード変更できます。

##本物のフェイスブックによる登録機能

一番下の文をクリックしてからフェイスブックAPIへ進みます。

自動入力が実現しました。

##プロファイル管理機能

右上のアイコンをクリックしたらプロファイルへアクセスできます。

１：アイコン画像の変更
２：背景画像の変更
３：作ったポストの一覧
４：ダミーセクション
５：友達の一覧
６：パスワードの変更

##友達管理機能

上のナビゲーションバーの真ん中のボタンをクリックしてから友達管理へ進みます。

他人からのリクエストを拒絶もしくは受諾することができます。

##検索機能

左上のブロックで文字列を入力してポストとユーザーを検索できます。因みに、大文字小文字を区別しません。

１：検索歴史
２：検索されたポスト
３：検索されたユーザー

##文章投稿機能

テキストエリアに入力してImagesボタンによって画像を選び、Create Postボタンをクリックしてから文章を作ります。

簡単に作れます！

##文章添削機能

自分で作ったポストブロックの右上隅に三点リーダーがあります。カーソルをそれに移動して編集メニューが現れます。

Editボタンをクリックしたら編集画面へ進めます。

成功！

##コメント機能

１：気に入りのユーザー数
２：コメント数
３：気に入れる
４：コメント欄

##通知機能

カーソルを右上の鐘アイコンに移動してに通知が出てきます。

それをクリックしたら該当するページへ進めます。

#まとめ

三番目の作品ですが、このような大きな工程は初めてです。

フロントエンドは、HTMLでプログラムの骨組みを作って、BulmaというCSSフレームワークによって見栄えを調整して、Javascriptも追加して簡単なインタラクションを実現しました。バックエンドは、Railsを用いてデータベースを作って管理し、Herokuにデプロイしてネットに展開します。

様々な挫折に遭ってもStackoverflowなどで調べて段々と進めておりました。ウェブプログラミングへの理解も一層高まります！