😆

制限の少ない自由なSNS「Ammot」作ってみた

2021/04/14に公開

初めに

この度Ammotというwebアプリを開発しました。
「制限の少ない自由な投稿を」がコンセプトで文字数が6000字まで、画像・動画・PDF・音声は同時に10個まで投稿可能です。
「ツイッターは文字数制限がきつい、ただfacebookは実名制だしデザインがごちゃごちゃでいや」
という声を聴いたので作ってみました。

https://ammot.net/

qiitaのほうでも宣伝したのでよかったら見てください(ちょい違う内容です。)
https://qiita.com/UTOG/items/d5e6194aaa31b54e97c9

どんなサービスか

453789.png

↑これがログイン後のトップです。フォローしたユーザーの投稿がHOMEに流れて、
サイドバーにはおすすめの投稿と現在人気のタグを表示しています。

文字数制限が6000字まで、画像・動画・PDF・音声は同時に10個まで投稿可能です。

先ほどサイドバーにおすすめを表示していると書きましたが
実はサイドバーはおすすめ機能などなくランダムで表示してるだけです。。。
おすすめ機能(レコメンド)を実装できなかったというのもありますが、僕自身レコメンド機能が結構嫌いなんですよね。同じ、似たようなものばかり出てきて飽きてきますしたまには普段と全く違うものを見たい時もあるでしょう。
だからタイムライン(home)には好きな投稿が流れるようになっていてサイドバーは完全ランダムにしました。

ツイッターのいやなとこ

文字数制限
編集ができない(個人的にめちゃ嫌)

facebookのいやなとこ

制限はないがデザインがぐちゃぐちゃ
実名制はなんかいやだ

この二つSNSの問題を解決するのがAmmotです。

工夫した点

無料プランにこだわった

こういうものはバズらない限り、すぐには成功しません。使用者が全くいなくても1年は公開しようと思います。
でも使用者がいないのに月数百円も取られるの馬鹿馬鹿しいじゃないですか。だからドメイン以外はすべて無料です。
ただherokuの無料プランだとドメインを設定できないのでCloudflareを使い設定しました。

参考記事:
https://qiita.com/serinuntius/items/f7f08b2221f5ad068f5d

しかし、やはりSNSは速度が非常に重要なので少しだけ批判を受けました。自分はもう少しユーザーと投稿が増えてきたら有料のサーバーにしようと思います。

デザインとUIにこだわった(つもり)

フィットスクロール?だったり投稿画面のポップアップだったり
今まで使ってこなかった手法を使ってみました。
自己満になってるかもしれない

ちなみにデザインを参考にしたサイトはtumblrです。
比べればまぁまぁ似てると思います。

機能性

最初にも書きましたが画像・動画・PDF・音声の投稿とプレビュー機能を実装しました。
これにはいろんな記事がありましたが

まともに動きかつ一番簡単でコードもシンプルなこの記事を参考にするのをお勧めします。
https://qiita.com/0thefool/items/5af0f17f0075e7e0e013

マークダウン

他SNSとの差別化も含めマークダウンに対応しました。
文字の大きさやフォント?も自由に変えれます。

使用した技術

rails6
ruby2.7
postgresql
heroku free
aws s3

gem 'ridgepole'
gem 'slim-rails'
gem 'html2slim'
gem 'pry-rails'
gem 'devise'
gem 'kaminari'
gem 'activeadmin'
gem 'rack-attack'
gem 'rails-i18n'
gem 'devise-i18n'
gem 'devise-i18n-views'
gem 'carrierwave'
gem 'rmagick'
gem 'rinku'
gem 'fog-aws' 
gem 'dotenv-rails'
gem 'omniauth-google-oauth2'
gem 'omniauth-rails_csrf_protection'
gem 'redcarpet'
gem "rouge"
gem 'redis-rails'
#一部抜いてます

まとめ

今回の開発は今までやらなかったことにめちゃ挑戦できたので楽しかったです
苦手なjquery・javascriptもプレビュー機能のおかげでちょっとわかった気がしてます。

文字数制限や実名制で不便を感じたことのある人はぜひAmmot使ってください!お願いします。

↓URL
https://ammot.net/

↓僕のAmmotのアカウント
https://ammot.net/user/yamada

↓僕のツイッターのアカウント
https://twitter.com/yamada1531

Discussion