誰でも新卒年収800万宣言できる、Twitter就活サービス「Negomo（ネゴモ）」をリリースした。【個人開発】

**「Twitter就活の促進」**をテーマにしたサービス**「[Negomo（ネゴモ）](https://negomo.me)」**をリリースしました！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">自分が欲しい報酬額をツイートしてTwitter就活できるサービス「Negomo(ネゴモ)」を作ってみました！<br><br>下のような画像がツイートできます。<br><br>Twitterアカウントで利用できるのでぜひ使ってみてください！<a href="https://t.co/JRXFe8lHov">https://t.co/JRXFe8lHov</a><a href="https://twitter.com/hashtag/Negomo?src=hash&amp;ref_src=twsrc%5Etfw">#Negomo</a> <a href="https://twitter.com/hashtag/RT%E6%8B%A1%E6%95%A3%E3%81%8A%E9%A1%98%E3%81%84%E3%81%97%E3%81%BE%E3%81%99?src=hash&amp;ref_src=twsrc%5Etfw">#RT拡散お願いします</a></p>&mdash; TaKO8Ki (@takoyaki3160) <a href="https://twitter.com/takoyaki3160/status/1114776315847004160?ref_src=twsrc%5Etfw">April 7, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Twitterアカウントで利用できるので、もしよかったら使ってみてください！

# リリースしたサービス

[Negomo（ネゴモ） - もっとTwitter就活しよう！](https://negomo.me)

# サービスの概要

「Negomo（リンク）」は、自分が欲しい報酬額をツイートしてTwitter就活できるサービスです。

何か技術を身につけている人が、Twitterで欲しい報酬額（時給・年収）を積極的にアピールすることで、適切な報酬をもらえることを理想としています！
もちろん、エンジニア以外の方も大歓迎です！

こんな感じのツイートができます。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">京都でWEB系のインターン探してます！！ <a href="https://t.co/JRXFe8lHov">https://t.co/JRXFe8lHov</a> <a href="https://twitter.com/hashtag/Negomo?src=hash&amp;ref_src=twsrc%5Etfw">#Negomo</a> <a href="https://twitter.com/hashtag/Twitter%E5%B0%B1%E6%B4%BB?src=hash&amp;ref_src=twsrc%5Etfw">#Twitter就活</a></p>&mdash; TaKO8Ki (@takoyaki3160) <a href="https://twitter.com/takoyaki3160/status/1114806623942262784?ref_src=twsrc%5Etfw">April 7, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

参考：[Negomo（ネゴモ）とは](https://negomo.me/about)

## 追記

- 単位で「兆」を選ぶことができるようになりました！

- 時給・月収・年収によって画像の色を変えたほうが見やすいというアドバイスをいただいたので、そのように仕様を変更しました！
既に画像を作成されている場合は、金額を変えて編集していただくと色が変わります。

<img width="995" alt="スクリーンショット 2019-04-09 15.46.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/285624/b2f41851-a590-3827-14ed-d74303dfe7e2.png">

- 時給・月給・年収以外にも秒給・分給を選ぶことができるようになりました！

# デザイン
デザインは[SpeakerDeck](https://speakerdeck.com/)を参考にしました！

### トップページ
<img width="1440" alt="スクリーンショット 2019-04-08 0.45.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/285624/80f72c3a-d77b-d45f-1ff0-7f9b937d80a2.png">

### 画像作成ページ
[![Image from Gyazo](https://i.gyazo.com/f5cbe5ee14262aa3025254bae37c6ef7.gif)](https://gyazo.com/f5cbe5ee14262aa3025254bae37c6ef7)

アピールポイントのフォームの高さは可変的になっていて、コンパクトになるように心がけました。また、ポートフォリオなどのURLが入力された場合は、自動的にリンクに変換されるようになっています。

### 画像表示ページ
<img width="1440" alt="スクリーンショット 2019-04-08 0.56.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/285624/1079aace-eedc-0f02-2549-a342a3dca654.png">

作成した画像をクリックすることでツイートできるようになっています。
アピールポイントの欄では、どれがリンクでどれが普通の文字列なのか分かりやすくするようにしました。

# 使用した技術
- Ruby・Ruby on Rails
 - [IMGKit](https://github.com/csquared/IMGKit)（HTMLから画像をレンダリングできるgem）
 - [google-analytics-rails](https://github.com/bgarret/google-analytics-rails)（google analyticsが簡単に導入できるgem）
 - [activestorage-cloudinary-service](https://github.com/0sc/activestorage-cloudinary-service)（Active StorageとCloudinaryを繋げるgem）

- JavaScript・jQuery
- [Cloudinary](https://cloudinary.com/)
画像を保存するストレージです。Herokuのアドオンとして利用できるので非常やりやすかったです。Active Storageと連携させて利用しています。
- Git・GitHub
- Postgresql
- [Heroku](https://jp.heroku.com/)
今の所Hobbyプランを利用しています。
- [build pack](https://github.com/TaKO8Ki/wkhtmltopdf-buildpack)
画像を作る部分の実装で利用しました。
- アイコン
アイコンは、相変わらずフリー画像にお世話になってます。

# 苦労した点
今回苦労したのは、画像生成の部分です。
コードとしては下のような感じで、 HTMLから画像をレンダリングする[wkhtmltoimage](https://wkhtmltopdf.org/)をRailsで利用できるようになるgem、IMGKitを利用しています。
ローカルでは比較的簡単に動かすことができましたが、Heroku上で動かすのに少し時間がかかりました。
最終的に、build packを使うのが一番良さそうだと分かったので、元からあったbuild packのレポジトリをforkして少し自分用にカスタマイズして使いました。

[wkhtmltoimageをHerokuで使うためのbuild packカスタマイズ版](https://github.com/TaKO8Ki/wkhtmltopdf-buildpack)

<details><summary>画像作成部分のコード</summary><div>

```ruby
def create_image
  Tempfile.create(["#{@profile.id}", '.png'], :encoding => 'ascii-8bit') do | file |
    file.write(IMGKit.new(get_html, quality: 20, width: 800).to_png)
    file.rewind
    @profile.image.attach(io: file, filename: "q_#{@profile.id}.png", content_type: "image/png")
  end
end

def get_html
  <<~HTML
  <!DOCTYPE html>
  <html>
    <head>
      <link href="http://fonts.googleapis.com/earlyaccess/notosansjp.css">
      <meta charset="UTF-8">
      <style>
        @charset "UTF-8";
        html {
          font-family: sans-serif;
          -ms-text-size-adjust: 100%;
          -webkit-text-size-adjust: 100%;
        }
        body {
          width: 800px;
          margin: 0;
          background: #eee;
          font-family: 'Noto Sans JP', sans-serif;
        }
        .q-frame {
          width: 100%;
          background-color: #fff;
          padding: 25px 25px 10px 25px;
        }
        .q-frame .q-body {
            vertical-align: middle;
            text-align: center;
            height: 220px;
            width: 750px;
            font-size: 2.6em;
            background-color: white;
            padding: 1.3em;
            border-radius: 3px;
            display: table-cell;
            vertical-align: middle;
            background-image: url(#{assets_image_url('negomo_background.png')});
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: 50%;
            box-shadow: 0.5px 3.5px 10px 0px #ccc;
        }
        .q-frame .q-icon {
          font-size: 2.2em;
          padding: 5px 0px 0px 0px;
          margin: 0px;
          color: #333;
          border-radius: 5px;
        }
        .q-frame .q-icon img {
          width: 150px;
          margin-top: 7px;
        }
        span.word {
          font-size: 75px;
          font-weight: bold;
          color: #7d7458;
        }
        span.description {
          font-size: 30px;
          font-weight: 100;
          color: #545454;
          line-height: 45px;
          display: block;
          margin-top: 10px;
          font-weight: bold;
          width: 650px;
          overflow-wrap: break-word;
          word-wrap: break-word;
          margin: 0 auto;
        }
      </style>
    </head>
    <body>
      <div class="q-frame">
        <div class="q-body">
          <span class="word">#{@profile.adjust_money_style}</span><br>
          <span class="description">#{@profile.title}</span>
        </div>
        #{}
        <div class="q-icon">
          #{assets_image_tag('negomo.png').html_safe}
        </div>
      </div>
    </body>
  </html>

  HTML
end
```

</div></details>

# リリースする上で心がけたこと

### アイデアを形にするスピード
少しずつWEBサービスを作ることにも慣れてきたので、自分が思いついたアイデアを形にするスピードを意識するようにしました。それでも、このサービスを作るのに１週間ほど費やしてしまったので、まだまだだなと感じます。

### ユーザーにとって分かりやすいサービスかどうか
今までも「ユーザーにとって分かりやすいサービス作り」を意識するようにはしてきましたが、イマイチ分かりやすさを追求できていないように感じていました。特に、非エンジニアの人に使ってもらうとなると非常に難しいと感じます。
そのため、今回は、大まかに言えば「画像をツイートできるだけのサービス」というシンプルな設計にしました。


# 最後に
タイトルに「誰でも新卒年収800万宣言できる」と書きましたが、最近、[コミさん](https://twitter.com/komi_edtr_1230?s=17)という技術的に強い方が新卒年収800万円芸なるものを行なって、話題になっているのを1フォロワーとして眺めていました。エンジニアだけでなく、他の分野にもコミさんのように優れた人材はたくさん居られると思うので、その方達がTwitterなどを利用して、しっかりといい待遇を受けられるようになればいいなと思います。
僕もその方達に加われるように頑張っていきます!
また、このサービスをきっかけに、もっとTwitter就活が当たり前になれば嬉しいです。

ここまで読んでいただきありがとうございました！

**もしよろしければ、いいねボタンを押していただけたら嬉しいです！**

Negomo、ぜひ使ってみてください！！

[Negomo（ネゴモ） - もっとTwitter就活しよう！](https://negomo.me)

# 参考
- [Rails で質問箱っぽい画像を作るのに wkhtmltoimage を使った](https://blog.takuchalle.dev/post/2018/12/06/rails_use_wkhtmltoimage/)
- [wkhtmltopdf on Heroku: evaluating different installation options](https://razorjack.net/wkhtmltopdf-on-heroku-evaluating-different-installation-options/)