1
0

作品:フェイスブックの複製(Facebook Replica)

Last updated at Posted at 2021-12-17

#概要

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

1.png

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

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

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

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

2.png

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

3.png

登録成功!

##ログイン機能

4.png

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

5.png

ログイン成功!

##メールでパスワード変更機能(ローカル)

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

6.png

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

7.png

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

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

8.png

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

9.png

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

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

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

10.png

1:アイコン画像の変更
2:背景画像の変更
3:作ったポストの一覧
4:ダミーセクション
5:友達の一覧
6:パスワードの変更

##友達管理機能

11.png

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

12.png

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

##検索機能

13.png

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

14.png

1:検索歴史
2:検索されたポスト
3:検索されたユーザー

##文章投稿機能

15.png

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

16.png

簡単に作れます!

##文章添削機能

18.png

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

19.png

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

20.png

成功!

##コメント機能

21.png

1:気に入りのユーザー数
2:コメント数
3:気に入れる
4:コメント欄

22.png

##通知機能

23.png

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

24.png

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

#まとめ

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

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

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0