こちらにデプロイしています。
https://shasin-sns.herokuapp.com/
テスト用ユーザーを用意していますので、試してみてください。
ポテパンキャンプの課題の1つとして取り組んだ、
「Instagramのクローンアプリ制作」の成果物です。
ログイン、写真の投稿、ユーザーのフォロー、コメント、いいね、といった、
SNSとして必要な機能を実装しました。
課題の概要としては、
「Instagramのクローンを自分で作る。2週間経過時点で提出。」
というものでした。
なんとか2週間で一通りの機能を実装することが出来ました。
- email/passwordによる認証
- Facebookによるログイン(gem "devise")
- 画像の投稿
- プロフィール画像の設定
- 画像のストレージとしてAmazon S3を使用
- ユーザーのフォロー
- 投稿へのコメント
- 投稿へのいいね
- コメント、いいねのAjax通信
Facebookログインについては、セキュリティポリシーを明記しないと
APIを使わせてもらえなくなってしまうため、
現在は無効化した状態でデプロイしています。
ホーム画面とプロフィール画面は本家を参考に、
bootstrapとFont awesomeでできる限り似せました。
レスポンシブデザインにしました。
(投稿画面やプロフィール編集画面については手が回りませんでしたが・・・)
以下についてAjaxを使うようにしました。
- いいね、いいね取り消し
- コメント、コメントの削除
- いいねしたユーザー一覧表示
- プロフィール画面での写真の詳細表示
Railsチュートリアル完了時点で取り組んだ課題で、
初めて自分でアプリケーションを一から開発する機会になり、なかなか苦労しました。
特にJavascript周りはRailsチュートリアルでは扱わないので、
かなり調べました。
(CoffeeScriptの文法や、Turbolinksの扱い)
RailsのMVC周りについては、Railsチュートリアルのコードを参考に実装し、
良い復習になったと思います。
また、いいね、コメントについてはRailsチュートリアルでは扱わないため、
モデルの設計から行うことになり、Railsを扱う良い練習になりました。
以下、2週間経過時点でのレポート文を載せています。
- フロントエンドの実装
- htmlのclass, id, CSSの設定
行き当たりばったり的に実装してしまい、雑然としている そのためテンプレートに変更を加えた際に意図した動作をしなくなることがあった
- form送信とjsクリックイベント
送信されない、反応しない、htmlのリクエストになってしまう、等
- ログインの実装
- facebook for developers
リダイレクトURL等の設定に悩んだ
- devise
使い方が難しい
- デプロイ
- herokuのエラーに悩んだ
- AWSの設定に悩んだ
-
ujsによりajax的にページを更新できるようになった
-
bootstrapによるレイアウトが上達した
- フィードのデザイン
- InstagramのWebページをできるだけ真似した
- できるだけajax的に動作するようにした
- いいね、コメント、フォロー/アンフォローに関する箇所
- テストを全く書いていない
- 機能の実装を優先してしまった
- ユーザーに関する機能
- email/passwordによる認証画面を作っていない
- メール送信を使う機能を実装していない
- パスワード変更ができない
- フィード以外のデザイン
- 投稿、ユーザー設定画面が雑
- deviseのflashが雑に出てしまう
- jsのコーディング
- 行き当たりばったりで実装してしまい、かなり見通しが悪い気がする
- ujs, scssのコーディングのお作法が知りたい
- モデル毎にファイルがあるが、どう使い分けるか
- イベントハンドラの登録はもっとスマートにできないか