【Go】SNSの議論の質をマシにできる（可能性がある）Twitterカードを生成できるWebサービス「Mono Mosu」を作ったよ :)

# はじめに
皆さんはSNSの議論は建設的ではないため無駄だと感じており、当然のごとく避けているのではないでしょうか。私もその一員であり、何ならSNSを見ているだけでも時間の無駄だと感じています。

ふとした時、そんなSNSでの議論の在り方を改善するなにかが作れないか考えてみました。「SNSで議論をするべきじゃない！」とバカみたいに諦めるのではなく、「こうしたらSNSでもまともに議論できるね！」というアプローチを考えるのは大事だと思っています。


# 概要
SNSの議論の質をマシにできる可能性があるTwitterカードを生成できるサービスを開発しました！

https://mono-mosu.herokuapp.com/

このサイトでは、↓ のような「自身の発言の立場」を示すカードを簡単に作成できます！これを普段のSNSでの発言に添付することであなたの意見を補助することができ、より建設的に意見を**物申す（Mono Mosu）**ことが可能です。
<img width=400 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311590/e9a2c7ad-d733-8806-1ccb-37c242b4706f.png">



## 目指す発言形態
SNSでの議論にどのような問題があり、どんな特徴を持つべきか考えた結果は下記の記事に書いています。

https://ume-boshi.hatenablog.jp/entry/2021/02/22/080000

一応、Qiitaの方にも目指す発言形態の概要を示します。
まず、SNSの議論の質を向上するためには、下記の4つの特徴を会話に付加することが大事だと考えています。

* **特徴1.** 発言者の匿名性を弱める
* **特徴2.** 建設的な意見を引き出すことが目的で、答えを出すことは目的としない
* **特徴3.** 議論相手を絞るためのシンボル的な役割を持たせる
* **特徴4.** 意図的に意見投稿までにかかる時間を長くする

その特徴を実現するために、下記の4つの機能を持たせたTwitterカードの生成システムが有効なのではないかと考えました。

* **機能1.** 立場や年齢などのわずかな個人情報の提示を行うことで匿名性を弱める
* **機能2.** UIを工夫して様々な立場の存在を強制的に見せたり、発言前の忠告を設ける
* **機能3.** まとまった意見が出るように、一人2回のみ発言できるようにする
* **機能4.** 画像を用いた視覚的特徴を持たせる。

この機能の中でも、2と3はDBやユーザ認証機能を持つ必要があり、セキュリティ的に安全なものが作れる自信がなかった~~し実装が面倒くさかった~~ため、機能1と4のみを備えたシステムを作成しました。


# 使用手順
たったの2ページしか実装していないシンプルisベストなシステムです。

1. [ホーム画面](https://mono-mosu.herokuapp.com/)にアクセス 
　　一般ユーザ向けのシステムの概要が書かれています。左側の文章が右側の画像のようにまとめられるというイメージで作りました。

2. 「カードを作成してみる」ボタンをクリック
　　カードの使用イメージをホーム画面で伝えられたはずなので、実際にカードを作る画面に遷移します。
<img width = 650 src="https://cdn-ak.f.st-hatena.com/images/fotolife/u/ume-boshi/20210706/20210706204206.jpg">


3. フォームに個人情報を入力していく
　　カード作成フォームの欄は、出力画像と表示がほぼ同等になるように頑張ってabsoluteな位置調節を試みました。スマホ画面でも対応できるように、手動レスポンシブなCSSデザインにしました。ただ、apple系のOSではUIが勝手に変化してしまい、崩れてしまう可能性はあります。あとなんかスマホでは文字サイズがおかしいかも。
<img width = 650 src="https://cdn-ak.f.st-hatena.com/images/fotolife/u/ume-boshi/20210706/20210706204214.jpg">
<img width = 350 src="https://cdn-ak.f.st-hatena.com/images/fotolife/u/ume-boshi/20210706/20210706202527.jpg">

4. 画像を生成し、ボタンを押して画像をダウンロードする
　　生成内容に問題がなければ、画像をローカル環境にダウンロードします。内容に問題があれば、何度でも修正可能です。
<img width = 500 src="https://cdn-ak.f.st-hatena.com/images/fotolife/u/ume-boshi/20210706/20210706202532.jpg">

5. Twitter等のSNSで、発言内容に添付して投稿する！
<img width = 500  src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311590/0e536905-a20b-023e-0fcf-ab91d346e9f3.jpeg">

<br>  

# 実装内容と使用技術
本システムを実装するために使用した技術は下記項目です。これらの環境で、画像のようなシステム構成で実装しました。

* バックエンド：Golang
* フロントエンド：JS（React）
* デプロイ先：Heroku*2 

![システム構成図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311590/8dbaf2f0-3e8c-0962-239c-ceed358380df.png)

<br>  
実装の詳細については、自身のブログの方に時々書いています。

https://ume-boshi.hatenablog.jp/entry/2021/04/05/080000

https://ume-boshi.hatenablog.jp/entry/2021/05/01/080000

<br>  



# おわりに
本システムは使ってもらうことをあまり目的にはしておらず、問題提起程度になればいいなと考えています。多くの人に使ってもらえるような工夫をシステムに取り込んではいませんしね。

あと、herokuの無料プランなので、利用者が多いとすぐに止まってしまうかもしれません。。

また、正直、本システムが広まったとしてもSNSの使われ方が大きく変わることはないと思います。ただ、真剣に考えた想いや意見をオフラインでもオンラインでも発言できるような生活はあってほしいです。エンジニアという多少の実現力を持っているならば、なおさら今後も問題解決に働きかけたいものです。

## ポエム
このサービスは、就活中にweb開発の技術力がないことを危惧して作り始めたものです。当時はセキュリティ的な問題が怖く、デプロイまで達せていませんでしたが、あるエンジニアの面接官の方に「重要な個人情報をDBで管理しないシステム」を作ればいいんじゃないかと提案いただきました。その後すぐに就活が終わり、別作品と並行でダラダラと進めていた本システムの開発ですが、もう手元にあるのが嫌だったのでデプロイして手放すことにしました。学生中に終わらせておきたい開発物（ロボットやデバイス）がまだ大量にあり、心残りなく開発に取り掛かれそうです :)

実際に多くの人に使ってもらえるのであれば、引き続き機能追加をしていくかもしれませんね。