概要

SNSの議論の質をマシにできる可能性がある、Twitterカードを生成できるサービスをデプロイしました！強い意志で意見しようというイメージがある「物申す」ことを直接もじって、「Mono Mosu」という名前にしました。ネーミングセンスは無いです。

mono-mosu.herokuapp.com

↓ のような画像を簡単に生成することができます！

開始当時に検討していた機能は下記の4つでしたが、そのうちDBやログイン機能を要さない1と4のみを実現させました。つまり、前記事からはUIの調節ぐらいをしました。

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

使用手順

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

ホーム画面にアクセス
　一般ユーザ向けのシステムの概要が書かれています。左側の文章が右側の画像のようにまとめられるというイメージで作りました。
「カードを作成してみる」ボタンをクリック
　カードの使用イメージをホーム画面で伝えられたはずなので、実際にカードを作る画面に遷移します。
フォームに個人情報を入力
　カード作成フォームの欄は、出力画像と表示がほぼ同等になるようにabsoluteな位置調節を試みました。スマホ画面でも対応できるように、レスポンシブなCSSデザインになっております。ただ、apple系のOSではUIが勝手に変化してしまい、崩れてしまう可能性はあります。あとスマホでは文字サイズがおかしくなる現象もあり。
Twitter等のSNSで、発言内容に添付して投稿する！
　画像をダウンロードし、それを用いてTwitterなどで発言をするだけです。ハッシュタグをつけるのを忘れないようにしてくださいね ;)

実装内容と使用技術

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

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

システム構成図2.png

追加実装内容

Backend側のGolangサーバをherokuに上げる際にポートの問題が生じるので、"httprouter”のパッケージを使用している場合は下記のように書き換えます。

func main() {
    r := Build()
    // log.Fatal(http.ListenAndServe(":8080", r))
    log.Fatal(http.ListenAndServe(":"+os.Getenv("PORT"), r))
}

次に、フロントエンドについて、CSSを工夫して画面サイズをレスポンシブにしました。また、画像生成時に用いるフォームの配置も "%"を用いた位置調節に更新しました。

React側のコードの一部抜粋です。ここの入力フォームについて、見た目が改善するようにCSS側の調節を加えました。

        <div
          className="showCard"
          style={{
            marginLeft: `auto`,
            marginRight: `auto`,
            marginBottom: `2rem`,
            backgroundImage: `url(${cardBase})`,
            backgroundSize: `contain`,
            fontFamily: `ipaFont`,
            position: `relative`
          }}>

          <input name="hashtag" type="text" placeholder="タグ名を入力"
            value={this.state.hashtag}
            onChange={this.handleInputChange}
            className="hash-posi"
            id="hashInput"
          />

          <select name="age"
            value={this.state.age}
            onChange={this.handleInputChange}
            className="age-gen"
            id="ageInput"
          >
            <option value={0}>-</option>
            <option value={10}>10</option>
            <option value={20}>20</option>
            ...
          </select>
          ...
        </div>

こちらが該当箇所のCSSコードです。

@media screen and (max-width: 900px){  /*①*/
  ...
}

@media screen and (max-width: 650px){  /*①*/
  h1{
    font-size: 1.5rem;
  }
  .showCard{
    width: 288px;
    height: 162px;
  }
  
  .hash-posi{
    position: absolute;  /*②*/
    font-size: 1rem;
    width: calc(0.5556* 100%);  /*③*/
    height: calc(0.1481* 100%); 
  }
  
  #hashInput{
    left: calc(0.1528* 100%);
    top: calc(0.1481* 100%);
  }

  .age-gen{
    position: absolute;
    font-size: 0.7rem;
  }

  #ageInput{
    left:  calc(100% * 0.8264);
    top:   calc(100% * 0.1556);
    width: calc(100% * 0.125);
  }
...
}

①レスポンシブな画面サイズに対応する設定
該当箇所の書き方をすることで、max-widthの画面サイズに合わせて採用するスタイルを変更できます。この際、"max-width: 900px" > "max-width: 600px" > ... > "mix-width: 900px" という順序で記述することで、画面サイズが大きいものから対応することができます。
※max-width: 900pxが、画面サイズ900px以下のときの条件

②親要素内を基準として絶対位置を指定するための設定
フォームの親であるshowCardクラスを"relative"にし、子要素は"absolute"にしています。ただフォームだけにdisplay: absoluteを指定すると、画面全体を基準としてしまうので、親要素をrelativeにしてあげる必要がありました。

③画面サイズの変化に強い絶対位置の指定設定
calcと"%"を用いて、位置指定を容易にしました。この割合（"0.5556"などの値）を算出するために、まず親要素のwidthとheightを固定し、その画面にマッチするように実数（left: 105px;など）で位置合わせをしていきます。全体の絶対位置が決まったのち、絶対位置を親要素の縦横サイズで割ってあげると導出できます。直接55.5%を指定した場合、うまくいかなかった記憶があります。