Whisp ( 投稿の公開範囲をリストで制限できるTwitterみたいなサービス )

#自己紹介
はじめまして、駆け出しエンジニアのたけりょうと申します。自分初のサービスWhispをつくったので紹介させてください。

#[Whisp](https://the-whisp.herokuapp.com/)って何?
ざっくり言うと、自分の投稿を特定の人にしか見えないように調整できるTwitterみたいなサービスです。
Twitterの場合、投稿はフォロワー全員が見ることができて鍵垢でなければ全く知らないユーザも見ることができます。 そういった意味でTwitterはオープンなSNSです。
一方のWhispの場合、投稿は自分の指定したユーザにしか見えない仕様になっているので、そういった意味でWhispは少しクローズドなSNSです。

Whispは、Twitterのtweet(つぶやく)よりもっと静かなイメージのwhisper(ささやく)からもじって名づけました。
[サイトはこちらから](https://the-whisp.herokuapp.com/)

#Whispの理念みたいなもの
Twitterは自分の考えや私生活を気軽に投稿できるマイクロブログサービスです。それを使っていて自分が感じたのは、案外内輪ネタみたいなものをつぶやきにくいなというものです。 
人間は色々なコミュニティに所属しています。自分の場合、高校のつながり、大学の教養時代のクラス、サークルの友達、学科の友達、など色々な集団に所属しています。しかし、自分のアカウントは1つだけなので、1つのコミュニティに向けて投稿した内輪ネタは、他のコミュニティの人には全く分からない内容だったりして、嫌な思いさせてしまうかもしれません。アカウントを分ければそれなりにすみ分けはできると思うですが、所属コミュニティが増えてくれば増えるほどアカウントの数が増えてきて管理が面倒です。
この課題を解決したくて作ったサービスがWhispです。投稿の公開範囲を自由に設定できれば、1つのアカウントで複数のコミュニティと共存できるのではないかと考えました。

#Whispの基本的な仕様
文字の黒い方がTwitterと似ている部分で、文字の赤い方がWhispの新しい部分です。

- 投稿は200文字までのテキスト、画像も投稿可能
- フォロー、フォロワーのシステムはTwitterと同じ
- フォローしている人の投稿が自分のタイムラインに流れる
- タイムライン内投稿 ➔ 自分のフォロワー全員が閲覧可能
- <font color="Crimson">指定したユーザの投稿を集めたコミュニティというものを作成可能</font>
- <font color="Crimson">コミュニティ内投稿 ➔ この投稿はコミュニティに登録したメンバーのみ閲覧可能</font>
- <font color="Crimson">各投稿に誰がどのコミュニティに投稿したかを表示</font>
- <font color="Crimson">他ユーザが作ったコミュニティは、自分がそこに追加されている場合のみ閲覧可能</font>

#他のサービスとの違い
- Twitterとの違い
    - Whispではコミュニティ内投稿という限定公開の投稿が可能。
- マストドンとの違い
    - マストドンは投稿の公開範囲を設定可能だが、各投稿に一人ずつ追加する必要がある。
    - Whispの場合、コミュニティにむけて投稿するので、集団にまとめて投稿可能。

#Whispの始め方、使い方
まず[こちら](https://the-whisp.herokuapp.com/)のURLにアクセスしてください。次にホーム画面の"今すぐ登録"をクリックして登録。表示名、ユーザネーム、メールアドレス、パスワードを登録してください。
![home.png](https://qiita-image-store.s3.amazonaws.com/0/319189/619ebc84-3e3b-35eb-1542-0f03314e4f96.png)
こんな画面が出てきます。test_1というユーザを登録しました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/319189/c416e691-fcda-2da8-1c9e-d64016e042db.png)
試しになにか投稿してみます。投稿は左の投稿ボックスから行います。投稿に付いている<font color="Orange">フォロワー</font>は、その投稿を誰でも見ることができることを表しています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/319189/1b10da6e-a76d-2dd3-0d80-6faa98c7ac30.png)
上部バーにある"全ユーザ"から適当にユーザを探してフォローしてみます。フォローする時は各ユーザのページに移動して"フォロー"というボタンをクリックしてください。試しに2人のユーザをフォローしました。するとtest_1の"フォロー中"が2になりました。タイムラインにはフォローしているユーザの投稿が出現しました。ここまではTwitterと同じですね。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/319189/cd133b3c-5f2d-e070-c1ad-8d22897fe15e.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/319189/8fd39143-5a80-e892-0814-359fdcad3988.png)
次に上部バーにあるコミュニティをクリックします。すると自分が作ったコミュニティが出てきます。まだコミュニティはないので、何も表示されていません。なので"新しいコミュニティ"をクリックしてコミュニティを作成します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/319189/b261ab79-9686-6f79-b982-f90e04fb3a31.png)
試しに"大学の友達"っていうコミュニティを作成します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/319189/5af3c415-7dd7-6cf9-0114-4492c0a12c26.png)
大学の友達というコミュニティができました！　ここにユーザを追加していきます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/319189/5a04ab38-3d29-da42-29a8-0e79b455801d.png)
メンバーを追加するには各ユーザのページに移動し、"コミュニティに追加"をクリックします。するとダイアログがでてきます。そこで"大学の友達"の横のチェックボックスにチェックを入れます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/319189/e9f59cab-f541-68b3-d69e-90bd72cd5f00.png)
再び上部バーのコミュニティをクリックし、大学の友達を選択すると、大学の友達にtakeryoというユーザが追加されているのが分かります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/319189/5748f9a3-9ff4-eab9-54da-412235f62da6.png)
次にこのコミュニティの中で投稿してみます。左側の投稿フォームから何か投稿してみます。他の投稿には<font color="Orange">フォロワー</font>と書かれていたところが<font color="Orange">大学の友達</font>に変化しているのが分かると思います。この投稿は大学の友達というコミュニティに追加されたメンバーのみが閲覧可能な投稿になっています。このようにWhispでは自分でコミュニティを作り、そこにメンバーを自由に追加し、そのコミュニティで投稿をすることで、投稿の公開範囲を調整することが可能になります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/319189/e0403a7c-fbc3-a272-d812-44233492525f.png)
ここで1つ疑問になるのが、他のユーザの投稿はどのコミュニティに向けた投稿なのか分かるのかということです。試しにtakeryoというアカウントでログインして、先ほどした投稿がどう見えているのかを見てみましょう。下の画像を見るに、test_1というユーザは<font color="Orange">大学の友達</font>というコミュニティに投稿したのが分かります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/319189/69309da2-d34a-bea0-9a45-dc508b852dc2.png)
次にその投稿の<font color="Orange">大学の友達</font>をクリックしてみます。すると以下のようなページが表示されます。test_1というユーザが"大学の友達"向けてした投稿が表示されています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/319189/004c49a1-93e2-6464-96df-b08cf06773bf.png)
右側のコミュニティ情報をクリックすると、そのコミュニティに追加されているユーザをみることができます。自分の他に1人のユーザが追加されていることが分かりますね。このようにコミュニティに追加されているメンバーはそのコミュニティの情報を閲覧することができ、逆にコミュニティに追加されていない場合はコミュニティの存在すら知ることはできません。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/319189/3774ad08-5eac-6fb3-23b1-206dd703c943.png)


以上がWhispの基本的な使い方になります。
自分のプロフィールの変更方法や、コミュニティの削除の注意点はヘルプに書いてあるのでぜひ参照してみてください。

#まとめ
Whispで内輪ネタをどんどん投稿して楽しんでみてください。

#今後のアップデート予定
1. 他ユーザのコミュニティをフォローできるように
2. リプライ機能の実装
3. いいねの実装
4. モバイル版のリリース