kobayashitakaki / shasin-sns

InstagramのようなSNS(ポテパンキャンプ課題)

Instagramクローン作成

こちらにデプロイしています。
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

以下についてAjaxを使うようにしました。

• いいね、いいね取り消し
• コメント、コメントの削除
• いいねしたユーザー一覧表示
• プロフィール画面での写真の詳細表示

コメント

Railsチュートリアル完了時点で取り組んだ課題で、
初めて自分でアプリケーションを一から開発する機会になり、なかなか苦労しました。
特にJavascript周りはRailsチュートリアルでは扱わないので、
かなり調べました。
(CoffeeScriptの文法や、Turbolinksの扱い)

RailsのMVC周りについては、Railsチュートリアルのコードを参考に実装し、
良い復習になったと思います。
また、いいね、コメントについてはRailsチュートリアルでは扱わないため、
モデルの設計から行うことになり、Railsを扱う良い練習になりました。

以下、2週間経過時点でのレポート文を載せています。

---

苦労した点

1. フロントエンドの実装

• htmlのclass, id, CSSの設定

行き当たりばったり的に実装してしまい、雑然としている そのためテンプレートに変更を加えた際に意図した動作をしなくなることがあった

• form送信とjsクリックイベント

送信されない、反応しない、htmlのリクエストになってしまう、等

2. ログインの実装

• facebook for developers

リダイレクトURL等の設定に悩んだ

• devise

使い方が難しい

3. デプロイ

• herokuのエラーに悩んだ
• AWSの設定に悩んだ

学んだ点

1. ujsによりajax的にページを更新できるようになった

2. bootstrapによるレイアウトが上達した

自慢したい点

1. フィードのデザイン

• InstagramのWebページをできるだけ真似した

2. できるだけajax的に動作するようにした

• いいね、コメント、フォロー/アンフォローに関する箇所

いまいちな点

1. テストを全く書いていない

• 機能の実装を優先してしまった

2. ユーザーに関する機能

• email/passwordによる認証画面を作っていない
• メール送信を使う機能を実装していない
• パスワード変更ができない

3. フィード以外のデザイン

• 投稿、ユーザー設定画面が雑
• deviseのflashが雑に出てしまう

4. jsのコーディング

• 行き当たりばったりで実装してしまい、かなり見通しが悪い気がする

相談したい点

1. ujs, scssのコーディングのお作法が知りたい

• モデル毎にファイルがあるが、どう使い分けるか
• イベントハンドラの登録はもっとスマートにできないか